/* =========================================================================
   CertificaRest — hoja de estilos
   Lenguaje visual institucional: barra superior oscura, tipografía Montserrat,
   bandas sólidas, tarjetas de borde fino y esquinas casi rectas. Paleta propia
   —verde sanitario y ocre— para no usar los colores oficiales de la federación.
   Diseñada primero para el celular, que es donde va a estar el usuario real.
   ========================================================================= */

:root {
  --verde: #14564C;
  --verde-oscuro: #0D3B34;
  --verde-claro: #E6EFEC;
  --ocre: #A97420;
  --ocre-claro: #F7EFE0;

  --grafito: #1B211F;
  --tinta: #1F2725;
  --gris-texto: #56625E;
  --gris-suave: #7C8783;
  --linea: #D6DCD8;
  --linea-clara: #E7EBE8;
  --fondo: #F4F6F4;
  --blanco: #FFFFFF;

  --ok: #176B45;
  --ok-fondo: #E4F1E9;
  --aviso: #7D5807;
  --aviso-fondo: #FBF0D8;
  --alerta: #9C2C1C;
  --alerta-fondo: #FAE6E2;
  --proceso: #1B5878;
  --proceso-fondo: #E4EFF5;

  --titular: "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --texto: "Source Sans 3", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --ancho: 1160px;
  --radio: 3px;
  --sombra: 0 1px 3px rgba(27, 33, 31, .08);
}

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

/* El atributo hidden debe ganarle a cualquier clase que fije display. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--titular);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tinta);
  margin: 0 0 .6rem;
  text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; font-weight: 600; }

p { margin: 0 0 1rem; text-wrap: pretty; }

a { color: var(--verde); text-underline-offset: 2px; }
a:hover { color: var(--verde-oscuro); }

:focus-visible {
  outline: 3px solid var(--ocre);
  outline-offset: 2px;
}

img, svg { max-width: 100%; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.15rem; }
.contenedor-angosto { max-width: 760px; }
.contenedor-medio { max-width: 940px; }

/* ---------------------------------------------------------------- cabecera */

