/* ============================================================================
   Evalúa Funciones Cognitivas — CEASPE
   Identidad visual: paleta institucional de CEASPE
   ========================================================================= */
:root {
    --verde-institucional: #2E7D32;
    --verde-claro: #A5D75E;
    --coral: #FF5A5F;
    --verde-muy-claro: #F2FAF2;
    --blanco: #FFFFFF;
    --gris-texto: #333333;
    --gris-borde: #DCE7DC;
    --sombra: 0 2px 8px rgba(46, 125, 50, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--verde-muy-claro);
    color: var(--gris-texto);
}

a { color: var(--verde-institucional); }

.contenedor-centrado {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tarjeta {
    background: var(--blanco);
    border-radius: 12px;
    box-shadow: var(--sombra);
    padding: 32px;
    width: 100%;
    max-width: 380px;
}

.tarjeta h1 {
    color: var(--verde-institucional);
    font-size: 1.4rem;
    margin-top: 0;
}

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.marca .punto {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--coral);
    display: inline-block;
}

.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 0.85rem; margin-bottom: 4px; font-weight: 600; }
.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    font-size: 1rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--verde-institucional);
}

.boton {
    display: inline-block;
    background: var(--verde-institucional);
    color: var(--blanco);
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.boton:hover { background: #256628; }
.boton.secundario { background: var(--blanco); color: var(--verde-institucional); border: 1px solid var(--verde-institucional); }
.boton.peligro { background: var(--coral); }

.alerta {
    background: #FFF0F0;
    border: 1px solid var(--coral);
    color: #9c1f22;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

/* Aviso de protección de datos en los formularios con datos del menor.
   Se distingue de .alerta a propósito: no es un error, es una advertencia
   permanente que debe leerse antes de guardar. */
.aviso-proteccion-datos {
    background: #FFF9E6;
    border-left: 4px solid #E0A800;
    color: #5c4600;
    padding: 12px 14px;
    border-radius: 6px;
    margin: 18px 0;
    font-size: 0.85rem;
    line-height: 1.5;
}
.aviso-proteccion-datos code { background: rgba(0, 0, 0, 0.06); padding: 1px 4px; border-radius: 3px; }

/* Layout con navegación lateral (paneles internos) */
.app-shell { display: flex; min-height: 100vh; }

.barra-lateral {
    width: 220px;
    background: var(--verde-institucional);
    color: var(--blanco);
    padding: 24px 0;
    flex-shrink: 0;
}
.barra-lateral .marca { padding: 0 20px 20px; color: var(--blanco); }
.barra-lateral .marca .punto { background: var(--verde-claro); }
.barra-lateral nav a {
    display: block;
    color: var(--blanco);
    opacity: 0.85;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 0.95rem;
}
.barra-lateral nav a:hover, .barra-lateral nav a.activo {
    opacity: 1;
    background: rgba(255,255,255,0.12);
    border-left: 3px solid var(--verde-claro);
}

.contenido-principal { flex: 1; padding: 28px 32px; }

.cabecera-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.cabecera-panel h1 { margin: 0; color: var(--verde-institucional); font-size: 1.5rem; }

.tarjetas-resumen { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.tarjeta-metrica {
    background: var(--blanco);
    border-radius: 10px;
    box-shadow: var(--sombra);
    padding: 18px 22px;
    min-width: 160px;
}
.tarjeta-metrica .valor { font-size: 1.8rem; font-weight: 700; color: var(--verde-institucional); }
.tarjeta-metrica .etiqueta { font-size: 0.85rem; color: #666; }

table.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanco);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--sombra);
}
table.tabla-datos th, table.tabla-datos td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gris-borde);
    font-size: 0.92rem;
}
table.tabla-datos th { background: var(--verde-muy-claro); color: var(--verde-institucional); }

.etiqueta-banda {
    display: inline-block;
    background: var(--verde-claro);
    color: #1f4a22;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.etiqueta-rol {
    display: inline-block;
    background: var(--verde-muy-claro);
    color: var(--verde-institucional);
    border: 1px solid var(--verde-claro);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.78rem;
}

/* ============================================================================
   Motores de prueba (plantillas paramétricas visuales — FASE 4-5)
   Estilos compartidos por los 12 motores de renderizado.

   TAMAÑOS: las actividades escalan con la pantalla. Los motores JS no
   escriben ni un píxel: se limitan a declarar cuántas columnas y filas tiene
   la rejilla (--efc-columnas / --efc-filas) y cuánto puede crecer como mucho
   una celda (--efc-celda-maxima). El tamaño real lo decide aquí el CSS
   tomando el menor de tres límites: el ancho disponible, el alto disponible
   (--efc-alto-estimulo) y ese máximo. Así la actividad llena un monitor
   grande sin desbordar por abajo ni descuadrarse en un móvil.

   Aviso metodológico: al variar el tamaño del estímulo con el dispositivo,
   los tiempos de respuesta NO son estrictamente comparables entre pantallas
   distintas (afecta sobre todo a búsqueda visual y trazado). Por eso cada
   respuesta guarda ahora el tamaño de ventana en sus eventos.
   ========================================================================= */
.efc-enunciado {
    font-size: clamp(1rem, 1.9vmin, 1.45rem);
    text-align: center;
    margin: 0 0 20px;
    line-height: 1.4;
}

/* Figuras SVG dibujadas por código.
   Solo las que NO traen atributo width (las "automáticas") se estiran: así
   un motor puede seguir pidiendo un tamaño fijo si alguna vez hace falta. */
