/* Plataforma PPS. Sin estilos en línea: la CSP solo permite este fichero. */

/* Paleta marino y ámbar (la de las diapositivas del módulo).
   El ámbar no se usa nunca como color de texto sobre fondo claro: no tiene contraste suficiente. */
:root,
[data-bs-theme="light"] {
    --pps-marino: #0f1b2d;
    --pps-marino-suave: #1c2b45;
    --pps-ambar: #f2a900;
    --pps-ambar-rgb: 242, 169, 0;
    --pps-primario: var(--pps-marino);
    --pps-primario-rgb: 15, 27, 45;
    --pps-texto-sobre-primario: #fff;
    --pps-acento: var(--pps-ambar);
    --pps-fondo-suave: #f4f5f7;
    --pps-codigo-fondo: #0b1322;
    --pps-codigo-texto: #e6edf3;
    --bs-primary: var(--pps-primario);
    --bs-primary-rgb: var(--pps-primario-rgb);
    --bs-link-color: #1d4f91;
    --bs-link-color-rgb: 29, 79, 145;
    --bs-link-hover-color: #133766;
    --bs-link-hover-color-rgb: 19, 55, 102;
}

[data-bs-theme="dark"] {
    --pps-primario: var(--pps-ambar);
    --pps-primario-rgb: var(--pps-ambar-rgb);
    --pps-texto-sobre-primario: var(--pps-marino);
    --pps-fondo-suave: #141c2b;
    --pps-codigo-fondo: #0b1322;
    --bs-body-bg: #0f1726;
    --bs-body-bg-rgb: 15, 23, 38;
    --bs-secondary-bg: #1a2436;
    --bs-secondary-bg-rgb: 26, 36, 54;
    --bs-tertiary-bg: #151f30;
    --bs-tertiary-bg-rgb: 21, 31, 48;
    --bs-primary: var(--pps-primario);
    --bs-primary-rgb: var(--pps-primario-rgb);
    --bs-link-color: #8fb4e8;
    --bs-link-color-rgb: 143, 180, 232;
    --bs-link-hover-color: #b9d0f1;
    --bs-link-hover-color-rgb: 185, 208, 241;
}

.btn-primary {
    --bs-btn-bg: var(--pps-primario);
    --bs-btn-border-color: var(--pps-primario);
    --bs-btn-hover-bg: var(--pps-marino-suave);
    --bs-btn-hover-border-color: var(--pps-marino-suave);
    --bs-btn-active-bg: #26385a;
    --bs-btn-active-border-color: #26385a;
    --bs-btn-disabled-bg: var(--pps-primario);
    --bs-btn-disabled-border-color: var(--pps-primario);
}
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: var(--pps-marino);
    --bs-btn-hover-color: var(--pps-marino);
    --bs-btn-active-color: var(--pps-marino);
    --bs-btn-hover-bg: #ffc233;
    --bs-btn-hover-border-color: #ffc233;
    --bs-btn-active-bg: #d99800;
    --bs-btn-active-border-color: #d99800;
    --bs-btn-disabled-color: var(--pps-marino);
}
.btn-outline-primary {
    --bs-btn-color: var(--pps-primario);
    --bs-btn-border-color: var(--pps-primario);
    --bs-btn-hover-bg: var(--pps-primario);
    --bs-btn-hover-border-color: var(--pps-primario);
    --bs-btn-active-bg: var(--pps-primario);
    --bs-btn-active-border-color: var(--pps-primario);
    --bs-btn-hover-color: var(--pps-texto-sobre-primario);
    --bs-btn-active-color: var(--pps-texto-sobre-primario);
}
.text-primary { color: var(--pps-primario) !important; }
.progress-bar { background-color: var(--pps-primario); }
.nav-tabs .nav-link.active { font-weight: 600; }

