/* ══════════════════════════════════════════════════════════════
   Página de verificación de certificados · /c/CODIGO
   Hoja independiente, como la del directo. Mismos tokens y mismo
   certificado que el mockup de la landing (sección «Y al terminar»),
   pero en verde donde la landing usa cian.
   El PDF que llega por email sale de una plantilla de Google Slides
   con este mismo diseño: si cambia uno, hay que cambiar el otro.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg-dark:#0A0C11;
  --card:#16181D;
  --paper:#F2F3F5;
  --ink:#0B0C0E;
  --txt-soft:#C9CED6;
  --txt-dim:#9AA1AB;
  --mono-dim:#7E8794;
  /* llaves en verde apagado: #4ADE80 al 35 % sobre --card, en sólido para que
     la plantilla de Slides (que no admite transparencia en texto) use el mismo */
  --brace:#285D40;
  --green:#4ADE80;
  --amber:#FBBF24;
  --red:#F87171;
  --linkedin:#0A66C2;
  --line-d:rgba(255,255,255,.16);
  --line-card:rgba(255,255,255,.09);
  --grot:'Archivo',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg-dark);
  color:var(--paper);
  font-family:var(--grot);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,p{margin:0}
[hidden]{display:none!important}
::selection{background:var(--paper);color:var(--bg-dark)}

.mono{font-family:var(--mono)}
.dim{color:var(--mono-dim)}

/* ── página ──────────────────────────────────────────────────── */
.cv{
  max-width:1000px;min-height:100vh;margin:0 auto;padding:0 16px;
  display:flex;flex-direction:column;gap:28px;
}
.cv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:26px}
.cv-marca{font-size:14px;font-weight:700;color:var(--green);text-decoration:none}
.cv-top-dato{font-size:12px;color:var(--mono-dim)}
.cv-pie{margin-top:auto;padding:28px 0;font-size:12px}

.cv-aviso{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:6vh}
.cv-h{font-size:clamp(28px,4.4vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.1;max-width:22ch}
.cv-p{font-size:17px;line-height:1.55;color:var(--txt-dim);max-width:56ch}
.cv-caret{display:inline-block;width:8px;height:15px;margin-left:6px;vertical-align:-2px;background:var(--green);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.cv-ok{display:flex;flex-direction:column;gap:22px}
.cv-sello{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;color:var(--green);
  padding:8px 14px;border-radius:20px;box-shadow:0 0 0 1px rgba(74,222,128,.55);
}
.cv-sello-ico{font-size:13px}
.cv-sello-mal{color:var(--red);box-shadow:0 0 0 1px rgba(248,113,113,.55)}
/* ejemplo (/c/DEMO): mismo certificado, sin decir que es válido */
.cv-sello.is-demo{color:#FBBF24;box-shadow:0 0 0 1px rgba(251,191,36,.55)}

/* ── el certificado ──────────────────────────────────────────── */
.cert{
  position:relative;overflow:hidden;
  aspect-ratio:16/9;
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  padding:clamp(18px,3.4vw,34px) clamp(18px,3.8vw,38px);
  background:var(--card);border-radius:10px;box-shadow:0 0 0 1px var(--line-card);
}
/* franja superior en verde */
.cert::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--green);
}
.cert-brillo{
  position:absolute;top:0;bottom:0;left:0;width:90px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(74,222,128,.10),transparent);
  animation:certBrillo 9s ease-in-out infinite;
}
@keyframes certBrillo{0%,70%{transform:translateX(-140%) skewX(-18deg)}92%,100%{transform:translateX(1200%) skewX(-18deg)}}

.cert-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cert-marca{font-size:clamp(12px,1.5vw,15px);font-weight:700;color:var(--green)}
.cert-chip{
  font-size:clamp(9px,1.05vw,11px);font-weight:700;letter-spacing:.07em;color:var(--green);white-space:nowrap;
  padding:6px 12px;border-radius:14px;background:rgba(74,222,128,.10);box-shadow:0 0 0 1px rgba(74,222,128,.55);
}

