/* ========================================
   Nombre:      app.css
   Descripcion: Base del placement sobre MDB9: colores de marca en los componentes de MDB, shell del panel (port de golotes, con la barra y el menu lateral del celular) y pantalla dividida (login, ingreso del alumno, instalador)
   Version:     0.5.0
   Creado:      18-09-2026
   Modificado:  03-10-2026
   Autor:       Sebastian Toyos
   ======================================== */

/* ========================================
   1. Base
   ======================================== */
body {
    font-family: var(--font-base);
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--bg-page);
    transition: var(--theme-transition);
}

a {
    color: var(--accent-text);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
}

.min-width-0 { min-width: 0; }

/* ========================================
   2. Marca Anglia sobre los componentes de MDB
   MDB pinta foco, links y seleccion con --mdb-primary; los botones y los checks
   traen su color en sus propias variables, que son las que se pisan aca.
   ======================================== */
:root,
[data-mdb-theme="light"] {
    --mdb-primary: #0C78AB;
    --mdb-primary-rgb: 12, 120, 171;
    --mdb-primary-bg-subtle: #DCEDF5;
    --mdb-primary-text-emphasis: #0A6690;
    --mdb-primary-border-subtle: #9CCCE3;
    --mdb-link-color: #0A6690;
    --mdb-link-hover-color: #0A6690;
    --mdb-code-color: #0A6690;
    --mdb-danger: #C62828;
    --mdb-danger-rgb: 198, 40, 40;
    --mdb-datepicker-cell-selected-background-color: #0C78AB;
    --mdb-datepicker-header-background-color: #0C78AB;
}

[data-mdb-theme="dark"] {
    --mdb-primary: #4FB0E3;
    --mdb-primary-rgb: 79, 176, 227;
    --mdb-primary-bg-subtle: #12303F;
    --mdb-primary-text-emphasis: #6BC0EA;
    --mdb-primary-border-subtle: #1F536E;
    --mdb-link-color: #6BC0EA;
    --mdb-link-hover-color: #6BC0EA;
    --mdb-danger: #EF5350;
    --mdb-danger-rgb: 239, 83, 80;
    --mdb-code-color: #6BC0EA;
    --mdb-datepicker-cell-selected-background-color: #4FB0E3;
    --mdb-datepicker-header-background-color: #4FB0E3;
}

/* Componentes que traen su azul escrito en una variable propia */
.list-group {
    --mdb-list-group-active-bg: var(--accent);
    --mdb-list-group-active-border-color: var(--accent);
    --mdb-list-group-active-color: var(--on-accent);
}

.progress {
    --mdb-progress-bar-bg: var(--accent);
}

.btn-primary {
    --mdb-btn-bg: var(--accent);
    --mdb-btn-color: var(--on-accent);
    --mdb-btn-hover-bg: var(--accent-hover);
    --mdb-btn-hover-color: var(--on-accent);
    --mdb-btn-focus-bg: var(--accent-hover);
    --mdb-btn-focus-color: var(--on-accent);
    --mdb-btn-active-bg: var(--accent-hover);
    --mdb-btn-active-color: var(--on-accent);
    --mdb-btn-disabled-bg: var(--accent);
    --mdb-btn-disabled-color: var(--on-accent);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-disabled-bg: var(--accent);
}

/* Botones secundarios (chips sin elegir, acciones de apoyo): tinte del color de marca.
   En oscuro MDB repite la regla con [data-mdb-theme=dark], por eso va tambien con ese selector */
.btn-secondary,
[data-mdb-theme="dark"] .btn-secondary {
    --mdb-btn-bg: var(--accent-soft);
    --mdb-btn-color: var(--accent-text);
    --mdb-btn-hover-bg: var(--accent-soft-hover);
    --mdb-btn-hover-color: var(--accent-text);
    --mdb-btn-focus-bg: var(--accent-soft-hover);
    --mdb-btn-focus-color: var(--accent-text);
    --mdb-btn-active-bg: var(--accent-soft-hover);
    --mdb-btn-active-color: var(--accent-text);
    --mdb-btn-disabled-bg: var(--accent-soft);
    --mdb-btn-disabled-color: var(--accent-text);
}

/* Botones de texto (Add option, Add moderator): MDB repite la regla en oscuro, por eso van los dos selectores */
.btn-tertiary,
[data-mdb-theme="dark"] .btn-tertiary {
    --mdb-btn-color: var(--accent-text);
    --mdb-btn-hover-color: var(--accent-hover);
    --mdb-btn-focus-color: var(--accent-hover);
    --mdb-btn-active-color: var(--accent-hover);
}

