/* ============================================================
   Structural Tech — hoja única de estilos.
   Tokens tomados del sistema de diseño (rojo industrial + grafito).
   ============================================================ */

:root {
  /* Grafito — tinta y superficies oscuras */
  --graphite-100: #e6e8ea;
  --graphite-200: #cdd1d5;
  --graphite-300: #a7adb4;
  --graphite-400: #767d85;
  --graphite-500: #545a61;
  --graphite-700: #303338;
  --graphite-900: #141518;

  /* Steel — neutros fríos, filetes */
  --steel-50:  #f7f8f9;
  --steel-100: #eef0f2;
  --steel-200: #e2e5e9;
  --steel-300: #d2d7dc;

  /* Marca */
  --navy:      #1b2340;   /* fondo del hero y del diploma */
  --navy-2:    #2c3762;
  --vino:      #7c1d2b;   /* rojo profundo: acciones y acentos */
  --vino-600:  #66161f;
  --vino-700:  #4f1119;
  --vino-claro:#c05a68;
  --rojo-cert: #a5232c;   /* el rojo del diploma */

  /* Semánticos */
  --green-500: #2e8b4f;
  --green-50:  #e9f5ed;
  --green-200: #bfe3cc;
  --rosa-50:   #f7edee;
  --rosa-200:  #e2c2c6;
  --white:     #ffffff;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --ancho: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo `hidden` vale display:none desde la hoja del navegador, que pierde
   contra cualquier clase que declare display. Sin este !important, .qr-panel y
   .temario-hoja (ambas display:flex) se quedaban visibles al ocultarlas. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--graphite-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--vino-600); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--vino); color: #fff; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vino);
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@keyframes stcRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes stcStamp { from { opacity: 0; transform: rotate(-8deg) scale(1.5); } to { opacity: .85; transform: rotate(-8deg) scale(1); } }
@keyframes stcCorre { to { background-position: -150% 0; } }

/* ---------- Cabecera ---------- */

.st-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--steel-200);
}

.st-header .envoltura {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 14px; padding-bottom: 14px;
}

.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca:hover { text-decoration: none; }
.marca img { width: 54px; height: 54px; flex: none; object-fit: contain; }
.marca-txt { display: flex; flex-direction: column; line-height: 1; }

.marca-nombre {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: .14em; color: var(--graphite-900);
}

.marca-sub {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .24em; color: var(--graphite-400); margin-top: 3px;
}

.st-nav { display: flex; align-items: center; gap: 8px; }

.st-nav a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--graphite-700); padding: 8px 14px;
}

.pill-activo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--green-500); border: 1px solid var(--steel-200);
  border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}

.pill-activo::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--green-500);
}

/* ---------- Hero ---------- */

.hero { position: relative; background: var(--navy); overflow: hidden; }

/* Rejilla de fondo: deliberadamente tenue. Al 50% de opacidad dominaba la
   composición y le daba ese aire de plantilla genérica. */
.hero::before {
  content: ''; position: absolute; inset: 0; opacity: .28;
  background-image:
    linear-gradient(#39426b 1px, transparent 1px),
    linear-gradient(90deg, #39426b 1px, transparent 1px);
  background-size: 46px 46px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
}

.hero .envoltura { position: relative; padding-top: 72px; padding-bottom: 150px; }

.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.hero-kicker span:first-child { display: block; width: 44px; height: 3px; background: var(--vino); }
.hero-kicker span:last-child {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em;
  color: #c9808b; text-transform: uppercase;
}

.hero h1 {
  font-weight: 800; font-size: clamp(34px, 5vw, 58px); line-height: 1.02;
  color: var(--white); max-width: 820px; text-wrap: balance;
}

.hero h1 em { font-style: normal; color: var(--vino-claro); }

.hero p {
  font-size: 17px; line-height: 1.6; color: var(--steel-300);
  max-width: 600px; margin-top: 22px;
}

/* ---------- Tarjeta validadora ---------- */

.zona-validador { position: relative; z-index: 10; margin-top: -96px; }

.card {
  background: var(--white);
  border: 1px solid var(--steel-200);
  border-top: 4px solid var(--vino);
  border-radius: 10px;
  box-shadow: 0 24px 60px -30px rgba(27,35,64,.55);
  padding: 34px;
}

.card-cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}

.card-cabecera h2 { font-weight: 700; font-size: 26px; letter-spacing: -.01em; margin-top: 6px; }

.tabs { display: inline-flex; background: var(--steel-100); border: 1px solid var(--steel-200); border-radius: 8px; padding: 4px; gap: 4px; }

.tabs button {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  padding: 9px 16px; border-radius: 6px; border: none; cursor: pointer;
  background: transparent; color: var(--graphite-500); transition: all .15s;
}

.tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.tabs button:focus-visible { outline: 2px solid var(--vino-claro); outline-offset: 2px; }

.campo-fila { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.campo { flex: 1; min-width: 260px; }

.campo label {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--graphite-500); margin-bottom: 8px;
}

.campo input {
  width: 100%; font-family: var(--font-mono); font-size: 16px; letter-spacing: .02em;
  color: var(--graphite-900); background: var(--white);
  border: 1px solid var(--steel-300); border-radius: 6px; padding: 14px 16px; outline: none;
}

.campo input:focus { border-color: var(--vino-claro); box-shadow: 0 0 0 3px rgba(124,29,43,.22); }
.campo input[aria-invalid="true"] { border-color: var(--rojo-cert); }

.btn {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--white);
  background: var(--vino); border: none; border-radius: 6px; padding: 15px 26px;
  cursor: pointer; white-space: nowrap;
}