/* Maqueta: barra superior + menú lateral a la izquierda + contenido a todo el ancho */
:root { --pps-alto-barra: 3.5rem; --pps-alto-pie: 2.5rem; --pps-ancho-menu: 16rem; }
/* Pie siempre visible abajo. sticky (no fixed): ocupa su sitio y no tapa el final del contenido. */
.pie {
    position: sticky; bottom: 0; z-index: 1020;
    min-height: var(--pps-alto-pie); display: flex; align-items: center;
    background: var(--bs-body-bg);
}
.pie > div { min-width: 0; }
/* Barra superior siempre oscura (lleva data-bs-theme="dark"): marino en el tema claro;
   en el oscuro, más profunda y con una línea ámbar para que siga destacando. */
.barra-superior {
    min-height: var(--pps-alto-barra); display: flex; align-items: center; z-index: 1030;
    background: var(--pps-marino); color: #fff; border-bottom: 1px solid var(--pps-marino);
}
html[data-bs-theme="dark"] .barra-superior { background: #070d18; border-bottom: 2px solid var(--pps-ambar); }
.barra-superior .text-body-secondary { color: #b8c3d4 !important; }
.boton-tema { line-height: 1; padding: .45rem .55rem; }
.dropdown-item[data-tema-opcion].active { background: rgba(var(--pps-ambar-rgb), .2); color: inherit; font-weight: 600; }
/* Selector de tema en las páginas de una columna (acceso, primer acceso) */
.selector-tema-simple { position: absolute; top: 1rem; right: 1rem; z-index: 10; }
.boton-menu { line-height: 1; padding: .45rem .65rem; }
.marco { display: flex; align-items: stretch; min-width: 0; }
.contenido { flex: 1 1 auto; min-width: 0; }

.menu-lateral .nav-link { color: var(--bs-body-color); border-radius: .4rem; padding: .45rem .75rem; }
.menu-lateral .nav-link:hover,
.menu-lateral .nav-link:focus-visible { background: var(--bs-tertiary-bg); }
.menu-lateral .nav-link.active {
    background: rgba(var(--pps-primario-rgb), .08); color: var(--pps-primario); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--pps-ambar);
}
[data-bs-theme="dark"] .menu-lateral .nav-link.active { background: rgba(var(--pps-ambar-rgb), .12); }
.menu-lateral .nav-link .fa-fw { color: var(--bs-secondary-color); }
.menu-lateral .nav-link.active .fa-fw { color: inherit; }
.menu-seccion {
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--bs-secondary-color); margin: 1.1rem .75rem .35rem;
}

@media (min-width: 992px) {
    /* Columna fija a la izquierda que acompaña al desplazamiento */
    .marco .menu-lateral {
        flex: 0 0 var(--pps-ancho-menu); width: var(--pps-ancho-menu);
        border-right: 1px solid var(--bs-border-color);
        background-color: var(--pps-fondo-suave) !important;
        position: sticky; top: var(--pps-alto-barra);
        height: calc(100vh - var(--pps-alto-barra) - var(--pps-alto-pie)); overflow-y: auto;
    }
    .marco .menu-lateral .offcanvas-body { display: block; padding: 1rem .75rem; }
    html[data-menu="oculto"] .marco .menu-lateral { display: none !important; }
}
@media (max-width: 991.98px) {
    .menu-lateral { --bs-offcanvas-width: 17rem; }
}
.logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: .6rem;
    background: var(--pps-marino); color: var(--pps-ambar);
}
[data-bs-theme="dark"] .logo { background: var(--pps-ambar); color: var(--pps-marino); }
.logo-grande { width: 3.25rem; height: 3.25rem; font-size: 1.6rem; border-radius: .9rem; }

/* Páginas de una columna */
.fondo-simple { background: var(--pps-fondo-suave); }
.columna-simple { max-width: 34rem; }
.columna-simple:has(.contenido-md) { max-width: 52rem; }

