/* ==========================================================================
   mobile.css  —  Optimización móvil / responsive
   Control de Asistencia 15 de Mayo
   --------------------------------------------------------------------------
   Este archivo se debe cargar SIEMPRE al final (después de style.css o de
   login.css). No modifica el diseño de escritorio: casi todas las reglas
   viven dentro de "media queries" que sólo se activan en pantallas pequeñas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE SEGURA (se aplica en todas las pantallas)
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;   /* evita que iOS agrande el texto solo */
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;               /* mata el scroll horizontal accidental */
}

img,
video,
iframe {
    max-width: 100%;                  /* nada se desborda del ancho de pantalla */
}

img {
    height: auto;
}

* {
    -webkit-tap-highlight-color: rgba(0, 113, 227, 0.12); /* toque más sutil */
}

/* Que los correos/palabras largas no rompan el ancho en tarjetas y tablas */
.card-custom,
.table td {
    overflow-wrap: break-word;
    word-break: break-word;
}


/* --------------------------------------------------------------------------
   2. TABLETS Y MÓVILES  (≤ 991.98px  →  menú colapsado)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Evita el ZOOM automático de iOS al enfocar un campo
       (Safari hace zoom si la fuente del input mide menos de 16px).
       Se replican los selectores específicos de style.css para ganarles. */
    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .form-control-apple,
    .form-control-login,
    select.form-control-apple,
    textarea.form-control-apple,
    input[type="date"].form-control-apple,
    input[type="time"].form-control-apple {
        font-size: 16px !important;
    }

    /* Menú de navegación desplegado: cómodo y con scroll si es largo */
    .navbar-collapse {
        max-height: 78vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin-top: 12px;
    }

    .navbar-custom .nav-link {
        min-height: 48px;             /* área táctil cómoda */
        display: flex;
        align-items: center;
        padding: 10px 14px !important;
        font-size: 16px !important;
    }

    /* El submenú "Registrar Asistencia" a ancho completo dentro del menú */
    .navbar-custom .dropdown-menu {
        width: 100%;
        min-width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: 1px solid rgba(60, 60, 67, 0.12) !important;
        margin-top: 6px !important;
    }

    .navbar-custom .dropdown-item {
        min-height: 46px;
    }

    /* Botón "Cerrar Sesión" del menú desplegado:
       style.css le hereda border-radius:50% + una sombra interna que, al ocupar
       todo el ancho, se ve como un óvalo con sombreado raro. Lo normalizamos. */
    .btn-logout {
        width: 100%;
        height: auto;
        min-height: 48px;
        border-radius: 14px !important;
        justify-content: flex-start;
        padding: 12px 16px !important;
        background: rgba(255, 59, 48, 0.10) !important;  /* tono rojo suave = salir */
        box-shadow: none !important;
        border: 1px solid rgba(255, 59, 48, 0.18) !important;
    }
    .btn-logout i {
        color: #ff3b30 !important;
    }
    .btn-logout::after {
        color: #ff3b30 !important;
    }
    .btn-logout:hover {
        background: rgba(255, 59, 48, 0.16) !important;
        transform: none !important;
    }
}


