/* =====================================================================
   TAU — CAPA DE IDENTIDAD  (2026-07-30)

   El visor del Tau estaba excluido a propósito del sistema de diseño
   (ver cabecera de fontan-design-system.css: "admin panel y visor TAU se
   excluyen explícitamente"). Por eso se sentía otra plataforma: usaba una
   paleta azul costera (#3d5a80 / #98c1d9 / #ee6c4d) sin relación con el
   violeta #50007D y el cian #00C8FF de la marca.

   Esta hoja se carga DESPUÉS de tau.css, tau-visor.css y visor-un-tau.css
   y solo reasigna color, tipografía y ritmo. No toca la estructura ni el
   renderizado del contenido del tau.

   Qué se conserva deliberadamente:
     · La sangría graduada Diálogo → Recuadro → Comentario, que ES el flujo
       de la conversación. Aquí se formaliza como escala y se hace responsiva
       (antes eran 30/50/125 px fijos, que en móvil desbordaban).
     · Los nombres de clase y la jerarquía sección → subsección → pregunta.

   Qué se corrige:
     · Barras sólidas de altura fija (parecían encabezados de formulario)
       → jerarquía tipográfica con un filete de marca.
     · Zona de respuesta rellena de color (parecía un input deshabilitado)
       → superficie clara con acento al costado.
     · Interlineados de 1.1–1.2 en texto de lectura → ritmo legible.
   ===================================================================== */


/* ── 1. PUENTE DE COLOR ──────────────────────────────────────────────
   Las tres variables azules están referenciadas en tau.css, tau-visor.css
   y visor-un-tau.css. En vez de editar los tres archivos, se reasignan
   aquí a los tokens de marca. Los nombres quedan por compatibilidad.
   -------------------------------------------------------------------- */
:root {
    --tau-azul-oscuro: #50007D;              /* era #3d5a80 → violeta marca */
    --tau-azul-claro:  #6A00A8;              /* era #98c1d9 → violeta medio */
    --tau-azul-medio:  #0099CC;              /* era #6E98AF → cian legible  */

    /* Superficies. El fondo era #F5F1FC, un violeta muy desaturado: en pantalla
       grande, con tanta superficie seguida, no se leía como "neutro de marca"
       sino como un morado apagado. Ahora son dos grises casi blancos:
         --tau-fondo    → la página entera (#tau-pagina)
         --tau-subfondo → la columna de lectura (#tau-contenedor), un punto más
                          oscura para que la tarjeta blanca de la pregunta
                          despegue del papel. */
    --tau-fondo:        #FCFCFC;
    --tau-subfondo:     #F7F7F7;
    --tau-superficie:   #FFFFFF;
    /* Tinta de lectura: negro. Era #1A0033, un violeta muy oscuro que sobre
       fondo casi blanco se leía apagado en los textos largos. */
    --tau-tinta:        #000000;
    --tau-tinta-suave:  #6B5680;
    --tau-filete:       rgba(80, 0, 125, 0.14);
    --tau-realce:       rgba(0, 200, 255, 0.10);

    /* Escala de sangría = flujo de conversación. Responsiva:
       en móvil colapsa casi a cero, en escritorio mantiene el ritmo
       original (≈30 / 50 / 125 px). */
    --tau-sangria-1: clamp(0.6rem, 2.4vw, 1.9rem);
    --tau-sangria-2: clamp(0.9rem, 4vw, 3.1rem);
    --tau-sangria-3: clamp(1.4rem, 9vw, 7.8rem);
    --tau-margen-d:  clamp(0.6rem, 6vw, 6.25rem);

    --tau-medida: 68ch;   /* ancho de lectura cómodo */

    /* Redondeo de la tarjeta de pregunta. Era 5px en tau.css, que a este tamaño
       de caja se lee como esquina viva. Se toma el radio grande del design
       system (24px). */
    --tau-radio-pregunta: var(--fd-radius-lg, 24px);
}


/* ── 2. PÁGINA Y TIPOGRAFÍA ──────────────────────────────────────────
   El resto de la plataforma (app.css, plan-curso.css) usa la pila
   'Outfit','Plus Jakarta Sans'. El visor del Tau se había quedado en
   fuentes del sistema (-apple-system / 'Segoe UI'), y eso solo ya lo
   hacía sentir de otro producto. Se unifica.
   Nota: Outfit SÍ está cargada — la importa app.css en su primera línea desde
   Google Fonts. (Este comentario decía lo contrario y era falso; por fiarse de
   él se dejó el chat clavado a Plus Jakarta Sans y se veía distinto.)
   Todo lo que use --fd-font resuelve a Outfit: no pinees la pila a mano.
   -------------------------------------------------------------------- */
#tau-pagina {
    background-color: var(--tau-fondo);
    color: var(--tau-tinta);
}

/* La columna de lectura va un punto más oscura que la página. */
#tau-contenedor {
    background-color: var(--tau-subfondo);
    color: var(--tau-tinta);
}