/* Pasos del primer acceso */
.pasos .paso { display: flex; align-items: center; gap: .4rem; color: var(--bs-secondary-color); font-size: .9rem; }
.pasos .paso + .paso::before { content: ""; width: 1.5rem; height: 1px; background: var(--bs-border-color); margin-right: .4rem; }
.pasos .numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 1px solid var(--bs-border-color); font-size: .8rem;
}
.pasos .actual { color: var(--bs-body-color); font-weight: 600; }
.pasos .actual .numero { background: var(--pps-primario); border-color: var(--pps-primario); color: var(--pps-texto-sobre-primario); }
.pasos .hecho .numero { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }

/* Cifras */
.cifra .card-body { padding: 1rem; }
.cifra .valor { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.cifra .etiqueta { font-size: .8rem; color: var(--bs-secondary-color); }

/* Contenido Markdown */
.contenido-md > :last-child { margin-bottom: 0; }
.contenido-md h1 { font-size: 1.6rem; }
.contenido-md h2 { font-size: 1.3rem; margin-top: 1.5rem; }
.contenido-md h3 { font-size: 1.1rem; margin-top: 1.25rem; }
.contenido-md code { color: inherit; background: rgba(var(--pps-primario-rgb), .1); padding: .05rem .3rem; border-radius: .25rem; font-size: .875em; }
.contenido-md pre {
    background: var(--pps-codigo-fondo); color: var(--pps-codigo-texto);
    border-radius: .5rem; padding: 1rem; font-size: .85rem; line-height: 1.5; overflow-x: auto; tab-size: 4;
}
.contenido-md pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
/* Tablas anchas: desplazamiento horizontal en pantallas estrechas en lugar de cortarse */
.contenido-md table { display: block; max-width: 100%; overflow-x: auto; }
.contenido-md blockquote { border-left: 4px solid var(--bs-border-color); padding-left: 1rem; color: var(--bs-secondary-color); }
.contenido-md table { margin-bottom: 1rem; }

/* Código */
.bloque-codigo, pre.bloque-codigo {
    background: var(--pps-codigo-fondo); color: var(--pps-codigo-texto);
    border-radius: .5rem; padding: 1rem; font-size: .85rem; line-height: 1.5;
    overflow-x: auto; white-space: pre; tab-size: 4;
}
.bloque-codigo code { color: inherit; background: none; padding: 0; font-size: inherit; }

/* Test */
.mapa-preguntas .boton-mapa { min-width: 2.4rem; }
.mapa-preguntas .boton-mapa.actual { outline: 3px solid rgba(var(--pps-primario-rgb), .45); outline-offset: 1px; }
.opcion-test {
    border: 1px solid var(--bs-border-color); border-radius: .5rem;
    padding: .65rem .75rem .65rem 2.25rem; margin-bottom: .5rem; transition: border-color .15s;
}
.opcion-test:hover { border-color: var(--pps-primario); }
.opcion-test .form-check-label { width: 100%; cursor: pointer; }
fieldset:disabled .opcion-test:hover { border-color: var(--bs-border-color); }
.opcion-correcta { border-color: var(--bs-success) !important; background: var(--bs-success-bg-subtle); }
.opcion-incorrecta { border-color: var(--bs-danger) !important; background: var(--bs-danger-bg-subtle); }
.explicacion-opcion { margin-top: .4rem; color: var(--bs-body-color); }
.explicacion-general {
    background: rgba(var(--pps-ambar-rgb), .09); border-left: 4px solid var(--pps-ambar);
    border-radius: .25rem; padding: .85rem 1rem; margin-top: 1rem;
}
.tabla-matriz td { min-width: 6rem; }
.tabla-matriz .form-check-input { float: none; margin: 0; width: 1.25rem; height: 1.25rem; cursor: pointer; }
.celda-correcta { background: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis); }
.celda-incorrecta { background: var(--bs-danger-bg-subtle) !important; }
.fila-explicacion td { background: var(--bs-tertiary-bg); }
.reloj { font-variant-numeric: tabular-nums; }

