/**
 * admin/css/admin-tablet.css
 * Ajustes tablet (prioridad 768/1024) para el panel admin.
 * No cambia lógica de negocio. Cargado desde sidebar.php.
 */

/* ============================================================
 * Layout: por debajo de lg (992px) el sidebar lateral estrecha
 * demasiado el contenido en tablet vertical (768×1024).
 * Forzar navegación superior a ancho completo + main 100%.
 * En ≥992px (p. ej. 1024 horizontal) se mantiene el sidebar.
 * No aplica a editores .admin-wrapper.
 * ============================================================ */
@media (max-width: 991.98px) {
    .row > aside.sidebar.col-md-3,
    .row > aside.sidebar.col-lg-2,
    .row > aside.sidebar {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        align-self: stretch !important;
    }

    .row > main.col-12,
    .row > main[class*="col-md-"],
    .row > main[class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Sidebar compacta horizontal */
    aside.sidebar {
        min-height: auto;
        padding: .65rem .55rem .75rem;
    }
    aside.sidebar .tm-entity { display: none !important; }
    aside.sidebar .tm-nav-section {
        padding-top: .3rem;
        padding-bottom: .15rem;
        margin-top: .35rem;
    }
    aside.sidebar nav.tm-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: .3rem;
    }
    aside.sidebar nav.tm-nav .nav-link {
        padding: .55rem .75rem;
        font-size: .86rem;
        min-height: 44px;
    }
    aside.sidebar nav.tm-nav .nav-link.active::before { display: none; }
    aside.sidebar .tm-divider { display: none !important; }

    /* Cerrar sesión visible (antes se ocultaba en móvil) */
    aside.sidebar .tm-foot {
        display: block !important;
        margin-top: .45rem;
        padding-top: 0;
    }
    aside.sidebar .tm-foot nav.tm-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    aside.sidebar .tm-foot .tm-logout {
        min-height: 44px;
    }

    /* Menos padding lateral → más ancho útil */
    .row > main.p-4,
    .row > main.py-3.px-3,
    .row > main.p-3 {
        padding-left: .85rem !important;
        padding-right: .85rem !important;
    }
}

/* ============================================================
 * Targets táctiles (tablet)
 * ============================================================ */
@media (max-width: 991.98px) {
    .btn:not(.btn-sm) {
        min-height: 44px;
    }
    .btn-sm {
        min-height: 40px;
        padding-top: .4rem;
        padding-bottom: .4rem;
        padding-left: .7rem;
        padding-right: .7rem;
    }
    .btn-lg,
    #tmBtnConfirmar {
        min-height: 48px;
    }

    /* Acciones críticas en modales / validación */
    .modal-footer .btn,
    #tmOpDetalleActions .btn,
    #tmValDetalleActions .btn,
    .tm-det-act .btn,
    .tm-actions .btn {
        min-height: 44px;
    }

    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px; /* evita zoom iOS */
    }
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: .2rem;
    }
    .form-check-label {
        padding-left: .15rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ============================================================
 * Tablas: scroll interno, no de toda la página
 * ============================================================ */
@media (max-width: 991.98px) {
    .table-responsive,
    .tm-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    body {
        overflow-x: hidden;
    }
}

/* ============================================================
 * Modales tablet
 * ============================================================ */
@media (max-width: 991.98px) {
    .modal-dialog {
        margin: .5rem auto;
        max-width: calc(100% - 1rem);
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 1rem);
    }
    .modal-content {
        max-height: calc(100vh - 1rem);
    }
    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-footer {
        flex-wrap: wrap;
        gap: .4rem;
        justify-content: stretch;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
    }
}

/* ============================================================
 * Nueva venta (taquilla) — priorizar usabilidad mostrador
 * ============================================================ */
@media (max-width: 991.98px) {
    .tm-venta-wrap {
        max-width: none;
    }
    .tm-act {
        min-height: 56px;
        padding: 1rem 1.05rem;
    }
    .tm-act .tm-t { font-size: 1.05rem; }

    .tm-tipo .btn {
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .tm-tarifa {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        padding: 1rem;
    }
    .tm-tarifa .tm-precio { font-size: 1.35rem; }
    #tmCupos .btn,
    #tmCupos .btn-sm {
        width: 100%;
        min-height: 44px;
    }

    #cantidad {
        max-width: 100% !important;
        min-height: 48px;
        font-size: 1.15rem;
    }

    .tm-act-head {
        padding: 1rem 1.1rem;
    }
    .tm-act-head h2 {
        font-size: 1.35rem;
    }
    .tm-back {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: .25rem 0;
    }
}

/* ============================================================
 * Usuarios / listados: acciones apilables
 * ============================================================ */
@media (max-width: 767.98px) {
    .tm-actions {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        gap: .35rem;
    }
    .tm-actions .btn,
    .tm-actions form {
        width: 100%;
    }
    .tm-actions form .btn {
        width: 100%;
    }
}

/* ============================================================
 * Crear/editar evento (admin-wrapper): sidebar + canvas en tablet
 * ============================================================ */
@media (max-width: 991.98px) {
    .admin-wrapper {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    .admin-wrapper > aside.sidebar {
        width: 100% !important;
        flex-shrink: 0;
        overflow: visible;
    }
    .admin-wrapper .canvas-area {
        padding: 1rem .85rem 2rem !important;
        min-height: 0;
        align-items: stretch;
    }
    .admin-wrapper .editor-container,
    .admin-wrapper .ticket-entrada {
        max-width: 100%;
    }
}

/* ============================================================
 * Escritorio: no alterar ≥992px (salvo utilidades suaves)
 * ============================================================ */
@media (min-width: 992px) {
    /* Sin cambios agresivos: el layout lateral existente permanece */
}