/* ============================================================
   RESPONSIVE GLOBAL — SISTEMA ESCOLAR
   Archivo: /sistema_ventas/assets/css/responsive-global.css

   Objetivo:
   - Evitar desbordamientos horizontales.
   - Mejorar formularios, tablas, tarjetas y modales.
   - Adaptar controles táctiles.
   - Optimizar el Registro Auxiliar en tablet y celular.
============================================================ */

/* ============================================================
   BASE SEGURA
============================================================ */
:root {
    --responsive-gap-xs: 0.5rem;
    --responsive-gap-sm: 0.75rem;
    --responsive-gap-md: 1rem;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video,
canvas {
    height: auto;
}

main,
section,
article,
aside,
header,
footer,
nav,
.content,
.app-content,
.container,
.container-fluid,
.row,
[class*="col-"] {
    min-width: 0;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

/* Evita que textos largos rompan tarjetas o paneles */
.card,
.panel,
.modal-content,
.alert,
.badge,
.btn,
.form-control,
.form-select {
    overflow-wrap: anywhere;
}

/* ============================================================
   TABLAS Y CONTENIDO ANCHO
============================================================ */
.table-responsive,
.table-responsive-sm,
.table-responsive-md,
.table-responsive-lg,
.table-responsive-xl,
.table-responsive-xxl,
.table-responsive-soft,
.responsive-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.table-responsive-soft {
    scrollbar-width: thin;
}

.table-wide {
    min-width: 1100px;
}

/* ============================================================
   FORMULARIOS Y BOTONES
============================================================ */
.form-control,
.form-select,
.input-group,
.input-group-text {
    min-width: 0;
}

.btn-group,
.btn-toolbar {
    max-width: 100%;
    flex-wrap: wrap;
}

/* ============================================================
   TABLET
============================================================ */
@media (max-width: 991.98px) {
    .app-container {
        width: 100%;
        min-width: 0;
    }

    .app-content,
    main.content,
    .content {
        min-width: 0;
        max-width: 100%;
    }

    .container,
    .container-fluid {
        max-width: 100%;
    }

    .modal-dialog {
        max-width: calc(100vw - 1.5rem);
        margin-left: auto;
        margin-right: auto;
    }

    .dropdown-menu {
        max-width: calc(100vw - 1rem);
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   CELULAR
============================================================ */
@media (max-width: 767.98px) {
    body {
        font-size: 14px;
    }

    main.content,
    .content {
        max-width: 100%;
    }

    .card,
    .panel {
        max-width: 100%;
    }

    .card-body,
    .modal-body {
        padding: 0.875rem;
    }

    .table {
        font-size: 12px;
    }

    .table th,
    .table td {
        white-space: normal;
    }

    .btn {
        min-height: 38px;
    }

    .d-flex.responsive-stack,
    .responsive-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .responsive-stack > .btn,
    .responsive-stack > a,
    .responsive-stack > button,
    .responsive-stack > .form-control,
    .responsive-stack > .form-select {
        width: 100%;
    }

    .modal-dialog {
        width: calc(100vw - 1rem);
        margin: 0.5rem auto;
    }
}

/* ============================================================
   DISPOSITIVOS TÁCTILES
============================================================ */
@media (hover: none), (pointer: coarse) {
    button,
    .btn,
    a.btn,
    select,
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        min-height: 42px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-width: 18px;
        min-height: 18px;
    }

    .dropdown-item,
    .list-group-item {
        min-height: 42px;
        display: flex;
        align-items: center;
    }
}

/* ============================================================
   REGISTRO AUXILIAR
   Estas reglas solo actúan dentro de #ra-excel-app.
============================================================ */
@media (max-width: 800px) {
    #ra-excel-app {
        --ra-order-width: 36px;
        --ra-dni-width: 76px;
        --ra-name-width: 190px;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    #ra-excel-app .ra-sheet {
        font-size: 10px;
    }

    #ra-excel-app .ra-sheet-viewport {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 210px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    #ra-excel-app .ra-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    #ra-excel-app .ra-toolbar form {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    #ra-excel-app .ra-toolbar select,
    #ra-excel-app .ra-toolbar button,
    #ra-excel-app .ra-toolbar a {
        width: 100%;
        max-width: none;
        justify-content: center;
    }

    #ra-excel-app .ra-status {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    #ra-excel-app .ra-name-cell {
        font-size: 10px;
    }

    #ra-excel-app .ra-double-scroll {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        bottom: 3px;
    }
}