.cert-cuerpo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.cert-llave{font-size:clamp(70px,15vw,170px);line-height:1;color:var(--brace);user-select:none}
.cert-centro{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.cert-titulo{font-size:clamp(11px,1.4vw,14px);color:var(--txt-dim)}
.cert-titulo .amb{color:var(--amber)}
.cert-otorga{font-size:clamp(9px,1.1vw,11px);letter-spacing:.25em;color:var(--mono-dim);margin-top:6px}
.cert-nombre{
  font-size:clamp(28px,5.2vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.08;
  overflow-wrap:anywhere;
}
.cert-nombre.is-largo{font-size:clamp(22px,3.8vw,38px)}
.cert-por{font-size:clamp(12px,1.45vw,15px);color:var(--txt-dim);margin-top:4px}
.cert-curso{font-size:clamp(14px,1.8vw,19px);font-weight:700;color:var(--green)}

.cert-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.cert-firma{display:flex;flex-direction:column;gap:2px}
.cert-firma b{font-size:clamp(13px,1.5vw,16px)}
.cert-firma .mono,.cert-ref{font-size:clamp(10px,1.1vw,12px);color:var(--mono-dim)}
.cert-ref{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.cert-ref > span:first-child{color:var(--green)}

/* ── acciones y datos ────────────────────────────────────────── */
.cv-acciones{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;font-family:var(--grot);font-size:16px;font-weight:700;
  padding:14px 22px;border:0;border-radius:7px;cursor:pointer;
  background:var(--paper);color:var(--ink);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(255,255,255,.18)}
.btn-li{background:var(--linkedin);color:#fff}
.btn-borde{background:transparent;color:var(--txt-soft);box-shadow:0 0 0 1px var(--line-d)}
.btn-borde:hover{box-shadow:0 0 0 1px var(--line-d),4px 4px 0 rgba(255,255,255,.12)}

.cv-datos{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;
  border-radius:8px;overflow:hidden;background:var(--line-card);box-shadow:0 0 0 1px var(--line-card);
}
.cv-datos div{background:var(--bg-dark);padding:14px 16px;min-width:0}
.cv-datos dt{font-size:11px;color:var(--mono-dim);margin-bottom:5px}
.cv-datos dd{margin:0;font-size:13px;color:var(--txt-soft);overflow-wrap:anywhere}

.cv-buscar{display:flex;flex-direction:column;gap:8px;max-width:440px}
.cv-buscar label{font-size:12px}
.cv-buscar-fila{display:flex;gap:10px}
.cv-buscar input{
  flex:1;min-width:0;font-size:17px;letter-spacing:.06em;text-transform:uppercase;
  padding:13px 14px;border:0;border-radius:7px;
  background:var(--card);color:var(--paper);box-shadow:0 0 0 1px var(--line-d);
}
.cv-buscar input:focus{outline:2px solid var(--green);outline-offset:1px}

@media (max-width:760px){
  .cv-datos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* en móvil el 16:9 deja el nombre en cuerpo 20: el certificado crece en alto */
@media (max-width:640px){
  .cert{aspect-ratio:auto;gap:26px}
  .cert-llave{font-size:56px}
  .cert-pie{flex-direction:column;align-items:flex-start}
  .cert-ref{align-items:flex-start;text-align:left}
  .cv-acciones .btn{flex:1 1 100%}
  .cv-top-dato{display:none}
}

@media (prefers-reduced-motion:reduce){
  .cert-brillo,.cv-caret{animation:none}
  .cert-brillo{display:none}
  .btn{transition:none}
}

/* «Descargar PDF» cae aquí cuando el PDF de Drive no es público:
   se imprime solo el certificado, en A4 apaisado y con los colores. */
@media print{
  @page{size:A4 landscape;margin:0}
  html,body{background:var(--bg-dark);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cv{max-width:none;min-height:0;padding:0;gap:0}
  .cv > :not(.cv-ok),.cv-ok > :not(.cert){display:none!important}
  .cert{width:297mm;height:210mm;aspect-ratio:auto;border-radius:0;box-shadow:none;padding:16mm 18mm}
  .cert-brillo{display:none}
  .cert-llave{font-size:150px}
  .cert-nombre{font-size:46px}
  .cert-nombre.is-largo{font-size:34px}
}