/* ================================================================
   tau-visor.css
   Estilos del VisorUnTau y sus componentes hijos.

   Convención : prefijo  tau-  en kebab-case
   Jerarquía  : página → cabecera → índice/árbol
                → sección → subsección → pregunta
                → enunciado → opciones → respuesta
                → texto-timer → imagen-popup → diálogos
   ================================================================ */


/* ── VARIABLES DE COLOR ─────────────────────────────────────── */

:root {
    --tau-azul-oscuro: #3d5a80;   /* secciones, fondo oscuro */
    --tau-azul-claro:  #98c1d9;   /* subsecciones, número de pregunta, cabecera */
    --tau-azul-medio:  #6E98AF;   /* respuesta seleccionada, zona de respuesta */
}


/* ── 1. PÁGINA ──────────────────────────────────────────────── */

#tau-pagina {
    background-color: #f2f2f2;
    display: grid;
    grid-template-rows: auto 1fr;
    margin-top: 3em; /* altura de la barra MiTop/MiTopApp */
}

#tau-contenedor {
    margin-top: 30px;
    background-color: #f2f2f2;
    width: 100vh;
}


/* ── 2. CABECERA ─────────────────────────────────────────────── */

.tau-cabecera {
    /*top: -12px;*/
    z-index: 10;
}

.tau-titulo {
    font-size: 1em;
    text-align: center;
    font-weight: bold;
}


/* ── 3. ÍNDICE Y ÁRBOL ───────────────────────────────────────── */

.tau-indice-titulo {
    font-size: 1.8em;
    font-weight: 700;
    padding: 10px 0 0;
}

.tau-arbol {
    color: darkslategrey;
    border-radius: 5px;
}

.tau-arbol-titulo {
    font-weight: bold;
    font-size: 20px;
    color: darkslategray;
}

.tau-indice-link-titulo {
    color: black;
    font-size: 20px;
    font-weight: bold;
}

.tau-indice-link-seccion {
    display: grid;
    grid-template-columns: 2fr 1fr;
    color: black;
    font-weight: bold;
    font-size: 18px;
}

.tau-indice-link-seccion--popup {
    display: grid;
    grid-template-columns: 2fr 1fr;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    justify-items: left;
}

.tau-indice-link-item {
    display: grid;
    grid-template-columns: 2fr 1fr;
    color: darkslategray;
    font-size: 14px;
    margin-left: 40px;
    cursor: pointer;
    justify-items: left;
}


/* ── 4. SECCIÓN ──────────────────────────────────────────────── */

.tau-seccion {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    margin-bottom: 60px;
    margin-right: -20px;
    background-color: var(--tau-azul-oscuro);
    color: white;
    height: 60px;
    border-radius: 15px;
}

.tau-seccion-col1 { align-content: center; }

.tau-seccion-col2 { text-align: center; }

.tau-seccion-col3 {
    font-size: 12px;
    font-weight: bold;
    text-align: end;
    align-content: center;
    padding-right: 10px;
}

.tau-seccion-texto { /* espacio semántico — sin estilos propios */ }


/* ── 5. SUBSECCIÓN ───────────────────────────────────────────── */

.tau-subseccion {
    font-size: 20px;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 45px;
    margin-right: -20px;
    color: white;
    background-color: var(--tau-azul-claro);
    height: 45px;
    padding: 5px 30px;
    border-radius: 10px;
}


/* ── 6. TEXTO TIMER (modo CursoLectura) ──────────────────────── */

.tau-texto-timer {
    margin-left: 7.5vh;
}


/* ── 7. LISTA DE PREGUNTAS ───────────────────────────────────── */

#tau-lista-preguntas {
    scroll-behavior: smooth;
}


/* ── 8. PREGUNTA ─────────────────────────────────────────────── */

.tau-pregunta { /* contenedor semántico — espaciado gestionado por hijos */ }

.tau-nota {
    font-size: 18px;
    margin-top: 40px;
}

.tau-pregunta-numero {
    color: white;
    font-weight: bold;
    height: 34.5px;
    background-color: var(--tau-azul-claro);
    border-radius: 0 15px 0 0;
    padding-top: 5px;
}

.tau-pregunta-marco {
    background: white;
    border-radius: 15px;
}

.tau-pregunta-recuadro {
    padding-right: 0;
    border-right: thin solid gray;
}

.tau-pregunta-enunciado { width: 97%; }

.tau-pregunta-opciones-contenedor { padding: 5px; }

.tau-pregunta-respuesta-contenedor {
    padding-left: 35px;
    margin-bottom: 7px;
    margin-top: 10px;
}


/* ── 9. OPCIONES ─────────────────────────────────────────────── */

.tau-opciones {
    padding-top: 1px;
    padding-right: 10px;
    font-size: 18px;
}

.tau-opcion {
    font-size: 18px;
    padding: 0 5px 3px;
    margin-top: 2px;
    width: 100%;
}

.tau-opcion-multiple {
    line-height: 1.2;
    align-items: center;
}

    .tau-opcion-multiple:hover {
        background-color: #f5f5f5;
        cursor: pointer;
        border-radius: 3px;
    }

.tau-opcion-multiple-contenido {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.1;
}

.tau-opcion--correcta {
    background-color: #f2f2f2;
    border-radius: 5px;
    padding: 0 5px 3px;
}


/* ── 10. RESPUESTA ───────────────────────────────────────────── */

.tau-respuesta-texto {
    font-style: italic;
    font-weight: 600;
    padding: 3px 1px 4px 10px;
    min-height: 30px;
    background-color: var(--tau-azul-medio);
    color: white;
    border-radius: 5px;
}


/* ── 11. IMAGEN EN POPUP ─────────────────────────────────────── */

.tau-popup-imagen-img {
    width: 100%;
    height: auto;
}

#ImagenPopUp {
    width: 100%;
    height: auto;
}

.tau-imagen-comentario {
    width: 70%;
    height: auto;
    margin-bottom: 6px;
}


/* ── 12. DIÁLOGOS ESPECÍFICOS DEL TAU ───────────────────────── */

.tau-instrucciones {
    margin: 5px;
    width: 540px;
    height: auto;
}

.tau-popup-vigencia {
    font-size: 16px;
    background-color: #B4E5A2;
}

/* termómetro de progreso en TauHeader */
.t-letras-termometro {
    font-size: 13px;
    margin-top: 9px;
    font-weight: bold;
    color: #333;
}


/* ── 13. OVERRIDES SYNCFUSION (solo en contexto TAU) ─────────── */

.dialog-confirmacion-compacto .e-footer-content  { padding: 10px !important; }
.dialog-confirmacion-compacto.e-dialog           { height: auto !important; min-height: auto !important; }
.dialog-confirmacion-compacto .e-dlg-content     { padding: 15px 20px !important; min-height: auto !important; }