/* Botones claros (cancelar, subir, iconos de accion de las tablas): el gris de superficie del mockup con texto oscuro.
   El gris de MDB (#F5F5F5) es el mismo del fondo de la pagina y el boton no se distinguia */
.btn-light {
    --mdb-btn-bg: var(--bg-surface);
    --mdb-btn-color: var(--text-primary);
    --mdb-btn-hover-bg: var(--border);
    --mdb-btn-hover-color: var(--text-primary);
    --mdb-btn-focus-bg: var(--border);
    --mdb-btn-focus-color: var(--text-primary);
    --mdb-btn-active-bg: var(--border);
    --mdb-btn-active-color: var(--text-primary);
    --mdb-btn-disabled-bg: var(--bg-surface);
    --mdb-btn-disabled-color: var(--text-primary);
}

/* En oscuro MDB los deja blancos */
[data-mdb-theme="dark"] .btn-light {
    --mdb-btn-bg: var(--bg-surface);
    --mdb-btn-color: var(--text-secondary);
    --mdb-btn-hover-bg: var(--border);
    --mdb-btn-hover-color: var(--text-primary);
    --mdb-btn-focus-bg: var(--border);
    --mdb-btn-focus-color: var(--text-primary);
    --mdb-btn-active-bg: var(--border);
    --mdb-btn-active-color: var(--text-primary);
}

/* Checks, radios y switches: MDB trae su azul escrito en cada regla. Se pisan con el
   MISMO selector que usa MDB, asi gana el orden de carga y no hace falta !important */
.form-check-input:checked,
.form-check-input:checked:focus {
    border-color: var(--accent);
}

.form-check-input[type="checkbox"]:checked,
.form-check-input[type="checkbox"]:checked:focus,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input[type="radio"]:checked:after {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:checked:focus:before,
.form-check-input:indeterminate:focus:before {
    box-shadow: 0px 0px 0px 13px var(--accent);
}

/* Switch como en golotes: pista del color de marca y perilla clara */
.form-switch .form-check-input:checked:focus:before {
    box-shadow: 3px -1px 0px 13px var(--accent);
}

.form-switch .form-check-input:checked[type="checkbox"]:after {
    background-color: var(--mdb-surface-bg);
}

/* El margen derecho del switch de MDB (8px) invadia la linea de la etiqueta: una etiqueta larga (inline-block) no
   entraba al lado y bajaba entera debajo del switch. Sin ese margen entra; la separacion la ponen la etiqueta y su
   ayuda, que quedan alineadas */
.form-switch .form-check-input { margin-right: 0; }

.form-switch .form-check-label,
.form-switch .form-text { padding-left: 8px; }

/* Select de MDB: el valor elegido termina con puntos antes de la flecha, en vez de pasar por debajo. MDB 9.3 pone la flecha
   en posicion absoluta sin reservarle lugar ni tener una variable para eso: es la unica excepcion a no tocar el padding de
   un .form-control (CLAUDE.md) */
.select-wrapper .select-input.form-control {
    padding-right: 32px;
    text-overflow: ellipsis;
}

/* El texto de ayuda de un campo, debajo del form-outline */
.form-text {
    color: var(--text-muted);
}

/* ========================================
   3. Shell del panel: nav rail (port de golotes)
   ======================================== */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.nav-rail {
    position: sticky;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    top: 0;
    z-index: var(--z-nav);
    width: 64px;
    height: 100vh;
    padding: 20px 0 16px;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-nav);
    border-right: 1px solid var(--border);
}

.rail-logo {
    display: flex;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-item);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.rail-logo:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
}

.rail-item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 60px;
    height: 48px;
    padding: 0 2px;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    transition: all 0.15s;
}

.rail-item i { font-size: 18px; }
.rail-item span { font-weight: 500; }
.rail-item:hover { background: var(--accent-bg); color: var(--text-secondary); }
.rail-item.active { background: var(--accent-bg); color: var(--accent-text); }
.rail-item.active span { font-weight: 600; }

/* ========================================
   4. Switch de tema (port de golotes)
   ======================================== */
.theme-toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: 48px;
    height: 24px;
    padding: 2px;
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    cursor: pointer;
}

.toggle-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 10px;
    transition: all 0.2s;
}