.btn:hover { background: var(--vino-600); }
.btn:active { background: var(--vino-700); transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--vino-claro); outline-offset: 2px; }
.btn--navy { background: var(--navy); }
.btn--navy:hover { background: var(--navy-2); }

.aviso-error {
  margin-top: 12px; font-size: 14px; color: var(--vino-600);
  background: var(--rosa-50); border: 1px solid var(--rosa-200);
  border-radius: 6px; padding: 10px 14px;
}

/* Panel QR */
.qr-panel { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }

.qr-marco {
  width: 180px; height: 180px; flex: none; position: relative;
  border: 2px dashed var(--steel-300); border-radius: 10px; background: var(--steel-50);
  display: flex; align-items: center; justify-content: center;
}

.qr-marco::before { content: ''; position: absolute; inset: 16px; border: 2px solid var(--graphite-200); border-radius: 6px; }
.qr-marco svg { width: 64px; height: 64px; color: var(--graphite-300); }
.qr-texto { flex: 1; min-width: 240px; }
.qr-texto p { font-size: 15px; line-height: 1.55; color: var(--graphite-700); margin-bottom: 16px; }

/* Códigos de prueba */
.chips { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--steel-200); }

.chips-titulo {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--graphite-400); text-transform: uppercase;
}

.chips-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.chips-lista button {
  font-family: var(--font-mono); font-size: 12px; color: var(--graphite-700);
  background: var(--steel-50); border: 1px solid var(--steel-200);
  border-radius: 999px; padding: 7px 13px; cursor: pointer;
}