/* Revisión */
.opciones-revision .opcion { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .6rem .75rem; margin-bottom: .5rem; }
.opciones-revision .opcion-correcta i { color: var(--bs-success); }
.opciones-revision .opcion-incorrecta i { color: var(--bs-danger); }
.opciones-revision .opcion-neutra i { color: var(--bs-secondary-color); }
.pregunta-revision.estado-bien { border-left: 4px solid var(--bs-success); }
.pregunta-revision.estado-parcial { border-left: 4px solid var(--bs-warning); }
.pregunta-revision.estado-mal { border-left: 4px solid var(--bs-danger); }
.pregunta-revision.estado-sin { border-left: 4px solid var(--bs-secondary); }
.nota-grande { font-size: 3rem; font-weight: 800; line-height: 1; min-width: 6rem; text-align: center; }
.bloque-extra summary { cursor: pointer; }

/* Profesor */
.pregunta-inactiva { opacity: .6; }
.barra-mini { height: .5rem; min-width: 4rem; }
.histograma .tramo { width: 2.5rem; }
.histograma .cuenta { width: 1.5rem; }
.histograma .progress { height: 1rem; }
th.ordenable { cursor: pointer; white-space: nowrap; }
th.ordenable::after { content: " \2195"; color: var(--bs-secondary-color); font-size: .75em; }
th[aria-sort="ascending"]::after { content: " \2191"; }
th[aria-sort="descending"]::after { content: " \2193"; }
.celda-vacia { background: var(--bs-tertiary-bg); }
.tabla-matriz-estadistica td { min-width: 5rem; }
.qr-totp { background: #fff; padding: .5rem; border-radius: .5rem; }
.codigo-totp { letter-spacing: .4em; font-variant-numeric: tabular-nums; }

/* Credenciales para imprimir */
.credencial { break-inside: avoid; }
@media print {
    .credenciales .credencial { border: 1px dashed #000 !important; }
    body { background: #fff; color: #000; }
}

/* ── Diapositivas ───────────────────────────────────────────────────────────
   Caja 16:9 con tamaños de letra relativos a su ancho (unidades cqi): la misma
   diapositiva se ve proporcionada en el proyector, en el portátil y en el móvil. */
.marco-diapositiva { width: 100%; }
.diapositiva {
    position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    container-type: inline-size;
    background: #ffffff; color: #1b2433;
    border: 1px solid var(--bs-border-color); border-radius: .5rem;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .08);
}
.diapositiva:focus-visible { outline: 3px solid rgba(var(--pps-primario-rgb), .5); outline-offset: 2px; }
.diapositiva-contenido {
    height: 100%; overflow: auto; padding: 4.5cqi 6cqi;
    font-size: 2.6cqi; line-height: 1.45;
    display: flex; flex-direction: column; justify-content: center;
}
.diapositiva-contenido > * { margin-bottom: .6em; }
.diapositiva-contenido > :last-child { margin-bottom: 0; }
.diapositiva-contenido h1 { font-size: 2.3em; font-weight: 700; color: #0f1b2d; }
.diapositiva-contenido h2 { font-size: 1.7em; font-weight: 700; color: #0f1b2d; }
.diapositiva-contenido h3 { font-size: 1.3em; font-weight: 600; }
.diapositiva-contenido ul, .diapositiva-contenido ol { padding-left: 1.3em; }
.diapositiva-contenido li + li { margin-top: .25em; }
.diapositiva-contenido code { font-size: .85em; background: #f3f4f6; color: #0f1b2d; padding: .05em .3em; border-radius: .2em; }
.diapositiva-contenido pre { background: #0b1322; color: #e6edf3; padding: .8em 1em; border-radius: .4em; font-size: .72em; line-height: 1.45; overflow: auto; }
.diapositiva-contenido pre code { background: none; color: inherit; padding: 0; font-size: 1em; }
.diapositiva-contenido img { max-width: 100%; max-height: 60cqi; object-fit: contain; align-self: center; }
.diapositiva-contenido table { font-size: .85em; }
.diapositiva-contenido blockquote { border-left: .3em solid #f2a900; padding-left: .8em; color: #5b6b80; }
.diapositiva-contenido a { color: #1d4f91; }
.diapositiva-imagen { background: #ffffff; display: flex; align-items: center; justify-content: center; }
.diapositiva-imagen img { width: 100%; height: 100%; object-fit: contain; }
.diapositiva-mini { box-shadow: none; }
.marco-diapositiva:fullscreen { background: #000; display: flex; align-items: center; justify-content: center; padding: 0; }
.marco-diapositiva:fullscreen .diapositiva { width: min(100vw, calc(100vh * 16 / 9)); border: 0; border-radius: 0; }

/* Indicador de directo */
.punto-directo {
    display: inline-block; width: .7rem; height: .7rem; border-radius: 50%;
    background: #dc3545; box-shadow: 0 0 0 0 rgba(220, 53, 69, .6); animation: latido-directo 1.6s infinite;
}
.punto-blanco { background: #fff; width: .55rem; height: .55rem; }
@keyframes latido-directo { 70% { box-shadow: 0 0 0 .6rem rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } }
@media (prefers-reduced-motion: reduce) { .punto-directo { animation: none; } }
.aviso-directo {
    border: 1px solid rgba(220, 53, 69, .35); background: rgba(220, 53, 69, .08);
    border-radius: .5rem; padding: .8rem 1rem; color: var(--bs-body-color);
}
.aviso-directo:hover { background: rgba(220, 53, 69, .14); }
.menu-lateral .nav-link .punto-directo { margin-left: auto; }

/* Editor */
.editor-md { min-height: 28rem; tab-size: 4; }
.vista-previa-diapositivas { max-height: 70vh; overflow-y: auto; padding-right: .25rem; }
.notas-previa { border-left: 3px dashed var(--bs-border-color); padding-left: .6rem; margin-top: .3rem; color: var(--bs-secondary-color); }
.miniatura img { width: 4rem; height: 2.5rem; object-fit: cover; display: block; }

/* Preguntas en directo */
.resultado-opcion { margin-bottom: .6rem; }
.resultado-opcion .progress { height: .9rem; }
.resultado-opcion.correcta { font-weight: 600; }
.resultado-opcion.correcta .progress-bar { background: var(--bs-success); }

/* Presentador y proyector (pantalla completa, tema oscuro) */
.modo-presentacion { min-height: 100vh; background: #0b1322; color: #e6edf3; }
.presentador { display: flex; flex-direction: column; min-height: 100vh; }
.presentador-barra { background: #070d18; border-bottom: 1px solid #1f2b40; }
.presentador-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.25rem; padding: 1.25rem; }
.presentador-principal { min-width: 0; }
.presentador-lateral { min-width: 0; overflow-y: auto; max-height: calc(100vh - 5rem); }
.presentador .notas { background: #16213a; border-radius: .4rem; padding: .75rem; max-height: 16rem; overflow-y: auto; font-size: 1.05rem; }
.panel-pregunta { background: #16213a; border-radius: .4rem; padding: .75rem; }
@media (max-width: 991.98px) { .presentador-cuerpo { grid-template-columns: 1fr; } .presentador-lateral { max-height: none; } }
.proyector { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 1rem; }
.proyector .marco-diapositiva { max-width: min(100%, calc((100vh - 2rem) * 16 / 9)); margin: 0 auto; }
.proyector .diapositiva { border: 0; }
.pregunta-proyector { max-width: 70rem; margin: 0 auto; width: 100%; font-size: 1.6rem; background: #ffffff; color: #1b2433; border-radius: .75rem; padding: 2rem 2.5rem; }
.pregunta-proyector .resultado-opcion .progress { height: 1.4rem; }
.opciones-proyector li { margin-bottom: .5rem; }
.proyector-ayuda { position: fixed; bottom: .5rem; right: .75rem; opacity: .45; margin: 0; }
.proyector-mensaje { text-align: center; }
.pregunta-directo .opcion-test { margin-bottom: .4rem; }

/* Editor de diapositivas HTML */
.lista-miniaturas { max-height: 62vh; overflow-y: auto; padding-right: .25rem; }
.miniatura-diapositiva { margin-bottom: .6rem; }
.miniatura-diapositiva .numero { display: inline-block; font-size: .75rem; color: var(--bs-secondary-color); margin-bottom: .15rem; }
.miniatura-diapositiva.activa .diapositiva { outline: 3px solid var(--pps-primario); outline-offset: 1px; }
.miniatura-diapositiva .btn:focus-visible .diapositiva { outline: 3px solid rgba(var(--pps-primario-rgb), .5); }

/* ── Avisos y confirmaciones (SweetAlert2, ver js/avisos.js) ────────────────
   Se integran con la paleta y con el tema claro/oscuro de Bootstrap; los botones
   son los de Bootstrap (buttonsStyling: false). */
:root {
    --swal2-background: var(--bs-body-bg);
    --swal2-color: var(--bs-body-color);
    --swal2-border-radius: .75rem;
    --swal2-backdrop: rgba(15, 27, 45, .55);
    --swal2-timer-progress-bar-background: var(--pps-ambar);
    --swal2-close-button-color: var(--bs-secondary-color);
}
.swal2-popup.aviso-ventana { border: 1px solid var(--bs-border-color); font-family: var(--bs-body-font-family); }
.swal2-popup.aviso-ventana .swal2-title { font-size: 1.35rem; font-weight: 600; color: var(--bs-emphasis-color); }
.swal2-popup.aviso-ventana .swal2-html-container { font-size: 1rem; color: var(--bs-body-color); }
.swal2-popup.aviso-toast { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18); }
.swal2-popup.aviso-toast .swal2-html-container { font-size: .95rem; margin: .25rem .5rem; }
.swal2-icon.swal2-question { border-color: var(--pps-primario); color: var(--pps-primario); }
.swal2-icon.swal2-warning { border-color: var(--pps-ambar); color: var(--pps-ambar); }
/* «Reducir movimiento»: se acortan (no se anulan: los iconos se dibujan con ellas). */
@media (prefers-reduced-motion: reduce) { .swal2-container *, .swal2-container { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* ── Pizarra en directo (js/pizarra.js) ─────────────────────────────────────
   Capa sobre la diapositiva: transparente (anotaciones) o blanca (pizarra en blanco).
   Sin herramienta activa no captura el ratón: los enlaces de la diapositiva siguen funcionando. */
.capa-pizarra { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.capa-pizarra.blanca { background: #fff; }
.capa-pizarra canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.capa-pizarra.dibujando { pointer-events: auto; cursor: crosshair; }
.capa-pizarra.dibujando[data-herramienta="x"] { cursor: text; }
.capa-pizarra.dibujando[data-herramienta="e"] { cursor: cell; }
.pizarra-texto {
    position: absolute; pointer-events: auto; min-width: 12em; padding: 0 .2em; line-height: 1.15;
    font-family: Carlito, Calibri, "Segoe UI", Arial, sans-serif; font-weight: 600;
    background: rgba(255, 255, 255, .85); border: 1px dashed var(--pps-ambar); border-radius: .2rem; outline: none;
}
.barra-pizarra .btn.active { background: var(--pps-ambar); border-color: var(--pps-ambar); color: var(--pps-marino); }
.punto-color { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); vertical-align: middle; }
.color-0 { background: #0f1b2d; } .color-1 { background: #c0392b; } .color-2 { background: #1d4f91; }
.color-3 { background: #2e7d4f; } .color-4 { background: #f2a900; }
.punto-grosor { display: inline-block; border-radius: 50%; background: currentColor; vertical-align: middle; }
.grosor-0 { width: .3rem; height: .3rem; } .grosor-1 { width: .55rem; height: .55rem; } .grosor-2 { width: .85rem; height: .85rem; }
.directo.solo-pizarra .navegacion-directo { display: none !important; }