/* ---------------------------------------------------------------------------
   Plataforma de evaluaciones — hoja de estilo única.
   Prioridad al celular: todo se apila en una columna y crece desde ahí.
--------------------------------------------------------------------------- */

/* La paleta sale del propio logo: el turquesa oscuro de la silueta, el rojo
   del corazón y el azul claro de la hoja. El amarillo de la USB entra como
   franja de marca, no como color de texto: sobre blanco solo alcanza 1,8 de
   contraste y sería ilegible. El turquesa alcanza 7,0 y sirve para todo. */
:root {
  --tinta: #1c2024;
  --tinta-suave: #55606a;
  --tinta-tenue: #86909a;
  --papel: #fafbfb;
  --superficie: #ffffff;
  --borde: #dde5e7;
  --borde-fuerte: #c2d0d4;

  --acento: #176173;          /* turquesa del logo — 7,0 de contraste */
  --acento-vivo: #1d7689;
  --acento-claro: #e9f2f4;
  --acento-borde: #c3dbe1;
  --azul-suave: #7fb2bf;      /* la hoja del logo */

  --amarillo: #f5b700;        /* USB — solo como franja y realce */
  --amarillo-claro: #fdf3d6;

  --verde: #2f6b4f;
  --verde-claro: #e8f2ec;
  --ambar: #8a6420;
  --ambar-claro: #fbf1dc;
  --rojo: #b23b32;            /* rojo del logo, oscurecido para texto */
  --rojo-vivo: #db433a;       /* el del corazón, para acentos */
  --rojo-claro: #fceceb;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(28, 32, 36, .05), 0 4px 14px rgba(28, 32, 36, .06);
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
}

a { color: var(--acento); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 .9rem; }

.envoltorio {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

.envoltorio-ancho { max-width: 1100px; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
  box-shadow: var(--sombra);
}

.tarjeta + .tarjeta { margin-top: 1rem; }

.tenue { color: var(--tinta-suave); }
.pequeno { font-size: .875rem; }
.centrado { text-align: center; }
.pila > * + * { margin-top: .75rem; }

/* --- Formularios ------------------------------------------------------- */

label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9rem; }

input[type="text"], input[type="email"], input[type="number"],
input[type="datetime-local"], input[type="password"], select, textarea {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  color: inherit;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

textarea { resize: vertical; min-height: 6rem; font-family: inherit; }

.campo + .campo { margin-top: 1rem; }
.ayuda { font-size: .85rem; color: var(--tinta-suave); margin-top: .3rem; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .75rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}

.boton:hover { background: var(--acento-vivo); border-color: var(--acento-vivo); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borde-fuerte); }
.boton-ancho { width: 100%; }
.boton-pequeno { padding: .4rem .7rem; font-size: .85rem; }

/* --- Avisos ------------------------------------------------------------ */

.aviso {
  padding: .8rem 1rem;
  border-radius: 8px;
  border: 1px solid;
  font-size: .92rem;
  margin-bottom: 1rem;
}

.aviso-error { background: var(--rojo-claro); border-color: #efc8c4; color: var(--rojo); }
.aviso-ok { background: var(--verde-claro); border-color: #c3ddd0; color: var(--verde); }
.aviso-atencion { background: var(--ambar-claro); border-color: #ecd9ae; color: var(--ambar); }
.aviso-neutro { background: var(--acento-claro); border-color: var(--acento-borde); color: var(--acento); }

/* --- Examen ------------------------------------------------------------ */

.barra-examen {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* La franja amarilla va pegada a la barra para que no se despegue al
   desplazar: por eso es un ::after y no un div aparte. */
.barra-examen::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: linear-gradient(90deg, var(--amarillo) 0%, var(--amarillo) 38%, var(--acento) 38%);
}

.progreso-texto { font-size: .85rem; color: var(--tinta-suave); font-weight: 600; }

.cronometro {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.05rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--acento-claro);
  color: var(--acento);
  min-width: 4.5rem;
  text-align: center;
}

.cronometro.alerta { background: var(--ambar-claro); color: var(--ambar); }
.cronometro.critico { background: var(--rojo-claro); color: var(--rojo); animation: latido 1s infinite; }

@keyframes latido { 50% { opacity: .55; } }

.barra-progreso { height: 3px; background: var(--borde); }
.barra-progreso span { display: block; height: 100%; background: var(--acento); transition: width .3s; }

.examen {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  max-width: 1150px;
  margin: 0 auto;
  padding: 1rem;
}

@media (min-width: 900px) {
  .examen.con-lectura { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .panel-lectura { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); }
}

.enunciado { font-size: 1.08rem; margin-bottom: 1.25rem; }
.enunciado p:last-child { margin-bottom: 0; }

.panel-lectura {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-lectura header {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--borde);
  background: var(--acento-claro);
}

.panel-lectura header h2 { font-size: .95rem; margin: 0; }
.panel-lectura .cuerpo-lectura {
  padding: 1rem;
  overflow-y: auto;
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.7;
  max-height: 60vh;
}

.buscador-lectura { padding: .6rem 1rem; border-bottom: 1px solid var(--borde); }
.buscador-lectura input { padding: .45rem .6rem; font-size: .9rem; }
mark { background: #fdf0b8; padding: 0 .1em; }

/* --- Tipos de ítem ------------------------------------------------------ */

.opciones { list-style: none; margin: 0; padding: 0; }
.opciones li + li { margin-top: .6rem; }

.opcion {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .8rem .9rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
  cursor: pointer;
  background: var(--superficie);
}

.opcion:hover { border-color: var(--acento); }
.opcion input { margin-top: .25rem; flex: none; }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); }

.pareo { display: grid; gap: .6rem; }
.fila-pareo {
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem;
  padding: .7rem .8rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie);
}