.chips-lista button:hover { border-color: #c9808b; color: var(--vino-600); }

/* ---------- Zona de resultado ---------- */

.zona-resultado { max-width: var(--ancho); margin: 0 auto; padding: 40px 32px 90px; }
.zona-resultado:empty { padding: 0; }

.res { animation: stcRise .35s ease both; display: flex; flex-direction: column; gap: 28px; }

.res-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Sin píldora, sin borde y sin el puntito de color: esa combinación es la insignia
   de estado de cualquier panel genérico. Aquí el significado lo cargan el icono y
   el color del texto, y nada más. */
.chip-estado {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}

.chip-estado svg { width: 15px; height: 15px; flex: none; stroke-width: 2.4; }
.chip-estado--valido { color: var(--green-500); }
.chip-estado--anulado { color: var(--vino-600); }

.res-fecha {
  font-family: var(--font-mono); font-size: 12px; color: var(--graphite-400);
  padding-left: 14px; border-left: 1px solid var(--steel-300);
}
.btn--descargar { margin-left: auto; padding: 11px 20px; font-size: 14px; }

/* ---------- Réplica del diploma ---------- */

/* Las dos caras van una debajo de otra, sin pestañas: el certificado completo
   se lee de corrido. */
.diploma-envoltura { max-width: 1024px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

.diploma-scroll { overflow-x: auto; overflow-y: hidden; box-shadow: 0 20px 50px -34px rgba(27,35,64,.55); }

.diploma {
  position: relative; width: 1024px; height: 749px; transform-origin: top left;
  background:
    linear-gradient(to top, rgba(255,255,255,.10), rgba(0,0,0,.32)),
    linear-gradient(90deg, #a5232c 0%, #8e1f28 28%, #5c2036 54%, #2a2e4c 80%, #1e2440 100%);
}

.diploma-facetas { position: absolute; inset: 0; width: 100%; height: 100%; }

.diploma-hoja {
  position: absolute; left: 46px; top: 33px; width: 932px; height: 679px;
  background: #fff; padding: 62px 47px 38px;
}

.diploma-hoja::before {
  content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 354px; height: 5px; background: #eaeaea;
}

.sello-revocado {
  position: absolute; top: 224px; left: 96px; z-index: 5;
  animation: stcStamp .4s ease both;
  border: 5px solid var(--rojo-cert); color: var(--rojo-cert);
  font-family: var(--font-display); font-weight: 800; font-size: 44px; letter-spacing: .06em;
  padding: 8px 22px; border-radius: 8px; transform: rotate(-8deg); opacity: .85;
}

.diploma-grid { display: grid; grid-template-columns: 1fr 222px; gap: 36px; align-items: start; }
.diploma-txt { min-width: 0; }
.diploma-txt p { font-size: 15px; color: #2f3542; }
.diploma-txt .d-titulo { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: #7a1e2a; margin: 14px 0 16px; }
.diploma-txt .d-nombre { font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1.1; margin: 20px 0 36px; text-transform: uppercase; color: #23314f; }
.diploma-txt .d-curso { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #23314f; margin: 10px 0 16px; }
.diploma-txt .d-periodo { font-size: 15px; line-height: 1.78; }
.diploma-txt .d-periodo em { font-style: normal; color: var(--rojo-cert); }

.diploma-lateral { width: 222px; text-align: center; }
/* La columna derecha va alta y compacta: el logo arriba, y el bloque del QR
   con letra chica. Antes bajaba tanto que el texto del validador casi tocaba
   el bloque de firmas. */
.diploma-lateral .d-logo { width: 186px; height: 172px; margin: 10px auto 0; }
.diploma-lateral .d-logo img { width: 100%; height: 100%; object-fit: contain; }
.diploma-lateral .d-num { margin-top: 34px; font-size: 9.5px; line-height: 1.5; color: #2f3542; }
/* Sin padding: el blanco que queda dentro del recuadro es la zona quieta del
   propio QR (4 módulos), que es obligatoria para que los lectores lo enganchen.
   Añadir padding encima solo duplicaba ese margen. */
.diploma-lateral .d-qr { width: 104px; height: 104px; margin: 8px auto 0; border: 1px solid var(--navy); background: #fff; padding: 0; }
.diploma-lateral .d-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.diploma-lateral .d-qr-txt { margin-top: 7px; font-size: 7.5px; letter-spacing: .02em; line-height: 1.3; color: #2f3542; }

.diploma-firmas { position: absolute; left: 47px; right: 47px; bottom: 28px; display: flex; gap: 24px; }
.diploma-firmas > div { flex: 1; text-align: center; }
/* Las firmas se apoyan en la línea (flex-end) y la invaden un poco por debajo
   vía margin-bottom negativo, que es como se ve una firma puesta a mano. */
/* Altura común para todas (la excepción de Luis va en config.js). Se apoyan en
   su línea, y la invaden unos píxeles por el margen negativo: así se ve una
   firma puesta a mano y no una imagen pegada encima. */
.diploma-firmas .f-rubrica { height: 104px; display: flex; align-items: flex-end; justify-content: center; }
.diploma-firmas .f-firma { width: auto; max-width: 100%; object-fit: contain; display: block; }
/* 2 px, no 1: el diploma se dibuja a 1024 px y se reescala, así que un borde de
   1 px cae en sub-píxel y el navegador lo desvanece. Y no vale 1.5: los bordes
   se redondean a píxeles enteros y 1.5 vuelve a ser 1. */
.diploma-firmas .f-linea { border-top: 2px solid #6f6f6f; margin: 4px 30px 22px; }
.diploma-firmas .f-nombre { font-weight: 700; font-size: 11px; letter-spacing: .02em; color: #1a1a1a; text-transform: uppercase; line-height: 1.35; }
.diploma-firmas .f-cip { font-size: 11px; color: #2f3542; margin-top: 2px; }
.diploma-firmas .f-cargo { font-size: 11.5px; color: #2f3542; margin-top: 2px; }

/* Cara temario */
.temario-hoja { display: flex; align-items: center; padding: 52px 47px 44px; }
.temario-grid { display: grid; grid-template-columns: 1fr 222px; gap: 36px; align-items: center; width: 100%; }
.temario-tabla { border: 1px solid #cfd5dc; }
.temario-fila { display: flex; border-bottom: 1px solid #cfd5dc; }
.temario-fila:last-child { border-bottom: none; }
.temario-k { flex: none; width: 172px; padding: 11px 12px; font-size: 12.5px; font-weight: 700; color: #23314f; border-right: 1px solid #cfd5dc; }
.temario-v { flex: 1; padding: 11px 12px; font-size: 12.5px; line-height: 1.45; color: #2f3542; }
.temario-fila--seccion { background: #f4f6f8; }
.temario-fila--seccion .temario-k { width: auto; border-right: none; }
.temario-fila--mod .temario-k { border-right: none; }
.temario-fila--mod .temario-v { padding-left: 0; }
.temario-fila--cond .temario-v { font-weight: 700; }

/* Mismas medidas que la columna del anverso: logo 186x172, QR 76x76 y letra de
   9.5 px. Antes el reverso tenía el QR a 104 px y el texto a 13, y las dos caras
   del mismo certificado no se parecían. */
.temario-lateral { width: 222px; text-align: center; }
.temario-lateral .d-logo { width: 186px; height: 172px; margin: 10px auto 0; }
.temario-lateral .d-logo img { width: 100%; height: 100%; object-fit: contain; }
.temario-lateral .d-qr { width: 104px; height: 104px; margin: 26px auto 0; border: 1px solid var(--navy); background: #fff; padding: 0; }
.temario-lateral .d-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.temario-lateral .d-id { margin-top: 8px; font-size: 9.5px; line-height: 1.5; color: #2f3542; }
.temario-lateral .d-id strong { font-weight: 600; color: #23314f; }

.pista-scroll {
  display: none; margin-top: 10px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; color: var(--graphite-400); text-transform: uppercase;
}

/* ---------- Detalles ---------- */

.detalles {
  border: 1px solid var(--steel-200); border-radius: 12px; background: var(--white);
  overflow: hidden; max-width: 1024px; width: 100%; margin: 0 auto;
}

.detalles-cab { padding: 18px 22px; border-bottom: 1px solid var(--steel-200); background: var(--steel-50); }

.detalles-cab span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--graphite-500); text-transform: uppercase;
}

.detalles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.detalles-grid > div {
  display: flex; justify-content: space-between; gap: 16px; padding: 14px 22px;
  border-bottom: 1px solid var(--steel-100); border-right: 1px solid var(--steel-100);
}

.detalles-grid dt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--graphite-400); text-transform: uppercase; flex: none;
}

.detalles-grid dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--graphite-900); text-align: right; }

.firmantes { padding: 20px 22px; }

.firmantes > span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--graphite-400); text-transform: uppercase;
}

.firmantes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; }
.firmantes-grid .f-n { font-size: 14px; font-weight: 600; color: var(--graphite-900); }
.firmantes-grid .f-c { font-size: 12.5px; color: var(--graphite-500); }

.nota-pie { font-size: 13px; color: var(--graphite-400); margin-top: -8px; }

/* ---------- Estados no-encontrado / error / carga ---------- */

.alerta {
  animation: stcRise .3s ease both;
  background: var(--rosa-50); border: 1px solid var(--rosa-200);
  border-left: 4px solid var(--vino); border-radius: 8px;
  padding: 26px 28px; display: flex; gap: 18px; align-items: flex-start;
}

.alerta svg { width: 30px; height: 30px; flex: none; color: var(--vino); }
.alerta h3 { font-weight: 700; font-size: 20px; color: var(--vino-700); }
.alerta p { font-size: 15px; line-height: 1.55; color: var(--graphite-700); margin-top: 8px; }
.alerta ul { margin: 12px 0 0; padding-left: 20px; color: var(--graphite-700); font-size: 14.5px; }
.alerta li { margin-bottom: 5px; }

.cargando { border: 1px solid var(--steel-200); border-radius: 10px; overflow: hidden; background: var(--white); }

.cargando .hilo {
  height: 3px;
  background: linear-gradient(90deg, var(--vino) 0 40%, transparent 40%);
  background-size: 250% 100%;
  animation: stcCorre 1.1s linear infinite;
}

.cargando p { padding: 26px 28px; color: var(--graphite-500); font-family: var(--font-mono); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .cargando .hilo { animation: none; background: var(--vino); }
  .res, .alerta, .sello-revocado { animation: none; }
  .sello-revocado { opacity: .85; }
}

/* ---------- Pie ---------- */

.st-footer { border-top: 1px solid var(--steel-200); background: var(--steel-50); }

.st-footer .envoltura {
  padding-top: 26px; padding-bottom: 26px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}

.st-footer-marca { display: flex; align-items: center; gap: 10px; }
.st-footer-marca img { width: 36px; height: 36px; opacity: .7; object-fit: contain; }
.st-footer-marca span { font-size: 13px; color: var(--graphite-500); }
.st-footer-nota { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--graphite-400); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .envoltura { padding-left: 20px; padding-right: 20px; }
  .zona-resultado { padding: 32px 20px 70px; }
  .hero .envoltura { padding-top: 52px; padding-bottom: 130px; }
  .card { padding: 24px; }
  .st-nav a { display: none; }

  /* En móvil la tabla de datos va PRIMERO: es la que se lee de verdad.
     La réplica del diploma pasa abajo, dentro de un contenedor deslizable. */
  .res { flex-direction: column; }
  .detalles-envoltura { order: 1; }
  .diploma-envoltura { order: 2; }
  .nota-pie { order: 3; }
  .pista-scroll { display: block; }
  .detalles-grid > div { flex-direction: column; gap: 4px; }
  .detalles-grid dd { text-align: left; }
}

@media (max-width: 620px) {
  .marca img { width: 44px; height: 44px; }
  .marca-nombre { font-size: 15px; }
  .card-cabecera { align-items: flex-start; }
  .res-cabecera .tabs { margin-left: 0; width: 100%; }
  .res-cabecera .tabs button { flex: 1; }
}

/* ---------- Impresión ---------- */

/* ---------- Panel de administración ---------- */

.admin { padding: 40px 0 90px; }

.aviso-mock {
  margin-bottom: 28px; padding: 12px 16px; border-radius: 8px;
  background: var(--amber-50, #fbf2e2); border: 1px solid #e8d5a8;
  font-size: 14px; color: #7a5a12;
}

.aviso-mock code { font-family: var(--font-mono); font-size: 13px; }

.admin-cab { margin-bottom: 22px; }
.admin-cab h1 { font-size: clamp(26px, 3.4vw, 34px); margin-top: 6px; }

/* Formulario de emisión */

.admin-panel {
  border: 1px solid var(--steel-200); border-top: 3px solid var(--vino);
  border-radius: 10px; padding: 26px 28px; margin-bottom: 34px; background: var(--white);
}

.admin-panel-cab { margin-bottom: 20px; }
.admin-panel-cab h2 { font-size: 21px; margin-top: 5px; }

.admin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 18px; }
.campo-form--ancho { grid-column: span 2; }

.campo-form label {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--graphite-500); margin-bottom: 7px;
}

.campo-form input, .campo-form select {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--graphite-900);
  background: var(--white); border: 1px solid var(--steel-300); border-radius: 6px;
  padding: 12px 13px; outline: none;
}

.campo-form input:focus, .campo-form select:focus {
  border-color: var(--vino-claro); box-shadow: 0 0 0 3px rgba(124,29,43,.18);
}

.admin-form-pie {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; margin-top: 4px;
}

.admin-form-nota { font-size: 13px; color: var(--graphite-400); }
.campo-opt { text-transform: none; letter-spacing: 0; color: var(--graphite-300); }
#aviso-periodo { grid-column: 1 / -1; margin-top: 0; }
.admin-form .campo-form--ancho.admin-form-nota { grid-column: 1 / -1; margin: -4px 0 0; }

.admin-error {
  margin-top: 18px; padding: 12px 15px; border-radius: 8px;
  background: var(--rosa-50); border: 1px solid var(--rosa-200);
  color: var(--vino-600); font-size: 14px;
}

.admin-aviso {
  margin: 10px 0; padding: 10px 14px; border-radius: 6px;
  background: #fbf2e2; border: 1px solid #e8d5a8; color: #7a5a12; font-size: 13.5px;
}

.admin-emitido {
  margin-top: 22px; padding: 22px 24px; border-radius: 10px;
  background: var(--green-50); border: 1px solid var(--green-200);
}

.admin-emitido-cab { font-weight: 600; color: var(--green-500); font-size: 15px; }
.admin-emitido-codigo { font-size: 24px; font-weight: 600; letter-spacing: .02em; margin-top: 10px; }
.admin-emitido-nombre { color: var(--graphite-700); margin-top: 2px; }
.admin-emitido-enlace { font-size: 13.5px; color: var(--graphite-500); margin: 12px 0 16px; word-break: break-all; }

.admin-barra {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end;
  justify-content: space-between; padding-bottom: 26px;
  border-bottom: 1px solid var(--steel-200); margin-bottom: 26px;
}

.admin-buscar { display: flex; gap: 10px; flex: 1; min-width: 280px; }

.admin-buscar input {
  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 15px;
  color: var(--graphite-900); background: var(--white);
  border: 1px solid var(--steel-300); border-radius: 6px; padding: 13px 15px; outline: none;
}

.admin-buscar input:focus { border-color: var(--vino-claro); box-shadow: 0 0 0 3px rgba(124,29,43,.18); }

.admin-lote label {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--graphite-500); margin-bottom: 8px;
}

.admin-lote-fila { display: flex; gap: 8px; }

.admin-lote-fila input {
  font-family: var(--font-mono); font-size: 14px; padding: 12px 13px;
  border: 1px solid var(--steel-300); border-radius: 6px; outline: none; color: var(--graphite-900);
}

.btn--tenue { background: var(--white); color: var(--graphite-700); border: 1px solid var(--steel-300); }
.btn--tenue:hover { background: var(--steel-50); color: var(--vino-600); }
.btn--peligro { background: var(--vino); }
.btn--peligro:hover { background: var(--vino-700); }

.admin-vacio { padding: 26px 2px; color: var(--graphite-400); font-size: 15px; }

.admin-tabla-caja { overflow-x: auto; border: 1px solid var(--steel-200); border-radius: 10px; }
.admin-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }

.admin-tabla th {
  text-align: left; padding: 12px 16px; background: var(--steel-50);
  border-bottom: 1px solid var(--steel-200);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--graphite-500); white-space: nowrap;
}

.admin-tabla td { padding: 12px 16px; border-bottom: 1px solid var(--steel-100); vertical-align: middle; }
.admin-tabla tr:last-child td { border-bottom: none; }
.admin-tabla .btn { padding: 7px 14px; font-size: 13px; }

.marca-estado { font-family: var(--font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; }
.marca-estado--valido { color: var(--green-500); }
.marca-estado--anulado { color: var(--vino-600); }

.admin-detalle { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--steel-200); }

.admin-detalle-cab {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;
  justify-content: space-between; margin-bottom: 26px;
}

.admin-detalle-cab h2 { font-size: 24px; margin-top: 6px; }
.admin-sub { color: var(--graphite-500); margin-top: 4px; }
.admin-acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Impresión por lote ---------- */

.lote-barra {
  position: sticky; top: 0; z-index: 40; background: var(--white);
  border-bottom: 1px solid var(--steel-200);
}

.lote-barra .envoltura {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between; padding-top: 16px; padding-bottom: 16px;
}

.lote-barra p { font-family: var(--font-mono); font-size: 13px; color: var(--graphite-500); }

.lote { max-width: var(--ancho); margin: 0 auto; padding: 32px; display: flex; flex-direction: column; gap: 44px; }
.lote-item { display: flex; flex-direction: column; gap: 12px; }

.lote-rotulo {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite-400);
}

/* La descarga en PDF es esta hoja de impresión: imprime la MISMA plantilla que se
   ve en pantalla, a tamaño real y con una cara por página. No hay una segunda
   maqueta que pueda desincronizarse de la de pantalla. */
@media print {
  @page { size: 1024px 749px; margin: 0; }

  .st-header, .st-footer, .zona-validador, .hero, .btn, .pista-scroll,
  .res-cabecera, .detalles-envoltura, .nota-pie, .chips,
  .lote-barra, .lote-rotulo, .aviso-mock, .admin-cab, .admin-barra,
  .admin-tabla-caja, .admin-vacio, .admin-detalle-cab { display: none !important; }

  body { background: #fff; }
  .zona-resultado { padding: 0; max-width: none; }
  .res { gap: 0; }
  .diploma-envoltura { max-width: none; gap: 0; }

  /* Lote: cada certificado va seguido del anterior, sin márgenes ni títulos. */
  .admin, .admin-detalle { padding: 0; margin: 0; border: 0; }
  .lote { max-width: none; padding: 0; gap: 0; }
  .lote-item { gap: 0; }

  .diploma-scroll { height: auto !important; overflow: visible; box-shadow: none; break-after: page; }
  .diploma-scroll:last-of-type { break-after: auto; }
  .diploma { transform: none !important; }

  .diploma, .sello-revocado { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .alerta { border: 1px solid #999; }
}