@media (max-width: 480px) {
    #ra-excel-app {
        --ra-order-width: 34px;
        --ra-dni-width: 70px;
        --ra-name-width: 165px;
    }

    #ra-excel-app .ra-activity-col,
    #ra-excel-app .ra-note-cell {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
    }

    #ra-excel-app .ra-name-cell {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    #ra-excel-app .ra-double-scroll {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        padding: 4px;
    }
}

@media (hover: none), (pointer: coarse) {
    #ra-excel-app .ra-na-toggle {
        width: 16px;
        height: 16px;
        opacity: 1;
    }

    #ra-excel-app .ra-na-toggle input {
        width: 16px;
        height: 16px;
    }

    #ra-excel-app .ra-note {
        font-size: 14px;
    }

    #ra-excel-app .ra-scroll-btn {
        min-height: 42px;
    }
}


/* ============================================================
   REGISTRO AUXILIAR — CELULAR: SOLO APELLIDOS
   Nota:
   - Este archivo global se carga antes del CSS interno del módulo.
   - Se usa !important únicamente en los puntos necesarios para
     asegurar que el ajuste móvil prevalezca.
============================================================ */

/* Escritorio y tablet: nombre completo */
#ra-excel-app .ra-name-mobile,
#ra-excel-app .ra-name-head-mobile {
    display: none;
}

#ra-excel-app .ra-name-desktop,
#ra-excel-app .ra-name-head-desktop {
    display: inline;
}

@media (max-width: 600px) {
    #ra-excel-app {
        --ra-order-width: 36px !important;
        --ra-dni-width: 0px !important;
        --ra-name-width: 205px !important;
    }

    /* El DNI se oculta únicamente en celular */
    #ra-excel-app .ra-dni-head,
    #ra-excel-app .ra-dni-cell {
        display: none !important;
    }

    /* La columna de apellidos queda pegada al número de orden */
    #ra-excel-app .ra-name-head,
    #ra-excel-app .ra-name-cell {
        left: var(--ra-order-width) !important;
        width: var(--ra-name-width) !important;
        min-width: var(--ra-name-width) !important;
        max-width: var(--ra-name-width) !important;
    }

    #ra-excel-app .ra-name-head {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    #ra-excel-app .ra-name-cell {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 11px !important;
    }

    /* En celular se muestran solo los apellidos */
    #ra-excel-app .ra-name-desktop,
    #ra-excel-app .ra-name-head-desktop {
        display: none !important;
    }

    #ra-excel-app .ra-name-mobile,
    #ra-excel-app .ra-name-head-mobile {
        display: block !important;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #ra-excel-app .ra-name-mobile {
        font-size: 11px;
        font-weight: 700;
        line-height: 1.15;
    }

    #ra-excel-app .ra-name-head-mobile {
        font-size: 12px;
        font-weight: 900;
        text-align: center;
    }

    /* Mantiene suficiente ancho táctil para ingresar notas */
    #ra-excel-app .ra-activity-col,
    #ra-excel-app .ra-note-cell {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    #ra-excel-app .ra-note {
        font-size: 14px !important;
    }

    #ra-excel-app .ra-na-toggle,
    #ra-excel-app .ra-na-toggle input {
        width: 16px !important;
        height: 16px !important;
    }

    #ra-excel-app .ra-na-toggle {
        opacity: 1 !important;
    }
}

@media (max-width: 420px) {
    #ra-excel-app {
        --ra-order-width: 34px !important;
        --ra-name-width: 190px !important;
    }

    #ra-excel-app .ra-name-mobile {
        font-size: 10.5px;
    }
}

/* ============================================================
   ACCESIBILIDAD
============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   FOOTER RESPONSIVE
   El archivo footer.php continúa cargándose siempre para mantener
   jQuery, Bootstrap, DataTables, SweetAlert y los scripts globales.
   Solamente se oculta el elemento visual .app-footer en celular.
============================================================ */

/* Celular vertical y pantallas móviles estrechas */
@media (max-width: 767.98px) {
    .app-footer {
        display: none !important;
    }
}

/* Celular horizontal táctil, aunque el ancho supere 768 px */
@media (orientation: landscape)
       and (max-height: 600px)
       and (pointer: coarse) {
    .app-footer {
        display: none !important;
    }
}

/* ============================================================
   REGISTRO AUXILIAR — MODO DE CAPTURA A PANTALLA COMPLETA
   Se activa automáticamente en:
   - celular vertical;
   - celular horizontal;
   - dispositivos táctiles de poca altura.

   El navegador conserva su propia barra de direcciones. Este
   bloque maximiza únicamente el área disponible de la página.
============================================================ */

.ra-focus-controls-button,
.ra-mobile-controls-backdrop {
    display: none;
}