.efc-svg { display: block; }
/* Red de seguridad: si una figura automática apareciera en un sitio sin regla
   propia, que llene su hueco en vez de quedarse en el tamaño por defecto del
   navegador (300px). Va envuelta en :where() para que su especificidad sea
   cero: cualquier regla de contexto de más abajo tiene que ganarle. Sin ese
   :where() este selector (svg + clase + atributo) ganaba a las reglas de
   contexto, y todas las figuras salían a 300px. */
:where(svg.efc-svg:not([width])) { width: 100%; height: 100%; }
.efc-aviso { text-align: center; color: #666; margin: 0 0 12px; }
.efc-zona { display: flex; flex-direction: column; align-items: center; }
.efc-separador { border: none; border-top: 1px solid var(--gris-borde); margin: 16px 0; }
.efc-etiqueta { font-size: clamp(0.85rem, 1.6vmin, 1.15rem); color: #666; }

/* Leyenda figura → valor (clave/código) */
.efc-leyenda { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.efc-leyenda-par {
    display: flex; align-items: center; gap: 6px;
    background: var(--blanco); border: 1px solid var(--gris-borde);
    border-radius: 10px; padding: 6px 10px;
}
.efc-leyenda-par > .efc-svg,
.efc-casilla > .efc-svg {
    width: clamp(34px, 7vmin, 100px);
    height: clamp(34px, 7vmin, 100px);
    flex: none;
}
.efc-leyenda-valor { font-size: clamp(1.1rem, 2.4vmin, 1.8rem); font-weight: 700; color: var(--verde-institucional); }

.efc-secuencia { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; }
.efc-casilla {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: var(--blanco); border: 2px solid var(--gris-borde);
    border-radius: 10px; padding: 8px; cursor: pointer;
}
.efc-casilla.activa { border-color: var(--verde-institucional); box-shadow: 0 0 0 3px rgba(46,125,50,.15); }
.efc-casilla-valor {
    min-width: clamp(30px, 6vmin, 84px); height: clamp(30px, 6vmin, 84px);
    line-height: clamp(30px, 6vmin, 84px); text-align: center;
    border-bottom: 2px solid var(--gris-borde);
    font-size: clamp(1.1rem, 3vmin, 2.4rem); font-weight: 700;
}
.efc-teclado { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.2vmin, 16px); justify-content: center; }
.efc-teclado .boton, .efc-barra-confirmar .boton {
    font-size: clamp(1rem, 2vmin, 1.6rem);
    padding: clamp(10px, 1.3vmin, 18px) clamp(18px, 2.4vmin, 34px);
}

/* Modelo a comparar */
.efc-modelo {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: var(--verde-muy-claro); border-radius: 12px;
    padding: clamp(10px, 1.4vmin, 20px); margin-bottom: 18px;
}
.efc-modelo > .efc-svg {
    width: clamp(48px, 9vmin, 122px);
    height: clamp(48px, 9vmin, 122px);
    flex: none;
}

/* --- Rejillas que escalan con la pantalla --------------------------------
   Fórmula única para cuadrículas y matrices. El ancho final es el menor de:
     · el ancho disponible del contenedor,
     · columnas × tamaño máximo de celda,
     · (alto disponible ÷ filas) × columnas  → evita que una rejilla alta se
       salga por debajo del pliegue, que es lo que pasaría si solo mirásemos
       el ancho.                                                            */
.efc-cuadricula,
.efc-matriz {
    --efc-columnas: 4;
    --efc-filas: 4;
    --efc-celda-maxima: 130px;
    --efc-hueco: clamp(3px, 0.7vmin, 10px);
    display: grid;
    grid-template-columns: repeat(var(--efc-columnas), 1fr);
    gap: var(--efc-hueco);
    justify-content: center;
    width: min(
        100%,
        calc(var(--efc-columnas) * var(--efc-celda-maxima)),
        calc(var(--efc-alto-estimulo, 52vh) / var(--efc-filas) * var(--efc-columnas))
    );
    margin: 0 auto 18px;
}
.efc-celda {
    background: var(--blanco); border: 2px solid var(--gris-borde); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    cursor: pointer; font-weight: 700; color: var(--verde-institucional);
    font-size: clamp(0.9rem, 2.2vmin, 1.6rem);
}
.efc-celda > .efc-svg { width: 74%; height: 74%; }
.efc-celda-figura { cursor: pointer; }

/* Si encima de la rejilla hay un modelo que mirar (cancelación), ese modelo
   también ocupa alto: hay que descontárselo a la rejilla o la actividad se
   sale por debajo justo en las pantallas grandes. */
.efc-modelo ~ .efc-cuadricula,
.efc-modelo ~ .efc-matriz { --efc-alto-estimulo: 54vh; }
.efc-celda.encendida { background: var(--verde-claro); border-color: var(--verde-institucional); }
.efc-celda.marcada { border-color: var(--coral); box-shadow: inset 0 0 0 3px rgba(255,90,95,.25); }
.efc-celda.tocada { background: var(--verde-muy-claro); border-color: var(--verde-institucional); }
.efc-celda.muro { background: #9AA5A0; border-color: #7d8783; cursor: not-allowed; }
.efc-celda.camino { background: var(--verde-claro); border-color: var(--verde-institucional); }
.efc-celda.entrada { background: #cde8a0; }
.efc-celda.salida { border-color: var(--coral); border-width: 3px; }

/* Rejilla de opciones */
.efc-opciones {
    --efc-opcion-tam: clamp(56px, 13vmin, 180px);
    display: flex; flex-wrap: wrap; gap: clamp(8px, 1.4vmin, 20px); justify-content: center;
}
.efc-opcion {
    background: var(--blanco); border: 2px solid var(--gris-borde); border-radius: 12px;
    padding: clamp(10px, 1.4vmin, 18px); cursor: pointer; display: flex; flex-direction: column;
    align-items: center; gap: 6px; min-width: 76px; position: relative;
}
.efc-opcion > .efc-svg {
    /* El valor por defecto no es decorativo: si una tarjeta vive fuera de
       .efc-opciones (las duraciones, p. ej.) la variable no existiría y el
       ancho se quedaría sin resolver. */
    width: var(--efc-opcion-tam, clamp(56px, 13vmin, 180px));
    height: var(--efc-opcion-tam, clamp(56px, 13vmin, 180px));
}
.efc-opcion:hover { border-color: var(--verde-institucional); }
.efc-opcion.elegida { border-color: var(--verde-institucional); background: var(--verde-muy-claro); }
.efc-opcion-texto { font-size: clamp(0.9rem, 1.8vmin, 1.25rem); }
.efc-orden-marca {
    position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px;
    line-height: 22px; text-align: center; border-radius: 50%;
    background: var(--verde-institucional); color: var(--blanco);
    font-size: 0.8rem; font-weight: 700;
}
.efc-orden-marca:empty { display: none; }

/* Matriz de combinatoria (medidas: ver el bloque de rejillas de arriba) */
.efc-celda-matriz {
    display: flex; align-items: center; justify-content: center;
    background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: 10px;
    padding: clamp(4px, 0.9vmin, 12px); aspect-ratio: 1 / 1;
}
.efc-celda-matriz > .efc-svg { width: 100%; height: 100%; }
.efc-celda-matriz.vacia { border-style: dashed; border-color: var(--coral); }
.efc-interrogacion { font-size: clamp(1.6rem, 4.5vmin, 3.4rem); font-weight: 700; color: var(--coral); }

/* Trail Making */
.efc-lienzo {
    position: relative;
    width: min(100%, var(--efc-alto-estimulo, 52vh), 760px);
    aspect-ratio: 1 / 1;
    margin: 0 auto; background: var(--blanco);
    border: 1px solid var(--gris-borde); border-radius: 12px;
}
.efc-trazo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.efc-nodo {
    position: absolute; transform: translate(-50%, -50%);
    width: clamp(34px, 5.4vmin, 62px); height: clamp(34px, 5.4vmin, 62px); border-radius: 50%;
    border: 2px solid var(--verde-institucional); background: var(--blanco);
    color: var(--verde-institucional); font-size: clamp(0.85rem, 1.9vmin, 1.4rem);
    font-weight: 700; cursor: pointer;
}
.efc-nodo.tocado { background: var(--verde-claro); color: #1f4a22; }

/* Figuras de celdas (rotación mental) */
.efc-figura-celdas {
    --efc-columnas: 3;
    display: grid;
    grid-template-columns: repeat(var(--efc-columnas), 1fr);
    gap: 2px;
    width: var(--efc-figura-tam, 96px);
    aspect-ratio: 1 / 1;
}
.efc-modelo .efc-figura-celdas { --efc-figura-tam: clamp(84px, 19vmin, 250px); }
.efc-opcion .efc-figura-celdas { --efc-figura-tam: clamp(70px, 15vmin, 205px); }
.efc-bloque { background: #EDF1ED; border-radius: 3px; aspect-ratio: 1 / 1; }
.efc-bloque.activo { background: var(--verde-institucional); }

/* Calendario */
.efc-calendario {
    background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: 12px;
    padding: clamp(12px, 1.6vmin, 22px);
    /* Que la caja se ajuste al calendario y no al ancho entero de la pantalla:
       si no, quedaba un marco blanco enorme alrededor de una rejilla pequeña. */
    width: fit-content; max-width: 100%; margin: 0 auto 18px;
}
.efc-mes-titulo {
    text-align: center; font-weight: 700; color: var(--verde-institucional);
    font-size: clamp(1rem, 2vmin, 1.5rem); margin-bottom: 10px;
}
/* Solo la primera letra en mayúscula: con text-transform: capitalize salía
   "Septiembre De 2026". */
.efc-mes-titulo::first-letter { text-transform: uppercase; }
.efc-calendario-rejilla {
    display: grid;
    grid-template-columns: repeat(7, clamp(30px, 6.5vmin, 80px));
    gap: clamp(3px, 0.6vmin, 8px); justify-content: center;
}
.efc-dia-cabecera { text-align: center; font-size: clamp(0.7rem, 1.4vmin, 1rem); color: #888; font-weight: 700; }
.efc-dia {
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; background: var(--verde-muy-claro);
    font-size: clamp(0.78rem, 1.7vmin, 1.2rem);
}
.efc-dia.vacio { background: transparent; }
.efc-dia.objetivo { background: var(--coral); color: var(--blanco); font-weight: 700; }

/* Duraciones */
.efc-lista-duracion { display: flex; flex-direction: column; gap: clamp(10px, 1.6vmin, 22px); align-items: center; }
.efc-duracion { flex-direction: row; gap: 14px; align-items: center; min-width: min(100%, 240px); }
.efc-duracion > .efc-svg {
    width: var(--efc-opcion-tam, clamp(60px, 12vmin, 165px));
    height: var(--efc-opcion-tam, clamp(60px, 12vmin, 165px));
    flex: none;
}
.efc-barra-fondo {
    width: clamp(150px, 26vmin, 340px); height: clamp(18px, 2.6vmin, 34px);
    background: #EDF1ED; border-radius: 10px; overflow: hidden; flex: none;
}
.efc-barra-relleno { height: 100%; background: var(--verde-claro); }

.efc-barra-confirmar { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }

/* Pantalla de ejecución (la que ve la persona evaluada) */
.cuerpo-ejecucion { display:flex; align-items:flex-start; justify-content:center; min-height:100vh; padding:clamp(8px,2vmin,28px) 0; }
.pantalla-ejecucion {
    width:100%;
    max-width:1120px;
    padding:clamp(12px,2vmin,28px);
    /* Alto que puede ocupar el estímulo principal. Descuenta el enunciado, la
       barra de progreso y el botón de confirmar; por eso no es 100vh. */
    --efc-alto-estimulo: 62vh;
}
/* En pantallas bajas (portátiles 768px de alto, tabletas apaisadas) hay que
   ser más prudente con el alto o la rejilla empuja el botón fuera de vista. */
@media (max-height: 820px) {
    .pantalla-ejecucion { --efc-alto-estimulo: 54vh; }
    .efc-modelo ~ .efc-cuadricula,
    .efc-modelo ~ .efc-matriz { --efc-alto-estimulo: 47vh; }
}
@media (orientation: portrait) {
    .pantalla-ejecucion { --efc-alto-estimulo: 60vh; }
    .efc-modelo ~ .efc-cuadricula,
    .efc-modelo ~ .efc-matriz { --efc-alto-estimulo: 52vh; }
}
.pantalla-ejecucion .aviso-fin { text-align:center; }
.pantalla-ejecucion .aviso-fin h1 { color:var(--verde-institucional); }
.pantalla-ejecucion .barra-progreso { height:8px; background:var(--gris-borde); border-radius:4px; overflow:hidden; margin-bottom:18px; }
.pantalla-ejecucion .barra-progreso > div { height:100%; background:var(--verde-claro); transition:width .3s; }
.cabecera-prueba { text-align:center; color:#888; font-size:0.85rem; margin-bottom:14px; }
.marco-feedback { border-radius:14px; transition:box-shadow .2s; padding:4px; }
.marco-feedback.acierto { box-shadow:0 0 0 4px rgba(46,125,50,.35); }
.marco-feedback.fallo { box-shadow:0 0 0 4px rgba(255,90,95,.35); }

/* ============================================================================
   Informes (FASE 6)
   El informe se lee en pantalla y se imprime (o se guarda como PDF) desde el
   propio navegador: no hay generación de PDF en el servidor, así que lo que
   se ve es exactamente lo que sale impreso.
   ========================================================================= */
.informe {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: 12px;
    box-shadow: var(--sombra);
    padding: 34px 38px;
    max-width: 860px;
}

.informe-cabecera {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
    border-bottom: 3px solid var(--verde-institucional);
    padding-bottom: 14px; margin-bottom: 18px;
}
.informe-centro { font-size: 0.85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--verde-institucional); font-weight: 700; }
.informe-titulo { margin: 4px 0 0; font-size: 1.5rem; color: var(--gris-texto); }
.informe-meta { text-align: right; font-size: 0.9rem; color: #555; line-height: 1.5; }
.informe-codigo { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.78rem; color: #777; }

.informe-aviso-cabecera {
    background: #FFF6E8; border: 1px solid #E8C98A; border-radius: 8px;
    padding: 10px 14px; font-size: 0.86rem; line-height: 1.5; margin: 0 0 22px;
}

.informe-seccion { margin-bottom: 26px; }
.informe-seccion h2 {
    font-size: 1.05rem; color: var(--verde-institucional);
    border-bottom: 1px solid var(--gris-borde); padding-bottom: 5px; margin: 0 0 12px;
}
.informe-subtitulo { font-size: 0.95rem; margin: 14px 0 4px; color: var(--gris-texto); }
.informe-seccion p { line-height: 1.6; margin: 0 0 10px; }
.informe-seccion ul { line-height: 1.55; margin: 0 0 10px; padding-left: 20px; }

.informe-grafico {
    /* Tope de ancho: sin él, al imprimir (donde el informe ocupa toda la
       página) el gráfico se estiraba hasta quedar desproporcionado. */
    width: 100%; max-width: 640px; height: auto; display: block; margin: 6px auto 12px;
}
.informe-pie-grafico, .informe-nota { font-size: 0.82rem; color: #666; line-height: 1.5; }

.tabla-informe { box-shadow: none; border: 1px solid var(--gris-borde); font-size: 0.88rem; }
.tabla-informe .fila-dominio td { background: var(--verde-muy-claro); }
.tabla-informe .fila-prueba td:first-child { padding-left: 30px; color: #555; }
.tabla-informe .fila-total td { background: #EDF4ED; border-top: 2px solid var(--verde-claro); }
.tabla-informe .margen { color: #777; font-size: 0.8rem; white-space: nowrap; }
.tabla-informe .sin-dato { color: #999; font-size: 0.8rem; }

.informe-limitaciones { background: var(--verde-muy-claro); border-radius: 10px; padding: 16px 18px; }
.informe-limitaciones h2 { border-bottom-color: var(--verde-claro); }
.informe-limitaciones li { font-size: 0.86rem; margin-bottom: 6px; }

.informe-pie {
    border-top: 1px solid var(--gris-borde); padding-top: 10px; margin-top: 8px;
    font-size: 0.75rem; color: #888; line-height: 1.5;
}

/* --- Impresión ----------------------------------------------------------
   Se quita todo lo que no es el informe (navegación, botones, histórico de
   versiones) y se deja el documento a sangre, para que el PDF que guarde el
   navegador sirva tal cual para entregar a una familia. */
@media print {
    @page { margin: 14mm; }

    body { background: var(--blanco); }
    .barra-lateral, .no-imprimir, .cabecera-panel { display: none !important; }
    .app-shell { display: block; }
    .contenido-principal { padding: 0; }

    .informe {
        border: none; box-shadow: none; border-radius: 0;
        padding: 0; max-width: none;
    }
    /* Que un apartado no se parta por la mitad entre dos páginas. */
    .informe-seccion, .informe-limitaciones { break-inside: avoid; page-break-inside: avoid; }
    .informe-seccion h2 { break-after: avoid; page-break-after: avoid; }
    .tabla-informe tr { break-inside: avoid; page-break-inside: avoid; }
    .informe-pie { break-before: avoid; }

    a { text-decoration: none; color: inherit; }
}

/* ===========================================================================
   ZONA DEL ALUMNO (FASE 8)
   Pantallas que ve un niño: más grandes, más espaciadas y con menos texto que
   las del profesional. Mismo verde institucional para que se note que es la
   misma plataforma.
   ======================================================================== */

.acceso-alumno {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(160deg, #EAF6EA 0%, #F4FAF4 60%);
}
.tarjeta-acceso-alumno {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: 16px;
    padding: 32px 28px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 6px 22px rgba(46, 125, 50, 0.08);
}
.tarjeta-acceso-alumno h1 { font-size: 1.35rem; color: var(--verde-institucional); margin: 4px 0 20px; }
.marca-alumno { display: flex; align-items: center; gap: 8px; color: var(--verde-institucional); font-size: 0.9rem; }
.marca-alumno .punto { width: 11px; height: 11px; border-radius: 50%; background: #8BC34A; display: inline-block; }
.tarjeta-acceso-alumno input { font-size: 1.05rem; padding: 12px 14px; }
.boton-grande { width: 100%; padding: 14px 18px; font-size: 1.05rem; margin-top: 6px; }
.pie-acceso-alumno { font-size: 0.85rem; color: #666; margin: 18px 0 0; line-height: 1.5; }

.zona-alumno { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }
.cabecera-alumno {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.cabecera-alumno h1 { color: var(--verde-institucional); margin: 0 0 4px; font-size: 1.5rem; }
.cabecera-alumno p { margin: 0; color: #666; }
.nav-alumno { display: flex; gap: 14px; font-size: 0.92rem; }
.nav-alumno a { color: var(--verde-institucional); text-decoration: none; }
.nav-alumno a:hover { text-decoration: underline; }

/* Tarjetas del plan y de la evaluación en la zona del alumno (FASE 22).
   La .tarjeta general está pensada para formularios estrechos (380px); aquí
   son bloques anchos que encabezan la pantalla. */
.zona-alumno .tarjeta-plan,
.zona-alumno .tarjeta-evaluacion {
    max-width: none;
    margin-bottom: 20px;
    padding: 24px 28px;
}
.zona-alumno .tarjeta-evaluacion {
    border-left: 5px solid var(--verde-institucional);
}
.zona-alumno .tarjeta-plan h2,
.zona-alumno .tarjeta-evaluacion h2 {
    color: var(--verde-institucional);
}

.rejilla-dominios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.tarjeta-dominio {
    width: 100%;
    background: var(--blanco);
    border: 2px solid var(--gris-borde);
    border-radius: 14px;
    padding: 24px 16px;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-family: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.tarjeta-dominio:hover { border-color: var(--verde-institucional); transform: translateY(-2px); }
.icono-dominio { font-size: 2.4rem; line-height: 1; }
.nombre-dominio { font-size: 1.02rem; font-weight: 600; color: var(--gris-texto); text-align: center; }
.pie-alumno { color: #666; font-size: 0.9rem; margin-top: 24px; }

.lista-sesiones { list-style: none; padding: 0; margin: 0; }
.lista-sesiones li {
    display: flex; gap: 12px; align-items: baseline;
    padding: 9px 0; border-bottom: 1px solid var(--gris-borde); font-size: 0.92rem;
}
.lista-sesiones li:last-child { border-bottom: none; }
.fecha-sesion { color: #777; min-width: 90px; }
.dominio-sesion { flex: 1; }
.acierto-sesion { color: var(--verde-institucional); font-weight: 600; }

/* Credenciales recién creadas: se ven una sola vez, así que tienen que
   cantar en la pantalla para que nadie las pase por alto. */
.aviso-credenciales {
    background: #EFF7EF;
    border-left: 4px solid var(--verde-institucional);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 0.88rem;
    line-height: 1.5;
}
.credenciales { margin: 8px 0 0; line-height: 2; }
.credenciales code {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 1rem;
    user-select: all;
}

@media (max-width: 520px) {
    .rejilla-dominios { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .cabecera-alumno h1 { font-size: 1.3rem; }
}

/* ---------------------------------------------------------------------------
   FASE 10 — actividades de presentación secuencial (span de dígitos, doble
   tarea, cálculo en cadena). Todas comparten el mismo patrón: un estímulo
   grande y solo en el centro de la pantalla, que aparece y se borra.
   El tamaño va en vmin para que crezca con la pantalla, igual que el resto de
   las actividades: un número diminuto en un monitor de aula no se ve desde la
   silla de al lado.
--------------------------------------------------------------------------- */
.efc-digito-grande {
    font-size: clamp(3.5rem, 18vmin, 11rem);
    font-weight: 700;
    color: var(--verde-institucional);
    line-height: 1;
    min-height: clamp(4rem, 20vmin, 12rem);
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.efc-digito-grande.operacion { color: var(--coral); }

.efc-estimulo {
    width: clamp(120px, 26vmin, 300px);
    height: clamp(120px, 26vmin, 300px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    transition: background-color .12s ease;
}
.efc-estimulo.pulsado { background: var(--verde-claro); }
.efc-estimulo > .efc-svg { width: 100%; height: 100%; }

/* El botón de detección va en gris pizarra, no en el verde institucional.
   En esta actividad el niño está contando figuras de un color concreto, y uno
   de los colores posibles es ese mismo verde: un botón grande del color que se
   está contando es una trampa que no mide atención, mide diseño descuidado.
   Este gris no aparece en ninguna de las dos paletas de estímulos. */
.efc-boton-deteccion {
    font-size: clamp(1rem, 2.4vmin, 1.5rem);
    padding: clamp(12px, 2vmin, 22px) clamp(24px, 5vmin, 56px);
    background: #3F4844;
    border-color: #3F4844;
    color: var(--blanco);
}
.efc-boton-deteccion:hover { background: #2E3532; border-color: #2E3532; }

.efc-regla {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.6vmin, 18px);
    background: var(--verde-muy-claro);
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    padding: clamp(10px, 1.6vmin, 18px);
    margin-bottom: 12px;
    max-width: 60ch;
}
.efc-regla-numero {
    flex: 0 0 auto;
    width: clamp(26px, 3.4vmin, 38px);
    height: clamp(26px, 3.4vmin, 38px);
    border-radius: 50%;
    background: var(--verde-institucional);
    color: var(--blanco);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.efc-regla-texto { flex: 1 1 auto; font-size: clamp(0.9rem, 1.8vmin, 1.2rem); }
.efc-regla-muestra {
    flex: 0 0 auto;
    width: clamp(44px, 7vmin, 90px);
    height: clamp(44px, 7vmin, 90px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.efc-regla-muestra > .efc-svg { width: 100%; height: 100%; }

.efc-muestra-color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .12);
}

.efc-recordatorio {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(10px, 2vmin, 24px);
    opacity: .75;
}
.efc-recordatorio-figura,
.efc-recordatorio > .efc-muestra-color {
    width: clamp(30px, 4.5vmin, 56px);
    height: clamp(30px, 4.5vmin, 56px);
}
.efc-recordatorio-figura > .efc-svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------------------
   FASE 11 — Hoja de información y consentimiento para las familias.
   Se imprime y se entrega en papel, así que va en un ancho de folio y sin
   nada de la navegación del panel.
--------------------------------------------------------------------------- */
.cuerpo-hoja {
    background: var(--verde-muy-claro);
    margin: 0;
    padding: 24px 16px 60px;
}
.hoja-acciones {
    max-width: 780px;
    margin: 0 auto 16px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.hoja {
    max-width: 780px;
    margin: 0 auto;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    padding: clamp(24px, 5vw, 56px);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #2b302d;
}
.hoja-cabecera { border-bottom: 3px solid var(--verde-institucional); padding-bottom: 14px; margin-bottom: 24px; }
.hoja-centro { font-size: 0.8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-institucional); font-weight: 700; }
.hoja h1 { font-size: 1.5rem; margin: 6px 0 2px; }
.hoja-subtitulo { margin: 0; color: #666; font-size: 0.95rem; }
.hoja h2 { font-size: 1.05rem; color: var(--verde-institucional); margin: 26px 0 8px; }
.hoja p { margin: 0 0 10px; }
.hoja ul { margin: 0 0 10px; padding-left: 20px; }
.hoja li { margin-bottom: 4px; }
.hoja-destacado {
    background: #FFF9E6;
    border-left: 4px solid #E0A800;
    padding: 12px 14px;
    border-radius: 6px;
}
.hoja-firma { border-top: 1px solid var(--gris-borde); margin-top: 30px; padding-top: 8px; }
.hoja-casillas { line-height: 2; }
.hoja-rubrica { display: flex; gap: 40px; margin: 34px 0 18px; font-size: 0.85rem; color: #666; }
.hoja-rubrica > div { flex: 1; }
.hoja-linea { display: block; border-bottom: 1px solid #999; height: 38px; margin-bottom: 6px; }
.hoja-pie { font-size: 0.82rem; color: #666; }

@media print {
    .cuerpo-hoja { background: #fff; padding: 0; }
    .hoja { border: none; border-radius: 0; padding: 0; max-width: none; font-size: 10.5pt; }
    .hoja-acciones { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Hoja de protocolo (FASE 14). Reutiliza .hoja; solo añade lo que necesita la
   tabla de guiones, que es lo único que la hoja de consentimiento no tenía.
--------------------------------------------------------------------------- */
.hoja h3 { font-size: 0.95rem; margin: 18px 0 6px; color: #2b302d; }
.hoja-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    margin-bottom: 12px;
}
.hoja-tabla th,
.hoja-tabla td {
    border: 1px solid var(--gris-borde);
    padding: 7px 9px;
    text-align: left;
    vertical-align: top;
}
.hoja-tabla th { background: var(--verde-muy-claro); color: var(--verde-institucional); font-size: 0.82rem; }
.hoja-nota { font-size: 0.8rem; color: #666; }

@media print {
    /* Que un dominio no se parta por la mitad entre dos páginas si cabe entero. */
    .hoja-tabla { page-break-inside: auto; }
    .hoja-tabla tr { page-break-inside: avoid; }
    .hoja h3 { page-break-after: avoid; }
}

/* ---------------------------------------------------------------------------
   FASE 16 — los tres dominios de la V2 (razonamiento lógico, percepción
   visual y orientación espacial). Todo lo de aquí abajo es estímulo de
   actividad; nada de esto aparece en el panel del profesional.
--------------------------------------------------------------------------- */

/* Listas de pistas y de pasos. Se leen antes de responder, así que van
   centradas y con aire: en una pantalla de tableta compiten con el estímulo. */
.efc-pistas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    margin: 10px 0 14px;
}
.efc-pista {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.95rem, 2vmin, 1.3rem);
    color: #2b302d;
}
.efc-paso-numero { color: #666; font-variant-numeric: tabular-nums; }
.efc-flecha-paso { font-size: 1.4em; line-height: 1; color: var(--verde-institucional); }

/* Montón desordenado de figuras (combinación faltante). Se envuelve solo y
   NO en cuadrícula: ordenado, el hueco se vería de un vistazo. */
.efc-monton-figuras {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(6px, 1.5vmin, 16px);
    max-width: 62vmin;
    margin: 0 auto 14px;
}
.efc-monton-figura {
    width: clamp(38px, 7vmin, 78px);
    aspect-ratio: 1 / 1;
}

/* Figura con tamaño y giro propios (constancia de forma). El hueco es
   siempre igual de grande para que el tamaño de la figura no cambie la
   posición de las demás opciones. */
.efc-figura-transformada {
    width: clamp(70px, 15vmin, 200px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.efc-figura-transformada > .efc-svg { width: 100%; height: 100%; }

/* Lienzo de figuras superpuestas (figura-fondo). */
.efc-lienzo-superpuesto {
    position: relative;
    width: min(52vmin, 420px);
    aspect-ratio: 1 / 1;
    margin: 0 auto 14px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
}
.efc-capa-figura {
    position: absolute;
    width: 42%;
    aspect-ratio: 1 / 1;
    transform-origin: center;
}
.efc-capa-figura > .efc-svg { width: 100%; height: 100%; }

/* Construcción de cubos en perspectiva (3D ↔ 2D). */
.efc-caja-construccion {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.efc-construccion { width: min(40vmin, 320px); height: auto; }

/* Monigote de lateralidad. */
.efc-caja-monigote {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
/* El marco mide exactamente lo que el dibujo, para que el objeto de la mano
   se posicione respecto al muñeco y no respecto al ancho de la pantalla. */
.efc-marco-monigote { position: relative; width: min(26vmin, 190px); }
/* El objeto que el monigote sujeta se dibuja encima del SVG, centrado en la
   mano, para reutilizar el mismo dibujante de figuras que el resto de las
   actividades. */
.efc-objeto-mano {
    position: absolute;
    width: 24%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
}
.efc-objeto-mano > .efc-svg { width: 100%; height: 100%; }
.efc-monigote { width: 100%; height: auto; display: block; }

/* Casilla de salida de la tarea de direccionalidad. */
.efc-celda.salida {
    background: var(--verde-claro);
    border-color: var(--verde-institucional);
}
.efc-marca-salida { color: var(--verde-institucional); font-size: 1.6em; line-height: 1; }

/* Tablero con rótulos de letras y números (coordenadas). Es una cuadrícula
   con una fila y una columna de más para las etiquetas. */
.efc-tablero-coordenadas {
    display: grid;
    grid-template-columns: repeat(var(--efc-columnas), 1fr);
    gap: 4px;
    width: min(
        calc(var(--efc-columnas) * var(--efc-celda-maxima)),
        min(82vw, 62vh)
    );
    margin: 0 auto;
}
.efc-tablero-coordenadas .efc-celda { aspect-ratio: 1 / 1; }
.efc-rotulo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    font-weight: 700;
    color: var(--verde-institucional);
    font-size: clamp(0.85rem, 2vmin, 1.2rem);
}
.efc-rotulo.esquina { visibility: hidden; }

/* ---------------------------------------------------------------------------
   FASE 17 — inhibición de respuesta (Stroop de flechas) y actualización
   (n-back).
--------------------------------------------------------------------------- */

/* La flecha se dibuja grande: el estímulo tiene que leerse de un vistazo,
   porque el tiempo que se mide es el de decidir, no el de verla. */
.efc-flecha-estimulo { width: 100%; height: 100%; }
.efc-regla-muestra > .efc-flecha-estimulo { width: clamp(44px, 8vmin, 90px); height: auto; }

/* Ejemplo del n-back: la regla se enseña con figuras, no con palabras.
   «Igual a la de dos antes» es difícil de entender leído y fácil de ver. */
.efc-ejemplo-nback {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 12px 0;
}
.efc-ejemplo-casilla {
    width: clamp(46px, 9vmin, 96px);
    aspect-ratio: 1 / 1;
    padding: 6px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
}
.efc-ejemplo-casilla.senalada {
    border-color: var(--verde-institucional);
    box-shadow: 0 0 0 3px var(--verde-claro);
}
.efc-ejemplo-casilla > .efc-svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------------------
   FASE 18 — tareas propias de la banda de 5 a 7 años.

   Principio común: nada desaparece de la pantalla. A esa edad, una consigna
   que se va deja de existir, y la actividad pasaría a medir memoria.
--------------------------------------------------------------------------- */
.efc-consignas {
    display: flex;
    justify-content: center;
    gap: clamp(14px, 4vmin, 40px);
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.efc-consigna { display: flex; align-items: center; gap: 8px; }
.efc-consigna-texto { font-size: clamp(0.9rem, 1.9vmin, 1.2rem); color: #2b302d; }
.efc-consigna-muestra {
    width: clamp(34px, 6vmin, 62px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.efc-consigna-muestra > .efc-svg { width: 100%; height: 100%; }

/* Clasificación con cambio de criterio. */
.efc-regla-vigente {
    text-align: center;
    font-size: clamp(0.95rem, 2vmin, 1.3rem);
    font-weight: 700;
    color: var(--verde-institucional);
    margin: 0 0 12px;
}
.efc-regla-vigente.cambiada { color: #9c1f22; }
.efc-mesa-clasificacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 3vmin, 30px);
}
.efc-tarjeta-actual {
    width: clamp(90px, 18vmin, 180px);
    min-height: clamp(90px, 18vmin, 180px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--blanco);
    border: 2px solid var(--gris-borde);
    border-radius: 14px;
}
.efc-tarjeta-actual > .efc-svg { width: 100%; height: 100%; }
.efc-contador-tarjetas { font-size: 0.78rem; color: #888; }
.efc-bandejas { display: flex; gap: clamp(16px, 5vmin, 56px); }
.efc-bandeja {
    width: clamp(80px, 16vmin, 160px);
    aspect-ratio: 1 / 1;
    padding: 12px;
    background: var(--verde-muy-claro);
    border: 2px dashed var(--verde-institucional);
    border-radius: 14px;
    cursor: pointer;
}
.efc-bandeja > .efc-svg { width: 100%; height: 100%; }
.efc-bandeja.elegida { background: var(--verde-claro); border-style: solid; }
.efc-aviso-cambio {
    font-size: clamp(0.95rem, 2vmin, 1.25rem);
    font-weight: 700;
    color: #9c1f22;
    text-align: center;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   FASE 19 — arrastrar y girar piezas.

   El clon flotante va en <body> y no dentro de la actividad: si colgara del
   contenedor, cualquier `overflow: hidden` de un ancestro lo recortaría al
   sacarlo de su caja.
--------------------------------------------------------------------------- */
.efc-arrastrable { cursor: grab; touch-action: none; user-select: none; }
.efc-arrastrable.arrastrando { opacity: 0.35; cursor: grabbing; }
.efc-arrastrable.bloqueada { cursor: default; }
.efc-clon-arrastre {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0.92;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28));
}
.efc-destino-activo {
    background: var(--verde-claro) !important;
    border-color: var(--verde-institucional) !important;
    border-style: solid !important;
}

/* Rompecabezas (FASE 19). El tablero y la bandeja van uno al lado del otro en
   pantalla ancha y uno debajo del otro en tableta vertical. */
.efc-mesa-puzle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(16px, 5vmin, 56px);
    margin-bottom: 12px;
}
.efc-tablero-puzle {
    display: grid;
    grid-template-columns: repeat(var(--efc-columnas), 1fr);
    gap: 4px;
    padding: 6px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: 12px;
    width: min(46vmin, 380px);
}
.efc-hueco-puzle {
    aspect-ratio: 1 / 1;
    background: var(--verde-muy-claro);
    border: 2px dashed var(--gris-borde);
    border-radius: 8px;
    padding: 3px;
}
.efc-bandeja-piezas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 8px;
    width: min(40vmin, 320px);
    min-height: clamp(90px, 20vmin, 200px);
    padding: 8px;
    background: #EDF1ED;
    border-radius: 12px;
}
.efc-pieza-puzle {
    display: grid;
    grid-template-columns: repeat(var(--efc-columnas), 1fr);
    gap: 2px;
    width: clamp(48px, 11vmin, 110px);
    aspect-ratio: 1 / 1;
    padding: 3px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
}
/* Puesta en el tablero, la pieza llena el hueco y pierde su propio marco:
   con borde propio, las juntas se verían y el dibujo no se leería entero. */
.efc-hueco-puzle > .efc-pieza-puzle {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
}

/* Modelo del rompecabezas. Va en la misma mesa que el tablero y la bandeja,
   y con el mismo tamaño que el tablero para que se puedan comparar de un
   vistazo sin tener que escalar mentalmente. */
.efc-modelo-puzle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.efc-figura-modelo-puzle {
    display: grid;
    grid-template-columns: repeat(var(--efc-columnas), 1fr);
    gap: 2px;
    width: min(34vmin, 280px);
    padding: 6px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: 12px;
}
.efc-figura-modelo-puzle > .efc-bloque { aspect-ratio: 1 / 1; }