/*
 * tema-latino-postulante.css — complementos de identidad del Colegio Latino para las páginas del postulante.
 * Orden de carga: /css/base.css → /css/tema-latino.css → /css/postulante.css → /css/tema-latino-postulante.css
 * Solo cambia colores, formas y tipografía: NO reduce tamaños de letra ni áreas táctiles (postulante.css §3.2).
 * Contraste: texto marino/azul sobre blanco ≥ 8.9:1; el turquesa solo va en bordes y fondos con texto marino.
 */

/* ---------- Base (complementa postulante.css "Base": variables del body.pagina-postulante) ---------- */
body.pagina-postulante {
  --postulante-fondo: #F3F6FA;         /* gris frío casi blanco */
  --opcion-borde: var(--celeste);      /* #87BEE5: borde celeste de las tarjetas de opción */
  --marca-ok: #15803D;                 /* verde semántico: se conserva */
}
.pagina-postulante h1, .pagina-postulante h2 { color: var(--marino); font-weight: 800; }
.pagina-postulante h3 { font-weight: 700; }

/* ---------- Cabecera sencilla de inicio e instrucciones (complementa .cabecera-postulante) ----------
   Isotipo pequeño a la izquierda del nombre. Marcado opcional: <img class="logo-postulante" src="/img/isotipo-azul.svg" alt="" width="36" height="36"> */
.cabecera-postulante { border-bottom: 2px solid var(--primario-claro); }
.cabecera-postulante .colegio { display: inline-flex; align-items: center; gap: var(--esp-3); color: var(--marino); font-weight: 700; min-width: 0; }
.cabecera-postulante .logo-postulante { width: 36px; height: 36px; flex-shrink: 0; }
.cabecera-postulante .colegio:not(:has(.logo-postulante))::before {
  content: "";
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: url("/img/isotipo-azul.svg") center / contain no-repeat;
}

/* ---------- Ingreso con código (complementa .pagina-centrada de tema-latino.css y .campo-codigo) ----------
   Fondo azul institucional (lo pinta tema-latino.css), tarjeta blanca redondeada y el logo arriba. */
.pagina-postulante .pagina-centrada .caja.caja-postulante { border-radius: 20px; }
/* Ingreso del postulante: el logo vertical queda en 180 px (60 % como máximo en móvil) para que la tarjeta con el botón
   "Entrar" siga cabiendo en la primera pantalla de un celular de 375×812. */
.pagina-postulante .pagina-centrada .marca .logo-marca,
.pagina-postulante .pagina-centrada .marca:not(:has(.logo-marca))::before { width: 180px; max-width: 60%; }
.pagina-postulante .pagina-centrada .marca .sistema { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7em; font-weight: 700; color: var(--primario); }
.pagina-postulante .pagina-centrada .marca .colegio { color: var(--marino); font-weight: 800; }
.etiqueta-grande { color: var(--marino); }
.pagina-postulante input.campo-codigo {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  color: var(--marino);
  border-color: var(--celeste);
  border-radius: 14px;
  background: var(--superficie);
}
.pagina-postulante input.campo-codigo:focus { border-color: var(--primario); }
.pagina-postulante input.campo-codigo::placeholder { color: var(--texto-secundario); font-weight: 600; opacity: 1; }  /* 6.34:1 */
.ayuda-codigo .codigo { color: var(--primario); font-family: var(--fuente-titulos); font-weight: 800; white-space: nowrap; }
/* Botón "Entrar" más grande y con esquinas de 16 px (sube de 64 a 72 px de alto; nunca baja) */
.pagina-postulante .btn-gigante { min-height: 72px; border-radius: var(--radio-grande); font-weight: 800; letter-spacing: 0.02em; }
.pagina-postulante .btn-primario:hover:not(:disabled) { background: var(--marino); border-color: var(--marino); }
.pagina-postulante .btn { border-radius: 12px; }
.pagina-postulante .btn-pequeno { border-radius: var(--radio); }

/* ---------- Inicio e instrucciones (complementa .tarjeta-postulante, .recuadro, .estado-examen) ---------- */
.tarjeta-postulante { border: 1px solid var(--borde); border-radius: 20px; }
.estado-examen { color: var(--marino); }
.recuadro { border-color: var(--acento-claro); border-radius: var(--radio-grande); }
.recuadro .cifra-recuadro { font-family: var(--fuente-titulos); font-weight: 800; color: var(--primario); }
.documentos { border-radius: var(--radio); }
.casilla-grande input[type="checkbox"] { accent-color: var(--primario); }

