/*
 * mobile.css — Fundacion mobile-first / "sensacion nativa" en celular.
 *
 * REGLA DE ORO: TODO el contenido de este archivo vive dentro de
 * @media (max-width: 767px). No agregar ninguna regla fuera de ese
 * bloque: es lo que garantiza, a nivel estructural, que este archivo
 * nunca puede afectar como se ve o funciona el sistema en desktop
 * (>=768px), sin importar el orden de carga respecto a Bootstrap.
 *
 * Fase 0: solo variables (tokens). Fase 1: bottom tab bar (los 4 roles:
 * admin/recepcion, profesor, superadmin) + bottom sheet "Más" + fix
 * 100vh->100dvh + detalles de sensacion nativa (overscroll, user-select,
 * fade-in de contenido). Fase 2 (en progreso): componentes reutilizables
 * — .ds-touch-target, .ds-modal-sheet (modal de Bootstrap → bottom
 * sheet, opt-in por clase) y, en un paso siguiente, tarjetas de tabla.
 * Se agregan siempre dentro del mismo bloque @media.
 *
 * La visibilidad en desktop de .ds-bottombar tambien esta garantizada
 * por la clase Bootstrap "d-md-none" puesta directamente en el HTML
 * (mismo patron ya usado por el boton "Menu" original) — es una
 * segunda capa de seguridad independiente de este archivo.
 */