.toggle-sun { color: #F59E0B; }
.toggle-moon { color: var(--text-muted); }
.toggle-option.active { background: var(--bg-nav); }

[data-theme="dark"] .toggle-sun { color: var(--text-muted); }
[data-theme="dark"] .toggle-sun.active { background: transparent; }
[data-theme="dark"] .toggle-moon { color: #FBBF24; }
[data-theme="dark"] .toggle-moon.active { background: var(--bg-surface); }

.theme-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-theme-overlay);
    pointer-events: none;
    clip-path: circle(0% at 32px 100%);
}

/* ========================================
   5. Columna de submenu (port de golotes). Mide 220 px como en placement.pen (golotes usa 200)
   ======================================== */
.submenu-column {
    position: sticky;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    top: 0;
    width: var(--submenu-width);
    height: 100vh;
    padding: 20px 0 16px;
    gap: 1px;
    overflow: hidden;
    background: var(--bg-nav);
    border-right: 1px solid var(--border);
}

/* Se despliega y se pliega desde el rail (app.js), con la animacion de golotes */
.submenu-column.slide-in { animation: submenuSlideIn 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.submenu-column.slide-out { animation: submenuSlideOut 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) both; }

@keyframes submenuSlideIn {
    from { width: 0; opacity: 0; }
    to { width: var(--submenu-width); opacity: 1; }
}

@keyframes submenuSlideOut {
    from { width: var(--submenu-width); opacity: 1; }
    to { width: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .submenu-column.slide-in,
    .submenu-column.slide-out { animation: none; }
}

.submenu-title { padding: 4px 16px 8px; font-size: 16px; color: var(--text-primary); }
.submenu-separator { height: 1px; margin-bottom: 4px; background: var(--border); }

.submenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: 14px;
    transition: all 0.15s;
}

.submenu-item i { font-size: 16px; }
.submenu-item:hover { background: var(--accent-bg); color: var(--text-secondary); }

.submenu-item.active {
    padding-left: 13px;
    border-left: 3px solid var(--accent);
    background: var(--accent-bg);
    color: var(--accent-text);
    font-weight: 600;
}

/* ========================================
   6. Barra superior
   ======================================== */
.top-bar {
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    top: 0;
    z-index: var(--z-topbar);
    flex-shrink: 0;
    height: var(--topbar-height);
    padding: 0 24px;
    background: var(--bg-nav);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.top-bar .breadcrumb-item {
    font-size: 13px;
    color: var(--text-secondary);
}

.top-bar .breadcrumb-item:first-child {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.buscador-barra {
    width: 260px;
}

.usuario-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
}

.usuario-menu:hover { background: var(--bg-page); }
.usuario-menu .fa-chevron-down { font-size: 11px; color: var(--text-muted); }

.avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-indigo);
    color: var(--on-brand);
    font-size: 12px;
    font-weight: 700;
}

.contenido-panel {
    padding: 24px 32px;
}

/* ========================================
   7. Estado vacio (port de golotes)
   ======================================== */
.empty-state { max-width: 480px; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; }
.empty-state-icon { margin-bottom: 1rem; font-size: 2.5rem; color: var(--text-muted); }
.empty-state-title { margin-bottom: 0.5rem; font-size: 1.15rem; font-weight: 600; color: var(--text-primary); }
.empty-state-text { margin-bottom: 0; color: var(--text-muted); }

/* ========================================
   8. Pantalla dividida (login del panel, ingreso del alumno, instalador)
   ======================================== */
.pantalla-dividida {
    display: flex;
    min-height: 100vh;
}

.panel-marca {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    width: 560px;
    min-width: 560px;
    padding: 56px 64px;
    background-color: var(--brand-indigo);
    color: var(--on-brand);
}

.marca-nombre {
    display: block;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
}

.marca-bajada {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.7);
}

/* Logo de Anglia arriba del panel de marca, en el ingreso del alumno (la marca va en el pie) */
.marca-logo {
    width: 188px;
    height: auto;
}

.panel-marca h1 {
    margin: 0 0 16px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
}

