/* ==========================================================================
   RESPONSIVE MASTER CSS — Tablas a Cards Móviles, Modales, POS e Impresión
   ========================================================================== */

/* 1. Ocultar cualquier rastro de botones/banners PWA cuando ya está instalada */
html.pwa-is-installed #pwa_install_banner,
html.pwa-is-installed #pwa_ios_banner,
html.pwa-is-installed #navbar_pwa_install_item,
html.pwa-is-installed .pwa-install-nav-item,
html.pwa-is-installed .btn-pwa-install-trigger,
body.pwa-is-installed #pwa_install_banner,
body.pwa-is-installed #pwa_ios_banner,
body.pwa-is-installed #navbar_pwa_install_item,
body.pwa-is-installed .pwa-install-nav-item,
body.pwa-is-installed .btn-pwa-install-trigger {
    display: none !important;
}

/* Ajustar z-index del banner PWA para que nunca tape modales Bootstrap (1090+) */
.pwa-install-container {
    z-index: 1045 !important;
}

/* 2. Números tabulares en importes, precios, contadores y celdas */
.table td,
.table th,
.quantity-counter,
.input-cantidad,
.input-update,
.countdown-clock {
    font-variant-numeric: tabular-nums;
}

/* 3. Evitar que los menús dropdown de Acciones se recorten en tablas con pocas filas en Desktop */
@media (min-width: 768px) {
    .table-responsive,
    .table-responsive-sm {
        overflow-x: auto;
        min-height: 0.01%;
    }
    .table-responsive.dropdown-open-visible,
    .table-responsive-sm.dropdown-open-visible {
        overflow: visible !important;
    }
}

/* 4. Liberar contenedores con height fijo (70vh, 85vh, 37vh) en Tablet y Móvil */
@media (max-width: 991.98px) {
    #wrapper_rooms {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #content-pos-product,
    .card-body[style*="85vh"],
    div[style*="37vh"],
    .pos.table-responsive-sm[style*="calc(100%"] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #content-pos-product {
        max-height: 55vh !important;
        overflow-y: auto !important;
    }
}

/* 5. Adaptación Global de Modales y Select2 (Móvil, Tablet y Landscape) */
.select2-container {
    max-width: 100%;
}
.modal .select2-container {
    width: 100% !important;
}
.select2-container--open {
    z-index: 2060 !important;
}

@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.5rem auto !important;
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100dvh - 1rem) !important;
    }

    .modal-dialog.modal-sm,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-content {
        max-height: calc(100dvh - 1rem) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    .modal-content > form {
        display: flex !important;
        flex-direction: column !important;
        max-height: calc(100dvh - 1rem) !important;
        overflow: hidden !important;
        width: 100%;
    }

    .modal-header {
        flex-shrink: 0 !important;
        padding: 0.85rem 1rem !important;
    }

    .modal-body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto !important;
        padding: 0.95rem 1rem !important;
        max-height: calc(100dvh - 130px) !important;
    }

    .modal-footer {
        flex-shrink: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0.75rem 1rem !important;
        justify-content: flex-end;
    }

    .modal-footer > * {
        margin: 0 !important;
    }

    /* Botones al final de formularios en modales sin .modal-footer */
    .modal-body .col-12.text-end {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem;
        padding-top: 0.5rem;
    }

    /* Ajustes de tarjetas KPI en Modal Salida Rápida (#modalQuickCheckout) */
    #modalQuickCheckout .col-4 .p-2 {
        padding: 0.4rem 0.25rem !important;
    }
    #modalQuickCheckout .col-4 small {
        font-size: 0.68rem !important;
        line-height: 1.15;
    }
    #modalQuickCheckout .col-4 .fs-6 {
        font-size: 0.85rem !important;
    }
    #modalQuickCheckout .modal-footer {
        justify-content: space-between !important;
    }
    #modalQuickCheckout .modal-footer > a,
    #modalQuickCheckout .modal-footer > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
    }
    #modalQuickCheckout .modal-footer > div > button {
        flex: 1;
    }

    /* Ajustes en Modal POS (#modalConfirmSale) */
    #modalConfirmSale .shadow-payment > .col-6 {
        width: 100% !important;
        margin-bottom: 0.35rem;
    }
    #modalConfirmSale .card[style*="calc(100%"] {
        height: auto !important;
        margin-top: 0.5rem;
    }

    /* Ajustes en Controles DataTables (Mostrar registros / Buscar / Paginación) */
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: left !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0.25rem;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 2px;
    }
}

