/* =====================================================================
   tema-admin.css — mismo lenguaje visual que el panel de administración
   (grafito + rojo de marca, tarjetas redondeadas, barra negra de 76 px).
   Se carga DESPUÉS de ux.css. Solo presentación: no cambia lógica ni ids.
   ===================================================================== */

:root {
    /* Las hojas del portal usan estas variables para el azul de acento */
    --ux-azul: #208FE8;            /* marcadores laterales y acentos: rojo de marca */
    --ux-azul-accion: #0E0C44;     /* botones, iconos y foco: grafito */
    --ux-fondo: #F2F3F4;
    --ux-borde: #d3dae3;
    --ux-radio: 12px;
    --ux-sombra: 0 2px 10px rgba(18, 31, 61, .10);
    --ux-sombra-alta: 0 8px 22px rgba(18, 31, 61, .18);

    --tm-grafito: #0E0C44;
    --tm-grafito-2: #2B2A7A;
    --tm-rojo: #208FE8;
    --tm-gris-claro: #eceff1;
    --tm-gris-borde: #d3dae3;
}

html, body { background-color: var(--ux-fondo); color: #263238; -webkit-font-smoothing: antialiased; }

/* ---------- Foco de teclado: grafito con halo ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--tm-grafito);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .85);
}

/* ---------- Indicador de carga de página ---------- */
.loading:before { border-width: 3px; border-color: #cfd6df; border-top-color: var(--tm-grafito); }
.preloader-wrapper .spinner-layer.spinner-blue-only { border-color: var(--tm-grafito); }
.preloader-wrapper .spinner-blue-only .circle { border-color: var(--tm-grafito); }

/* ---------- Barra superior ---------- */
.app-bar { height: 76px; background: #0E0C44; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.app-bar__logo img { height: 64px; width: auto; object-fit: contain; }
.app-bar__back { border-radius: 10px; padding: 6px 12px 6px 6px; transition: background-color .15s ease; }
.app-bar__back:hover { background-color: rgba(255, 255, 255, .08); }
.app-bar__back .material-icons { background: rgba(255, 255, 255, .16); }
.app-bar__back span { text-decoration: none; font-weight: 600; }
.app-bar .app-bar__user { border-radius: 10px; padding: 8px 12px; transition: background-color .15s ease; }
.app-bar .app-bar__user:hover { background-color: rgba(255, 255, 255, .08); }
.app-bar__user #username { text-decoration: none; font-weight: 600; }
.app-bar a:focus-visible { outline-color: #fff; box-shadow: none; }

/* Menú de usuario desplegable */
ul.dropdown-content {
    min-width: 200px; margin-top: 4px; padding: 6px; border-radius: 12px; border: 1px solid #e3e8ef;
    background: #fff; box-shadow: 0 12px 28px rgba(20, 24, 30, .22); overflow: hidden;
}
ul.dropdown-content:focus, ul.dropdown-content:focus-visible { outline: none !important; }
ul.dropdown-content > li { min-height: 0; background: transparent; }
ul.dropdown-content > li > a {
    display: flex; align-items: center; gap: 12px; height: 46px; line-height: 46px; padding: 0 14px;
    border-radius: 8px; color: #1c1f24 !important; font-weight: 500; white-space: nowrap; background: transparent;
}
ul.dropdown-content > li > a > i.material-icons { margin: 0 !important; height: auto; line-height: 1; float: none; font-size: 22px; color: #546e7a; }
ul.dropdown-content > li > a > span { font-size: .95rem !important; }
ul.dropdown-content > li > a:hover { background-color: var(--tm-gris-claro); }
ul.dropdown-content#exit > li > a, ul.dropdown-content#exit > li > a > i.material-icons { color: #b71c1c !important; }
ul.dropdown-content#exit > li > a:hover { background-color: #fdecea; }

/* ---------- Botones ---------- */
.btn, .btn-large, .btn-small, button.btn {
    background-color: var(--tm-grafito); color: #fff; border-radius: 10px; font-weight: 600;
    text-transform: none; letter-spacing: 0; box-shadow: none;
}
.btn:hover, .btn-large:hover, .btn-small:hover { background-color: var(--tm-grafito-2); box-shadow: none; }
.btn.disabled, .btn[disabled], .btn-large.disabled, .btn-flat.disabled {
    background-color: #e0e3e7 !important; color: #9aa5b1 !important; box-shadow: none !important;
}
.btn-floating { background-color: var(--tm-grafito); box-shadow: 0 2px 6px rgba(20, 24, 30, .25); }
.btn-floating:hover { background-color: var(--tm-grafito-2); }
.btn-floating.blue, .btn-floating.light-blue, .btn-floating.green, .btn-floating.teal,
.btn.blue, .btn.light-blue, .btn.green, .btn.teal { background-color: var(--tm-grafito) !important; }
.btn-floating.red, .btn.red { background-color: #d32f2f !important; }
.btn-flat { color: var(--tm-grafito); font-weight: 600; text-transform: none; border-radius: 10px; }
.btn-flat:hover { background-color: var(--tm-gris-claro); }
.btn-flat.btn-primary-outline { border: 1px solid #b0bec5; background: #fff; }

/* ---------- Campos ---------- */
input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]), input[type=number]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 2px solid var(--tm-grafito); box-shadow: 0 1px 0 0 var(--tm-grafito);
}
input:focus:not([readonly]) + label, textarea:focus:not([readonly]) + label { color: var(--tm-grafito) !important; }
.input-field .prefix.active { color: var(--tm-grafito); }
.switch label input[type=checkbox]:checked + .lever { background-color: #aeb5bf; }
.switch label input[type=checkbox]:checked + .lever:after { background-color: var(--tm-grafito); }
[type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:after { background-color: var(--tm-grafito); border-color: var(--tm-grafito); }
[type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:before { border-color: var(--tm-grafito); }
[type="checkbox"].filled-in:checked + span:not(.lever):after { background-color: var(--tm-grafito); border-color: var(--tm-grafito); }

/* ---------- Barras de progreso ---------- */
.progress { background-color: #e3e8ef; border-radius: 999px; overflow: hidden; }
.progress .determinate { background-color: var(--tm-grafito); }
.progress .indeterminate { background-color: var(--tm-grafito); }

/* ---------- Portada del participante ---------- */
.pp-saludo { color: #0E0C44; letter-spacing: -.01em; }
.pp-subsaludo { color: #546e7a; }
.pp-seccion { border-left: 4px solid var(--tm-rojo); color: #0E0C44; }

.curso-card {
    border: 1px solid var(--tm-gris-borde); border-left: 5px solid var(--tm-grafito); border-radius: 14px;
    box-shadow: var(--ux-sombra); transition: box-shadow .2s ease, transform .2s ease, border-left-color .2s ease;
}
.curso-card:hover, .curso-card:focus { border-left-color: var(--tm-rojo); box-shadow: var(--ux-sombra-alta); }
.curso-card h5 { color: #0E0C44; }

/* Acordeón de cursos realizados (mismo patrón que el acordeón del admin) */
#cursosMostrarPortadaRealizados .collapsible { border: 0; box-shadow: none; display: flex; flex-direction: column; gap: 10px; margin: 0; }
#cursosMostrarPortadaRealizados .collapsible > li {
    margin: 0; background: #fff; border: 1px solid var(--tm-gris-borde); border-left: 4px solid transparent;
    border-radius: 12px; overflow: hidden; box-shadow: none; transition: box-shadow .2s ease, border-color .2s ease;
}
#cursosMostrarPortadaRealizados .collapsible > li.active {
    border-color: #b4bfcc; border-left-color: var(--tm-rojo); box-shadow: 0 6px 18px rgba(20, 24, 30, .12);
}
#cursosMostrarPortadaRealizados .collapsible-header {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px; min-height: 64px; background: #fff;
    font-size: 1.05rem; font-weight: 700; color: #0E0C44; transition: background-color .15s ease;
}
#cursosMostrarPortadaRealizados .collapsible-header:hover { background: #f5f7fa; }
#cursosMostrarPortadaRealizados .collapsible-header > i.material-icons {
    width: 40px; height: 40px; margin: 0; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center;
    justify-content: center; font-size: 22px; background: var(--tm-gris-claro); color: var(--tm-grafito);
}
#cursosMostrarPortadaRealizados .collapsible > li.active .collapsible-header > i.material-icons { background: var(--tm-grafito); color: #fff; }
#cursosMostrarPortadaRealizados .collapsible-header .badge { margin-left: auto; float: none; font-size: .8rem; font-weight: 600; color: #455a64; background: var(--tm-gris-claro); border-radius: 999px; padding: 3px 12px; }
#cursosMostrarPortadaRealizados .collapsible-header:after {
    content: "expand_more"; font-family: "Material Icons"; font-size: 26px; font-weight: normal; line-height: 1;
    font-style: normal; text-transform: none; letter-spacing: normal; white-space: nowrap; direction: ltr;
    -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
    color: #546e7a; transition: transform .25s ease;
}
#cursosMostrarPortadaRealizados .collapsible > li.active .collapsible-header:after { transform: rotate(180deg); color: var(--tm-grafito); }
#cursosMostrarPortadaRealizados .collapsible-body { border: 0; border-top: 1px solid #e3e8ef; background: #fafbfc; padding: 8px 18px 14px; }
.curso-realizado .curso-info { border-left: 3px solid var(--tm-rojo); }
.curso-realizado[data-curso]:hover, .curso-realizado[data-curso]:focus-visible { background-color: var(--tm-gris-claro); }
.curso-realizado[data-curso]:focus-visible { outline-color: var(--tm-grafito); }

/* ---------- Portada de un curso (secciones) ---------- */
.pc-titulo { color: #0E0C44; }
.pc-item__link { border: 1px solid var(--tm-gris-borde); border-radius: 14px; box-shadow: var(--ux-sombra); }
.pc-item__link:hover, .pc-item__link:focus-visible { border-color: #b4bfcc; box-shadow: var(--ux-sombra-alta); transform: translateY(-2px); }
.pc-item__icono { border-radius: 12px; background: var(--tm-gris-claro); color: var(--tm-grafito); }
.pc-item__link:hover .pc-item__icono { background: var(--tm-grafito); color: #fff; }
.pc-item[data-estado="ok"] .pc-item__icono { border-radius: 12px; }
.pc-item__link.disabled { border-radius: 14px; }
.pc-aviso { background: var(--tm-gris-claro); border: 1px solid var(--tm-gris-borde); border-radius: 12px; color: #263238; }
.pc-aviso .material-icons { color: var(--tm-grafito); }
.pc-detalles-movil { color: var(--tm-grafito); }

/* ---------- Panel "Detalles del curso" ---------- */
.dc-panel { border: 1px solid var(--tm-gris-borde); border-radius: 14px; box-shadow: var(--ux-sombra); }
.dc-imagen { border: 3px solid var(--tm-grafito); }
.dc-titulo { color: #546e7a; }
.dc-fila .material-icons { color: var(--tm-grafito); }
.dc-fila { border-bottom: 1px solid #e8ecf2; }

/* ---------- Modales (mismo estilo que el admin) ---------- */
.modal { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(18, 31, 61, .35); }
.modal:focus, .modal:focus-visible { outline: none !important; box-shadow: 0 20px 50px rgba(18, 31, 61, .35); }
.modal .modal-footer { background: #f5f7fa; border-top: 1px solid #dfe5ec; padding: 12px 24px; }
.modal .modal-footer .btn, .modal .modal-footer .btn-flat { height: 42px; line-height: 42px; padding: 0 22px; border-radius: 10px; font-weight: 600; margin-left: 8px; }
.modal .modal-footer .btn-flat { border: 1px solid #b0bec5; background: #fff; color: #455a64; }
.modal .modal-footer .btn-flat:hover { background: var(--tm-gris-claro); }
.modal-overlay { background: rgba(40, 46, 56, .36) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* Cabecera con degradado grafito, como en el banner del admin */
.modal .modal-content > h4:first-child, .modal .modal-content > h5:first-child, .modal .modal-content > h6:first-child {
    margin: -24px -24px 22px; padding: 18px 24px; color: #fff; font-size: 1.2rem; font-weight: 700;
    background: linear-gradient(135deg, #1c1f24 0%, #343a42 55%, #2B2A7A 100%); position: relative; overflow: hidden;
}

/* ---------- Teléfono ---------- */
@media (max-width: 600px) {
    .app-bar { height: 64px; }
    .app-bar__logo img { height: 50px; }
    .modal { width: 94% !important; }
}

/* ---------- Componentes comunes de las pantallas del participante ---------- */
/* Título de sección con icono (certificado, evaluación, etc.) */
.tm-seccion-titulo { display: flex; align-items: center; gap: 12px; color: #0E0C44; }
.tm-seccion-icono { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tm-grafito); color: #fff; flex-shrink: 0; }
.tm-seccion-icono .material-icons { margin: 0; color: #fff !important; font-size: 24px; }
.tm-seccion-texto { font-size: 1.5rem; font-weight: 700; color: #0E0C44; }

/* Botón con icono y texto (en lugar de botones circulares solo con icono) */
.btn.tm-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; line-height: 42px; padding: 0 18px; }
.btn.tm-btn .material-icons { margin: 0; line-height: 1; font-size: 20px; height: auto; float: none; }

/* Área principal de las pantallas del curso: tarjeta blanca sobre fondo gris */
#contentDesktop {
    background: #fff !important; background-image: none !important; border: 1px solid var(--tm-gris-borde);
    border-radius: 14px; box-shadow: var(--ux-sombra); padding: 20px 28px 28px !important; margin-top: 8px;
}
#contentDesktop h5 { color: #0E0C44; }
#contentDesktop hr.solid { border: 0; border-top: 1px solid #e3e8ef; margin: 12px 0 16px; }
#contentDesktop { display: flow-root; }
#contentDesktop > .row { margin-bottom: 0; }

/* La vista previa del certificado se dibuja con elementos escalados (transform) y su contenedor mide 0:
   se reserva el alto que ocupa escalado para que la tarjeta lo contenga. */
#modalCertificado { min-height: 560px; }
@media (orientation: portrait) { #modalCertificado { min-height: 340px; } }

/* Botones generados por los scripts con la clase "grey": acción principal en grafito,
   y los que cierran o vuelven (modal-close) como botón secundario con borde. */
.btn.grey, a.btn.grey { background-color: var(--tm-grafito) !important; color: #fff !important; }
.btn.grey:hover { background-color: var(--tm-grafito-2) !important; }
.btn.grey.modal-close, a.btn.grey.modal-close {
    background-color: #fff !important; color: #455a64 !important; border: 1px solid #b0bec5; box-shadow: none;
}
.btn.grey.modal-close:hover { background-color: var(--tm-gris-claro) !important; border-color: var(--tm-grafito); }

/* =====================================================================
   Resultado de la evaluación / pantalla de evaluación finalizada
   (el HTML lo genera js/realizaEvaluacion.js)
   ===================================================================== */
.ev-resumen, .ev-final { --ev-color: #1b7f43; --ev-fondo: #e8f5e9; --ev-borde: #b7dfbf; }
.ev-resumen--mal, .ev-final--mal { --ev-color: #c62828; --ev-fondo: #fdecea; --ev-borde: #f3b8b3; }

/* Estado: cápsula con icono */
.ev-estado {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px 5px 10px; border-radius: 999px;
    background: var(--ev-fondo); color: var(--ev-color); border: 1px solid var(--ev-borde);
    font-size: .85rem; font-weight: 700; letter-spacing: .02em;
}
.ev-estado .material-icons { font-size: 20px; line-height: 1; margin: 0; }

/* Resumen con anillo de porcentaje */
.ev-resumen {
    display: flex; align-items: center; gap: 28px; padding: 24px 28px; margin: 4px 0 28px;
    background: #fff; border: 1px solid var(--tm-gris-borde); border-left: 6px solid var(--ev-color);
    border-radius: 16px; box-shadow: var(--ux-sombra);
}
.ev-anillo {
    --pct: 0; position: relative; flex: 0 0 auto; width: 124px; height: 124px; border-radius: 50%;
    background: conic-gradient(var(--ev-color) calc(var(--pct) * 1%), #e3e8ef 0);
    display: flex; align-items: center; justify-content: center;
}
.ev-anillo:before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; }
.ev-anillo-centro { position: relative; display: flex; align-items: baseline; color: #0E0C44; }
.ev-anillo-centro b { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.ev-anillo-centro small { font-size: 1rem; font-weight: 700; margin-left: 1px; color: #546e7a; }
.ev-resumen-datos { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.ev-nota { font-size: 1.7rem; font-weight: 800; color: #0E0C44; line-height: 1.2; }
.ev-nota small { font-size: 1.05rem; font-weight: 600; color: #546e7a; }
.ev-detalle { margin: 0; color: #546e7a; font-size: .95rem; }

/* Título de la evaluación */
.ev-titulo-actividad {
    display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; font-size: 1.2rem; font-weight: 700; color: #0E0C44;
}
.ev-titulo-icono { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tm-grafito); color: #fff; flex-shrink: 0; }
.ev-titulo-icono .material-icons { font-size: 22px; margin: 0; }

/* Preguntas */
.ev-lista { display: flex; flex-direction: column; gap: 14px; }
.ev-pregunta { background: #fafbfc; border: 1px solid var(--tm-gris-borde); border-radius: 14px; padding: 18px 20px 16px; }
.ev-pregunta-cab { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.ev-num {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--tm-grafito); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700;
}
.ev-pregunta-texto { font-size: 1.05rem; font-weight: 700; color: #0E0C44; line-height: 1.4; padding-top: 3px; }

/* Respuestas */
.ev-respuesta {
    display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--ev-borde, #d3dae3); background: var(--ev-fondo, #fff); color: #263238;
}
.ev-respuesta--ok { --ev-color: #1b7f43; --ev-fondo: #e8f5e9; --ev-borde: #b7dfbf; }
.ev-respuesta--mal { --ev-color: #c62828; --ev-fondo: #fdecea; --ev-borde: #f3b8b3; }
.ev-letra {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: #fff; color: var(--ev-color);
    border: 1px solid var(--ev-borde); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.ev-respuesta-texto { flex: 1 1 auto; min-width: 0; font-size: 1rem; line-height: 1.4; word-break: break-word; }
.ev-etiqueta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--ev-color);
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.ev-etiqueta .material-icons { font-size: 20px; margin: 0; line-height: 1; }

/* Pantalla "Evaluación finalizada" */
.ev-final { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px 20px; text-align: center; }
.ev-final-icono {
    width: 76px; height: 76px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ev-color); color: #fff; box-shadow: 0 8px 20px rgba(20, 24, 30, .18);
}
.ev-final-icono .material-icons { font-size: 44px; margin: 0; }
.ev-final-titulo { margin: 8px 0 0; font-weight: 800; color: #0E0C44; }
.ev-final-nota { font-size: 2.6rem; font-weight: 800; color: var(--ev-color); line-height: 1.1; }
.ev-final-nota small { font-size: 1.2rem; font-weight: 600; color: #546e7a; }
.ev-final-texto { margin: -4px 0 8px; color: #546e7a; }
.ev-final-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 16px 0 8px; }
.ev-final-acciones .btn { display: inline-flex; align-items: center; height: 44px; line-height: 44px; padding: 0 20px; }
.ev-final-acciones .btn .material-icons.left { margin-right: 8px; height: auto; line-height: 1; }
.ev-final-acciones .btn-outline {
    display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
    border: 2px solid #0E0C44; border-radius: 8px; background: transparent; color: #0E0C44;
    font-weight: 600; text-decoration: none; cursor: pointer; user-select: none;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.ev-final-acciones .btn-outline .material-icons.left { margin: 0 8px 0 0; height: auto; line-height: 1; }
.ev-final-acciones .btn-outline:hover, .ev-final-acciones .btn-outline:focus-visible {
    background: #0E0C44; color: #fff; box-shadow: 0 4px 10px rgba(14, 12, 68, .25);
}
.ev-final-acciones .btn-outline:focus-visible { outline: 3px solid #90caf9; outline-offset: 2px; }
.ev-final-acciones .btn-outline:active { transform: translateY(1px); }
html[data-tema="oscuro"] .ev-final-acciones .btn-outline { border-color: #e6e9ee; color: #e6e9ee; }
html[data-tema="oscuro"] .ev-final-acciones .btn-outline:hover, html[data-tema="oscuro"] .ev-final-acciones .btn-outline:focus-visible { background: #e6e9ee; color: #14171c; }

@media (max-width: 600px) {
    .ev-resumen { flex-direction: column; text-align: center; padding: 20px 16px; gap: 16px; }
    .ev-resumen-datos { align-items: center; }
    .ev-respuesta { flex-wrap: wrap; }
    .ev-respuesta-texto { flex: 1 1 0; }
    .ev-etiqueta { flex-basis: 100%; margin-left: 0; }
    .ev-pregunta { padding: 14px 14px 12px; }
    .ev-final-acciones .btn { width: 100%; justify-content: center; }
}

/* Actividades sin nota (taller): estado neutro en grafito */
.ev-resumen--neutro, .ev-final--neutro { --ev-color: #0E0C44; --ev-fondo: #eceff1; --ev-borde: #cfd8dc; }

/* =====================================================================
   Accesibilidad, confirmaciones y modo oscuro
   ===================================================================== */
.st-saltar {
    position: fixed; left: 12px; top: -60px; z-index: 20000; padding: 10px 18px; border-radius: 10px;
    background: #0E0C44; color: #fff !important; font-weight: 600; transition: top .15s ease;
}
.st-saltar:focus { top: 12px; }
#contentDesktop:focus, main:focus { outline: none; }
/* Los campos de texto ya marcan el foco con la línea inferior de Materialize */
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus-visible, textarea:focus-visible { outline: none; box-shadow: none; }

.st-tema-btn {
    position: fixed; right: 16px; bottom: 16px; z-index: 900; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid #b0bec5; background: #fff; color: #0E0C44; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(20, 24, 30, .25); transition: transform .15s ease;
}
.st-tema-btn:hover { transform: translateY(-2px); }
.st-tema-btn .material-icons { font-size: 24px; }
@media (max-width: 600px) { .st-tema-btn { right: 10px; bottom: 10px; width: 42px; height: 42px; } }

#uxConfirmar { max-width: 460px; }
#uxConfirmar .modal-content { padding: 24px 24px 8px; }
#uxConfirmar .modal-content p { margin: 0; color: #546e7a; }
#uxConfirmar .modal-footer { height: auto; border-top: 0; background: transparent; padding: 14px 20px 18px; }
#uxConfirmar .modal-footer .btn { background-color: var(--tm-grafito); }
#uxConfirmar .modal-footer .btn.red { background-color: #d32f2f !important; }

html[data-tema="oscuro"] { color-scheme: dark; }
html[data-tema="oscuro"], html[data-tema="oscuro"] body { background-color: #14171c; color: #e6e9ee; }
html[data-tema="oscuro"] #contentDesktop, html[data-tema="oscuro"] .dc-panel, html[data-tema="oscuro"] .pc-item__link,
html[data-tema="oscuro"] .curso-card, html[data-tema="oscuro"] .ev-resumen, html[data-tema="oscuro"] .tp-tarea,
html[data-tema="oscuro"] #cursosMostrarPortadaRealizados .collapsible > li, html[data-tema="oscuro"] #cursosMostrarPortadaRealizados .collapsible-header {
    background: #1d2128 !important; border-color: #353b45; color: #e6e9ee; box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
html[data-tema="oscuro"] #cursosMostrarPortadaRealizados .collapsible-body { background: #181c22; border-color: #353b45; }
html[data-tema="oscuro"] .pp-saludo, html[data-tema="oscuro"] .pp-seccion, html[data-tema="oscuro"] .curso-card h5, html[data-tema="oscuro"] .pc-titulo,
html[data-tema="oscuro"] #contentDesktop h5, html[data-tema="oscuro"] .tm-seccion-titulo, html[data-tema="oscuro"] .tm-seccion-texto,
html[data-tema="oscuro"] .ev-nota, html[data-tema="oscuro"] .ev-titulo-actividad, html[data-tema="oscuro"] .ev-pregunta-texto,
html[data-tema="oscuro"] .ev-final-titulo, html[data-tema="oscuro"] .ev-anillo-centro, html[data-tema="oscuro"] .tp-titulo,
html[data-tema="oscuro"] .pc-item__titulo, html[data-tema="oscuro"] #cursosMostrarPortadaRealizados .collapsible-header { color: #f1f3f6; }
html[data-tema="oscuro"] .pp-subsaludo, html[data-tema="oscuro"] .pc-subtitulo, html[data-tema="oscuro"] .dc-titulo, html[data-tema="oscuro"] .ev-detalle,
html[data-tema="oscuro"] .ev-final-texto, html[data-tema="oscuro"] .tp-instr, html[data-tema="oscuro"] .tp-limite, html[data-tema="oscuro"] .tp-ayuda,
html[data-tema="oscuro"] .pc-item__estado, html[data-tema="oscuro"] .tp-bloqueo { color: #a9b4be; }
html[data-tema="oscuro"] .pc-item__icono, html[data-tema="oscuro"] #cursosMostrarPortadaRealizados .collapsible-header > i.material-icons { background: #2a3039; color: #e6e9ee; }
html[data-tema="oscuro"] .pc-aviso { background: #262b33; border-color: #353b45; color: #e6e9ee; }
html[data-tema="oscuro"] .ev-pregunta, html[data-tema="oscuro"] .tp-entrega { background: #21262d; border-color: #353b45; color: #e6e9ee; }
html[data-tema="oscuro"] .ev-anillo:before { background: #1d2128; }
html[data-tema="oscuro"] .ev-respuesta { background: #262b33; color: #e6e9ee; }
html[data-tema="oscuro"] .ev-respuesta--ok { background: #173a27; }
html[data-tema="oscuro"] .ev-respuesta--mal { background: #4a1f1f; }
html[data-tema="oscuro"] .ev-letra { background: #1d2128; }
html[data-tema="oscuro"] .dc-fila { border-color: #2e343d; color: #e6e9ee; }
html[data-tema="oscuro"] .modal, html[data-tema="oscuro"] .modal .modal-footer { background: #1d2128; color: #e6e9ee; border-color: #353b45; }
html[data-tema="oscuro"] .modal .modal-footer .btn-flat, html[data-tema="oscuro"] .btn.grey.modal-close { background: #262b33 !important; color: #e6e9ee !important; border-color: #2B2A7A; }
html[data-tema="oscuro"] input[type=text], html[data-tema="oscuro"] input[type=password], html[data-tema="oscuro"] input[type=email],
html[data-tema="oscuro"] input[type=number], html[data-tema="oscuro"] textarea.materialize-textarea { color: #e6e9ee; border-bottom-color: #6b7480; }
html[data-tema="oscuro"] label { color: #a9b4be; }
html[data-tema="oscuro"] .tp-archivo-input { background: #14171c; border-color: #2B2A7A; color: #e6e9ee; }
html[data-tema="oscuro"] ul.dropdown-content { background: #1d2128; border-color: #353b45; }
html[data-tema="oscuro"] ul.dropdown-content > li > a { color: #e6e9ee !important; }
html[data-tema="oscuro"] ul.dropdown-content > li > a:hover { background-color: #2a3039; }
html[data-tema="oscuro"] .progress { background-color: #353b45; }
html[data-tema="oscuro"] .st-tema-btn { background: #262b33; color: #f1f3f6; border-color: #2B2A7A; }
html[data-tema="oscuro"] .btn.disabled, html[data-tema="oscuro"] .pc-item__link.disabled { background-color: #2a3039 !important; color: #6b7480 !important; }
html[data-tema="oscuro"] .tp-pill, html[data-tema="oscuro"] .tp-pill--neutro { background: #2a3039; color: #cfd8dc; }
html[data-tema="oscuro"] .tp-pill--ok { background: #173a27; color: #7fe0a6; }
html[data-tema="oscuro"] .tp-pill--info { background: #16304f; color: #90c2ff; }
html[data-tema="oscuro"] .tp-pill--aviso { background: #4a3410; color: #ffc46b; }
html[data-tema="oscuro"] .tp-nota { background: #173a27; }
html[data-tema="oscuro"] .tp-nota__valor { color: #7fe0a6; }
html[data-tema="oscuro"] .tp-nota__texto p, html[data-tema="oscuro"] .tp-calificador { color: #cfe8d8; }
html[data-tema="oscuro"] .loading { background: #14171c; }
html[data-tema="oscuro"] .loading:before { border-color: #353b45; border-top-color: #e6e9ee; }