.barra-gobierno {
  background: var(--grafito);
  color: #E8ECEA;
  font-size: .78rem;
}
.barra-gobierno .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 34px; flex-wrap: wrap;
}
.barra-gobierno a { color: #E8ECEA; text-decoration: none; }
.barra-gobierno a:hover { text-decoration: underline; color: #fff; }
.barra-gobierno .sello {
  font-family: var(--titular); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: .72rem;
}
.barra-gobierno nav { display: flex; gap: 1.1rem; align-items: center; }

.encabezado { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.encabezado .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 74px; flex-wrap: wrap;
}

.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.marca .escudo {
  width: 40px; height: 40px; flex: 0 0 40px;
  background: var(--verde); border-radius: 2px;
  display: grid; place-items: center;
}
.marca .escudo svg { width: 24px; height: 24px; }
.marca .nombre {
  font-family: var(--titular); font-weight: 700; font-size: 1.16rem;
  letter-spacing: -.01em; line-height: 1.1; color: var(--tinta);
}
.marca .bajada {
  font-size: .74rem; color: var(--gris-texto); line-height: 1.2; display: block;
  letter-spacing: .01em;
}

.menu { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.menu a {
  font-family: var(--titular); font-size: .84rem; font-weight: 600;
  color: var(--tinta); text-decoration: none;
  padding: .5rem .7rem; border-radius: var(--radio);
}
.menu a:hover { background: var(--verde-claro); color: var(--verde-oscuro); }
.menu a.activo { color: var(--verde); box-shadow: inset 0 -3px 0 var(--verde); border-radius: 0; }

.menu-boton {
  display: none; background: none; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: .45rem .6rem; cursor: pointer;
}
.menu-boton svg { width: 20px; height: 20px; display: block; }

/* ---------------------------------------------------------------- migas */

.migas { background: var(--blanco); border-bottom: 1px solid var(--linea); font-size: .82rem; }
.migas .contenedor { display: flex; gap: .45rem; align-items: center; padding-top: .55rem; padding-bottom: .55rem; flex-wrap: wrap; }
.migas a { color: var(--gris-texto); text-decoration: none; }
.migas a:hover { color: var(--verde); text-decoration: underline; }
.migas span[aria-current] { color: var(--tinta); font-weight: 600; }
.migas .sep { color: var(--gris-suave); }

/* ---------------------------------------------------------------- bandas */

.banda { background: var(--verde); color: #fff; padding: 2.6rem 0; }
.banda h1, .banda h2 { color: #fff; }
.banda p { color: #D6E4E0; }

/* Una tarjeta dentro de una banda vuelve a los colores normales:
   si no, hereda el texto claro pensado para el fondo de color. */
.banda .tarjeta { color: var(--tinta); }
.banda .tarjeta h1, .banda .tarjeta h2, .banda .tarjeta h3, .banda .tarjeta h4 { color: var(--tinta); }
.banda .tarjeta p { color: var(--tinta); }
.banda .tarjeta .mini, .banda .tarjeta p.mini { color: var(--gris-texto); }
.banda .tarjeta label { color: var(--tinta); }
.banda-oscura { background: var(--verde-oscuro); }
.banda-clara { background: var(--verde-claro); color: var(--tinta); }
.banda-clara h1, .banda-clara h2, .banda-clara h3, .banda-clara h4 { color: var(--tinta); }
.banda-clara p { color: var(--gris-texto); }

.seccion { padding: 2.8rem 0; }
.seccion-blanca { background: var(--blanco); }
.seccion + .seccion { border-top: 1px solid var(--linea-clara); }

.titulo-seccion { margin-bottom: 1.6rem; }
.titulo-seccion .antetitulo {
  font-family: var(--titular); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--verde);
  display: block; margin-bottom: .3rem;
}
.titulo-seccion p { color: var(--gris-texto); max-width: 62ch; margin-bottom: 0; }

/* ---------------------------------------------------------------- botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--titular); font-size: .92rem; font-weight: 600;
  padding: .72rem 1.3rem; border-radius: var(--radio);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  line-height: 1.25; text-align: center;
}
.boton svg { width: 18px; height: 18px; flex: 0 0 18px; }

.boton-principal { background: var(--verde); color: #fff; }
.boton-principal:hover { background: var(--verde-oscuro); color: #fff; }

.boton-ocre { background: var(--ocre); color: #fff; }
.boton-ocre:hover { background: #8C5F17; color: #fff; }

.boton-secundario { background: var(--blanco); color: var(--verde); border-color: var(--verde); }
.boton-secundario:hover { background: var(--verde-claro); color: var(--verde-oscuro); }

.boton-claro { background: #fff; color: var(--verde); }
.boton-claro:hover { background: #EAF1EF; }

.boton-contorno-claro { border-color: rgba(255,255,255,.6); color: #fff; }
.boton-contorno-claro:hover { background: rgba(255,255,255,.14); color: #fff; }

.boton-fantasma { background: transparent; color: var(--gris-texto); border-color: var(--linea); }
.boton-fantasma:hover { background: var(--fondo); color: var(--tinta); }

.boton-bloque { width: 100%; }
.boton-chico { padding: .42rem .8rem; font-size: .8rem; }
.boton-grande { padding: .9rem 1.7rem; font-size: 1rem; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.grupo-botones { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.35rem;
}
.tarjeta-plana { box-shadow: none; }
.tarjeta-destacada { border-top: 3px solid var(--verde); }
.tarjeta h3, .tarjeta h4 { margin-top: 0; }

.rejilla { display: grid; gap: 1.1rem; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

/* Rejillas de dos columnas con proporciones propias. Se declaran como clases y no
   como estilo en línea para que puedan caer a una sola columna en el celular, que es
   donde va a estar la mayoría de las personas que use esto. */
.rejilla-desigual  { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.rejilla-mitades   { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rejilla-principal { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.rejilla-panel     { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.rejilla-inversa   { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.rejilla-con-qr    { grid-template-columns: minmax(0, 1fr) auto; }
.rejilla-filtros   { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }

@media (max-width: 880px) {
  .rejilla-desigual, .rejilla-mitades, .rejilla-principal, .rejilla-panel,
  .rejilla-inversa, .rejilla-con-qr, .rejilla-filtros {
    grid-template-columns: minmax(0, 1fr);
  }
  .rejilla-con-qr .caja-qr { max-width: 240px; margin-inline: auto; }
}

/* ---------------------------------------------------------------- cifras */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.cifra { background: var(--blanco); padding: 1.05rem 1.1rem; }
.cifra .numero {
  font-family: var(--titular); font-size: 1.85rem; font-weight: 700;
  color: var(--verde); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.cifra .etiqueta {
  font-size: .8rem; color: var(--gris-texto); margin-top: .2rem; line-height: 1.35;
}
.cifra.alerta .numero { color: var(--alerta); }
.cifra.aviso .numero { color: var(--aviso); }
.cifra.ocre .numero { color: var(--ocre); }

/* ---------------------------------------------------------------- distintivos */

.distintivo {
  display: inline-flex; align-items: center; gap: .32rem;
  font-family: var(--titular); font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 2px; white-space: nowrap;
  background: var(--fondo); color: var(--gris-texto);
}
.distintivo.ok { background: var(--ok-fondo); color: var(--ok); }
.distintivo.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.distintivo.alerta { background: var(--alerta-fondo); color: var(--alerta); }
.distintivo.proceso { background: var(--proceso-fondo); color: var(--proceso); }
.distintivo.neutro { background: var(--fondo); color: var(--gris-texto); }
.distintivo.verde { background: var(--verde); color: #fff; }
.distintivo.ocre { background: var(--ocre-claro); color: var(--ocre); }

/* ---------------------------------------------------------------- avisos */

.aviso-caja {
  border-left: 4px solid var(--verde); background: var(--verde-claro);
  padding: .95rem 1.15rem; border-radius: 0 var(--radio) var(--radio) 0;
  margin-bottom: 1.2rem;
}
.aviso-caja p:last-child { margin-bottom: 0; }
.aviso-caja.ok { border-color: var(--ok); background: var(--ok-fondo); }
.aviso-caja.aviso { border-color: var(--aviso); background: var(--aviso-fondo); }
.aviso-caja.error, .aviso-caja.alerta { border-color: var(--alerta); background: var(--alerta-fondo); }
.aviso-caja.info { border-color: var(--proceso); background: var(--proceso-fondo); }
.aviso-caja .titulo-aviso {
  font-family: var(--titular); font-weight: 700; font-size: .93rem; margin-bottom: .2rem;
}

.cinta-demo {
  background: var(--ocre-claro); border-bottom: 1px solid #E8D8B8;
  color: #6E4C12; font-size: .8rem; padding: .45rem 0;
}
.cinta-demo .contenedor { display: flex; gap: .6rem; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
.cinta-demo strong { font-family: var(--titular); }

/* ---------------------------------------------------------------- formularios */

.campo { margin-bottom: 1.15rem; }
.campo label, .etiqueta-campo {
  display: block; font-family: var(--titular); font-weight: 600;
  font-size: .88rem; margin-bottom: .32rem; color: var(--tinta);
}
.campo .ayuda { font-size: .8rem; color: var(--gris-texto); margin: -.1rem 0 .4rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="password"], select, textarea {
  width: 100%; font-family: var(--texto); font-size: 1rem;
  padding: .68rem .8rem; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--blanco); color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--verde); outline: 2px solid rgba(20, 86, 76, .18); outline-offset: 0;
}
input::placeholder { color: #9AA5A1; }
input[readonly] { background: var(--fondo); color: var(--gris-texto); }

.campo-mono input { font-family: var(--mono); letter-spacing: .09em; text-transform: uppercase; }

/* Destello breve cuando un dato de prueba llena el campo, para que se vea qué cambió. */
.campo-resaltado {
  border-color: var(--ocre) !important;
  background: var(--ocre-claro) !important;
  transition: background-color .5s ease, border-color .5s ease;
}

.error-campo { color: var(--alerta); font-size: .82rem; margin-top: .28rem; display: block; font-weight: 600; }
.resumen-errores {
  background: var(--alerta-fondo); border-left: 4px solid var(--alerta);
  padding: .85rem 1.1rem; margin-bottom: 1.2rem; border-radius: 0 var(--radio) var(--radio) 0;
}
.resumen-errores ul { margin: .3rem 0 0; padding-left: 1.1rem; color: var(--alerta); font-size: .88rem; }

.casilla { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.casilla input[type="checkbox"], .casilla input[type="radio"] {
  width: 19px; height: 19px; margin-top: .18rem; flex: 0 0 19px; accent-color: var(--verde);
}
.casilla label { font-family: var(--texto); font-weight: 400; margin: 0; }

/* Tarjetas seleccionables (canal de pago, método, institución) */
.opcion {
  display: block; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.05rem 1.15rem; background: var(--blanco); cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.opcion:hover { border-color: var(--verde); background: #FAFCFB; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion:has(input:checked) { border-color: var(--verde); border-width: 2px; background: var(--verde-claro); padding: calc(1.05rem - 1px) calc(1.15rem - 1px); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--ocre); outline-offset: 2px; }
.opcion .titulo-opcion { font-family: var(--titular); font-weight: 700; font-size: 1rem; margin-bottom: .15rem; }
.opcion .detalle-opcion { font-size: .87rem; color: var(--gris-texto); }
.opcion .precio { font-family: var(--titular); font-weight: 700; font-size: 1.4rem; color: var(--verde); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- ayuda con datos de prueba */

.ayuda-demo { position: relative; display: inline-flex; vertical-align: middle; margin-left: .3rem; }

.ayuda-punto {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--ocre-claro); color: var(--ocre);
  transition: background-color .12s ease, color .12s ease;
}
.ayuda-punto svg { width: 16px; height: 16px; }
.ayuda-punto:hover { background: var(--ocre); color: #fff; }
.ayuda-punto[aria-expanded="true"] { background: var(--ocre); color: #fff; }

.ayuda-panel {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 40;
  width: min(21rem, calc(100vw - 2.5rem));
  background: var(--blanco); border: 1px solid var(--linea);
  border-top: 3px solid var(--ocre); border-radius: var(--radio);
  box-shadow: 0 6px 20px rgba(27, 33, 31, .14);
  padding: .85rem;
  text-align: left; font-weight: 400;
}
.ayuda-panel[hidden] { display: none; }

.ayuda-encabezado {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem;
}
.ayuda-encabezado strong {
  font-family: var(--titular); font-size: .93rem; display: block; margin-bottom: .25rem;
  color: var(--tinta);
}
.ayuda-cerrar {
  background: none; border: none; cursor: pointer; font-size: 1.35rem; line-height: 1;
  color: var(--gris-suave); padding: 0 .15rem;
}
.ayuda-cerrar:hover { color: var(--tinta); }

.ayuda-descripcion {
  font-size: .8rem; color: var(--gris-texto); margin: .45rem 0 .7rem; line-height: 1.45;
}

.ayuda-lista { display: flex; flex-direction: column; gap: .4rem; }

.ayuda-opcion {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: .55rem .7rem;
  font-family: var(--texto);
}
.ayuda-opcion:hover { border-color: var(--ocre); background: #FDFBF6; }
.ayuda-opcion .ayuda-valor {
  display: block; font-family: var(--mono); font-size: .86rem; font-weight: 600;
  color: var(--tinta); margin: .3rem 0 .15rem; word-break: break-all;
}
.ayuda-opcion .ayuda-detalle {
  display: block; font-size: .78rem; color: var(--gris-texto); line-height: 1.4;
}

/* Cuando el panel cuelga de un elemento pegado al borde derecho, se ancla al otro lado. */
.ayuda-demo.a-la-izquierda .ayuda-panel { left: auto; right: 0; }

/* En el celular no hay espacio para colgarlo del icono: se muestra como hoja al pie de la
   pantalla, que además queda al alcance del pulgar. */
@media (max-width: 560px) {
  .ayuda-demo .ayuda-panel,
  .ayuda-demo.a-la-izquierda .ayuda-panel {
    position: fixed;
    top: auto; bottom: .75rem; left: .75rem; right: .75rem;
    width: auto; max-height: 68vh; overflow-y: auto;
    box-shadow: 0 -6px 26px rgba(27, 33, 31, .26);
  }
}

/* ---------------------------------------------------------------- tablas */

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
table.datos { width: 100%; border-collapse: collapse; font-size: .89rem; }
table.datos th {
  font-family: var(--titular); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gris-texto);
  text-align: left; padding: .7rem .85rem; background: var(--fondo);
  border-bottom: 1px solid var(--linea); white-space: nowrap;
}
table.datos td { padding: .68rem .85rem; border-bottom: 1px solid var(--linea-clara); vertical-align: middle; }
table.datos tr:last-child td { border-bottom: none; }
table.datos tbody tr:hover { background: #FAFBFA; }
table.datos .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.datos .mono { font-family: var(--mono); font-size: .82rem; }

/* ---------------------------------------------------------------- avance */

.barra-avance { height: 8px; background: var(--linea-clara); border-radius: 99px; overflow: hidden; }
.barra-avance > span { display: block; height: 100%; background: var(--verde); border-radius: 99px; transition: width .3s ease; }
.barra-avance.delgada { height: 5px; }
.barra-avance.ocre > span { background: var(--ocre); }

.avance-texto { display: flex; justify-content: space-between; font-size: .8rem; color: var(--gris-texto); margin-bottom: .3rem; }
.avance-texto strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- pasos */

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); counter-reset: paso; }
.pasos li { background: var(--blanco); padding: 1.2rem 1.15rem; counter-increment: paso; }
.pasos li::before {
  content: counter(paso); display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--verde); color: #fff;
  font-family: var(--titular); font-weight: 700; font-size: .88rem;
  margin-bottom: .55rem;
}
.pasos li h4 { margin-bottom: .2rem; }
.pasos li p { font-size: .87rem; color: var(--gris-texto); margin: 0; }

/* Indicador del paso actual dentro del flujo */
.riel { display: flex; align-items: center; gap: .35rem; list-style: none; padding: 0; margin: 0 0 1.6rem; flex-wrap: wrap; font-size: .78rem; }
.riel li { display: flex; align-items: center; gap: .35rem; color: var(--gris-suave); font-family: var(--titular); font-weight: 600; }
.riel li::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--linea); background: var(--blanco); flex: 0 0 20px;
}
.riel li.hecho { color: var(--verde); }
.riel li.hecho::before { background: var(--verde); border-color: var(--verde); }
.riel li.actual { color: var(--tinta); }
.riel li.actual::before { border-color: var(--verde); border-width: 6px; }
.riel .flecha { color: var(--linea); }

/* ---------------------------------------------------------------- lección */

.lectura { font-size: 1.06rem; line-height: 1.75; max-width: 68ch; }
.lectura h4 { font-family: var(--titular); font-size: 1.06rem; margin: 1.7rem 0 .5rem; color: var(--verde-oscuro); }
.lectura ul, .lectura ol { padding-left: 1.35rem; margin-bottom: 1.1rem; }
.lectura li { margin-bottom: .5rem; }
.lectura li::marker { color: var(--verde); }
.lectura strong { font-weight: 600; color: var(--tinta); }

.puntos-clave { background: var(--verde-claro); border-radius: var(--radio); padding: 1.1rem 1.25rem; margin: 1.6rem 0; }
.puntos-clave .titulo-aviso { font-family: var(--titular); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--verde); margin-bottom: .5rem; }
.puntos-clave ul { margin: 0; padding-left: 1.15rem; }
.puntos-clave li { margin-bottom: .35rem; font-size: .95rem; }

/* ---------------------------------------------------------------- examen */

.reactivo { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); padding: 1.3rem 1.4rem; margin-bottom: 1.1rem; }
.reactivo .numero-reactivo { font-family: var(--titular); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); margin-bottom: .45rem; }
.reactivo .enunciado { font-size: 1.04rem; font-weight: 600; margin-bottom: .95rem; line-height: 1.45; }
.reactivo.contestado { border-left: 3px solid var(--verde); }

.opciones-lista { display: grid; gap: .55rem; }
.opcion-examen {
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .75rem .9rem; cursor: pointer; background: var(--blanco); font-size: .96rem;
}
.opcion-examen:hover { border-color: var(--verde); background: #FAFCFB; }
.opcion-examen input { margin-top: .22rem; accent-color: var(--verde); width: 18px; height: 18px; flex: 0 0 18px; }
.opcion-examen:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
.opcion-examen.correcta { border-color: var(--ok); background: var(--ok-fondo); }
.opcion-examen.incorrecta { border-color: var(--alerta); background: var(--alerta-fondo); }

.reloj {
  position: sticky; top: 0; z-index: 20;
  background: var(--blanco); border-bottom: 1px solid var(--linea);
  padding: .7rem 0; margin-bottom: 1.4rem;
}
.reloj .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.reloj .tiempo { font-family: var(--titular); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--verde); }
.reloj .tiempo.poco { color: var(--alerta); }
.reloj .contador { font-size: .85rem; color: var(--gris-texto); }

.marcador { text-align: center; padding: 1.8rem 1.4rem; }
.marcador .puntaje { font-family: var(--titular); font-size: 4.2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.marcador.aprobado .puntaje { color: var(--ok); }
.marcador.reprobado .puntaje { color: var(--alerta); }
.marcador .de { font-size: 1rem; color: var(--gris-texto); }

/* ---------------------------------------------------------------- constancia */

.hoja-constancia {
  background: var(--blanco); border: 1px solid var(--linea);
  border-top: 5px solid var(--verde); border-radius: var(--radio);
  padding: 2rem 1.8rem;
}
.hoja-constancia .emisor { font-family: var(--titular); font-weight: 700; font-size: .92rem; color: var(--verde); letter-spacing: .02em; }
.hoja-constancia .nombre-titular { font-family: var(--titular); font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; margin: .5rem 0 .2rem; text-transform: uppercase; }
.hoja-constancia .curp-titular { font-family: var(--mono); font-size: .88rem; color: var(--gris-texto); }

.datos-constancia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1.1rem; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--linea-clara); }
.dato .clave { font-family: var(--titular); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gris-texto); display: block; margin-bottom: .2rem; }
.dato .valor { font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dato .valor.mono { font-family: var(--mono); font-size: .94rem; }

.caja-qr { text-align: center; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem; background: var(--blanco); }
.caja-qr img { width: 100%; max-width: 170px; height: auto; image-rendering: pixelated; }
.caja-qr .clave-verificacion { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .12em; font-weight: 600; margin-top: .5rem; }

.sello-digital { font-family: var(--mono); font-size: .72rem; color: var(--gris-suave); word-break: break-all; }

/* Resultado del portal público */
.resultado-verificacion { border-radius: var(--radio); padding: 1.6rem 1.5rem; border: 1px solid; }
.resultado-verificacion.vigente { background: var(--ok-fondo); border-color: #B7DCC6; }
.resultado-verificacion.vencida { background: var(--aviso-fondo); border-color: #E7D3A4; }
.resultado-verificacion.revocada, .resultado-verificacion.noencontrada { background: var(--alerta-fondo); border-color: #EBC2B9; }
.resultado-verificacion .veredicto { font-family: var(--titular); font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.resultado-verificacion.vigente .veredicto { color: var(--ok); }
.resultado-verificacion.vencida .veredicto { color: var(--aviso); }
.resultado-verificacion.revocada .veredicto, .resultado-verificacion.noencontrada .veredicto { color: var(--alerta); }
.resultado-verificacion .veredicto svg { width: 30px; height: 30px; flex: 0 0 30px; }

/* ---------------------------------------------------------------- listas y varios */

.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-palomeada { list-style: none; margin: 0 0 1rem; padding: 0; }
.lista-palomeada li { position: relative; padding-left: 1.7rem; margin-bottom: .6rem; }
.lista-palomeada li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 6px; border-left: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde);
  transform: rotate(-45deg);
}

.fila-lista { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .95rem 0; border-bottom: 1px solid var(--linea-clara); flex-wrap: wrap; }
.fila-lista:last-child { border-bottom: none; }

.acordeon { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); margin-bottom: .7rem; }
.acordeon summary {
  cursor: pointer; padding: 1rem 1.2rem; font-family: var(--titular);
  font-weight: 600; font-size: 1rem; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; font-size: 1.4rem; color: var(--verde); font-weight: 400; line-height: 1; }
.acordeon[open] summary::after { content: "−"; }
.acordeon .cuerpo { padding: 0 1.2rem 1.15rem; color: var(--gris-texto); font-size: .96rem; }
.acordeon .cuerpo p:last-child { margin-bottom: 0; }

.mini { font-size: .82rem; color: var(--gris-texto); }
.mini-mono { font-family: var(--mono); font-size: .8rem; color: var(--gris-texto); }
.centrado { text-align: center; }
.derecha { text-align: right; }
.sin-margen { margin-bottom: 0; }
.espacio-arriba { margin-top: 1.3rem; }
.espacio-arriba-grande { margin-top: 2.2rem; }
.pila { display: flex; flex-direction: column; gap: 1.1rem; }
.pila-chica { display: flex; flex-direction: column; gap: .55rem; }
.horizontal { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.horizontal-separado { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.crece { flex: 1 1 auto; min-width: 0; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.saltar-al-contenido {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--verde); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--radio) 0;
}
.saltar-al-contenido:focus { left: 0; }

/* ---------------------------------------------------------------- pie */

.pie { background: var(--grafito); color: #C9D1CE; margin-top: 3rem; }
.pie .contenedor { padding-top: 2.4rem; padding-bottom: 2rem; }
.pie h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .75rem; }
.pie a { color: #C9D1CE; text-decoration: none; font-size: .9rem; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .45rem; }
.pie .franja-final { border-top: 1px solid #333B38; background: #121716; font-size: .8rem; color: #93A09B; }
.pie .franja-final .contenedor { padding: .95rem 1.15rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- responsivo */

@media (max-width: 860px) {
  body { font-size: 16px; }
  .menu-boton { display: block; }
  .menu {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; padding-bottom: .8rem;
  }
  .menu.abierto { display: flex; }
  .menu a { padding: .75rem .6rem; border-bottom: 1px solid var(--linea-clara); border-radius: 0; }
  .menu a.activo { box-shadow: inset 3px 0 0 var(--verde); }
  .encabezado .contenedor { min-height: 62px; padding-top: .5rem; padding-bottom: 0; }
  .banda { padding: 2rem 0; }
  .seccion { padding: 2rem 0; }
  .tarjeta { padding: 1.15rem; }
  .hoja-constancia { padding: 1.4rem 1.2rem; }
}

@media (max-width: 520px) {
  .barra-gobierno nav { gap: .8rem; }
  .grupo-botones .boton { width: 100%; }
  .marcador .puntaje { font-size: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- impresión */

@media print {
  .barra-gobierno, .encabezado, .migas, .pie, .cinta-demo,
  .grupo-botones, .boton, .menu, .no-imprimir { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .seccion { padding: 0; }
  .tarjeta, .hoja-constancia, .tabla-envoltura { border: 1px solid #999; break-inside: avoid; }
  a { text-decoration: none; color: #000; }
  table.datos { font-size: 9pt; }
}