/* --------------------------------------------------------------------------
   3. MÓVILES  (≤ 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* --- Contenedores y tarjetas --- */
    .main-content > .container,
    .main-content > .container-fluid,
    .apple-container {
        padding: 18px 14px 40px !important;
        /* respeta el "notch" en iPhones */
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
    }

    .card-custom,
    .apple-card {
        padding: 16px !important;
        border-radius: 18px !important;
        margin-bottom: 14px !important;
    }

    /* --- Títulos a escala app: compactos y legibles (no gigantes) --- */
    .page-title {
        font-size: clamp(23px, 6.5vw, 28px) !important;
        line-height: 1.12 !important;
        margin-bottom: 14px !important;
    }
    h1:not(.page-title) { font-size: 1.35rem !important; }
    h2 { font-size: 1.2rem !important; }
    h3 { font-size: 1.08rem !important; }

    /* --- Barra de navegación --- */
    .navbar-custom .navbar-brand {
        font-size: 1.05rem;
        white-space: nowrap;
    }

    /* --- Botones cómodos para el dedo --- */
    .btn,
    .btn-apple {
        min-height: 46px;
    }
    .btn-lg {
        width: 100%;                  /* los botones grandes ocupan todo el ancho */
    }
    /* Pies de tarjeta/formulario (div.text-end): los botones se apilan a ancho
       completo, en vez de amontonarse a la derecha. No afecta celdas de tabla. */
    div.text-end {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    div.text-end > .btn {
        width: 100%;
        margin: 0 !important;
        justify-content: center;
    }
    /* Grupos de botones / acciones: que bajen de línea en vez de desbordar */
    .d-flex.gap-1,
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-wrap: wrap;
    }

    /* --- Formularios --- */
    .form-label {
        margin-bottom: 6px;
    }

    /* --- Tablas: scroll horizontal elegante --- */
    .table-responsive {
        border-radius: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive::-webkit-scrollbar {
        height: 6px;
    }
    .table-responsive::-webkit-scrollbar-thumb {
        background: rgba(60, 60, 67, 0.28);
        border-radius: 3px;
    }
    .table thead th {
        font-size: 11px !important;
        padding: 10px 10px !important;
        white-space: nowrap;
    }
    .table tbody td {
        font-size: 13px !important;
        padding: 12px 10px !important;
    }

    /* --- Modales a casi pantalla completa --- */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    .modal-dialog-centered {
        min-height: calc(100% - 20px);
    }
    .modal-body {
        padding: 18px !important;
    }
    .modal-header,
    .modal-footer {
        padding: 14px 18px !important;
    }
    /* Botones del pie del modal apilados y a ancho completo */
    .modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .modal-footer > .btn {
        width: 100%;
        margin: 0 !important;
    }

    /* --- Dashboard / banners --- */
    .active-shift-banner {
        padding: 16px 18px !important;
    }
    .active-shift-banner h2 {
        font-size: 1.2rem !important;
    }

    /* --- Escáner QR y panel de firma --- */
    #qr-reader {
        width: 100% !important;
        max-width: 100% !important;
    }
    #qr-reader video {
        width: 100% !important;
        height: auto !important;
        border-radius: 14px;
    }
    .signature-pad-container {
        min-height: 170px;
    }

    /* --- Pie de página --- */
    .footer-custom {
        padding: 22px 14px max(18px, env(safe-area-inset-bottom)) !important;
    }
    .footer-text {
        font-size: 13px !important;
    }

    /* --- LOGIN / REGISTRO (páginas independientes) --- */
    body.login-body {
        display: flex;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;           /* altura real con la barra del navegador */
        align-items: flex-start;
        padding: 6vh 16px max(24px, env(safe-area-inset-bottom));
    }
    .login-container {
        padding: 32px 22px !important;
        max-width: 100% !important;
        border-radius: 22px !important;
    }
    .login-container h1 {
        font-size: 24px !important;
    }
    .school-logo {
        max-width: 118px !important;
        margin-bottom: 22px !important;
    }
}


/* --------------------------------------------------------------------------
   4. MÓVILES PEQUEÑOS  (≤ 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .page-title {
        font-size: clamp(22px, 6vw, 25px) !important;
    }
    .card-custom,
    .apple-card {
        padding: 14px !important;
    }
    .navbar-custom .navbar-brand {
        font-size: 1rem;
    }
    .btn,
    .btn-apple {
        font-size: 15px !important;
    }
    .badge {
        font-size: 11px !important;
        white-space: normal;
    }
    /* Filtros y formularios en línea: a una sola columna */
    form .d-flex.flex-wrap {
        gap: 12px !important;
    }
    form .d-flex.flex-wrap > .btn,
    form .d-flex.flex-wrap > .flex-grow-1 {
        width: 100%;
        flex: 1 1 100%;
    }
}


/* --------------------------------------------------------------------------
   5. HORIZONTAL (landscape) con poca altura
   -------------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
    body.login-body {
        align-items: flex-start;
        padding-top: 16px;
    }
}


/* --------------------------------------------------------------------------
   6. BARRA INFERIOR TIPO APP  (sólo teléfonos ≤ 768px)
   --------------------------------------------------------------------------
   En PC / resoluciones grandes queda OCULTA y se usa el menú de escritorio.
   En teléfono aparece fija abajo, como la navegación de una app nativa.
   -------------------------------------------------------------------------- */
.mobile-tabbar {
    display: none;                    /* oculta por defecto (escritorio/tablet) */
}