@media (max-width: 767.98px),
       (orientation: landscape) and (max-height: 700px) and (pointer: coarse) {

    body.ra-entry-focus {
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    body.ra-controls-lock {
        overflow: hidden !important;
        touch-action: none;
    }

    /* Botón del menú lateral más compacto durante el registro */
    body.ra-entry-focus .menu-toggle {
        top: max(7px, env(safe-area-inset-top)) !important;
        left: max(7px, env(safe-area-inset-left)) !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 13px !important;
        opacity: .94;
    }

    #ra-excel-app.ra-mobile-focus {
        position: fixed;
        inset: 0;
        z-index: 1;
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;
        overflow: hidden;
        background: #ffffff;
    }

    #ra-excel-app.ra-mobile-focus > main.content {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    #ra-excel-app.ra-mobile-focus > main.content > div {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #ra-excel-app.ra-mobile-focus section {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    /* Oculta toda la información superior para priorizar las notas */
    #ra-excel-app.ra-mobile-focus section > header,
    #ra-excel-app.ra-mobile-focus .ra-toolbar,
    #ra-excel-app.ra-mobile-focus .ra-double-scroll {
        display: none !important;
    }

    /* La cuadrícula ocupa todo el viewport disponible */
    #ra-excel-app.ra-mobile-focus .ra-sheet-viewport {
        display: block !important;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        background: #ffffff;
    }

    #ra-excel-app.ra-mobile-focus .ra-sheet {
        min-height: 100%;
    }

    /* Botón flotante para mostrar temporalmente los controles */
    #ra-excel-app.ra-mobile-focus .ra-focus-controls-button {
        display: inline-flex;
        position: fixed;
        top: max(7px, env(safe-area-inset-top));
        right: max(7px, env(safe-area-inset-right));
        z-index: 1094;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 12px;
        border: 1px solid rgba(148,163,184,.50);
        border-radius: 13px;
        background: rgba(15,23,42,.94);
        color: #ffffff;
        font-size: 12px;
        font-weight: 800;
        box-shadow: 0 10px 28px rgba(15,23,42,.28);
        cursor: pointer;
        backdrop-filter: blur(8px);
    }

    #ra-excel-app.ra-mobile-focus .ra-focus-controls-button i {
        font-size: 14px;
    }

    #ra-excel-app.ra-mobile-focus .ra-mobile-controls-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1090;
        background: rgba(15,23,42,.48);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .18s ease, visibility .18s ease;
    }

    #ra-excel-app.ra-mobile-focus .ra-mobile-controls-backdrop.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /*
       Cuando el usuario toca "Controles", la barra aparece como
       panel flotante; no vuelve a reducir la altura de la tabla.
    */
    #ra-excel-app.ra-mobile-focus.ra-controls-open .ra-toolbar {
        display: flex !important;
        position: fixed;
        top: max(58px, calc(env(safe-area-inset-top) + 52px));
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        z-index: 1092;
        width: auto !important;
        max-height: calc(100dvh - 74px);
        overflow: auto;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 9px !important;
        padding: 12px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 54px rgba(15,23,42,.30) !important;
        backdrop-filter: blur(12px);
    }

    #ra-excel-app.ra-mobile-focus.ra-controls-open .ra-toolbar form,
    #ra-excel-app.ra-mobile-focus.ra-controls-open .ra-toolbar select,
    #ra-excel-app.ra-mobile-focus.ra-controls-open .ra-toolbar button {
        width: 100% !important;
        max-width: none !important;
    }

    /*
       Exportaciones y leyenda continúan ocultas en celular.
       El panel conserva bimestre, competencia, consolidación y estado.
    */
    #ra-excel-app.ra-mobile-focus .ra-toolbar a[href*="exportar_registro_auxiliar_excel"],
    #ra-excel-app.ra-mobile-focus .ra-toolbar a[href*="exportar_registro_auxiliar_pdf"],
    #ra-excel-app.ra-mobile-focus .ra-legend {
        display: none !important;
    }

    #ra-excel-app.ra-mobile-focus.ra-controls-open .ra-status {
        display: inline-flex !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* El footer visual nunca ocupa espacio en modo de registro */
    body.ra-entry-focus .app-footer {
        display: none !important;
    }
}

/* Celular horizontal: botones flotantes más discretos */
@media (orientation: landscape) and (max-height: 700px) and (pointer: coarse) {
    #ra-excel-app.ra-mobile-focus .ra-focus-controls-button {
        min-height: 38px;
        height: 38px;
        padding: 0 10px;
    }

    body.ra-entry-focus .menu-toggle {
        width: 38px !important;
        height: 38px !important;
    }

    #ra-excel-app.ra-mobile-focus .ra-focus-controls-button span {
        display: none;
    }
}