#tau-pagina,
#tau-pagina .tau-seccion,
#tau-pagina .tau-subseccion,
#tau-pagina .tau-titulo,
#tau-pagina .tau-opcion,
#tau-pagina .tau-opcion-multiple,
#tau-pagina .tau-opcion-multiple-contenido,
#tau-pagina .tau-pregunta-enunciado,
#tau-pagina .tau-respuesta-texto,
#tau-pagina .tau-indice-bloque,
#tau-pagina .Dialogo,
#tau-pagina .Comentario,
#tau-pagina .Recuadro,
#tau-pagina .Respuesta,
#tau-pagina .Pregunta,
#tau-pagina .Barra,
#tau-pagina .Figura,
#tau-pagina .Referencias,
#tau-pagina .NuevoTituloTau,
#tau-pagina .SubtituloOpcional,
#pregunta {
    font-family: var(--fd-font, 'Outfit', 'Plus Jakarta Sans', 'Segoe UI', sans-serif);
}

/* Los textos de lectura, en negro y sin depender de qué herede cada uno.
   .Comentario ya lo traía escrito a mano en tau.css; el resto colgaba de la
   tinta de #tau-pagina, que era violeta muy oscuro. */
#tau-pagina .Dialogo,
#tau-pagina .Comentario,
#tau-pagina .Recuadro,
#tau-pagina .Pregunta,
#tau-pagina .Respuesta,
#tau-pagina .tau-pregunta-enunciado,
#tau-pagina .tau-opcion,
#pregunta #textoPregunta {
    color: var(--tau-tinta, #000000);
}


/* ── 2b. RESTOS DE LA PALETA COSTERA ─────────────────────────────────
   Estos selectores traen el color escrito a mano, fuera de las tres
   variables, así que no bastaba con reasignarlas.
   -------------------------------------------------------------------- */
.MiTop,
.MiTopApp {
    background-color: var(--fd-purple, #50007D);
}

.MiBoton:hover,
.MiBoton1:hover {
    background-color: var(--fd-purple-mid, #6A00A8);
    color: #FFFFFF;
}

.e-custom:enabled {
    background-color: var(--fd-purple, #50007D);
    color: #FFFFFF;
}

.e-custom:hover {
    background-color: var(--fd-purple-dark, #38005A);
}

#numeroPregunta {
    background-color: var(--fd-purple, #50007D);
    color: #FFFFFF;
}

/* SOLAPE DE LA BARRA DE RESPUESTA
   #pregunta declara la rejilla como:
       grid-template-areas: "textoPregunta barraDerecha"
                            "filaRespuesta filaRespuesta";
       grid-template-rows: auto 10px;      <-- 10px
   pero #zonaRespuesta tiene min-height: 30px. El contenido no cabe en la
   pista de 10px y se desborda sobre la fila de arriba. Con 'auto' la fila
   se dimensiona al contenido y el solape desaparece.

   Además la caja se salía de la pantalla: `width: 91%` MÁS `margin-left: 80px`
   suman más del 100% disponible, así que por debajo de ~768px la pregunta
   sobresalía del viewport (hasta 43 px medidos a 414 px de ancho). Y el texto
   se metía debajo de la barra del número. Se pasa a un ancho automático con
   márgenes responsivos y a una columna que no puede aplastar al texto. */
#pregunta {
    box-sizing: border-box;
    width: auto;
    margin-left: var(--tau-margen-d, clamp(0.6rem, 6vw, 6.25rem));
    margin-right: var(--tau-sangria-1, clamp(0.6rem, 2.4vw, 1.9rem));
    /* minmax(0,1fr) evita que el texto largo ensanche la columna y desborde */
    grid-template-columns: minmax(0, 1fr) 100px;
    grid-template-rows: auto auto;

    border-radius: var(--tau-radio-pregunta);
    /* La tarjeta pinta borde y fondo propios, y el recuadro del número va pegado
       a la esquina superior derecha. Sin recortar, ese rectángulo sobresale por
       fuera de la curva. */
    overflow: hidden;

    /* La pregunta se había quedado en la pila del sistema (-apple-system /
       'Segoe UI') mientras el resto del tau —los párrafos de la conversación—
       ya usaba la de marca. Con las dos a la vista, la pregunta parecía de otro
       producto. Los controles de formulario no heredan la fuente, así que van
       nombrados uno a uno. */
    font-family: var(--fd-font, 'Outfit', 'Plus Jakarta Sans', 'Segoe UI', sans-serif);
}

    #pregunta input,
    #pregunta textarea,
    #pregunta select,
    #pregunta button {
        font-family: inherit;
    }

/* Sigue la curva de la tarjeta en su esquina. */
#numeroPregunta {
    border-radius: 0 var(--tau-radio-pregunta) 0 0;
}

    /* Era width: 93% dentro de una pista automática; con los márgenes de 20px+10px
       terminaba invadiendo la barra del número en pantallas angostas. */
    #pregunta > #textoPregunta {
        width: auto;
        min-width: 0;
    }