/* ==========================================================================
   6. TRANSFORMACIÓN GLOBAL DE TABLAS A MOBILE CARDS (<= 767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    html,
    body,
    .layout-wrapper,
    .layout-page,
    .content-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .table-responsive,
    .table-responsive-sm,
    .dataTables_wrapper {
        overflow-x: visible !important;
        overflow-y: visible !important;
        border: 0 !important;
    }

    /* Tablas de registros, DataTables, carritos, modales y reportes */
    .table:not(.no-mobile-card):not(.table-descriptions-card),
    .table-responsive .table:not(.no-mobile-card):not(.table-descriptions-card),
    .table-responsive-sm .table:not(.no-mobile-card):not(.table-descriptions-card),
    table.dataTable:not(.no-mobile-card):not(.table-descriptions-card),
    table.table-mobile-cards {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
    }

    .table:not(.no-mobile-card):not(.table-descriptions-card) > thead,
    .table-responsive .table:not(.no-mobile-card):not(.table-descriptions-card) > thead,
    .table-responsive-sm .table:not(.no-mobile-card):not(.table-descriptions-card) > thead,
    table.dataTable:not(.no-mobile-card):not(.table-descriptions-card) > thead,
    table.table-mobile-cards > thead {
        display: none !important;
    }

    .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody,
    .table-responsive .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody,
    .table-responsive-sm .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody,
    table.dataTable:not(.no-mobile-card):not(.table-descriptions-card) > tbody,
    table.table-mobile-cards > tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Ocultar filas child duplicadas de DataTables Responsive porque mostramos todas las celdas en la card */
    table.dataTable:not(.no-mobile-card) > tbody > tr.child {
        display: none !important;
    }
    table.dataTable:not(.no-mobile-card) > tbody > tr > td.dtr-control::before,
    table.dataTable:not(.no-mobile-card) > tbody > tr > th.dtr-control::before {
        display: none !important;
    }

    /* Cada fila (tr) se convierte en una Card Móvil independiente */
    .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row),
    .table-responsive .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row),
    .table-responsive-sm .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row),
    table.dataTable:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row),
    table.table-mobile-cards > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) {
        display: block !important;
        width: 100% !important;
        background-color: var(--bs-card-bg, #ffffff) !important;
        border: 1px solid rgba(115, 103, 240, 0.18) !important;
        border-radius: 12px !important;
        margin-bottom: 0.9rem !important;
        padding: 0.65rem 0.9rem !important;
        box-shadow: 0 3px 10px rgba(75, 70, 92, 0.07) !important;
        overflow: hidden;
    }

    /* Cada celda (td) visible dentro de la card (incluyendo .dtr-hidden de DataTables) */
    .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none),
    .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td.dtr-hidden:not(.d-none),
    .table-responsive .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none),
    .table-responsive-sm .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none),
    table.dataTable:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none),
    table.table-mobile-cards > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none) {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        text-align: right !important;
        padding: 0.45rem 0 !important;
        border: 0 !important;
        border-bottom: 1px dashed rgba(15, 23, 42, 0.08) !important;
        gap: 0.75rem !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Encabezado principal de la Card Móvil (primera celda) */
    .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td.mobile-card-primary-cell {
        background-color: rgba(115, 103, 240, 0.06) !important;
        margin: -0.65rem -0.9rem 0.35rem -0.9rem !important;
        padding: 0.6rem 0.9rem !important;
        width: calc(100% + 1.8rem) !important;
        border-bottom: 1px solid rgba(115, 103, 240, 0.15) !important;
        font-weight: 700 !important;
        color: #5d596c !important;
    }

    /* Pie de acciones táctiles de la Card Móvil (última celda) */
    .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none):last-child,
    .table-responsive .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none):last-child,
    .table-responsive-sm .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none):last-child,
    table.dataTable:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none):last-child,
    table.table-mobile-cards > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none):last-child {
        border-bottom: 0 !important;
        padding-bottom: 0.15rem !important;
        padding-top: 0.65rem !important;
        flex-wrap: wrap !important;
    }

    /* Etiqueta izquierda (data-label) en cada fila de la card */
    .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none)::before,
    .table-responsive .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none)::before,
    .table-responsive-sm .table:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none)::before,
    table.dataTable:not(.no-mobile-card):not(.table-descriptions-card) > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none)::before,
    table.table-mobile-cards > tbody > tr:not(.child):not(.tr-summary-row):not(.tr-empty-row) > td:not(.d-none)::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.74rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        text-align: left !important;
        flex-shrink: 0;
        max-width: 46%;
        line-height: 1.25;
    }

    /* Filas de Resumen / Totales en Reportes (tr-summary-row) */
    .table > tbody > tr.tr-summary-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        background-color: rgba(105, 108, 255, 0.06) !important;
        border: 1px solid rgba(105, 108, 255, 0.2) !important;
        border-radius: 10px !important;
        padding: 0.6rem 0.85rem !important;
        margin-bottom: 0.5rem !important;
        font-weight: 700 !important;
    }
    .table > tbody > tr.tr-summary-row > th,
    .table > tbody > tr.tr-summary-row > td {
        display: inline-block !important;
        width: auto !important;
        border: 0 !important;
        padding: 0 !important;
        font-weight: 700 !important;
    }
    .table > tbody > tr.tr-summary-row > td::before {
        display: none !important;
    }

    /* Filas Vacías (tr-empty-row / dataTables_empty) */
    .table > tbody > tr.tr-empty-row,
    .table > tbody > tr > td.dataTables_empty,
    .table > tbody > tr > td.td-empty {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        border-bottom: 0 !important;
        padding: 1rem 0.5rem !important;
    }
    .table > tbody > tr.tr-empty-row > td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        border: 0 !important;
    }
    .table > tbody > tr.tr-empty-row > td::before,
    .table > tbody > tr > td.dataTables_empty::before,
    .table > tbody > tr > td.td-empty::before {
        display: none !important;
    }

    /* Tablas Descriptivas Ficha de Habitación (.table-descriptions-card / .el-descriptions-row) */
    table.table-descriptions-card,
    table.table-descriptions-card > tbody {
        display: block !important;
        width: 100% !important;
    }
    table.table-descriptions-card tr.el-descriptions-row {
        display: grid !important;
        grid-template-columns: 115px 1fr !important;
        width: 100% !important;
        border: 1px solid rgba(15, 23, 42, 0.1) !important;
        border-radius: 10px !important;
        margin-bottom: 0.5rem !important;
        overflow: hidden !important;
        background: var(--bs-card-bg, #ffffff);
    }
    table.table-descriptions-card tr.el-descriptions-row > th,
    table.table-descriptions-card tr.el-descriptions-row > td {
        padding: 0.5rem 0.65rem !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
        font-size: 0.82rem !important;
        text-align: left !important;
        word-break: break-word !important;
    }
    table.table-descriptions-card tr.el-descriptions-row > th {
        background-color: rgba(15, 23, 42, 0.03) !important;
        font-weight: 700 !important;
        color: #475569 !important;
    }

    /* Controles Interactivos en Carritos (POS, Notas de Venta, Cotizaciones, Compras, Recepción, Cierre Caja) */
    #wrapper-tbody-pos .input-group-sm,
    #tbody_sale_notes .input-group-sm,
    #tbody_quotes .input-group-sm,
    #tbody_buys .input-group-sm,
    #wrapper-tbody .input-group-sm {
        width: 138px !important;
        min-width: 138px !important;
        max-width: 145px !important;
        margin-left: auto !important;
        flex-wrap: nowrap !important;
    }

    #wrapper-tbody-pos .quantity-counter,
    #tbody_sale_notes .quantity-counter,
    #tbody_quotes .quantity-counter,
    #tbody_buys .quantity-counter,
    #wrapper-tbody .input-cantidad {
        min-width: 48px !important;
        width: 52px !important;
        text-align: center !important;
        padding: 0.25rem 0.15rem !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
    }

    #wrapper-tbody-pos input[name="precio"],
    #tbody_sale_notes input[name="precio"],
    #tbody_quotes input[name="precio"],
    #tbody_buys input[name="precio"],
    #wrapper-tbody input[name="input-precio"] {
        width: 110px !important;
        min-width: 95px !important;
        max-width: 125px !important;
        margin-left: auto !important;
        text-align: right !important;
        padding: 0.25rem 0.5rem !important;
        font-weight: 600 !important;
    }

    #tbody_close_breakdown .input-group-sm {
        width: 145px !important;
        min-width: 135px !important;
        margin-left: auto !important;
    }
}

/* ==========================================================================
   7. AISLAMIENTO ESTRICTO DE IMPRESIÓN (@media print)
   ========================================================================== */
@media print {
    .layout-menu,
    .layout-navbar,
    .content-footer,
    .layout-overlay,
    .drag-target,
    #pwa_install_banner,
    #pwa_ios_banner,
    .pnotify,
    .swal2-container {
        display: none !important;
    }

    /* Si está abierto el modal de impresión móvil, ocultar todo el fondo y mostrar únicamente el ticket */
    body.mobile-ticket-modal-open .layout-wrapper {
        display: none !important;
    }
    body.mobile-ticket-modal-open #modalMobilePrintTicket {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.mobile-ticket-modal-open #modalMobilePrintTicket .modal-header,
    body.mobile-ticket-modal-open #modalMobilePrintTicket .modal-footer,
    body.mobile-ticket-modal-open #modalMobilePrintTicket .no-print {
        display: none !important;
    }
}