@media (min-width: 620px) {
  .fila-pareo { grid-template-columns: 1fr 13rem; align-items: center; gap: .8rem; }
}

.lista-ordenable { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.lista-ordenable li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem .8rem;
  margin-bottom: .5rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
  cursor: grab;
}

.lista-ordenable li.arrastrando { opacity: .4; border-style: dashed; }
.lista-ordenable li::before {
  counter-increment: paso;
  content: counter(paso);
  flex: none;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--acento-claro);
  color: var(--acento);
  font-size: .8rem; font-weight: 700;
}

.asa { color: var(--tinta-tenue); margin-left: auto; flex: none; }
.botones-mover { display: flex; gap: .25rem; margin-left: auto; flex: none; }
.botones-mover button {
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  border-radius: 6px;
  width: 2rem; height: 2rem;
  cursor: pointer;
  font-size: .9rem;
}

.tarjetas-clasificar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tarjeta-clasificar {
  padding: .5rem .75rem;
  background: var(--acento-claro);
  border: 1px solid var(--acento-borde);
  border-radius: 999px;
  font-size: .9rem;
  cursor: grab;
}

.tarjeta-clasificar.arrastrando { opacity: .4; }

.cajas-categorias { display: grid; gap: .75rem; }
@media (min-width: 620px) { .cajas-categorias { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }

.caja-categoria {
  border: 2px dashed var(--borde-fuerte);
  border-radius: 8px;
  padding: .75rem;
  min-height: 7rem;
  background: var(--superficie);
}

.caja-categoria.encima { border-color: var(--acento); background: var(--acento-claro); }
.caja-categoria h3 { font-size: .9rem; margin-bottom: .5rem; color: var(--tinta-suave); }
.caja-categoria .contenido { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.5rem; }

.texto-completar { font-size: 1.05rem; line-height: 2.4; }
.texto-completar input {
  display: inline-block;
  width: 9rem;
  padding: .25rem .5rem;
  border-radius: 6px;
  border: 1px solid var(--acento);
  background: var(--acento-claro);
}

.banco-palabras { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.banco-palabras span {
  padding: .3rem .65rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  font-size: .85rem;
}

.vf-botones { display: flex; gap: .6rem; margin-bottom: 1rem; }
.vf-botones label {
  flex: 1;
  text-align: center;
  padding: .9rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
  cursor: pointer;
  margin: 0;
  background: var(--superficie);
}

.vf-botones label:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); }
.vf-botones input { position: absolute; opacity: 0; }

.contador-caracteres { font-size: .8rem; color: var(--tinta-suave); text-align: right; margin-top: .25rem; }

.bloque-fuente {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--borde-fuerte);
}

.pie-pregunta { margin-top: 1.5rem; display: flex; justify-content: flex-end; }

/* --- Panel de la profesora --------------------------------------------- */

.cabecera-panel {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: .8rem 1rem;
}

.cabecera-panel .interior {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

.menu-panel { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.menu-panel a { color: var(--tinta-suave); text-decoration: none; font-weight: 600; }
.menu-panel a:hover, .menu-panel a.activo { color: var(--acento); }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }
.tabla-envoltorio { overflow-x: auto; }

.etiqueta {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background: var(--borde);
  color: var(--tinta-suave);
}

.etiqueta-ok { background: var(--verde-claro); color: var(--verde); }
.etiqueta-atencion { background: var(--ambar-claro); color: var(--ambar); }
.etiqueta-error { background: var(--rojo-claro); color: var(--rojo); }

.rejilla { display: grid; gap: 1rem; }
@media (min-width: 720px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } .rejilla-2 { grid-template-columns: repeat(2, 1fr); } }

.dato { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; }
.dato .cifra { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.dato .rotulo { font-size: .82rem; color: var(--tinta-suave); }

.sin-seleccion { user-select: none; -webkit-user-select: none; }

@media print { body { background: #fff; } .barra-examen, .pie-pregunta { display: none; } }

/* Marca de página dentro de la lectura: permite citar «lo vi en la p. 108». */
.cuerpo-lectura .marca-pagina {
  margin: 1.4rem 0 .6rem;
  text-align: center;
  font-family: var(--fuente);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  border-top: 1px solid var(--borde);
  padding-top: .6rem;
}
.cuerpo-lectura p { margin: 0 0 .8rem; text-align: justify; hyphens: auto; }


/* --- Marca: logo y franja de la USB ------------------------------------ */

.marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
}

.marca img { height: 2.4rem; width: auto; flex: none; }
.marca .titulo { font-weight: 700; font-size: 1rem; line-height: 1.15; }
.marca .bajada { font-size: .78rem; color: var(--tinta-suave); }

/* La franja amarilla es el guiño a la USB. Al no llevar texto encima, el
   amarillo puede ir a plena saturación sin problemas de legibilidad. */
.franja-usb {
  height: 4px;
  background: linear-gradient(90deg, var(--amarillo) 0%, var(--amarillo) 38%, var(--acento) 38%);
}

.portada {
  text-align: center;
  margin-bottom: 1.5rem;
}

.portada img { width: 6.5rem; height: auto; }
.portada h1 { margin-top: .75rem; }

.pie-marca {
  margin-top: 2.5rem;
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.pie-marca span { font-size: .76rem; }

.barra-examen .marca img { height: 1.9rem; }

@media (max-width: 560px) {
  .marca .bajada { display: none; }
  .barra-examen .marca img { height: 1.6rem; }
}