/* ---------- Reproductor (complementa .examen-cabecera, .examen-identidad, .opcion, .mapa-punto) ----------
   Cabecera blanca con una línea azul y el isotipo pequeño junto al título del examen.
   Marcado dentro de .examen-identidad (rendir.html): <img class="logo-examen" src="/img/isotipo-azul.svg" alt="" width="32" height="32"> */
.examen-cabecera { border-bottom: 2px solid var(--primario-claro); }
.examen-identidad { display: flex; align-items: center; gap: var(--esp-3); }
.examen-identidad .logo-examen { width: 32px; height: 32px; flex-shrink: 0; }
.examen-identidad:not(:has(.logo-examen))::before {
  content: "";
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: url("/img/isotipo-azul.svg") center / contain no-repeat;
}
.examen-identidad > p { margin: 0; }
.examen-identidad .examen-titulo + .examen-subtitulo { margin-left: 0; }
.examen-textos { min-width: 0; }
/* En escritorio los dos <p> (título y nombre) deben seguir apilados a la derecha del isotipo aunque no exista el envoltorio
   .examen-textos: rejilla de dos columnas con el isotipo ocupando las dos filas. En pantallas pequeñas se conserva la fila
   compacta con elipsis que define postulante.css (@media 700px). */
@media (min-width: 701px) {
  .examen-identidad { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--esp-3); row-gap: 0; align-items: center; }
  .examen-identidad .logo-examen,
  .examen-identidad:not(:has(.logo-examen))::before { grid-column: 1; grid-row: 1 / span 2; }
  .examen-identidad .examen-textos { grid-column: 2; grid-row: 1 / span 2; }
}
.examen-titulo { color: var(--marino); }
.progreso-texto { color: var(--marino); }
.examen-progreso .barra-progreso { background: var(--primario-claro); }
.examen-progreso .barra-progreso > span { background: var(--primario); }
.examen-reloj { border-color: var(--acento-claro); background: var(--acento-suave); color: var(--marino); border-radius: var(--radio); }
.reloj-valor { font-family: var(--fuente-titulos); }
/* Los estados aviso/urgente del reloj conservan ámbar y rojo (comunican tiempo) */
.pregunta { border: 1px solid var(--borde); border-radius: 20px; }
.pagina-postulante .enunciado { color: var(--texto); }
.btn-leer { color: var(--primario); }

/* Tarjetas de opción: borde celeste, hover azul, selección azul con fondo claro */
.opcion { border-color: var(--opcion-borde); border-radius: var(--radio-grande); }
.opcion:hover { border-color: var(--primario); background: #F7FAFD; }
.opcion[aria-pressed="true"] { border-color: var(--primario); background: var(--primario-claro); box-shadow: 0 0 0 3px var(--primario); }
.opcion-letra { border-color: var(--primario); color: var(--primario); font-family: var(--fuente-titulos); }
.opcion[aria-pressed="true"] .opcion-letra { background: var(--primario); color: #fff; }
.quitar-respuesta .btn-enlace { color: var(--acento-azul); }

/* Navegación inferior y mapa */
.examen-navegacion { background: rgba(243, 246, 250, 0.96); border-top-color: var(--borde); }
.mapa-seccion { border-radius: 20px; }
.mapa-titulo { color: var(--marino); }
.mapa-punto { border-color: var(--celeste); font-family: var(--fuente-titulos); }
button.mapa-punto:hover { border-color: var(--primario); }
.mapa-punto.respondida { background: var(--primario); border-color: var(--primario); }
/* .mapa-punto.actual conserva el anillo ámbar: indica posición, no marca */

.bloqueo-caja { border-radius: 20px; }
.bloqueo-caja p { color: var(--marino); }

/* ---------- Fin (complementa .titulo-fin, .resultado-cifra, .tabla-resultado) ---------- */
.titulo-fin { color: var(--marino); }
.resultado-cifra { font-family: var(--fuente-titulos); font-weight: 800; color: var(--primario); }
.tabla-resultado th { color: var(--texto-secundario); }

/* ---------- Pantallas pequeñas (complementa la cabecera compacta de postulante.css @media 700px) ---------- */
@media (max-width: 700px) {
  .examen-identidad .logo-examen,
  .examen-identidad:not(:has(.logo-examen))::before { width: 24px; height: 24px; }
  .cabecera-postulante .logo-postulante,
  .cabecera-postulante .colegio:not(:has(.logo-postulante))::before { width: 28px; height: 28px; }
}

@media print {
  .pagina-centrada { background: #fff; }
}