@media (max-width: 767px) {
    :root {
        /* Breakpoints de referencia (documentales; las media queries
           reales siguen escribiendose con el valor literal, esto es
           para que JS y CSS compartan el mismo numero como fuente). */
        --ds-breakpoint-mobile-max: 767px;
        --ds-breakpoint-tablet-min: 768px;

        /* Spacing */
        --ds-space-xs: 4px;
        --ds-space-sm: 8px;
        --ds-space-md: 16px;
        --ds-space-lg: 24px;
        --ds-space-xl: 32px;

        /* Touch target minimo recomendado (WCAG 2.5.5 / guias iOS-Android) */
        --ds-touch-target-min: 44px;

        /* Paleta de marca (de logo.png, usada tambien en manifest.json) */
        --ds-brand-bg: #2d1b45;
        --ds-brand-primary: #a020f0;
        --ds-brand-accent: #ff2d95;

        /* Alto de la bottom bar, usado tambien para el padding-bottom
           del contenido y del bottom sheet. */
        --ds-bottombar-height: 56px;
    }

    /* --- Ocultar navegacion vieja para los 4 roles que ya tienen su
       propia bottom bar (admin, recepcion, profesor, superadmin — ver
       la clase "ds-has-bottombar" en el <body> de base.html, que solo
       se agrega para esos 4 valores exactos de rol; cualquier otro rol
       no listado conserva el sidebar/boton "Menu" de siempre). --- */
    body.ds-has-bottombar #sidebar {
        display: none !important;
    }
    body.ds-has-bottombar #content > button[data-bs-toggle="offcanvas"] {
        display: none !important;
    }
    /* Deja lugar abajo para que la bottom bar no tape el ultimo
       elemento del contenido (incluye el alto del home indicator de
       iOS/Android via safe-area-inset-bottom). */
    body.ds-has-bottombar #content {
        padding-bottom: calc(var(--ds-bottombar-height) + env(safe-area-inset-bottom) + var(--ds-space-md));
    }

    /* --- Fix Fase 1 punto 5: 100vh no sigue la barra de direcciones
       dinamica de Safari/Chrome mobile (podia cortar contenido o saltar
       al abrir el teclado). Se escribe 100dvh DESPUES de 100vh a
       proposito: si el navegador no entiende "dvh" ignora esa linea y
       se queda con la anterior (fallback en cascada normal de CSS, sin
       @supports). Soporte de 100dvh: Safari iOS 16+ (set-2022) y Chrome/
       Android 108+ (dic-2022) — cobertura amplia en mobile 2024+. Se
       aplica a TODOS los roles (el bug es de base.html en general, no
       solo de quienes tienen bottom bar); no pisa "overflow: hidden"
       del <style> original de base.html, solo cambia "height". */
    body {
        height: 100vh;
        height: 100dvh;
        overscroll-behavior-y: contain;
    }
    #content {
        height: 100vh;
        height: 100dvh;
    }

    /* --- Bottom tab bar --- */
    .ds-bottombar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        height: calc(var(--ds-bottombar-height) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background-color: #212529;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    }
    .ds-bottombar-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: var(--ds-touch-target-min);
        padding: 4px 2px;
        color: #adb5bd;
        background: none;
        border: none;
        text-decoration: none;
        font-size: 0.65rem;
        line-height: 1.1;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }
    .ds-bottombar-item .material-symbols-outlined {
        font-size: 22px;
    }
    .ds-bottombar-item.active {
        color: var(--ds-brand-primary);
    }
    /* Feedback tactil inmediato (pseudo-clase nativa del navegador, no
       depende de JS ni de que termine la navegacion). */
    .ds-bottombar-item:active {
        opacity: 0.55;
    }

    /* Modificador para bottom bars con pocos items (hoy: profesor, 2
       items) — sin esto, "flex: 1 1 0" en .ds-bottombar-item estira
       cada boton a la mitad de la pantalla, un target tactil enorme y
       un espaciado raro entre icono y label. Centrado con ancho fijo
       en su lugar. */
    .ds-bottombar-compact {
        justify-content: center;
        gap: 56px;
    }
    .ds-bottombar-compact .ds-bottombar-item {
        flex: 0 0 auto;
        min-width: 72px;
    }

    /* --- Bottom sheet "Más" (offcanvas-bottom de Bootstrap, solo se
       le ajusta alto/bordes; el show/hide lo maneja Bootstrap JS) --- */
    .ds-mas-sheet.offcanvas-bottom {
        height: min(80vh, 620px);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* user-select:none en la "chrome" de navegacion del bottom sheet
       (titulo, labels de menu, avatar) — NUNCA en contenido real. Este
       sheet solo contiene links de menu (nombres de secciones fijos,
       no datos de clientes/alumnos), asi que es seguro marcarlo entero.
       El saludo con el nombre del usuario logueado tampoco es "contenido"
       en el sentido de datos a copiar (es la propia identidad de quien
       esta mirando la pantalla), pero lo dejamos seleccionable igual
       por las dudas: no se aplica user-select aca, solo en los <a> de
       navegacion y el header. */
    .ds-mas-sheet .offcanvas-header,
    .ds-mas-list li a {
        user-select: none;
        -webkit-user-select: none;
    }
    .ds-mas-avatar {
        font-size: 2rem;
        color: #6c757d;
    }
    .ds-mas-link {
        color: inherit;
        text-decoration: none;
        min-height: var(--ds-touch-target-min);
        user-select: none;
        -webkit-user-select: none;
    }
    .ds-mas-list li a {
        display: flex;
        align-items: center;
        min-height: var(--ds-touch-target-min);
        padding: 8px 4px;
        color: #212529;
        text-decoration: none;
        border-radius: 8px;
        -webkit-tap-highlight-color: transparent;
    }
    .ds-mas-list li a:active {
        background-color: rgba(0, 0, 0, 0.06);
    }
    .ds-mas-separator {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        margin: 8px 0;
    }

    /* --- Fase 1 punto 6: fade-in simple del contenido al cargar cada
       pagina nueva (el sistema sigue siendo full-page-reload de Flask
       en esta fase, esto evita el "salto" seco de una carga cruda). Se
       anima solo la opacidad final (0->1) SIN dejar una regla estatica
       de "opacity:0" aparte: si por lo que sea la animacion no corriera,
       el contenido queda en su opacidad normal (1) en vez de invisible
       para siempre. Respeta prefers-reduced-motion. --- */
    #content {
        animation: ds-content-fade-in 200ms ease-out;
    }
    @keyframes ds-content-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        #content {
            animation: none;
        }
    }

    /* ============================================================
       FASE 2 — COMPONENTES REUTILIZABLES (paso 1: touch targets +
       modal->bottom sheet). Se construyen acá, sin aplicarse todavia
       a ninguna pagina grande — eso es el piloto del paso siguiente.
       ============================================================ */

    /* --- Punto 1: touch target minimo ---------------------------------
       Utilidad opt-in: agregar la clase "ds-touch-target" a cualquier
       elemento (boton, link, input) para garantizarle el area tactil
       minima recomendada (44px, WCAG 2.5.5), sin importar su tamaño
       visual/de fuente. No cambia color, padding visual ni layout mas
       alla del tamaño minimo — el contenido se sigue centrando con lo
       que ya traiga el elemento (Bootstrap ya centra texto de botones
       por defecto). */
    .ds-touch-target {
        min-height: var(--ds-touch-target-min);
        min-width: var(--ds-touch-target-min);
    }

    /* --- Punto 2: modal de Bootstrap -> bottom sheet -------------------
       Opt-in por clase: agregar "ds-modal-sheet" a un .modal existente
       (ej. class="modal fade ds-modal-sheet") lo hace deslizar desde
       abajo en mobile, con las esquinas superiores redondeadas — mismo
       lenguaje visual que el bottom sheet "Más" de Fase 1. El modal
       sigue siendo un modal de Bootstrap 100% normal: JS de Bootstrap
       sin tocar (bootstrap.bundle.min.js ya cargado), mismo manejo de
       backdrop, foco, teclado (Esc) y data-bs-backdrop="static" +
       data-bs-keyboard="false" (Bootstrap ya bloquea el cierre por tap
       afuera / Esc en esos casos — no se toca esa logica en absoluto,
       solo se restyla la presentacion). No hace falta JS nuevo: el
       mecanismo entero se apoya en la clase ".show" que Bootstrap ya
       agrega/saca solo. Si en el futuro se agrega gesto de swipe-down
       para cerrar, ESE es el primer lugar donde va a hacer falta JS —
       y ahi hay que excluir explicitamente los modales con
       data-bs-backdrop="static" (hoy no existe ningun gesto de swipe,
       asi que esos modales ya estan protegidos por construccion: no se
       pueden cerrar de ninguna forma que no sea su propio boton/form). */
    .modal.ds-modal-sheet {
        padding-right: 0 !important; /* Bootstrap compensa el ancho del scrollbar de escritorio; en mobile no aplica y puede generar un corrimiento horizontal */
    }
    .modal.ds-modal-sheet .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        transform: translateY(100%);
        transition: transform 0.25s ease-out;
    }
    .modal.ds-modal-sheet.show .modal-dialog {
        transform: translateY(0);
    }
    .modal.ds-modal-sheet .modal-content {
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        overflow-y: auto;
        border: none;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* --- Punto 3: tabla -> tarjetas apiladas ---------------------------
       Elegido: DOBLE MARKUP (tabla original sin tocar + bloque de
       tarjetas aparte, cada uno mostrado/ocultado con las utilidades
       de Bootstrap "d-none/d-md-table" y "d-md-none" — mismo mecanismo
       ya usado y probado para la bottom bar en Fase 1, cero CSS custom
       para el show/hide). Se descartó la alternativa de transformar el
       DOM de la tabla via JS: con pocas filas por pagina (paginado,
       10-20 filas tipico) la ganancia de "no repetir markup" no
       compensa la fragilidad de tener que extraer contenido de celdas
       con botones/badges/HTML condicional (no solo texto) y
       reconstruirlo en runtime. El doble markup es Jinja plano, se lee
       igual que el resto del template, no agrega JS nuevo, y cualquiera
       que edite la tabla en el futuro ve las dos versiones (fila +
       tarjeta) una al lado de la otra en el mismo archivo.

       Estas clases son un componente generico (no especifico de
       ninguna pagina): titulo destacado arriba, filas etiqueta-valor
       debajo, acciones al final con separador. */
    .ds-row-card {
        border-radius: 12px;
    }
    .ds-row-card-title {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 8px;
    }
    .ds-row-card-field {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        font-size: 0.9rem;
    }
    .ds-row-card-field:last-of-type {
        border-bottom: none;
    }
    .ds-row-card-label {
        color: #6c757d;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
    .ds-row-card-actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    .ds-row-card-actions > * {
        flex: 1 1 0;
    }
}