#filaRespuesta {
    grid-row: 2;
    align-self: end;
    min-width: 0;
}

/* En pantalla angosta la barra del número se pone encima, en su propia fila:
   apretarla en 100px junto al texto es lo que producía el solape. */
@media (max-width: 560px) {
    #pregunta {
        grid-template-areas:
            "barraDerecha"
            "textoPregunta"
            "filaRespuesta";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    #filaRespuesta {
        grid-row: 3;
    }

        #pregunta > #barraDerecha {
            border-left: none;
            border-bottom: 1px solid var(--tau-filete, rgba(80,0,125,.14));
        }

    /* Aquí la barra del número ocupa la fila de arriba a todo lo ancho, así que
       le tocan las dos esquinas superiores, no solo la derecha. */
    #numeroPregunta {
        border-radius: var(--tau-radio-pregunta) var(--tau-radio-pregunta) 0 0;
    }
}

/* Barra de respuesta: cian de marca a plena saturación, con la respuesta en
   blanco encima. Antes era var(--tau-realce) —el mismo cian al 10%— y quedaba
   casi indistinguible del papel. */
#filaRespuesta > #zonaRespuesta {
    background-color: var(--fd-cyan, #00C8FF);
    color: #FFFFFF;
    border-left: 3px solid var(--fd-cyan, #00C8FF);
    padding: 0.5rem 1rem 0.5rem 1.25rem;
    margin-top: 0.5rem;
    /* La tarjeta recorta con overflow:hidden, pero se deja explícito para que
       la barra siga la curva aunque ese recorte cambie. */
    border-radius: 0 0 var(--tau-radio-pregunta) var(--tau-radio-pregunta);
}

/* Termómetro y medidores: el degradado vive en los pseudo-elementos de
   WebKit, así que accent-color por sí solo no lo reemplaza. */
meter {
    accent-color: var(--fd-purple, #50007D);
}

meter::-webkit-meter-optimum-value {
    background: linear-gradient(90deg,
                var(--fd-cyan, #00C8FF) 0%,
                var(--fd-purple, #50007D) 100%);
    border-radius: 999px;
}

meter::-moz-meter-bar {
    background: linear-gradient(90deg,
                var(--fd-cyan, #00C8FF) 0%,
                var(--fd-purple, #50007D) 100%);
    border-radius: 999px;
}

.e-checkicon.e-checkbox-wrapper .e-frame.e-check,
.e-checkicon.e-checkbox-wrapper:hover .e-frame.e-check {
    border-color: var(--fd-purple, #50007D);
    color: var(--fd-purple, #50007D);
}

.e-toast-container .e-toast {
    background-color: var(--fd-purple, #50007D);
}

/* ── ICONOS DE COMENTARIO / CHAT ─────────────────────────────────────
   Los PNG de /images/IconosPregunta/ se recolorearon al cian de marca
   (#00C8FF) recorriendo solo el rango de matiz azul: el rojo de la
   campanita de notificación queda intacto, que es lo que distingue
   "hay mensaje nuevo" de "hay conversación".
   Aquí solo se les da comportamiento de botón: antes no tenían ningún
   estado de hover y no se leían como algo pulsable.
   -------------------------------------------------------------------- */
.tau-imagen-comentario {
    cursor: pointer;
    transition: transform 0.18s var(--fd-ease, cubic-bezier(0.4, 0, 0.2, 1)),
                opacity 0.18s var(--fd-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.tau-imagen-comentario:hover {
    transform: scale(1.06);
}

.tau-imagen-comentario:active {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    .tau-imagen-comentario {
        transition: none;
    }

    .tau-imagen-comentario:hover,
    .tau-imagen-comentario:active {
        transform: none;
        opacity: 0.82;
    }
}

/* Tarjetas de la lista de taus: el naranja terracota (#ee6c4d) era el color
   más ajeno a la marca de todo el módulo. */
.TituloMisTaus {
    background-color: var(--fd-purple, #50007D);
    color: #FFFFFF;
}

.TituloTauTarjeta {
    color: var(--fd-purple, #50007D);
}

.CodigoTauTarjeta,
.CodigoTAU {
    color: var(--fd-cyan-dark, #0099CC);
    font-variant-numeric: tabular-nums;
}


/* ── 3. JERARQUÍA: SECCIÓN Y SUBSECCIÓN ──────────────────────────────
   Antes: barras sólidas con height fijo. El texto largo se salía y el
   conjunto leía como cabecera de formulario. Ahora el peso lo carga la
   tipografía y un filete de marca; sin altura fija, sin recorte.
   -------------------------------------------------------------------- */
.tau-seccion {
    background-color: transparent;
    color: var(--tau-tinta);
    height: auto;
    min-height: 0;
    border-radius: 0;
    border-bottom: 2px solid var(--fd-purple, #50007D);
    text-align: left;
    padding: 0 0 0.55rem 0;
    margin-bottom: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.tau-subseccion {
    background-color: transparent;
    color: var(--fd-purple, #50007D);
    height: auto;
    min-height: 0;
    border-radius: 0;
    padding: 0 0 0 0.85rem;
    border-left: 3px solid var(--fd-cyan, #00C8FF);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}


/* ── 4. LA PREGUNTA ──────────────────────────────────────────────────
   El marco deja de ser una caja dura: superficie clara, filete tenue.
   El número de pregunta pasa de pestaña sólida a distintivo discreto.
   -------------------------------------------------------------------- */
.tau-pregunta-marco {
    background: var(--tau-superficie);
    border: 1px solid var(--tau-filete);
    border-radius: var(--fd-radius-md, 16px);
    overflow: hidden;
}

.tau-pregunta-numero {
    background-color: transparent;
    color: var(--fd-purple, #50007D);
    height: auto;
    padding: 0.6rem 0.9rem 0.2rem;
    border-radius: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Antes: border-right: thin solid gray — una línea de tabla.
   Ahora separa con el filete de marca y deja aire. */
.tau-pregunta-recuadro {
    border-right: 1px solid var(--tau-filete);
    padding-right: 1.25rem;
}

.tau-pregunta-enunciado {
    width: auto;
    max-width: var(--tau-medida);
    line-height: 1.6;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
}


/* ── 5. OPCIONES: elecciones, no filas de formulario ─────────────────
   Se les da área propia, esquinas suaves y respuesta táctil al pasar y
   al pulsar. El interlineado sube de 1.1 a algo legible.
   -------------------------------------------------------------------- */
.tau-opciones {
    font-size: clamp(1rem, 1.25vw, 1.08rem);
    padding-right: 0;
}

.tau-opcion {
    padding: 0.5rem 0.7rem;
    margin-top: 0.3rem;
    border-radius: var(--fd-radius-sm, 10px);
    border: 1px solid transparent;
    line-height: 1.5;
    transition: background-color 0.18s var(--fd-ease, cubic-bezier(0.4, 0, 0.2, 1)),
                border-color 0.18s var(--fd-ease, cubic-bezier(0.4, 0, 0.2, 1)),
                transform 0.18s var(--fd-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.tau-opcion:hover {
    background-color: var(--tau-realce);
    border-color: rgba(0, 200, 255, 0.35);
}

.tau-opcion:active {
    transform: translateY(1px);
}

.tau-opcion-multiple,
.tau-opcion-multiple-contenido {
    line-height: 1.5;
}

/* La opción correcta se marca con el cian de marca, no con gris plano */
.tau-opcion--correcta {
    background-color: var(--tau-realce);
    border: 1px solid rgba(0, 200, 255, 0.4);
    border-radius: var(--fd-radius-sm, 10px);
    padding: 0.5rem 0.7rem;
}


/* ── 6. ZONA DE RESPUESTA ────────────────────────────────────────────
   Antes: bloque relleno de color con texto blanco — leía como campo
   deshabilitado. Ahora superficie clara con un acento lateral.
   -------------------------------------------------------------------- */
.tau-respuesta-texto {
    background-color: var(--tau-realce);
    color: var(--tau-tinta);
    border-left: 3px solid var(--fd-cyan-dark, #0099CC);
    border-radius: 0 var(--fd-radius-sm, 10px) var(--fd-radius-sm, 10px) 0;
    padding: 0.55rem 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
}

.tau-pregunta-respuesta-contenedor {
    padding-left: var(--tau-sangria-1);
}


/* ── 7. EL FLUJO DE CONVERSACIÓN ─────────────────────────────────────
   Estas clases vienen del contenido del tau (JSON en blob), no del Razor.
   La sangría graduada es la que da el ritmo de diálogo: se conserva y se
   refuerza con un filete al costado para que lea como conversación y no
   como lista de campos.
   -------------------------------------------------------------------- */
.Dialogo {
    padding-left: var(--tau-sangria-1);
    padding-right: var(--tau-margen-d);
    max-width: none;
    line-height: 1.65;
    color: var(--tau-tinta);
    border-left: 2px solid var(--tau-filete);
    margin-left: 0.15rem;
}

.Comentario {
    padding-left: var(--tau-sangria-3);
    padding-right: var(--tau-margen-d);
    line-height: 1.6;
    color: var(--tau-tinta-suave);
    font-style: italic;
}

.Recuadro {
    margin: 1rem var(--tau-margen-d) 1rem var(--tau-sangria-2);
    border: 1px solid var(--tau-filete);
    border-left: 3px solid var(--fd-cyan, #00C8FF);
    border-radius: var(--fd-radius-sm, 10px);
    background: var(--tau-superficie);
    padding: 0.85rem 1rem;
    line-height: 1.6;
}

.Respuesta {
    background-color: var(--tau-realce);
    border-radius: var(--fd-radius-sm, 10px);
    padding: 0.5rem 0.75rem;
    line-height: 1.6;
}

.Pregunta {
    font-size: clamp(0.95rem, 1.2vw, 1.02rem);
    line-height: 1.6;
}

/* Era una barra gris de 28px centrada. Como separador funciona, pero a ese
   tamaño competía con el título de sección. Se baja a peso de subtítulo. */
.Barra {
    background-color: transparent;
    border-top: 1px solid var(--tau-filete);
    color: var(--fd-purple, #50007D);
    font-weight: 700;
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    letter-spacing: -0.015em;
    padding: 1.1rem 0 0.6rem;
}

.Figura,
.Referencias {
    color: var(--tau-tinta-suave);
    line-height: 1.5;
}

.NuevoTituloTau {
    color: var(--tau-tinta);
    letter-spacing: -0.01em;
}

/* Grises planos (#f2f2f2 / lightgrey) que quedaban de la paleta anterior */
.EstiloOpcionOK {
    background-color: var(--tau-realce);
    border: 1px solid rgba(0, 200, 255, 0.4);
    border-radius: var(--fd-radius-sm, 10px);
    padding: 0.5rem 0.7rem;
}

.FilaPreguntaFinalDelTau {
    background-color: var(--tau-superficie);
    border: 1px solid var(--tau-filete);
    border-radius: var(--fd-radius-sm, 10px);
}

.PreguntaFinalDelTau {
    line-height: 1.6;
}

.Materia {
    background-color: transparent;
    color: var(--fd-purple, #50007D);
    border-bottom: 2px solid var(--fd-purple, #50007D);
    border-radius: 0;
    text-align: left;
    font-size: clamp(1.12rem, 1.8vw, 1.45rem);
    letter-spacing: -0.015em;
    padding-bottom: 0.5rem;
}


/* ── 8. ÍNDICE / ÁRBOL ──────────────────────────────────────────────── */

.tau-indice-bloque {
    background: var(--tau-superficie);
    border: 1px solid var(--tau-filete);
    border-radius: var(--fd-radius-md, 16px);
}

/* 1.8em dejaba el título del índice más grande que el de la sección,
   invirtiendo la jerarquía. */
.tau-indice-titulo,
.tau-arbol-titulo {
    color: var(--fd-purple, #50007D);
    font-weight: 700;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-bottom: 0.4rem;
}

.tau-indice-link-item,
.tau-indice-link-seccion,
.tau-indice-link-titulo {
    transition: color 0.18s var(--fd-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.tau-indice-link-item:hover,
.tau-indice-link-seccion:hover,
.tau-indice-link-titulo:hover {
    color: var(--fd-cyan-dark, #0099CC);
}


/* ── 9. CABECERA ────────────────────────────────────────────────────── */

.tau-titulo {
    color: #FFFFFF;
    letter-spacing: -0.01em;
    font-weight: 700;
}


/* ── 10. MÓVIL ───────────────────────────────────────────────────────
   Las sangrías ya colapsan por clamp(); aquí se quita el filete lateral
   del diálogo, que a poco ancho resta espacio de lectura sin aportar.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
    .Dialogo {
        border-left: none;
        margin-left: 0;
    }

    .tau-pregunta-recuadro {
        border-right: none;
        border-bottom: 1px solid var(--tau-filete);
        padding-right: 0;
        padding-bottom: 0.85rem;
    }
}


/* ── 11. ACCESIBILIDAD ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .tau-opcion,
    .tau-indice-link-item,
    .tau-indice-link-seccion,
    .tau-indice-link-titulo {
        transition: none;
    }

    .tau-opcion:active {
        transform: none;
    }
}


/* ── 12. DIÁLOGOS DEL TAU ────────────────────────────────────────────
   El aviso de respuesta equivocada y el de "cuéntanos tu desacuerdo" eran
   los dos últimos sitios del tau que se veían de otra plataforma:

     · encabezado empujado con `margin-left:70px` en línea, así que el
       título nunca quedaba realmente centrado;
     · botones Sí/No/Enviar como PNG en el azul costero viejo (#98c1d9),
       que es justo la paleta que reemplazó la marca;
     · el textarea con el `form-control` por defecto de Bootstrap, sin
       relación con el cuadro de escritura del chat;
     · el texto trataba de usted mientras el chat y el Tutor IA tutean.

   Se aplica solo a los diálogos marcados con .tau-dialogo-marca para no
   tocar el resto de SfDialog de la plataforma.
   -------------------------------------------------------------------- */

.tau-dialogo-marca.e-dialog {
    border: none;
    /* Fondo explícito: no depender de que el tema de Syncfusion lo ponga */
    background: var(--tau-superficie, #FFFFFF);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(80, 0, 125, .22);
    overflow: hidden;
    /* Iba clavada a 'Plus Jakarta Sans' saltándose --fd-font, y como app.css SÍ
       importa Outfit, el resultado era que la conversación se dibujaba en Plus
       Jakarta Sans y la pregunta en Outfit. Son fuentes distintas de verdad
       (medido: 316.42 px vs 340.10 px para la misma cadena a 32 px), y por eso
       se notaba. El chat era el único sitio fuera de la pila de marca. */
    font-family: var(--fd-font, 'Outfit', 'Plus Jakarta Sans', 'Segoe UI', sans-serif);
}

    .tau-dialogo-marca .e-dlg-header-content {
        background: var(--tau-fondo, #F5F1FC);
        border-bottom: 1px solid var(--tau-filete, rgba(80,0,125,.14));
        padding: 1rem 1.25rem;
    }

    .tau-dialogo-marca .e-dlg-content {
        padding: 0;
        background: var(--tau-superficie, #fff);
    }

    .tau-dialogo-marca .e-footer-content {
        background: var(--tau-superficie, #fff);
        border-top: 1px solid var(--tau-filete, rgba(80,0,125,.14));
        padding: 0.85rem 1.25rem;
    }

.tau-dlg-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fd-purple, #50007D);
}

/* El aviso de equivocarse lleva un filete cian arriba: es información, no error */
.tau-dialogo-aviso .e-dlg-header-content {
    border-top: 4px solid var(--fd-cyan-dark, #0099CC);
}

.tau-dlg-cuerpo {
    padding: 1.15rem 1.25rem 1.25rem 1.25rem;
    color: var(--tau-tinta, #1A0033);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* "Contestaste X / el Tau propone Y" */
.tau-dlg-comparacion {
    background: var(--tau-realce, rgba(0,200,255,.10));
    border-left: 3px solid var(--fd-cyan-dark, #0099CC);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 1.1rem;
}

.tau-dlg-pregunta {
    font-weight: 600;
    text-align: center;
    color: var(--fd-purple, #50007D);
}

/* Mismo cuadro de escritura que el chat de la pregunta */
.tau-dlg-texto {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    resize: vertical;
    border: 1px solid var(--tau-filete, rgba(80,0,125,.14));
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--tau-tinta, #1A0033);
    background: var(--tau-superficie, #fff);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .tau-dlg-texto::placeholder {
        color: var(--tau-tinta-suave, #6B5680);
        opacity: .75;
    }

    .tau-dlg-texto:focus {
        outline: none;
        border-color: var(--fd-cyan-dark, #0099CC);
        box-shadow: 0 0 0 3px rgba(0, 200, 255, .18);
    }

.tau-dlg-ayuda {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--tau-tinta-suave, #6B5680);
}

.tau-dlg-ayuda-ok {
    color: var(--fd-cyan-dark, #0099CC);
    font-weight: 600;
}

.tau-dlg-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.tau-btn {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.62rem 1.5rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    min-width: 96px;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .tau-btn:hover:not(:disabled) {
        transform: translateY(-1px);
    }

    .tau-btn:active:not(:disabled) {
        transform: translateY(0);
    }

    .tau-btn:focus-visible {
        outline: 3px solid rgba(0, 200, 255, .45);
        outline-offset: 2px;
    }

    .tau-btn:disabled {
        cursor: default;
        opacity: .45;
    }

.tau-btn-primario {
    background: var(--fd-purple, #50007D);
    color: #fff;
}

    .tau-btn-primario:hover:not(:disabled) {
        background: var(--fd-purple-mid, #6A00A8);
        box-shadow: 0 6px 16px rgba(80, 0, 125, .30);
    }

.tau-btn-secundario {
    background: transparent;
    color: var(--fd-purple, #50007D);
    border-color: var(--tau-filete, rgba(80,0,125,.14));
}

    .tau-btn-secundario:hover:not(:disabled) {
        border-color: var(--fd-purple, #50007D);
        background: var(--tau-fondo, #F5F1FC);
    }

@media (max-width: 480px) {
    .tau-dlg-acciones {
        flex-direction: column-reverse;
    }

    .tau-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tau-btn,
    .tau-dlg-texto {
        transition: none;
    }

        .tau-btn:hover:not(:disabled) {
            transform: none;
        }
}

/* ── 14. ÍNDICE DEL TAU ──────────────────────────────────────────────
   El árbol traía por línea: título, "(N pasos)", hora de inicio y fin de la
   sección, minutos transcurridos y una barra de progreso. Con eso el índice
   pesaba más que el contenido y no se veía lo único que se le pide: la
   estructura. Se deja título, secciones y subsecciones, jerarquizadas.
   El avance vive en la cabecera, que es donde se mira.
   -------------------------------------------------------------------- */
.tau-indice-lista {
    /* El bloque se centra como caja, pero el texto queda alineado a la
       izquierda: una lista con el texto centrado no se puede recorrer con la
       vista. Antes el centrado venía de un justify-content sobre .row de
       Bootstrap y dejaba el índice descolgado hacia la derecha. */
    max-width: 46rem;
    margin: 0;
    padding: 4px 0 10px;
    font-size: 1.06rem;
}

.tau-indice-tau {
    display: block;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.35;
    color: var(--fd-purple, #50007D);
    cursor: pointer;
    margin-bottom: 10px;
}

    .tau-indice-tau:hover {
        text-decoration: underline;
    }

.tau-indice-secciones {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tau-indice-seccion + .tau-indice-seccion {
    margin-top: 2px;
}

/* Rejilla de dos columnas: el número romano no empuja al título, así que
   los títulos quedan alineados aunque el número crezca a III, VIII… */
.tau-indice-enlace {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.35rem;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--tau-tinta, #000);
    text-decoration: none;
    cursor: pointer;
}

    .tau-indice-enlace:hover {
        background-color: #F4F0F7;
    }

.tau-indice-numero {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--fd-purple, #50007D);
    text-align: right;
}

.tau-indice-texto {
    min-width: 0;
    line-height: 1.35;
}

/* Sin abrir todavía. Va en gris sólido, NO con opacity: bajar la opacidad
   dejaba ver el fondo por debajo y todo el índice se veía translúcido y
   sucio. Un gris pleno distingue igual de bien y se lee nítido. */
.es-bloqueada {
    color: #6E6E73;
    cursor: default;
}

    .es-bloqueada:hover {
        background-color: transparent;
    }

/* La sección en curso: barra violeta al costado y fondo sólido, sin
   transparencias que dependan de lo que haya detrás. */
.tau-indice-seccion.es-actual > .tau-indice-enlace {
    background-color: #F0E6F7;
    box-shadow: inset 3px 0 0 var(--fd-purple, #50007D);
    font-weight: 600;
}

/* Subsecciones: colgadas del título de su sección con un filete, no con
   sangría a base de &nbsp; como estaba antes. */
.tau-indice-subsecciones {
    list-style: none;
    margin: 1px 0 4px;
    padding-left: 2.45rem;
    border-left: 2px solid #E3DCE9;
    margin-left: 1.05rem;
}

    .tau-indice-subsecciones .tau-indice-enlace {
        grid-template-columns: minmax(0, 1fr);
        font-size: 1rem;
        padding: 6px 12px;
    }

/* ── 15. CABECERA DEL VISOR DE TAU ───────────────────────────────────
   Rejilla de tres zonas con el centro elástico: los botones de la izquierda
   y el avance de la derecha tienen ancho propio, así que el título no se
   desplaza al cambiar de pregunta (antes, con columnas de Bootstrap iguales,
   bailaba al pasar de "9 / 117" a "10 / 117").
   Vale para las dos entradas al visor: estudiante y Contenidos → Ver tau.
   -------------------------------------------------------------------- */
.tau-cab {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 3.4rem;
    padding: 8px 16px;
    background: var(--fd-purple, #50007D);
    color: #FFFFFF;
    border-radius: 0 0 16px 16px;
}

/* ── botones ── */
.tau-cab-izq {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tau-cab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: transparent;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}

    .tau-cab-btn:hover {
        background: rgba(255, 255, 255, 0.16);
        border-color: #FFFFFF;
    }

    .tau-cab-btn:focus-visible {
        outline: 2px solid var(--fd-cyan, #00C8FF);
        outline-offset: 2px;
    }

.tau-cab-btn-icono {
    font-size: 1.05rem;
    line-height: 1;
}

/* ── centro: código + título ── */
.tau-cab-centro {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.tau-cab-codigo {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tau-cab-titulo {
    margin: 0;
    min-width: 0;
    font-size: clamp(0.95rem, 1.5vw, 1.18rem);
    font-weight: 600;
    line-height: 1.25;
    color: #FFFFFF;
    /* Un tau con título largo no debe empujar al avance fuera de pantalla. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── derecha: avance ── */
.tau-cab-avance {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tau-cab-avance-texto {
    white-space: nowrap;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;   /* el ancho no baila al contar */
}

.tau-cab-avance-numero {
    font-weight: 700;
}

.tau-cab-avance-total {
    opacity: .85;
}

.tau-cab-avance-riel {
    width: clamp(70px, 12vw, 160px);
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
    overflow: hidden;
}

.tau-cab-avance-relleno {
    height: 100%;
    border-radius: 999px;
    background: var(--fd-cyan, #00C8FF);
    transition: width .3s ease;
}

/* En pantalla angosta: el título pasa a su propia fila y el texto de los
   botones se esconde, dejando solo los iconos. */
@media (max-width: 720px) {
    .tau-cab {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "izq der"
            "centro centro";
        row-gap: 6px;
    }

    .tau-cab-izq    { grid-area: izq; }
    .tau-cab-der    { grid-area: der; justify-self: end; }
    .tau-cab-centro { grid-area: centro; justify-content: flex-start; }

    .tau-cab-btn-texto {
        display: none;
    }

    .tau-cab-btn {
        padding: 6px 10px;
    }
}

/* Cabecera "ÍNDICE" alineada con la lista que va debajo: antes el título iba
   pegado al borde de la tarjeta y la lista centrada, y no parecían la misma
   pieza. .tau-arbol traía además un color heredado (darkslategrey) que peleaba
   con la tinta del índice. */
.tau-indice-bloque {
    padding: 14px 18px 16px;
}

.tau-indice-bloque .tau-indice-titulo {
    max-width: 46rem;
    margin: 0;
    color: var(--fd-purple, #50007D);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tau-indice-bloque hr {
    max-width: 46rem;
    margin: 8px 0 12px;
    border-color: var(--tau-filete, rgba(80,0,125,.14));
}

.tau-indice-bloque .tau-arbol {
    color: inherit;
}

/* ── 16. CRÉDITOS ────────────────────────────────────────────────────
   Sustituyen al PNG con el recuadro gris que cerraba el tau. Aquí no hay
   fondo gris: los créditos son un cierre, no un aviso, y se separan del
   contenido con un filete y no con una caja.
   -------------------------------------------------------------------- */
.tau-creditos {
    width: min(1040px, 100%);
    margin: 40px auto 24px;
    padding: 20px 4px 8px;
    border-top: 1px solid var(--tau-filete, rgba(80,0,125,.14));
    color: var(--tau-tinta-suave, #6B5680);
    font-size: 0.95rem;
}

.tau-creditos-titulo {
    margin: 0 0 12px;
    color: var(--fd-purple, #50007D);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Rejilla rol → nombres: los nombres quedan alineados entre sí, cosa que la
   imagen no conseguía porque cada línea empezaba donde acababa su etiqueta. */
.tau-creditos-lista {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 14px;
    margin: 0;
}

    .tau-creditos-lista dt {
        font-weight: 600;
        color: var(--tau-tinta, #000);
    }

    .tau-creditos-lista dd {
        margin: 0;
    }

.tau-creditos-nota {
    max-width: 62ch;
    margin: 16px 0 0;
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.5;
}

@media (max-width: 560px) {
    /* En móvil el rol va encima del nombre: dos columnas con nombres largos
       dejaban la segunda columna en un hilo de dos letras por línea. */
    .tau-creditos-lista {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

        .tau-creditos-lista dd {
            margin-bottom: 10px;
        }
}

/* ── 17. CUESTIONAR LA CALIFICACIÓN ──────────────────────────────────
   Aparece solo en preguntas de completar que salieron mal. Va debajo de la
   barra de respuesta, discreto: es una salida para un caso concreto, no una
   acción que haya que ofrecer con la misma fuerza que responder.
   -------------------------------------------------------------------- */
.tau-cuestionar-fallo {
    margin: 10px 0 0 var(--tau-margen-d, clamp(0.6rem, 6vw, 6.25rem));
    padding: 10px 14px;
    border-left: 3px solid var(--tau-tinta-suave, #6B5680);
    border-radius: 0 8px 8px 0;
    background: #F5F4F6;
    color: var(--tau-tinta, #000);
    font-size: 0.9rem;
    line-height: 1.45;
}

    /* Aceptado: cian de marca, el mismo de la barra de respuesta. */
    .tau-cuestionar-fallo.es-aceptado {
        border-left-color: var(--fd-cyan, #00C8FF);
        background: #E8F9FF;
    }


/* ── 18. REVISIÓN AL AZAR DE LA AUTOCALIFICACIÓN ─────────────────────
   Diálogo que sale cuando a una autocalificación le toca revisión (ver
   AuditoriaAutoCalificacionService). El color dice el resultado de un
   vistazo; el texto de la IA va aparte, más discreto.
   -------------------------------------------------------------------- */
.tau-revision-azar {
    display: grid;
    gap: 0.75rem;
}

.tau-revision-estado {
    padding: 0.75rem 1rem;
    border-radius: var(--fd-radius-sm, 10px);
    border-left: 4px solid var(--fd-cyan, #00C8FF);
    background: var(--tau-subfondo, #F7F7F7);
    color: var(--tau-tinta, #000000);
    line-height: 1.5;
}

/* confirmada y a favor: verde; no coincide: ámbar (no rojo: es provisional) */
.tau-revision-confirmada,
.tau-revision-afavor {
    border-left-color: #1E9E5A;
    background: #EEF8F2;
}

.tau-revision-nocoincide {
    border-left-color: #D98A00;
    background: #FFF6E5;
}

.tau-revision-razon {
    font-size: 0.92rem;
    color: #4A4A4A;
    line-height: 1.5;
    padding: 0 0.25rem;
}