@media (max-width: 768px) {
    .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 4000;
        justify-content: space-around;
        align-items: stretch;
        gap: 2px;
        padding: 4px 6px max(4px, env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.92);
        border-top: 1px solid rgba(60, 60, 67, 0.12);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.05);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
    }

    .mobile-tabbar .tabbar-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 48px;
        padding: 5px 2px;
        border: none;
        background: transparent;
        color: #8a8a8e;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-decoration: none;
        border-radius: 13px;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

    .mobile-tabbar .tabbar-item i {
        font-size: 19px;
        line-height: 1;
    }

    .mobile-tabbar .tabbar-item span {
        line-height: 1;
    }

    /* La acción principal (Escanear) siempre con acento, para que destaque */
    .mobile-tabbar .tabbar-scan i {
        color: #0071e3;
    }

    /* Pestaña de la página actual */
    .mobile-tabbar .tabbar-item.active {
        color: #0071e3;
    }
    .mobile-tabbar .tabbar-item.active i {
        transform: translateY(-1px);
    }
    .mobile-tabbar .tabbar-item:active {
        background: rgba(0, 113, 227, 0.10);
    }

    /* Espacio inferior para que el contenido y el footer no queden tapados */
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }

    /* En teléfono mandamos con la barra de abajo: ocultamos la hamburguesa.
       El botón "Más" abre el mismo menú con el resto de opciones. */
    .navbar-custom .navbar-toggler {
        display: none;
    }

    /* Botones de iconos de acción: tamaño parejo y proporcionado en móvil
       (historial, gafete, editar, borrar, etc.) — ni grandes ni pesados. */
    button.icon-action,
    a.icon-action {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        font-size: 16px !important;
        border-radius: 11px !important;
    }
}


/* --------------------------------------------------------------------------
   7. TABLAS → TARJETAS en teléfono  (clase reutilizable .table-cards)
   --------------------------------------------------------------------------
   Añade class="table table-cards" a la <table> y data-label="..." a cada <td>.
   La 1ª celda es el encabezado; marca la celda de botones con class="actions-cell".
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    table.table-cards { min-width: 0 !important; }
    table.table-cards thead { display: none !important; }

    table.table-cards,
    table.table-cards tbody,
    table.table-cards tr,
    table.table-cards td {
        display: block !important;
        width: 100% !important;
    }

    table.table-cards tr {
        background: #ffffff !important;
        border: 1px solid rgba(60, 60, 67, 0.12) !important;
        border-radius: 14px !important;
        padding: 11px 13px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }

    /* Cada celda = una línea "ETIQUETA ........ valor" (los valores largos
       como correos bajan a su propia línea en vez de partirse feo). */
    table.table-cards td {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 5px 0 !important;
        display: flex !important;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 12px;
        text-align: left;
        font-size: 13.5px !important;
        color: var(--apple-ink, #1d1d1f);
        overflow-wrap: anywhere;
    }
    /* style.css pone bordes/redondeo a la 1ª y última celda con !important;
       aquí los quitamos con mayor especificidad para que no salga "caja". */
    .table.table-cards tbody tr td:first-child,
    .table.table-cards tbody tr td:last-child {
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
    }
    table.table-cards td::before {
        content: attr(data-label);
        flex: 0 0 90px;
        text-align: left;
        color: var(--apple-muted-2, #86868b);
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* 1ª celda = encabezado de la tarjeta (sin etiqueta) */
    table.table-cards td:first-child {
        display: block !important;
        text-align: left;
        border-bottom: 1px solid rgba(60, 60, 67, 0.10) !important;
        margin-bottom: 6px;
        padding-bottom: 8px !important;
        font-size: 15px !important;
        font-weight: 700;
    }
    table.table-cards td:first-child::before { display: none; }

    /* Celda con controles (formularios/selectores): etiqueta arriba, control abajo */
    table.table-cards td.cell-block {
        display: block !important;
        text-align: left;
    }
    table.table-cards td.cell-block::before {
        display: block;
        margin-bottom: 5px;
    }
    table.table-cards td.cell-block form { width: 100%; }
    /* El selector crece y el botón se queda a su lado (no debajo) */
    table.table-cards td.cell-block .form-select {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    table.table-cards td.cell-block .form-control { width: 100%; }

    /* Celda de acciones: fila de botones en su propia línea */
    table.table-cards td.actions-cell {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        text-align: left;
        border-top: 1px solid rgba(60, 60, 67, 0.10) !important;
        margin-top: 6px;
        padding-top: 10px !important;
    }
    table.table-cards td.actions-cell::before { display: none; }
}