.panel-marca .bajada-hero {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.reglas {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.reglas li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    line-height: 1.4;
}

.regla-icono {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
}

.pie-marca {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.panel-formulario {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.tarjeta-acceso {
    width: 440px;
    max-width: 100%;
    border-radius: var(--radius-modal);
}

/* ========================================
   9. Responsive
   ======================================== */
/* Entre 992 y 1199px la columna de marca (560px) mas el formulario (440px con su margen) no entraban: la pagina se
   corria de costado */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .panel-marca {
        width: 440px;
        min-width: 440px;
        padding: 48px 40px;
    }
}

@media (max-width: 991px) {
    .pantalla-dividida {
        flex-direction: column;
    }

    .panel-marca {
        width: 100%;
        min-width: 0;
        padding: 40px 24px 32px;
    }

    .panel-marca h1 {
        font-size: 30px;
    }

    .panel-marca .reglas,
    .panel-marca .pie-marca {
        display: none;
    }

    .panel-formulario {
        align-items: flex-start;
        padding: 20px 16px;
    }

    .contenido-panel {
        padding: 20px 16px;
    }
}

/* ========================================
   10. Celular: barra de 56px y menu lateral (port de golotes)
   ======================================== */
.mobile-topbar { display: none; }

.mobile-sidenav {
    /* MDB lee su propia variable (400px por defecto) y Bootstrap la suya */
    --mdb-offcanvas-width: 280px;
    --bs-offcanvas-width: 280px;
    background: var(--bg-nav);
    color: var(--text-primary);
}

.mobile-sidenav .offcanvas-header { padding: 20px 20px 16px; border-bottom: 1px solid var(--border); }
.mobile-sidenav .offcanvas-body { padding: 0 20px; }

.mobile-sidenav .offcanvas-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}

.sn-menu-item { border-bottom: 1px solid var(--border); }
.sn-menu-item:last-child { border-bottom: 0; }

/* Un item del menu es un link o un boton (los que despliegan secciones): los dos se ven igual y miden 48px de alto */
.sn-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    transition: color 0.15s;
}

.sn-link:hover,
.sn-link.active { color: var(--accent-text); }
.sn-link-chico { width: auto; min-height: 44px; font-size: 14px; }

.sn-chevron { font-size: 11px; color: var(--text-muted); transition: transform 0.25s; }
.sn-link-toggle[aria-expanded="true"] .sn-chevron { transform: rotate(180deg); }

.sn-sublist { padding: 0 0 8px 34px; }

.sn-sublink {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-secondary);
    font-size: 14px;
    transition: color 0.15s;
}

.sn-sublink:hover,
.sn-sublink.active { color: var(--accent-text); }
.sn-sublink.active { font-weight: 600; }


/* Menos de 992px de ancho (celular parado o acostado y tablet), o un celular acostado mas ancho (alto de 500px o menos).
   golotes corta en 600px, pero aca el rail con la barra de arriba y el submenu no entran antes de 992px: entre 600 y
   991px la barra se salia de la pantalla y las tablas quedaban apretadas (pasada de anchos, 25-09-2026) */
@media (max-width: 991.98px), (orientation: landscape) and (max-height: 500px) {
    .nav-rail,
    .submenu-column,
    .top-bar { display: none; }

    .mobile-topbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: var(--z-topbar);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 56px;
        padding: 0 16px;
        background: var(--bg-nav);
        border-bottom: 1px solid var(--border);
    }

    /* Logo y titulo encogen y el titulo corta con puntos; los botones de la derecha no se achican */
    .mobile-topbar-titulo {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: 12px;
        min-width: 0;
        color: var(--text-primary);
    }

    .mobile-topbar .rail-logo { width: 44px; height: 44px; }
    .mobile-topbar .usuario-menu { padding: 6px; }

    .contenido-panel { padding: 72px 16px 24px; }

    /* Todo lo que se toca mide 44px como minimo (skill de UI: touch-target-size) */
    .contenido-panel .btn,
    .offcanvas .btn,
    .modal .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .contenido-panel .btn-floating,
    .offcanvas .btn-floating { width: 44px; height: 44px; }

    .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* La X de un panel o un modal: el mismo icono, con 44px para tocar */
    .offcanvas-header .btn-close,
    .modal-header .btn-close {
        padding: 15px;
        margin: -15px -15px -15px auto;
    }

    .mobile-sidenav .theme-toggle {
        width: 84px;
        height: 44px;
        padding: 4px;
        border-radius: 22px;
    }

    .mobile-sidenav .toggle-option {
        width: 36px;
        height: 36px;
        border-radius: 18px;
        font-size: 14px;
    }

    /* El calendario de una fecha: 44px, con el icono en el mismo lugar (MDB lo centra con translate desde la derecha) */
    .datepicker-toggle-button {
        width: 44px;
        height: 44px;
        right: calc(var(--mdb-datepicker-toggle-right) - 14px);
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .contenido-panel { padding: 80px 24px 32px; }
}