:root { --rojo: #cc0000; --oscuro: #121212; --gris: #1e1e1e; --borde: #333; }
html { background: var(--oscuro); overflow-x: hidden; }
body { font-family: 'Segoe UI', sans-serif; background: var(--oscuro); color: #eee; margin: 0; min-height: 100vh; overflow-x: hidden; }
/* Marca de agua: kanji 道 (dō, "el camino") oscuro de fondo, sutil para no entorpecer el texto */
body::before {
    content: "道";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    font-size: 60vh;
    line-height: 1;
    color: rgba(255, 255, 255, 0.018);
    font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'MS Mincho', serif;
    font-weight: bold;
    user-select: none;
}
/* Asegurar que el contenido quede sobre la marca de agua */
.sidebar, .contenido, .main-content, #app, .seccion { position: relative; z-index: 1; }

/* BARRA LATERAL */
.sidebar { width: 190px; height: 100vh; background: #000; padding: 15px 12px 20px 12px; border-right: 1.5px solid var(--rojo); position: fixed; overflow-y: auto; overflow-x: hidden; left: 0; top: 0; z-index: 900; }
.sidebar h2 { color: var(--rojo); text-align: center; margin-bottom: 20px; font-size: 1.1em; line-height: 1.3; }
.sidebar button { width: 100%; padding: 8px 10px; margin: 4px 0; cursor: pointer; background: var(--gris); color: white; border: 1px solid var(--borde); border-radius: 5px; text-align: left; transition: 0.3s; border-left: 4px solid transparent; font-size: 13px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar button:hover { background: var(--rojo); border-left: 4px solid white; }

/* ESTILO PARA LENGÜETA SELECCIONADA */
.sidebar button.btn-active {
    background: #2a2a2a; 
    border-left: 4px solid var(--rojo); 
    color: var(--rojo); 
    font-weight: bold;
    box-shadow: inset 0 0 10px rgba(204, 0, 0, 0.2);
}

/* CAJONES / GRUPOS DEL SIDEBAR — colapsables */
.sidebar-grupo {
    margin-top: 10px;
    border: 1px solid #2a2a2a;
    border-radius: 7px;
    overflow: hidden;
    background: #0a0a0a;
}

.sidebar-grupo-titulo {
    width: 100%;
    background: #111;
    border: none;
    border-bottom: 1px solid #222;
    color: #888;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: bold;
    padding: 7px 10px 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
    box-sizing: border-box;
    margin: 0 !important;
    border-radius: 0 !important;
}
.sidebar-grupo-titulo:hover {
    background: #181818;
    color: #bbb;
    border-left: none !important;
}
.sidebar-grupo-flecha {
    font-size: 10px;
    color: #666;
    transition: transform 0.2s ease;
    line-height: 1;
}

/* Estado colapsado: ocultar contenido + rotar flecha */
.sidebar-grupo.collapsed .sidebar-grupo-contenido {
    display: none;
}
.sidebar-grupo.collapsed .sidebar-grupo-flecha {
    transform: rotate(-90deg);
}

.sidebar-grupo-contenido {
    padding: 4px;
    display: block;
}

.sidebar-grupo-contenido button {
    margin: 2px 0;
    width: 100%;
    border-radius: 4px;
}

.sidebar-grupo-contenido button:last-child {
    margin-bottom: 2px;
}

/* Botón "⚙️ Configuración" mantiene su estilo discreto dentro del grupo */
.btn-config-side {
    background: none !important;
    border: 1px solid #333 !important;
    color: #888 !important;
    text-align: left;
    margin-top: 4px !important;
}

.main { margin-left: 190px; padding: 25px 30px 25px 36px; width: auto; min-height: 100vh; box-sizing: border-box; overflow-x: hidden; }
.seccion > h1:first-child, .seccion > h1 { padding-top: 10px; margin-top: 8px; margin-bottom: 18px; }
table { width: 100%; border-collapse: collapse; background: var(--gris); border-radius: 8px; overflow: hidden; margin-top: 15px; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--borde); text-align: left; }
th { background: #252525; color: #b0b0b0; text-transform: uppercase; font-size: 11px; }

.foto-mini { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rojo); }
.foto-ficha { width: 150px; height: 150px; border-radius: 10px; border: 3px solid var(--rojo); object-fit: cover; }

.cinturon-cuadro { width: 26px; height: 13px; border-radius: 3px; }
.cinturon-esquina { position: absolute; top: 0; right: 0; width: 60px; height: 60px; clip-path: polygon(100% 0, 0 0, 100% 100%); border-radius: 0 15px 0 0; }

.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input, select { background: #222; border: 1px solid var(--borde); color: white; padding: 10px; border-radius: 5px; }

.modal { display: none; position: fixed; background: rgba(0,0,0,0.9); width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-content { background: var(--gris); width: 700px; max-width: 95vw; margin: 10px auto 20px auto; padding: 20px 24px; border-radius: 15px; border-top: 5px solid var(--rojo); box-sizing: border-box; }

.btn-nuevo { background: var(--rojo) !important; font-weight: bold; border-left: none !important; text-align: center !important; }
.btn-reintegrar { background: #2ecc71; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; }
.btn-volver { background: #444; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; margin-bottom: 15px; }
.btn-editar { background: #3498db; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; }

.contador-asistencia { display: flex; align-items: center; gap: 8px; }
.num-clases { color: #e0e0e0; font-weight: bold; cursor: pointer; font-size: 1.1em; }

/* BOTÓN + CON ESTADO VERDE (MARCADO HOY) */
.btn-mas {
    background: #3a3a3a;
    color: #eee;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
    font-weight: bold;
}

.btn-mas:hover {
    background: #555;
}

.btn-mas.btn-marcado-hoy {
    background: #1a5c2a !important;
    border-color: #2ecc71 !important;
    color: #2ecc71 !important;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
}

.btn-menos {
    background: #3a3a3a;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
}

.btn-menos:hover { background: #5a2222; border-color: var(--rojo); }

/* ETIQUETA "MARCADO X VECES HOY" */
.etiqueta-marcado-hoy {
    font-size: 10px;
    color: #2ecc71;
    margin-top: 2px;
    white-space: nowrap;
    font-weight: bold;
    letter-spacing: 0.2px;
}

/* ESTILO NUEVO PARA BOTÓN BLOQUEADO */
.btn-bloqueado {
    background: #555 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    transform: scale(0.9);
}

.ficha-contenedor { background: #252525; padding: 30px; border-radius: 15px; color: white; border: 1px solid var(--borde); }
.ficha-header { display: flex; gap: 30px; align-items: center; margin-bottom: 30px; }
.ficha-grid-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: rgba(0,0,0,0.2); padding: 20px; border-radius: 10px; }
.dato-item { font-size: 14px; border-bottom: 1px solid #333; padding-bottom: 5px; }
.dato-item strong { color: var(--rojo); margin-right: 5px; }

input[type="date"] { color-scheme: dark; }
.logo-sidebar { display: block; width: 90px; max-width: 100%; height: auto; object-fit: contain; margin: 0 auto 15px auto; border-radius: 6px; }

.filtros-categoria {
    display: flex;
    gap: 10px;
    background: var(--gris);
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid var(--borde);
    margin-bottom: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.filtro-label {
    font-weight: bold;
    color: var(--rojo);
    margin-right: 8px;
    font-size: 13px;
}

.btn-filtro {
    background: #333;
    color: white;
    border: 1px solid var(--borde);
    padding: 7px 13px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 12px;
}

.btn-filtro.active {
    background: var(--rojo);
    border-color: var(--rojo);
    font-weight: bold;
}

/* =============================================
   ESTILOS CONTROL DE ASISTENCIA
   ============================================= */

/* Tabla asistencia general — colores más suaves */
#tabla-asistencia-general th {
    color: #b0b0b0;
    background: #202020;
}

#tabla-asistencia-general td {
    color: #d0d0d0;
}

.asistencia-detalle-contenedor {
    background: #252525;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--borde);
}

.asistencia-alumno-header {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #555;
}

.asistencia-alumno-header h2 {
    color: #e0e0e0;
    margin: 0 0 5px 0;
}

.asistencia-alumno-header p {
    margin: 0;
    color: #aaa;
    font-size: 13px;
}

.meses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.mes-card {
    background: #1a1a1a;
    border: 1px solid var(--borde);
    border-radius: 10px;
    overflow: hidden;
}

.mes-card-header {
    background: #252525;
    padding: 9px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #444;
}

.mes-card-header span {
    color: #c0c0c0;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
}

.mes-card-header .badge-clases {
    background: #3a6040;
    color: #7ce09a;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: bold;
}

/* SCROLL EN CUERPO DE MES — máximo 220px de alto */
.mes-card-body-scroll {
    padding: 10px 14px;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1a;
}

.mes-card-body-scroll::-webkit-scrollbar { width: 5px; }
.mes-card-body-scroll::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

.clase-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #2a2a2a;
    font-size: 12px;
    color: #b0b0b0;
}

.clase-item:last-child { border-bottom: none; }

.clase-item .clase-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    flex-shrink: 0;
}

.btn-ver-asistencia {
    background: #2a4a6a;
    color: #7eb8f7;
    border: 1px solid #3a6090;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: 0.2s;
}

.btn-ver-asistencia:hover {
    background: #3a5f8a;
    color: #fff;
}

.aviso-mes-antiguo {
    background: rgba(204,0,0,0.08);
    border: 1px solid #884444;
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #d08080;
}

.resumen-anual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.resumen-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.resumen-card .num {
    font-size: 1.15em;
    font-weight: 700;
    color: #7eb8f7;
    display: block;
    line-height: 1;
}

.resumen-card .label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.sin-clases-msg {
    color: #555;
    font-style: italic;
    font-size: 13px;
    padding: 8px 0;
}

/* NOMBRE CLICKABLE — blanco con alerta hover */
.nombre-clickable {
    font-weight: bold;
    color: #e8e8e8;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    border-radius: 4px;
    padding: 2px 4px;
    position: relative;
}

.nombre-clickable:hover {
    color: #ffffff;
    background: rgba(204, 0, 0, 0.15);
    outline: 1px solid rgba(204, 0, 0, 0.4);
}

.nombre-clickable::after {
    content: ' ↗';
    font-size: 10px;
    opacity: 0;
    color: var(--rojo);
    transition: opacity 0.2s;
}

.nombre-clickable:hover::after {
    opacity: 1;
}

/* PANELES DE FICHA */
.ficha-panel {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ficha-panel-titulo {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    color: #999;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a2a2a;
}

.ficha-panel-emergencia {
    border-color: #5a3000;
    background: rgba(100, 40, 0, 0.12);
}

.ficha-panel-emergencia .ficha-panel-titulo {
    color: #c07030;
}

.foto-upload { margin-top: 12px; }

/* =============================================
   DASHBOARD CARDS
   ============================================= */

.dash-card {
    background: var(--gris);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 20px 22px;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
}

.dash-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--rojo);
    border-radius: 12px 12px 0 0;
}

.dash-card:hover {
    border-color: #555;
    background: #252525;
}

.dash-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777;
    margin-bottom: 8px;
    font-weight: bold;
}

.dash-card-num {
    font-size: 2.4em;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
}

/* =============================================
   RANKING BANNER — Control de Asistencia
   ============================================= */

.ranking-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #1a1200 0%, #1e1a00 40%, #141414 100%);
    border: 1px solid #6a5000;
    border-left: 4px solid #f1c40f;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.ranking-banner-icono {
    font-size: 2em;
    line-height: 1;
    flex-shrink: 0;
}

.ranking-banner-texto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 200px;
}

.ranking-banner-titulo {
    font-size: 14px;
    font-weight: bold;
    color: #f1c40f;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ranking-banner-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

.ranking-banner-medallas {
    display: flex;
    gap: 6px;
    font-size: 1.5em;
    flex-shrink: 0;
}

/* =============================================
   COLUMNA PUESTO — Control de Asistencia
   ============================================= */

.puesto-celda {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 11px;
    min-width: auto;
}

.puesto-medalla {
    font-size: 14px;
    line-height: 1;
}

.puesto-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #aaa;
    white-space: nowrap;
}

.puesto-1 {
    background: rgba(255, 215, 0, 0.10);
    border: 1px solid rgba(255, 215, 0, 0.35);
}
.puesto-1 .puesto-label { color: #f1c40f; }

.puesto-2 {
    background: rgba(192, 192, 192, 0.08);
    border: 1px solid rgba(192, 192, 192, 0.30);
}
.puesto-2 .puesto-label { color: #b0b0b0; }

.puesto-3 {
    background: rgba(205, 127, 50, 0.09);
    border: 1px solid rgba(205, 127, 50, 0.30);
}
.puesto-3 .puesto-label { color: #cd9a4a; }

.puesto-normal {
    background: transparent;
    border: 1px solid #2a2a2a;
}

.puesto-num {
    font-size: 11px;
    font-weight: 600;
    color: #888;
}

/* =============================================
   MOBILE TOPBAR & HAMBURGER MENU
   ============================================= */

.mobile-topbar {
    display: none !important;
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1090;
}

/* =============================================
   RESPONSIVE MÓVIL — max 768px
   ============================================= */

@media (max-width: 768px) {

    /* Sidebar en móvil — oculto por defecto, aparece al abrir hamburger */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 260px !important;
        height: 100vh !important;
        z-index: 1100 !important;
        transition: left 0.3s ease !important;
        border-right: none !important;
        padding-top: 60px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .sidebar.mobile-open {
        left: 0 !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.8);
    }

    /* TOPBAR MÓVIL */
    .mobile-topbar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        background: #000;
        border-bottom: 1.5px solid var(--rojo);
        z-index: 1050;
        padding: 0 12px;
    }

    .mobile-topbar-left {
        display: flex;
        align-items: center;
        gap: 10px;
        overflow: hidden;
    }

    .mobile-logo-img {
        width: 36px;
        height: 36px;
        object-fit: contain;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .mobile-dojo-nombre {
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    /* BOTÓN HAMBURGUESA */
    .hamburger-btn {
        background: none;
        border: 1px solid #444;
        border-radius: 6px;
        padding: 7px 9px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex-shrink: 0;
    }

    .hamburger-btn span {
        display: block;
        width: 22px;
        height: 2px;
        background: #eee;
        border-radius: 2px;
        transition: 0.3s;
    }

    /* OVERLAY */
    .mobile-overlay.visible {
        display: block;
    }

    /* CONTENIDO PRINCIPAL */
    .main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 68px 12px 20px 12px !important;
        box-sizing: border-box !important;
        min-height: 100vh;
        overflow-x: hidden !important;
    }

    /* TIPOGRAFÍA ADAPTADA */
    h1 {
        font-size: 1.3em;
        margin-bottom: 12px;
    }

    /* FILTROS: fila scrollable horizontal */
    .filtros-categoria {
        padding: 10px 10px;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filtro-label {
        flex-shrink: 0;
        font-size: 12px;
    }

    .btn-filtro {
        flex-shrink: 0;
        padding: 9px 14px;
        font-size: 13px;
        touch-action: manipulation;
    }

    /* BUSCADOR — ancho completo en móvil */
    .filtros-categoria > div:last-child {
        margin-left: 0 !important;
        width: 100%;
    }

    .filtros-categoria input[type="text"] {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* -----------------------------------------------
       OCULTAR TABLAS NATIVAS Y MOSTRAR CARDS MÓVIL
    ----------------------------------------------- */

    /* Tablas principales que se convierten a cards */
    #tabla-alumnos,
    #tabla-examenes,
    #tabla-asistencia-general,
    #tabla-historicos,
    #tabla-instructores {
        display: none !important;
    }

    /* Contenedor de cards dinámico */
    .mobile-cards-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
    }

    /* CARD BASE MÓVIL */
    .m-card {
        background: var(--gris);
        border: 1px solid var(--borde);
        border-radius: 10px;
        padding: 12px 14px;
        position: relative;
        overflow: hidden;
    }

    .m-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 3px;
        height: 100%;
        background: var(--rojo);
        border-radius: 3px 0 0 3px;
    }

    .m-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .m-card-foto {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--rojo);
        flex-shrink: 0;
    }

    .m-card-cinto {
        width: 18px;
        height: 9px;
        border-radius: 2px;
        flex-shrink: 0;
        border: 1px solid #555;
    }

    .m-card-nombre {
        font-weight: bold;
        font-size: 14px;
        color: #eee;
        flex: 1;
        cursor: pointer;
    }

    .m-card-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 10px;
        font-size: 12px;
        color: #aaa;
        padding-left: 4px;
    }

    .m-card-body .m-label {
        color: #666;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .m-card-body .m-val {
        color: #ccc;
        font-size: 12px;
    }

    .m-card-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid #2a2a2a;
        flex-wrap: wrap;
    }

    /* Botones de asistencia en card */
    .btn-menos, .btn-mas {
        padding: 7px 14px;
        font-size: 18px;
        touch-action: manipulation;
    }

    .num-clases {
        font-size: 1.3em;
        min-width: 28px;
        text-align: center;
    }

    /* Badge de estado pago en card */
    .m-badge-pago {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 11px;
        font-weight: bold;
        flex-shrink: 0;
    }

    /* MODAL EN MÓVIL */
    .modal {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 12px auto 40px auto !important;
        padding: 16px 12px !important;
        box-sizing: border-box !important;
    }

    .modal-content .grid-form {
        grid-template-columns: 1fr !important;
    }

    .modal-content input[style*="grid-column:span 2"],
    .modal-content input[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }

    /* PANELES DE FICHA EN MÓVIL */
    .ficha-contenedor {
        padding: 16px 12px;
    }

    .ficha-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Grid de 3 paneles → 1 columna en móvil */
    .ficha-contenedor > div[style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* DASH CARDS */
    .dash-card {
        padding: 14px 14px;
    }

    .dash-card-num {
        font-size: 1.8em;
    }

    /* DASHBOARD GRIDS — colapsar a 1 columna en móvil */
    #sec-dashboard > div[style*="grid-template-columns:1fr 1fr"],
    #sec-dashboard > div[style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Modal ficha compacta en móvil — volver a 1 columna */
    #modal .modal-content > div[style*="grid-template-columns:1fr 1fr"],
    #modal .modal-content > div[style*="grid-template-columns:1fr auto"] {
        grid-template-columns: 1fr !important;
    }

    /* RANKING BANNER MÓVIL */
    .ranking-banner {
        padding: 10px 12px;
        gap: 10px;
    }

    .ranking-banner-desc {
        font-size: 11px;
    }

    /* MES CARDS ASISTENCIA */
    .meses-grid {
        grid-template-columns: 1fr;
    }

    /* TABLAS DENTRO DE FICHA (historial exámenes, pagos) — scroll horizontal */
    .ficha-contenedor table,
    #sec-pagos table,
    #sec-historial-pagos-detalle table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* PUESTO CELDA — más compacta */
    .puesto-celda {
        min-width: 40px;
        padding: 2px 4px;
    }

    .puesto-medalla {
        font-size: 1.1em;
    }

    /* LOGO SIDEBAR — ocultar en móvil dentro del sidebar (ya está en topbar) */
    .logo-sidebar {
        display: none;
    }

    /* Nombre dojo en sidebar también más compacto */
    .sidebar h2 {
        font-size: 0.95em;
        margin-bottom: 10px;
    }

    /* Botones sidebar más grandes para toque */
    .sidebar button {
        padding: 12px 10px;
        font-size: 14px;
        margin: 5px 0;
    }

    /* SECCIÓN DETALLE ASISTENCIA */
    .asistencia-alumno-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Botón volver */
    .btn-volver {
        margin-bottom: 10px;
        padding: 10px 14px;
        font-size: 13px;
        touch-action: manipulation;
    }

    /* GRID DATOS KARATE EN MODAL → 1 col */
    .modal-content .grid-form[style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ELIMINAR LÍNEA ROJA VERTICAL EN MÓVIL — ya cubierto arriba en .sidebar */

    /* Tabla historial pagos */
    #contenedor-tabla-historial {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =================================================================
   ═══════════════════════════════════════════════════════════════════
   REESTRUCTURACIÓN ESTÉTICA Y RESPONSIVA — MAYO 2026
   Migrado desde <style> inline de index.html para mantener
   modularidad y separación de responsabilidades.
   ═══════════════════════════════════════════════════════════════════
   ================================================================= */

/* ─── Reset puntual: evitar scroll horizontal y limitar viewport ── */
html, body {
    background: #121212 !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
img { max-width: 100%; height: auto; }

/* =============================================
   IDENTIDAD DE MARCA — Sidebar (Dojo Kan)
   ─────────────────────────────────────────────
   Línea divisoria sutil debajo del escudo oficial
   + bloque de marca de la aplicación (Dojo Kan)
   + créditos corporativos del autor (2 líneas, 10px,
     blanco con opacidad para no competir con el escudo).
   ============================================= */

/* Línea divisoria entre la INSIGNIA OFICIAL del Dojo y la MARCA de la app.
   Doble línea: una fina central + halo rojo sutil que evoca el lacquer del Torii.
   Suficientemente visible para marcar jerarquía sin competir con el escudo. */
.sidebar-divisor {
    border: none;
    height: 8px;
    position: relative;
    margin: 8px 14px 10px;
    padding: 0;
    background: transparent;
}
.sidebar-divisor::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg,
                  transparent 0%,
                  rgba(204, 0, 0, 0.35) 18%,
                  rgba(204, 0, 0, 0.70) 50%,
                  rgba(204, 0, 0, 0.35) 82%,
                  transparent 100%);
}
.sidebar-divisor::after {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    top: calc(50% + 3px);
    height: 1px;
    background: linear-gradient(90deg,
                  transparent 0%,
                  rgba(255, 255, 255, 0.10) 50%,
                  transparent 100%);
}

.marca-dojokan {
    text-align: center;
    padding: 2px 10px 12px;
    margin-bottom: 6px;
}
.marca-dojokan-linea {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    line-height: 1;
}
.marca-dojokan-icon {
    font-size: 14px;
    line-height: 1;
}
.marca-dojokan-texto {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    color: #cc0000;
    letter-spacing: 1.4px;
}
.marca-dojokan-autor {
    font-size: 10px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.32);
    letter-spacing: 0.4px;
    margin-top: 5px;
    font-weight: 300;
    text-align: center;
}
.marca-dojokan-autor .nombre-autor {
    display: block;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 400;
}
.marca-dojokan-autor .copyright {
    display: block;
    color: rgba(255, 255, 255, 0.42);
    font-size: 9px;
    margin-top: 1px;
}

/* =============================================
   TABLAS COMPACTAS — alineación uniforme a la izquierda
   Estandarización basada en el estilo de Instructores
   ============================================= */
.tabla-compacta {
    width: 100%;
    border-collapse: collapse;
}
.tabla-compacta th,
.tabla-compacta td {
    text-align: left;
    padding: 8px 10px;
    vertical-align: middle;
}
.tabla-compacta th:first-child,
.tabla-compacta td:first-child {
    padding-left: 6px;
}
/* Respetar text-align inline (con o sin espacio) */
.tabla-compacta th[style*="text-align: center"],
.tabla-compacta td[style*="text-align: center"],
.tabla-compacta th[style*="text-align:center"],
.tabla-compacta td[style*="text-align:center"] {
    text-align: center;
}

/* =============================================
   BOTONES DE ACCIÓN — Históricos (pill-style elegante)
   ============================================= */
.btn-accion-historico {
    background: transparent;
    border: 1px solid #3a3a3a;
    color: #ccc;
    padding: 5px 11px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.btn-accion-historico:hover {
    border-color: #555;
    background: #1c1c1c;
    color: #fff;
}
.btn-accion-historico.reintegrar {
    color: #6ec98a;
    border-color: #2a4a32;
}
.btn-accion-historico.reintegrar:hover {
    background: rgba(46, 204, 113, 0.08);
    border-color: #2ecc71;
    color: #2ecc71;
}
.btn-accion-historico.eliminar {
    color: #d97070;
    border-color: #4a2a2a;
}
.btn-accion-historico.eliminar:hover {
    background: rgba(204, 0, 0, 0.08);
    border-color: #cc0000;
    color: #ff5555;
}

/* =============================================
   BOTONES DE ACCIÓN — Caja y Pagos
   Iconos circulares minimalistas + tooltip CSS nativo
   ============================================= */
.btn-pago-icon {
    background: transparent;
    border: 1px solid #2e2e2e;
    color: #b8b8b8;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    position: relative;
    text-decoration: none;
    line-height: 1;
    padding: 0;
}
.btn-pago-icon:hover { transform: translateY(-1px); }
.btn-pago-icon.cobrar  { color: #ff6b6b; border-color: #4a1a1a; }
.btn-pago-icon.cobrar:hover  { background: rgba(204, 0, 0, 0.12); border-color: #cc0000; color: #fff; }
.btn-pago-icon.pdf     { color: #d0d0d0; border-color: #3a3a3a; }
.btn-pago-icon.pdf:hover     { background: #222; border-color: #555; color: #fff; }
.btn-pago-icon.correo  { color: #7eb8f7; border-color: #1a3a5a; }
.btn-pago-icon.correo:hover  { background: rgba(126, 184, 247, 0.1); border-color: #7eb8f7; }
.btn-pago-icon.wsp     { color: #2ecc71; border-color: #1a4a1a; }
.btn-pago-icon.wsp:hover     { background: rgba(46, 204, 113, 0.1); border-color: #2ecc71; }

/* Tooltip CSS nativo (sobre el icono) */
.btn-pago-icon[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    border: 1px solid #444;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.btn-pago-icon[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #000;
    z-index: 1000;
}

/* =============================================
   ASISTENCIA — Caja de progreso para examen (compactada)
   ============================================= */
.progreso-examen-box {
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 14px 0;
}
.progreso-examen-box h3 {
    font-size: 13px !important;
    margin-bottom: 10px !important;
}

/* =============================================
   DASHBOARD — Paneles compactos (sustituye a .dash-bottom-grid)
   ============================================= */
.dash-bottom-grid-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.dash-panel-compact {
    background: var(--gris, #181818);
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid var(--borde, #2a2a2a);
}
.dash-panel-compact h3 {
    font-size: 12px !important;
    margin: 0 0 10px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #eee;
}
.dash-panel-compact table { font-size: 12px; margin-top: 0; }
.dash-panel-compact table th { font-size: 10px; padding: 4px 6px; }
.dash-panel-compact table td { padding: 5px 6px; font-size: 12px; }

/* =============================================
   PANELES DE CONFIGURACIÓN — grados y tarifas (grids responsivos)
   ============================================= */
.grados-panel-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 70px 70px 50px 36px;
    gap: 5px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid #1e1e1e;
}

.tarifas-panel-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid #222;
}

/* =============================================
   CARDS MÓVIL — foto fija (override unificado)
   ============================================= */
.m-card-foto {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

/* =================================================================
   RESPONSIVIDAD UNIFICADA POR ORIENTACIÓN — Estándar global
   ─────────────────────────────────────────────────────────────────
   REGLA DE NEGOCIO:
   • Celular VERTICAL (portrait, ≤932px)   → tarjetas .m-card compactas
                                              (cada fila condensada
                                              en su contenedor).
   • Celular HORIZONTAL (landscape, ≤932px) → hereda la tabla plana
                                              y extendida de la versión
                                              PC (.tabla-compacta).
   • Escritorio (≥933px, cualquier orient.) → tabla PC.
   Aplica a TODAS las pestañas: Alumnos, Instructores, Históricos,
   Caja y Pagos, Asistencia y Exámenes.
   ================================================================= */

/* DEFAULT — Cards ocultas; tablas visibles (vale para PC y landscape) */
.mobile-cards-container { display: none !important; }

/* ───── PORTRAIT MÓVIL: cards en 1 columna, tablas ocultas ───── */
@media screen and (max-width: 932px) and (orientation: portrait) {
    #sec-alumnos      table,
    #sec-examenes     table,
    #sec-asistencia   table,
    #sec-historicos   table,
    #sec-instructores table {
        display: none !important;
    }

    .mobile-cards-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .mobile-cards-container .m-card {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Área táctil ligeramente mayor para iconos de pago en portrait */
    .btn-pago-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
}

/* ───── LANDSCAPE MÓVIL (≤932px acostado): TABLA PC, cards fuera ───── */
@media screen and (max-width: 932px) and (orientation: landscape) {
    /* Forzar la tabla PC y ocultar definitivamente los cards */
    #sec-alumnos      table,
    #sec-examenes     table,
    #sec-asistencia   table,
    #sec-historicos   table,
    #sec-instructores table {
        display: table !important;
        width: 100% !important;
    }
    .mobile-cards-container { display: none !important; }

    /* Compactar levemente padding y fuente para que la tabla quepa
       sin perder la estructura plana */
    .tabla-compacta th,
    .tabla-compacta td {
        padding: 6px 8px;
        font-size: 12px;
    }

    /* Permitir scroll horizontal si el ancho de la tabla excede el viewport */
    .main { overflow-x: auto; }
}

/* DESKTOP (≥933px) — comportamiento estándar PC */
@media screen and (min-width: 933px) {
    .mobile-cards-container { display: none !important; }
}

/* MÓVIL extra-pequeño (≤ 700px) — overrides finos para tablas residuales */
@media (max-width: 700px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    th, td {
        white-space: nowrap;
        font-size: 12px;
        padding: 6px 8px;
    }

    /* Ficha personal — panels en columna */
    .ficha-contenedor .grid-paneles {
        grid-template-columns: 1fr !important;
    }

    /* Panel configuración grados — grilla colapsable */
    .grados-grid-header,
    .grados-grid-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .grados-grid-header span:nth-child(n+3),
    .grados-grid-row > *:nth-child(n+3) { display: none; }
    .grados-grid-row-mobile {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 0;
        border-top: 1px solid #222;
    }

    /* Asistencia personal — columna única */
    .asistencia-personal-grid { grid-template-columns: 1fr !important; }
}

/* Dashboard compacto: en móvil mediano a una columna */
@media (max-width: 800px) {
    .dash-bottom-grid-compact { grid-template-columns: 1fr; }
}

/* Paneles de grados responsivos */
@media (max-width: 900px) {
    .grados-panel-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .grados-panel-row > *:nth-child(n+3) { grid-column: span 1; }
}
@media (max-width: 600px) {
    .grados-panel-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .grados-panel-row input,
    .grados-panel-row button {
        width: auto !important;
        flex: 1;
        min-width: 80px;
    }
}

/* Panel de tarifas responsivo */
@media (max-width: 500px) {
    .tarifas-panel-row { grid-template-columns: 1fr 1fr; }
    .tarifas-panel-row > *:first-child { grid-column: span 2; }
}

/* =================================================================
   COMPACTACIÓN SIDEBAR EN LANDSCAPE MÓVIL
   Para evitar que botones queden fuera del marco al acostar el celular.
   ================================================================= */
@media screen and (max-width: 932px) and (orientation: landscape) {
    .sidebar {
        padding: 6px 6px 8px 6px;
        overflow-y: auto;
    }
    /* Insignia y nombre del dojo más compactos */
    .sidebar h2 {
        font-size: 11px !important;
        margin-bottom: 6px !important;
        line-height: 1.15;
    }
    .logo-sidebar {
        max-width: 50px !important;
        height: auto !important;
    }
    /* Divisor más fino */
    .sidebar-divisor { height: 6px; margin: 4px 8px 6px; }
    /* Marca Dojo Kan compacta */
    .marca-dojokan { padding: 0 6px 6px; }
    .marca-dojokan-texto { font-size: 11px; letter-spacing: 1px; }
    .marca-dojokan-autor { font-size: 8.5px; margin-top: 3px; }
    .marca-dojokan-autor .copyright { font-size: 7.5px; }
    /* Grupos: títulos más estrechos */
    .sidebar-grupo {
        margin-top: 5px;
        border-radius: 5px;
    }
    .sidebar-grupo-titulo {
        padding: 5px 8px 4px;
        font-size: 8.5px;
        letter-spacing: 1px;
    }
    /* Botones del sidebar MÁS DELGADOS — la clave para que quepan */
    .sidebar button {
        padding: 6px 9px !important;
        font-size: 11.5px !important;
        margin: 2px 0 !important;
    }
    .sidebar-grupo-contenido { padding: 2px 3px 3px; }
    .sidebar-grupo-contenido button { margin: 1px 0 !important; }
    /* Bloque sesión compacto */
    .sidebar-sesion { padding: 6px 8px; margin-top: 6px; }
    .sidebar-sesion-usuario { font-size: 10px; }
    .sidebar-sesion-cerrar { padding: 4px 8px; font-size: 10px; }
}

/* =================================================================
   BLOQUE DE SESIÓN EN SIDEBAR — usuario activo + cerrar sesión
   ================================================================= */
.sidebar-sesion {
    margin-top: 14px;
    padding: 10px 12px;
    border-top: 1px solid #222;
    text-align: center;
    display: none; /* Solo visible cuando hay sesión activa */
}
.sidebar-sesion.activa { display: block; }
.sidebar-sesion-usuario {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
    line-height: 1.3;
}
.sidebar-sesion-usuario .rol-badge {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.sidebar-sesion-usuario .rol-badge.admin {
    background: rgba(204, 0, 0, 0.18);
    color: #ff7070;
    border: 1px solid rgba(204, 0, 0, 0.4);
}
.sidebar-sesion-usuario .rol-badge.viewer {
    background: rgba(126, 184, 247, 0.12);
    color: #7eb8f7;
    border: 1px solid rgba(126, 184, 247, 0.35);
}
.sidebar-sesion-cerrar {
    width: 100%;
    background: transparent;
    border: 1px solid #3a3a3a;
    color: #aaa;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s ease;
}
.sidebar-sesion-cerrar:hover {
    background: rgba(204, 0, 0, 0.10);
    border-color: #cc0000;
    color: #ff5555;
}

/* =================================================================
   MODO SOLO LECTURA (viewer): ocultar todos los elementos .solo-admin
   ================================================================= */
body.modo-viewer .solo-admin {
    display: none !important;
}
/* Mostrar un aviso sutil en el body cuando es modo viewer */
body.modo-viewer:not(.modo-instructor)::before {
    content: "🔒 MODO LECTURA — sin permisos de edición";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(126, 184, 247, 0.12);
    color: #7eb8f7;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 0;
    z-index: 99999;
    border-bottom: 1px solid rgba(126, 184, 247, 0.3);
    pointer-events: none;
}
body.modo-viewer .main {
    padding-top: 50px;
}
/* Aviso para el instructor: puede marcar asistencia */
body.modo-instructor::before {
    content: "🥋 MODO INSTRUCTOR — solo puedes marcar asistencia (+/−)";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 0;
    z-index: 99999;
    border-bottom: 1px solid rgba(46, 204, 113, 0.3);
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    body.modo-viewer .main { padding-top: 75px; }
}

/* =================================================================
   MODAL DE LOGIN
   ================================================================= */
.login-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, #1a0000 0%, #000 70%);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.login-card {
    background: linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    padding: 32px 28px 26px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
                0 0 0 1px rgba(204, 0, 0, 0.15) inset;
    text-align: center;
}
.login-logo {
    font-size: 38px;
    line-height: 1;
    margin-bottom: 8px;
}
.login-titulo {
    font-family: 'Cinzel', serif;
    color: #cc0000;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0 4px;
}
.login-subtitulo {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 22px;
    letter-spacing: 0.5px;
}
.login-field {
    width: 100%;
    padding: 11px 14px;
    margin-bottom: 12px;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 7px;
    color: #eee;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.login-field:focus {
    outline: none;
    border-color: #cc0000;
    box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.15);
}
.login-btn {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    background: linear-gradient(180deg, #cc0000 0%, #a00000 100%);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s ease;
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(204, 0, 0, 0.4); }
.login-error {
    color: #ff5555;
    font-size: 12px;
    margin: 8px 0 0;
    min-height: 16px;
}
.login-info {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #222;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1.5;
}
.login-info strong { color: rgba(255, 255, 255, 0.45); }

/* =================================================================
   MODO VIEWER: bloqueo visual de elementos editables
   ================================================================= */
/* El bloque del dojo (insignia + nombre) no debe parecer editable */
body.modo-viewer #sidebar-dojo-contenedor {
    cursor: default !important;
}
body.modo-viewer #sidebar-dojo-contenedor::after {
    /* Anular el title de hover */
    pointer-events: none;
}


/* ========================================================== */
/* BLOQUE 1 — ESTANDARIZACIÓN DE TÍTULOS Y SUBTÍTULOS         */
/* ========================================================== */

/* Títulos principales de cada sección (.seccion > h1) */
.seccion > h1,
.seccion > div > h1 {
    font-family: 'Cinzel', serif;
    font-size: 1.55em;
    font-weight: 700;
    color: var(--rojo);
    letter-spacing: 1.5px;
    margin: 8px 0 20px 0;
    padding: 6px 0 10px 0;
    border-bottom: 2px solid #2a2a2a;
    line-height: 1.25;
}

/* Subtítulos de modales (h3) — estandarizados */
.modal-content > h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--rojo);
    letter-spacing: 1px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a2a2a;
    line-height: 1.3;
}

/* Subtítulos secundarios (h2 dentro de fichas/tarjetas) */
.ficha-contenedor > h2,
.asistencia-detalle-contenedor > h2:not(.titulo-asistencia-integral),
.titulo-seccion-secundario {
    font-family: 'Cinzel', serif;
    font-size: 1.3em;
    font-weight: 700;
    color: #e0e0e0;
    letter-spacing: 0.8px;
    margin: 4px 0 16px 0;
    line-height: 1.3;
}

/* TÍTULO ESPECIAL del modal de Asistencia */
.titulo-asistencia-integral {
    font-family: 'Cinzel', serif;
    font-size: 1.35em;
    font-weight: 700;
    color: var(--rojo);
    letter-spacing: 2px;
    text-align: center;
    margin: 0 0 22px 0;
    padding: 14px 12px 12px;
    background: linear-gradient(180deg, rgba(204,0,0,0.08) 0%, rgba(204,0,0,0) 100%);
    border-bottom: 2px solid var(--rojo);
    border-radius: 6px 6px 0 0;
    text-transform: uppercase;
    line-height: 1.25;
    text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}

/* h2 del nombre del alumno dentro del header de asistencia */
.asistencia-alumno-header h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.45em;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0 0 4px 0 !important;
    line-height: 1.2;
}

/* Cabecera de año en historiales (pagos / exámenes) */
.historial-anio-header {
    font-family: 'Cinzel', serif !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    user-select: none;
}

/* Adaptación móvil de los títulos para mantener proporciones */
@media (max-width: 768px) {
    .seccion > h1,
    .seccion > div > h1 { font-size: 1.25em; letter-spacing: 1px; margin-bottom: 14px; }
    .modal-content > h3 { font-size: 1.05em; letter-spacing: 0.5px; }
    .ficha-contenedor > h2,
    .titulo-seccion-secundario { font-size: 1.1em; }
    .titulo-asistencia-integral { font-size: 1.05em; letter-spacing: 1.2px; padding: 11px 8px 10px; }
    .asistencia-alumno-header h2 { font-size: 1.2em; }
    .historial-anio-header { padding: 7px 11px !important; }
    .historial-anio-header span:first-child { font-size: 12px !important; }
    .historial-anio-header span:last-child { font-size: 11px !important; }
}


/* ========================================================== */
/* BLOQUE 2 — FILTRO POR INSTRUCTOR Y TEXTOS INFORMATIVOS     */
/* ========================================================== */

/* Wrapper del selector "Por Instructor" en barras de filtros */
.filtro-instructor-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
}

/* Selector estilizado de instructor */
.select-instructor {
    background: #222;
    border: 1px solid #444;
    color: #eee;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    min-width: 180px;
    max-width: 220px;
    transition: border-color 0.18s, background 0.18s;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 28px;
}
.select-instructor:hover { border-color: var(--rojo); background-color: #2a2a2a; }
.select-instructor:focus { border-color: var(--rojo); box-shadow: 0 0 0 2px rgba(204,0,0,0.18); }
.select-instructor option { background: #1a1a1a; color: #eee; }

/* Mantener alineación con la barra de filtros (no romper layout) */
.filtros-categoria .filtro-instructor-wrap {
    margin-left: 6px;
}

/* Columna "ASISTENCIA" ampliada con subtítulo informativo */
.th-asistencia-info {
    min-width: 180px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.25;
}

/* Adaptación móvil */
@media (max-width: 768px) {
    .filtros-categoria { flex-wrap: wrap; }
    .filtro-instructor-wrap { width: 100%; margin: 6px 0 0 0 !important; }
    .filtro-instructor-wrap .filtro-label { margin: 0 4px 0 0 !important; }
    .select-instructor {
        flex: 1; min-width: 0; max-width: none;
        font-size: 12px; padding: 5px 26px 5px 8px;
    }
    .th-asistencia-info { min-width: 130px; }
    .th-asistencia-info div div { font-size: 9px !important; }
}

/* Barra de progreso replicada en ficha individual de asistencia */
.barra-progreso-detalle {
    background: #181818;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);
}


/* ========================================================== */
/* BLOQUE 3 — REGISTRAR ASISTENCIA PENDIENTE                 */
/* ========================================================== */

.barra-acciones-asistencia {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    flex-wrap: wrap;
}
.registro-mensual-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 14px 0;
    padding-top: 14px;
    border-top: 1px solid #2a2a2a;
}

.btn-asist-pendiente {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #b36200 0%, #8a4a00 100%);
    color: #fff;
    border: 1px solid #d4761a;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease;
    white-space: nowrap;
}

.btn-asist-pendiente:hover {
    background: linear-gradient(135deg, #d4761a 0%, #a85a00 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(180,100,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}

.btn-asist-pendiente:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.btn-asist-pendiente__icon {
    font-size: 14px;
    line-height: 1;
}

.btn-asist-pendiente__text {
    font-weight: 700;
}

/* Adaptación móvil */
@media (max-width: 768px) {
    .barra-acciones-asistencia {
        justify-content: stretch;
        margin: 0 0 14px 0;
    }
    .btn-asist-pendiente {
        flex: 1;
        justify-content: center;
        font-size: 12px;
        padding: 9px 12px;
    }
    .btn-asist-pendiente__icon { font-size: 15px; }
}


/* ========================================================== */
/* BLOQUE 4 — GESTIÓN FINANCIERA Y COBROS EXTRAS              */
/* ========================================================== */

/* Caja destacada de TOTAL VIGENTE en tarjeta de Caja y Pagos */
.b4-pago-total-vigente {
    display: inline-block;
    background: linear-gradient(135deg, #1a0a00 0%, #2a1500 100%);
    border: 1px solid #cc6600;
    color: #ff9900;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.4px;
    font-family: 'Cinzel', serif;
    box-shadow: 0 1px 4px rgba(204,102,0,0.25), inset 0 1px 0 rgba(255,153,0,0.1);
}

/* Gran Total Vigente — cabecera del modal Historial de Pagos */
.b4-gran-total-box {
    background: linear-gradient(135deg, #1a0800, #200d00);
    border: 2px solid #cc6600;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.b4-gran-total-label {
    font-size: 10.5px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.b4-gran-total-sub {
    font-size: 11px;
    color: #aaa;
    margin-top: 3px;
}

.b4-gran-total-valor {
    font-size: 24px;
    font-weight: 900;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Filas individuales de cobros extras pendientes (modal historial) */
.b4-extra-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a1100;
    border: 1px solid #4a3000;
    border-radius: 7px;
    padding: 9px 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.b4-extra-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Toolbar de exportación PDF en modal de historial */
.b4-pdf-toolbar {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

/* Adaptación móvil */
@media (max-width: 768px) {
    .b4-gran-total-valor { font-size: 18px; }
    .b4-gran-total-box { padding: 10px 12px; }
    .b4-pdf-toolbar { padding: 10px 12px; }
    .b4-extra-actions { flex-direction: row; }
    .b4-pago-total-vigente { font-size: 11px; padding: 3px 9px; }
}


/* ========================================================== */
/* BLOQUE 5 — Flujo Notificación Examen + Rediseño Cards      */
/* ========================================================== */

/* Contenedor de chips de filtros agrupados en pestaña Exámenes */
.chips-notif-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 4px 14px;
    border-bottom: 1px solid #1f1f1f;
    margin-bottom: 14px;
}

.chips-notif-container .chip-notif {
    font-family: 'Rajdhani', sans-serif;
}

.chips-notif-container .chip-notif:hover {
    transform: translateY(-1px);
    filter: brightness(1.15);
}

.chips-notif-container .chip-notif-active {
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Mini-chips del dashboard (panel "Próximos Exámenes") */
.dash-mini-chip {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    transition: transform 0.12s, filter 0.15s;
    font-family: 'Rajdhani', sans-serif;
    line-height: 1.3;
}

.dash-mini-chip strong {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2px;
}

.dash-mini-chip:hover {
    transform: translateY(-1px);
    filter: brightness(1.2);
}

/* Adaptación móvil de chips */
@media (max-width: 768px) {
    .chips-notif-container {
        gap: 6px;
        padding: 8px 0 12px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .chips-notif-container .chip-notif {
        flex-shrink: 0;
        padding: 5px 11px !important;
        font-size: 11px !important;
    }
    .dash-mini-chip { font-size: 10px; padding: 7px 8px; }
    .dash-mini-chip strong { font-size: 16px; }
}

/* Ajuste responsive global Caja y Pagos — evitar scroll horizontal en móvil */
@media (max-width: 580px) {
    #sec-pagos, .contenedor-resumen-pagos { max-width: 100%; overflow-x: hidden; }
}


/* ========================================================== */
/* FIX MÓVIL VERTICAL — Desbordamiento Total Vigente / Estado */
/* ========================================================== */

@media (max-width: 580px) {
    /* Asegurar contenedor sin scroll horizontal en Caja y Pagos */
    #sec-pagos,
    .contenedor-resumen-pagos {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Tarjeta padre con box-sizing correcto */
    .pago-card {
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Cajas internas con ancho controlado */
    .pago-card__total-vigente,
    .pago-card__acciones,
    .btn-registrar-pago-cta {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Forzar grid-item a no expandir contenido más allá del padre */
    .pago-card__info,
    .pago-card__total-vigente,
    .pago-card__acciones {
        min-width: 0 !important;
    }
}

/* ============================================================
   PASO 4 — ESTILOS DEL ADMIN
   · Badge de novedades en menú lateral
   · Botón Finalizar Ciclo
   · Modal de doble confirmación
   · Toast de nuevas confirmaciones
   · Overlay de observación del apoderado
   · Icono de sobre junto al nombre
   · Cartola histórica desde Enero 2025
   ============================================================ */

/* ---------- Badge sidebar ---------- */
.sidebar-grupo-contenido button.tiene-novedad {
    position: relative;
    box-shadow: inset 2px 0 0 #e74c3c;
}
.badge-examenes {
    position: absolute;
    top: 6px;
    right: 10px;
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.45),
                0 0 0 2px rgba(15, 15, 15, 0.85);
    letter-spacing: 0.3px;
    animation: badgePulse 2.4s ease-in-out infinite;
    z-index: 2;
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1);   box-shadow: 0 2px 6px rgba(231,76,60,0.45), 0 0 0 2px #0f0f0f; }
    50%      { transform: scale(1.08); box-shadow: 0 2px 12px rgba(231,76,60,0.75), 0 0 0 2px #0f0f0f; }
}

/* ---------- Botón Finalizar Ciclo (rojo grave) ---------- */
.btn-finalizar-ciclo {
    margin-left: 8px;
    background: linear-gradient(180deg, #4a1a1a 0%, #2d0e0e 100%);
    color: #ff9a8a;
    border: 1px solid rgba(231, 76, 60, 0.45);
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn-finalizar-ciclo:hover {
    background: linear-gradient(180deg, #5a1f1f 0%, #3a1414 100%);
    color: #ffb0a0;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.25);
    transform: translateY(-1px);
}
.btn-finalizar-ciclo:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- Modal de finalización (doble confirmación) ---------- */
.overlay-paso4 {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInP4 0.25s ease;
}
@keyframes fadeInP4 { from { opacity: 0; } to { opacity: 1; } }
.caja-paso4 {
    background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
    border: 1px solid #3a2222;
    border-left: 3px solid #e74c3c;
    border-radius: 12px;
    padding: 24px 22px 20px 22px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    animation: scaleInP4 0.3s cubic-bezier(0.22, 1.1, 0.4, 1);
}
@keyframes scaleInP4 {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---------- Toast de nuevas confirmaciones ---------- */
.toast-paso4 {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: linear-gradient(135deg, #1a3d1a, #0f2a0f);
    border: 1px solid rgba(46, 204, 113, 0.45);
    border-left: 3px solid #2ecc71;
    color: #d8f0d8;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    transform: translateX(120%);
    transition: transform 0.35s cubic-bezier(0.22, 1.1, 0.4, 1);
    max-width: 360px;
}
.toast-paso4.visible { transform: translateX(0); }
.toast-paso4 strong { color: #2ecc71; }

/* ---------- Overlay observación apoderado ---------- */
.overlay-obs-apo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInP4 0.25s ease;
}
.caja-obs-apo {
    background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
    border: 1px solid #2a2a2a;
    border-left: 3px solid #f1c40f;
    border-radius: 12px;
    padding: 22px;
    max-width: 480px;
    width: 100%;
    animation: scaleInP4 0.3s cubic-bezier(0.22, 1.1, 0.4, 1);
}
.caja-obs-apo__cabecera {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 14px;
}
.caja-obs-apo__cuerpo {
    background: #0a0a0a;
    border-radius: 8px;
    padding: 14px 16px;
    color: #ddd;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 16px;
    border: 1px solid #222;
}
.caja-obs-apo__cerrar {
    width: 100%;
    padding: 11px;
    background: transparent;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.caja-obs-apo__cerrar:hover { background: #222; color: #fff; }

/* ---------- Icono de sobre junto al nombre ---------- */
.icono-obs {
    display: inline-block;
    margin-left: 8px;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(241, 196, 15, 0.12);
    border: 1px solid rgba(241, 196, 15, 0.35);
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
    vertical-align: middle;
    animation: obsHint 3.5s ease-in-out infinite;
}
.icono-obs:hover {
    transform: scale(1.18);
    background: rgba(241, 196, 15, 0.25);
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.4);
}
@keyframes obsHint {
    0%, 92%, 100% { opacity: 1; }
    96%           { opacity: 0.55; }
}

/* ---------- Cartola histórica (vista admin en ficha) ---------- */
.cartola-card {
    margin-top: 22px;
    padding: 22px 24px;
    background: linear-gradient(180deg, #161616 0%, #101010 100%);
    border: 1px solid #2a2a2a;
    border-left: 3px solid #c9a24b;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.cartola-titulo {
    margin: 0 0 6px 0;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c9a24b;
    font-weight: 700;
}
.cartola-leyenda {
    font-size: 11px;
    color: #888;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #222;
}
.cartola-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 6px;
}
.cartola-grid::-webkit-scrollbar { width: 6px; }
.cartola-grid::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.cartola-row {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 1.5fr;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: #0a0a0a;
    border-radius: 7px;
    border: 1px solid #1f1f1f;
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
}
.cartola-row:hover {
    border-color: #2a2a2a;
    background: #0d0d0d;
}
.cartola-mes {
    color: #e0e0e0;
    font-weight: 600;
    font-size: 13px;
    text-transform: capitalize;
}
.cartola-clases {
    color: #888;
    font-size: 12px;
}
.cartola-clases strong { color: #e0e0e0; }
.cartola-pago {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}
.cartola-etiqueta {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 3px 9px;
    border-radius: 11px;
    text-transform: uppercase;
}
.etq-pagado {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}
.etq-pendiente {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
}
.etq-aldia {
    background: rgba(46, 204, 113, 0.10);
    color: #7be39a;
    border: 1px solid rgba(46, 204, 113, 0.35);
}
.etq-pendiente-vencido {
    background: rgba(231, 76, 60, 0.20);
    color: #ff8a7a;
    border: 1px solid rgba(231, 76, 60, 0.55);
}
.etq-futuro {
    background: #1a1a1a;
    color: #555;
    border: 1px solid #2a2a2a;
}
.cartola-detalle {
    font-size: 10.5px;
    color: #888;
    white-space: nowrap;
}
.cartola-consumo {
    font-size: 10px;
    color: #999;
    margin-top: 2px;
    white-space: normal;
    line-height: 1.3;
}
.cartola-consumo strong { color: #ccc; }

/* Cartola responsive */
@media (max-width: 600px) {
    .cartola-card { padding: 16px 14px; }
    .cartola-row { grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px 11px; }
    .cartola-pago { grid-column: span 2; justify-content: flex-start; gap: 8px; }
    .cartola-detalle { white-space: normal; }
}

/* Botón Finalizar Ciclo responsive */
@media (max-width: 720px) {
    .btn-finalizar-ciclo {
        margin-left: 0;
        margin-top: 6px;
        width: 100%;
    }
    .btn-convocatoria {
        margin-left: 0;
        width: 100%;
    }
}

/* ============================================================
   BLOQUE 1 — VISUALIZACIÓN CONDICIONAL POR EDAD
   ============================================================ */

/* Cajón de apoderado para alumno ADULTO RESPONSABLE: atenuado + sello */
.ficha-panel.apoderado-adulto {
    opacity: 0.5;
    filter: grayscale(0.3);
    border-style: dashed !important;
}
.ficha-panel.apoderado-adulto:hover {
    opacity: 0.85;
    transition: opacity .2s;
}

/* Cajón de apoderado para alumno MENOR: destacado en verde */
.ficha-panel.apoderado-menor {
    border: 1px solid #2ecc71 !important;
    box-shadow: 0 0 0 1px rgba(46,204,113,0.25) inset, 0 0 14px rgba(46,204,113,0.12);
}

/* Sello de agua "ADULTO RESPONSABLE" sobre el cajón del apoderado */
.sello-mayor-edad {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-14deg);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 2px;
    color: rgba(255, 80, 80, 0.55);
    border: 3px solid rgba(255, 80, 80, 0.55);
    border-radius: 8px;
    padding: 4px 14px;
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
    z-index: 2;
}

/* Checkbox "Depende de un adulto responsable" */
.chk-dependiente {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
}
.chk-dependiente input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
/* Estado BLOQUEADO (menor de edad): rojo, no editable */
.chk-dependiente.chk-bloqueado {
    color: #ff8080;
    background: rgba(204, 0, 0, 0.10);
    border-color: #5a1a1a;
    cursor: not-allowed;
}
.chk-dependiente.chk-bloqueado input[type="checkbox"] {
    cursor: not-allowed;
    accent-color: #cc0000;
}
/* Estado HABILITADO (adulto, caso excepcional): editable */
.chk-dependiente.chk-habilitado {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.08);
    border-color: #1a4a2a;
    cursor: pointer;
}
.chk-dependiente.chk-habilitado input[type="checkbox"] {
    accent-color: #2ecc71;
}

/* ============================================================
   BLOQUE 2 — CARTOLA HISTÓRICA EN ACORDEÓN POR AÑO
   ============================================================ */
/* Cartola responsive: ancho completo en PC, adaptable en celular */
.cartola-card.cartola-angosta {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.cartola-anio {
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #141414;
    overflow: hidden;
}
.cartola-anio-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 13px;
    color: #ddd;
    user-select: none;
    transition: background .15s;
}
.cartola-anio-summary::-webkit-details-marker { display: none; }
.cartola-anio-summary::before {
    content: '▸';
    margin-right: 8px;
    color: #888;
    transition: transform .15s;
    display: inline-block;
}
.cartola-anio[open] > .cartola-anio-summary::before { transform: rotate(90deg); }
.cartola-anio-summary:hover { background: #1c1c1c; }
.cartola-anio-label { font-weight: bold; letter-spacing: 1px; }
.cartola-anio-resumen { font-size: 11px; color: #888; }
.cartola-anio[open] > .cartola-anio-summary {
    border-bottom: 1px solid #2a2a2a;
    background: #1a1a1a;
}
/* Filas más compactas dentro del acordeón */
.cartola-angosta .cartola-grid { padding: 6px 10px; }
.cartola-angosta .cartola-row {
    display: grid;
    grid-template-columns: 120px auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 7px 6px;
    border-bottom: 1px solid #1f1f1f;
    font-size: 12px;
}
.cartola-angosta .cartola-row:last-child { border-bottom: none; }
.cartola-angosta .cartola-mes { color: #bbb; font-weight: 600; }
.cartola-angosta .cartola-clases { color: #888; font-size: 11px; white-space: nowrap; text-align: center; }
.cartola-angosta .cartola-pago { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.cartola-angosta .cartola-detalle { font-size: 10px; color: #777; }

/* Cartola en celular: filas apiladas */
@media (max-width: 540px) {
    .cartola-angosta .cartola-row {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }
    .cartola-angosta .cartola-pago {
        grid-column: span 2;
        justify-content: flex-start;
        margin-top: 2px;
    }
    .cartola-angosta .cartola-mes { font-size: 12px; }
    .cartola-angosta .cartola-clases { text-align: right; }
    .cartola-anio-summary { font-size: 12px; padding: 8px 10px; }
    .cartola-anio-resumen { font-size: 10px; }
}

/* ============================================================
   BLOQUE 3 — Botón Finalizar bloqueado hasta que todos estén Listo
   ============================================================ */
.btn-finalizar-ciclo.btn-finalizar-bloqueado,
.btn-finalizar-ciclo:disabled {
    background: #2a2a2a !important;
    color: #777 !important;
    border-color: #3a3a3a !important;
    cursor: not-allowed !important;
    opacity: 1;
    box-shadow: none !important;
    transform: none !important;
}
.btn-finalizar-ciclo.btn-finalizar-bloqueado::after {
    content: ' 🔒';
}
/* Cuando está habilitado (todos Listos), un verde claro de "vía libre" */
.btn-finalizar-ciclo:not(:disabled):not(.btn-finalizar-bloqueado) {
    background: linear-gradient(135deg, #1f7a44, #145c32) !important;
    color: #eafff1 !important;
    border-color: #2ecc71 !important;
}

/* ============================================================
   CARTOLA — Total a pagar vigente + botón PDF
   ============================================================ */
.cartola-total-box {
    margin-top: 14px;
    padding: 14px;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
}
.cartola-total-detalle { margin-bottom: 8px; }
.cartola-total-linea {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    padding: 3px 0;
}
.cartola-total-linea span:last-child { color: #ccc; font-weight: 600; }
.cartola-total-final {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 12px;
}
.cartola-total-final.con-saldo {
    background: linear-gradient(135deg, #3a1500, #2a0f00);
    border: 1px solid #cc6600;
    color: #ffb84d;
}
.cartola-total-final.al-dia {
    background: linear-gradient(135deg, #0f2a17, #0a1f10);
    border: 1px solid #1f7a44;
    color: #7be39a;
}
.cartola-btn-pdf {
    width: 100%;
    background: #1a1a1a;
    color: #ddd;
    border: 1px solid #555;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: background .15s, border-color .15s;
}
.cartola-btn-pdf:hover {
    background: #cc0000;
    border-color: #cc0000;
    color: #fff;
}

/* ============================================================
   SEMÁFORO DE CORREO — columna Notificación/Correo
   ============================================================ */
.sem-correo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}
.sem-gris {
    background: #2a2a2a;
    color: #aaa;
    border: 1px solid #444;
    cursor: pointer;
    transition: background .15s;
}
.sem-gris:hover:not(:disabled) { background: #1a4a8a; color: #fff; }
.sem-amarillo {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
    border: 1px solid #8a6d00;
}
.sem-verde {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border: 1px solid #1f7a44;
}

/* ============================================================
   PANEL DE ENLACE UNIVERSAL AL PORTAL (admin)
   ============================================================ */
.panel-portal-link {
    background: linear-gradient(135deg, #0f1f33, #0a1626);
    border: 1px solid #1a4a8a;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 10px 0 14px;
}
.ppl-titulo {
    color: #7eb8f7;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}
.ppl-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.ppl-row #ppl-url {
    flex: 1;
    min-width: 220px;
    background: #060d18;
    border: 1px solid #2a4a6a;
    color: #cfe3ff;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-family: monospace;
}
.ppl-btn {
    background: #1a4a8a;
    color: #fff;
    border: none;
    padding: 9px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    transition: background .15s;
}
.ppl-btn:hover { background: #2560b0; }
.ppl-btn-msg { background: #1f7a44; }
.ppl-btn-msg:hover { background: #28a05a; }
.ppl-hint {
    color: #5a7a9a;
    font-size: 11px;
    margin-top: 8px;
}
.ppl-label {
    display: block;
    color: #7eb8f7;
    font-size: 11px;
    margin: 10px 0 4px;
    font-weight: 600;
}
.ppl-textarea {
    width: 100%;
    box-sizing: border-box;
    background: #060d18;
    border: 1px solid #2a4a6a;
    color: #cfe3ff;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 8px;
    font-family: inherit;
}
@media (max-width: 600px) {
    .ppl-row { flex-direction: column; align-items: stretch; }
    .ppl-btn { width: 100%; }
}

/* Aviso de declaración de pago del apoderado (panel admin) */
.aviso-declaracion-pago {
    margin-top: 6px;
    background: rgba(241, 196, 15, 0.12);
    border: 1px solid #8a6d00;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    color: #f1c40f;
    cursor: pointer;
    line-height: 1.3;
    transition: background .15s;
}
.aviso-declaracion-pago:hover { background: rgba(241, 196, 15, 0.22); }

/* DOBLE BARRA DE CARRERA — Progreso Integral en la app (líneas finas) */
.carrera-app { margin: 4px 0; }
.carrera-app-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.carrera-app-lbl { font-size: 12px; font-weight: bold; color: #ddd; }
.carrera-app-frac { font-size: 11px; color: #999; }
.carrera-app-track {
    position: relative; height: 7px; background: #2a2a2a;
    border-radius: 5px; overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.carrera-app-fill {
    height: 100%; border-radius: 5px;
    transition: width 0.7s cubic-bezier(.22,.61,.36,1);
}
.carrera-app-meta {
    position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
    font-size: 9px; line-height: 1; pointer-events: none; opacity: 0.8;
}

/* PUNTO 4 — Botón de borrar registro de asistencia (calendario progreso integral) */
.btn-borrar-clase {
    display: none;
    margin-left: auto;
    background: #5c1a1a;
    border: 1px solid #8a2a2a;
    color: #ff9999;
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s;
}
.btn-borrar-clase:hover { background: #8a2a2a; color: #fff; }
/* En modo edición, se muestran los tarritos y el item se reordena */
.modo-editar-registros .btn-borrar-clase { display: inline-block; }
.modo-editar-registros .clase-item {
    background: rgba(204,0,0,0.06);
    border-radius: 6px;
}
.clase-item { display: flex; align-items: center; gap: 8px; }

/* Gráfico de barras azules de 12 meses en la app (progreso integral) */
.r12-bloque-app { margin: 16px 0; padding: 14px; background: #131313; border: 1px solid #2a2a2a; border-radius: 12px; }
.r12-titulo-app { font-size: 13px; color: #c0c0c0; font-weight: bold; margin-bottom: 12px; }
.r12-grafico-app { display: flex; align-items: flex-end; gap: 4px; height: 100px; }
.r12-grafico-app .r12-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.r12-grafico-app .r12-barra-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 100%; gap: 2px; }
.r12-grafico-app .r12-valor { font-size: 10px; color: #888; }
.r12-grafico-app .r12-barra { width: 70%; max-width: 22px; background: #333; border-radius: 3px 3px 0 0; transition: height .8s cubic-bezier(.22,.61,.36,1); }
.r12-grafico-app .r12-barra.r12-activa { background: linear-gradient(180deg,#4a90e2,#1a4a8a); }
.r12-grafico-app .r12-mes { font-size: 9px; color: #888; margin-top: 4px; }

/* Badge "Trayectoria Marcial" para cinturones negros en la tabla de exámenes */
.badge-trayectoria {
    display: inline-block;
    background: linear-gradient(135deg, #d4af37, #ffd700, #b8860b);
    color: #2a1f00;
    font-weight: bold;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid #ffd700;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(212,175,55,0.35);
}

/* ========================================================================== */
/* SUB-PESTAÑAS DENTRO DE LA SECCIÓN DE ALUMNOS (Activos / Históricos)         */
/* ========================================================================== */
.sub-tabs-alumnos {
    display: flex;
    gap: 4px;
    margin: -8px 0 18px 0;
    border-bottom: 1px solid #2a2a2a;
}
.sub-tab {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    color: #888;
    padding: 8px 16px;
    border-radius: 7px 7px 0 0;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sub-tab:hover { color: #ddd; background: #1a1a1a; }
.sub-tab.active {
    color: #fff;
    background: #1a1a1a;
    border-color: #2a2a2a;
    border-bottom: 2px solid #1a1a1a;
    margin-bottom: -1px;
}

/* ========================================================================== */
/* DIRECTORIO — chips de filtro por rol                                       */
/* ========================================================================== */
.dir-chip {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #aaa;
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.dir-chip:hover { background: #2a2a2a; color: #ddd; }
.dir-chip-activo {
    background: linear-gradient(135deg, #1a4a8a, #0f3a7a);
    border-color: #4a90e2;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(74,144,226,0.3);
}

/* Tarjetas de resumen del directorio en el dashboard */
.dash-dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.dash-dir-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
    transition: transform 0.15s, border-color 0.15s;
}
.dash-dir-card:hover {
    transform: translateY(-2px);
    border-color: #4a90e2;
    cursor: pointer;
}
.dash-dir-card-icono { font-size: 22px; margin-bottom: 4px; }
.dash-dir-card-num { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; }
.dash-dir-card-lbl { font-size: 10.5px; color: #888; margin-top: 4px; line-height: 1.3; }

/* ========================================================================== */
/* MODAL DEL DIRECTORIO — overlay sólido, grid limpio, estilo oscuro integrado */
/* ========================================================================== */
.modal-dir-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(3px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-dir-overlay[style*="flex"] { display: flex !important; }
.modal-dir-caja {
    background: #161616;
    border: 1px solid #2e2e2e;
    border-radius: 14px;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    animation: modalDirIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modalDirIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-dir-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #2a2a2a;
    position: sticky; top: 0; background: #161616; z-index: 2;
}
.modal-dir-header h3 { margin: 0; font-size: 16px; color: #fff; }
.modal-dir-cerrar {
    background: transparent; border: none; color: #888; font-size: 18px;
    cursor: pointer; width: 30px; height: 30px; border-radius: 6px; transition: background 0.15s, color 0.15s;
}
.modal-dir-cerrar:hover { background: #2a2a2a; color: #fff; }
.modal-dir-body { padding: 20px; }
.modal-dir-foto-zona {
    display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px;
}
.modal-dir-foto-zona img {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
    border: 2px solid #333; background: #0a0a0a;
}
.modal-dir-foto-btn {
    background: #1a4a8a; color: #fff; padding: 5px 14px; border-radius: 16px;
    font-size: 12px; cursor: pointer; transition: background 0.15s; font-weight: 600;
}
.modal-dir-foto-btn:hover { background: #2a5a9a; }
.modal-dir-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.modal-dir-campo { display: flex; flex-direction: column; gap: 5px; }
.modal-dir-campo.modal-dir-full { grid-column: 1 / -1; }
.modal-dir-full { grid-column: 1 / -1; }
.modal-dir-campo label { font-size: 12px; color: #aaa; font-weight: 600; }
.modal-dir-campo label .req { color: #e74c3c; }
.modal-dir-campo input,
.modal-dir-campo select,
.modal-dir-campo textarea {
    background: #0d0d0d; border: 1px solid #333; color: #e8e8e8;
    padding: 9px 11px; border-radius: 7px; font-size: 13px; width: 100%;
    box-sizing: border-box; font-family: inherit; transition: border-color 0.15s;
}
.modal-dir-campo input:focus,
.modal-dir-campo select:focus,
.modal-dir-campo textarea:focus { outline: none; border-color: #4a90e2; }
.modal-dir-campo textarea { resize: vertical; }
.modal-dir-footer {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 20px; border-top: 1px solid #2a2a2a;
    position: sticky; bottom: 0; background: #161616;
}
.modal-dir-btn-cancelar {
    background: transparent; border: 1px solid #444; color: #aaa;
    padding: 9px 18px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.modal-dir-btn-cancelar:hover { background: #2a2a2a; color: #fff; }
.modal-dir-btn-guardar {
    background: #1a5c2a; border: none; color: #fff; font-weight: bold;
    padding: 9px 18px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.modal-dir-btn-guardar:hover { background: #1f7a35; }
@media (max-width: 480px) {
    .modal-dir-grid { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/* CONGELAMIENTO E INACTIVIDAD DE ALUMNOS                                     */
/* ========================================================================== */
.badge-inact {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
.badge-alerta { background: rgba(230, 168, 0, 0.2); color: #e6a800; border: 1px solid rgba(230, 168, 0, 0.4); }
.badge-rojo   { background: rgba(231, 76, 60, 0.2); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.4); }
.badge-congelado {
    background: rgba(126, 184, 247, 0.18);
    color: #7eb8f7;
    border: 1px solid rgba(126, 184, 247, 0.4);
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 6px;
    vertical-align: middle;
}
.btn-congelar {
    background: rgba(126, 184, 247, 0.15);
    color: #7eb8f7;
    border: 1px solid rgba(126, 184, 247, 0.4);
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    margin-left: 4px;
    vertical-align: middle;
    transition: background 0.15s;
}
.btn-congelar:hover { background: rgba(126, 184, 247, 0.3); }
.btn-descongelar {
    background: rgba(230, 168, 0, 0.15);
    color: #e6a800;
    border: 1px solid rgba(230, 168, 0, 0.4);
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    margin-left: 4px;
}
.btn-descongelar:hover { background: rgba(230, 168, 0, 0.3); }

/* Modal Directorio: grid responsive de roles */
@media (max-width: 480px) {
    .rol-cat-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Dos cajas iguales: Mes en curso (celeste) + Total Vigente (café) ── */
.pago-card__totales-stack {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    align-items: stretch;
    min-width: 0;
}
.pago-card__caja {
    border-radius: 6px;
    padding: 4px 6px;
    text-align: center;
    line-height: 1.15;
    border: 1px solid;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 68px;
}
.pago-card__caja-label {
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.pago-card__caja-emoji { font-size: 9px; }
.pago-card__caja-valor {
    font-size: 12.5px;
    font-weight: 800;
    margin-top: 1px;
}
.pago-card__caja--curso {
    background: rgba(126,184,247,0.12);
    border-color: rgba(126,184,247,0.4);
}
.pago-card__caja--curso .pago-card__caja-label,
.pago-card__caja--curso .pago-card__caja-valor { color: #7eb8f7; }
.pago-card__caja--vigente {
    background: rgba(122,68,0,0.18);
    border-color: rgba(180,110,30,0.5);
}
.pago-card__caja--vigente .pago-card__caja-label,
.pago-card__caja--vigente .pago-card__caja-valor { color: #e0a050; }
.pago-card__caja--aldia {
    background: rgba(46,204,113,0.12);
    border-color: rgba(46,204,113,0.4);
}
.pago-card__caja--aldia .pago-card__caja-label,
.pago-card__caja--aldia .pago-card__caja-valor { color: #2ecc71; }

.pago-card__caja--favor {
    background: rgba(26,122,58,0.15);
    border-color: rgba(46,204,113,0.5);
}
.pago-card__caja--favor .pago-card__caja-label,
.pago-card__caja--favor .pago-card__caja-valor { color: #2ecc71; }

/* ============================================================
   TEMAS VISUALES — Switcher (4 temas equilibrados)
   ============================================================ */
.tema-btn {
    position: fixed; bottom: 16px; right: 16px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3); cursor: pointer;
    z-index: 10000; display: flex; align-items: center; justify-content: center;
    font-size: 15px; transition: transform 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4); user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tema-btn:hover { transform: scale(1.18); }
.tema-btn:active { transform: scale(0.92); }

/* =====================================================================
   TEMA CLARO — fondo claro, alto contraste forzado
   ===================================================================== */
body.tema-claro {
    background: #eef1f5 !important;
    color: #1c2530 !important;
}
/* 1) Todos los textos a oscuro por defecto */
body.tema-claro, body.tema-claro * { color: #1c2530 !important; }

/* 2) Blanquear SOLO fondos grises/negros NEUTROS (no colores saturados).
   Estos son los tonos exactos usados como fondo de cuadros oscuros en el HTML. */
body.tema-claro [style*="background:#000"], body.tema-claro [style*="background: #000"],
body.tema-claro [style*="background:#0a0a0a"], body.tema-claro [style*="background:#0d0d0d"],
body.tema-claro [style*="background:#111"], body.tema-claro [style*="background: #111"],
body.tema-claro [style*="background:#121212"], body.tema-claro [style*="background:#141414"],
body.tema-claro [style*="background:#151515"], body.tema-claro [style*="background:#161616"],
body.tema-claro [style*="background:#181818"], body.tema-claro [style*="background:#1a1a1a"],
body.tema-claro [style*="background: #1a1a1a"], body.tema-claro [style*="background:#1c1c1c"],
body.tema-claro [style*="background:#1e1e1e"], body.tema-claro [style*="background:#202020"],
body.tema-claro [style*="background:#212121"], body.tema-claro [style*="background:#222"],
body.tema-claro [style*="background: #222"], body.tema-claro [style*="background:#252525"],
body.tema-claro [style*="background:#282828"], body.tema-claro [style*="background:#2a2a2a"],
body.tema-claro [style*="background: #2a2a2a"], body.tema-claro [style*="background:#2b2b2b"],
body.tema-claro [style*="background:#303030"], body.tema-claro [style*="background:#333"],
body.tema-claro [style*="background: #333"], body.tema-claro [style*="background:#1f1f1f"] {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: #d5dae1 !important;
}

/* 3) Estructura base clara */
body.tema-claro .sidebar { background: #ffffff !important; border-right: 2px solid var(--rojo) !important; }
body.tema-claro .sidebar button { background: #f2f4f7 !important; color: #2a3340 !important; border: 1px solid #dde2e8 !important; }
body.tema-claro .sidebar button:hover, body.tema-claro .sidebar button:hover * { background: var(--rojo) !important; color: #fff !important; }
body.tema-claro .sidebar button.btn-active { background: #e8ebef !important; }
body.tema-claro .sidebar button.btn-active, body.tema-claro .sidebar button.btn-active * { color: var(--rojo) !important; }
body.tema-claro .marca-dojokan-autor .copyright { color: #999 !important; }
body.tema-claro .main { background: #eef1f5 !important; }
body.tema-claro .modal-content, body.tema-claro .modal-dir-content,
body.tema-claro .card, body.tema-claro .pago-card, body.tema-claro .m-card,
body.tema-claro .dashboard-card, body.tema-claro .panel {
    background: #ffffff !important; border-color: #dde2e8 !important;
}

/* 4) Tablas */
body.tema-claro table { border-color: #dde2e8 !important; }
body.tema-claro thead, body.tema-claro thead th { background: #e3e7ec !important; color: #2a3340 !important; }
body.tema-claro td, body.tema-claro th { border-color: #e3e7ec !important; }
body.tema-claro tr:hover { background: #f5f7fa !important; }

/* 5) Inputs */
body.tema-claro input, body.tema-claro select, body.tema-claro textarea {
    background: #ffffff !important; color: #1c2530 !important; border-color: #c5ccd4 !important;
}
body.tema-claro input::placeholder, body.tema-claro textarea::placeholder { color: #999 !important; }

/* 6) Botones y badges con fondo de COLOR saturado -> texto blanco (legible).
   Estos NO se blanquean (no están en la lista neutra), conservan su color. */
body.tema-claro [style*="background:var(--rojo)"], body.tema-claro [style*="background: var(--rojo)"],
body.tema-claro [style*="background:#1a4a8a"], body.tema-claro [style*="background:#1a5c2a"],
body.tema-claro [style*="background:#1a3a5a"], body.tema-claro [style*="background:#1a7a3a"],
body.tema-claro [style*="background:#1e8c4f"], body.tema-claro [style*="background:#1565c0"],
body.tema-claro [style*="background:#cc6600"], body.tema-claro [style*="background:#cc9900"],
body.tema-claro [style*="background:#3a2a00"], body.tema-claro [style*="background:#1a3a2a"],
body.tema-claro .btn-mas, body.tema-claro .btn-menos, body.tema-claro .btn-nuevo {
    color: #fff !important;
}
body.tema-claro [style*="background:#1a4a8a"] *, body.tema-claro [style*="background:#1a5c2a"] *,
body.tema-claro [style*="background:#1a3a5a"] *, body.tema-claro .btn-nuevo *,
body.tema-claro [style*="background:var(--rojo)"] * { color: #fff !important; }

/* 7) Kanji de fondo y botón de tema */
body.tema-claro::before { color: rgba(0,0,0,0.03) !important; }
body.tema-claro .tema-btn { border-color: rgba(0,0,0,0.15); box-shadow: 0 2px 10px rgba(0,0,0,0.12); }

/* =====================================================================
   TEMA ROSA AGUA — oscuro con acentos rosados (equilibrado)
   ===================================================================== */
body.tema-rosa { --rojo: #e84d8a; background: #1a0e15 !important; }
body.tema-rosa .sidebar { background: #140a10 !important; border-right-color: #e84d8a !important; }
body.tema-rosa .sidebar button:hover { background: #e84d8a !important; }
body.tema-rosa .marca-dojokan-texto { color: #f5a8c8 !important; }
body.tema-rosa .modal-content, body.tema-rosa .card { border-top-color: #e84d8a; }
body.tema-rosa::before { color: rgba(255,180,210,0.02) !important; }

/* =====================================================================
   TEMA VERDE AGUA — oscuro con acentos turquesa (como el de tu compañero)
   ===================================================================== */
body.tema-aqua { --rojo: #1abc9c; background: #0a1816 !important; }
body.tema-aqua .sidebar { background: #061210 !important; border-right-color: #1abc9c !important; }
body.tema-aqua .sidebar button:hover { background: #1abc9c !important; }
body.tema-aqua .marca-dojokan-texto { color: #7fe0cf !important; }
body.tema-aqua .modal-content, body.tema-aqua .card { border-top-color: #1abc9c; }
body.tema-aqua::before { color: rgba(127,224,207,0.02) !important; }