/**
 * Sisfaci — responsive global (tablet y móvil)
 * Complementa estilos por módulo sin reemplazarlos.
 */

/* ── Contenedor principal ── */
@media (max-width: 1199.98px) {
    .sisfaci-ui .wrapper .page-wrap .main-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .sisfaci-ui .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media (max-width: 991.98px) {
    .sisfaci-ui .wrapper .page-wrap {
        flex-direction: column !important;
    }

    .sisfaci-ui .wrapper .page-wrap .main-content {
        width: 100%;
        max-width: 100%;
        margin-top: 0 !important;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        padding-bottom: 1.25rem;
        min-height: 0 !important;
    }

    .sisfaci-ui .container-fluid {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .sisfaci-ui .page-header,
    .sisfaci-ui .page-header-title,
    .sisfaci-ui .dash-page-head,
    .sisfaci-ui .module-page-head {
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .sisfaci-ui .page-header .btn,
    .sisfaci-ui .page-header-title .btn,
    .sisfaci-ui .dash-page-head .btn,
    .sisfaci-ui .module-page-head .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .sisfaci-ui .wrapper .page-wrap .main-content {
        margin-top: 8px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .sisfaci-ui .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .sisfaci-ui h1,
    .sisfaci-ui .hero-title,
    .sisfaci-ui .page-header-title h5 {
        font-size: 1.15rem !important;
        line-height: 1.25;
    }
}

/* ── Tablas ── */
.sisfaci-ui .table-responsive,
.sisfaci-ui .module-table-card .table-wrap,
.sisfaci-ui .ventas-table-wrap {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 991.98px) {
    .sisfaci-ui .table-responsive,
    .sisfaci-ui .module-table-card .table-wrap,
    .sisfaci-ui .ventas-table-wrap {
        overflow-x: auto;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .sisfaci-ui .table {
        min-width: 640px;
    }

    .sisfaci-ui .ventas-table-wrap .table {
        min-width: 720px;
    }
}

@media (max-width: 767.98px) {
    .sisfaci-ui .table {
        font-size: 0.82rem;
    }

    .sisfaci-ui .table th,
    .sisfaci-ui .table td {
        padding: 0.45rem 0.5rem;
        vertical-align: middle;
    }
}

/* ── Tarjetas y formularios ── */
@media (max-width: 991.98px) {
    .sisfaci-ui .card,
    .sisfaci-ui .module-table-card,
    .sisfaci-ui .prestamos-form-card {
        border-radius: 12px;
    }

    .sisfaci-ui .card-body {
        padding: 0.85rem;
    }

    .sisfaci-ui .row > [class*="col-md-"],
    .sisfaci-ui .row > [class*="col-lg-"],
    .sisfaci-ui .row > [class*="col-xl-"] {
        margin-bottom: 0.65rem;
    }

    .sisfaci-ui .form-inline,
    .sisfaci-ui .input-group {
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    .sisfaci-ui .card-body {
        padding: 0.72rem;
    }

    .sisfaci-ui .form-group {
        margin-bottom: 0.75rem;
    }

    .sisfaci-ui .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .sisfaci-ui .btn-group > .btn {
        flex: 1 1 auto;
    }
}

/* ── Modales ── */
@media (max-width: 767.98px) {
    .sisfaci-ui .modal-dialog {
        margin: 0.65rem;
        max-width: calc(100% - 1.3rem);
    }

    .sisfaci-ui .modal-content {
        border-radius: 14px;
    }

    .sisfaci-ui .modal-header,
    .sisfaci-ui .modal-body,
    .sisfaci-ui .modal-footer {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .sisfaci-ui .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .sisfaci-ui .modal-footer .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }
}

/* ── Dashboard ── */
@media (max-width: 991.98px) {
    .sisfaci-ui .dash-kpi-grid,
    .sisfaci-ui .dash-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.65rem;
    }

    .sisfaci-ui .dash-section-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 575.98px) {
    .sisfaci-ui .dash-kpi-grid,
    .sisfaci-ui .dash-quick-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Ventas lista ── */
@media (max-width: 991.98px) {
    .ventas-page-header {
        flex-direction: column;
        align-items: stretch !important;
    }

    .ventas-page-header .ventas-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ventas-page-header .ventas-header-actions .btn {
        flex: 1 1 auto;
        min-height: 44px;
    }

    .ventas-totals-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ventas-filters-bar {
        flex-direction: column;
        align-items: stretch !important;
    }

    .ventas-filter-field,
    .ventas-filter-field--search,
    .ventas-filter-field--cliente,
    .ventas-filter-field--date,
    .ventas-filter-field--chips {
        flex: 1 1 100% !important;
        width: 100%;
        min-width: 0 !important;
    }

    .ventas-quick-filters {
        width: 100%;
        justify-content: flex-start;
    }

    .ventas-totals-bar {
        grid-template-columns: 1fr;
    }

    .ventas-actions-sticky {
        position: static !important;
        box-shadow: none !important;
    }
}

/* ── Venta nueva (core) ── */
@media (max-width: 991.98px) {
    .sisfaci-ui .prestamos-core-page .prestamos-quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .sisfaci-ui .prestamos-core-page .prestamos-quick-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-height: 44px;
    }
}

@media (max-width: 767.98px) {
    .sisfaci-ui .prestamos-core-page .prestamos-quick-actions .btn {
        flex: 1 1 100%;
    }

    .sisfaci-ui .prestamos-core-page .sale-totals-panel,
    .sisfaci-ui .prestamos-core-page .sale-side-panel {
        margin-top: 0.75rem;
    }
}

/* ── Navbar y touch targets ── */
@media (max-width: 991.98px) {
    .sisfaci-ui .mobile-nav-toggle,
    .sisfaci-ui .navbar .nav-link,
    .sisfaci-ui .header-top .btn {
        min-width: 44px;
        min-height: 44px;
    }

    .sisfaci-ui .navbar .dropdown-menu {
        max-width: calc(100vw - 1.5rem);
    }
}

/* ── Sidebar móvil ── */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
    }

    .app-sidebar:not(.hide-sidebar) {
        transform: translateX(0);
    }
}

/* ── Botones de acción en tablas ── */
@media (max-width: 767.98px) {
    .sisfaci-ui .btn-action,
    .sisfaci-ui .ventas-action-btn,
    .sisfaci-ui .table .btn-sm {
        min-width: 40px;
        min-height: 40px;
        padding: 0.35rem 0.5rem;
    }
}

/* ── Utilidades ── */
@media (max-width: 767.98px) {
    .sisfaci-ui .d-mobile-stack {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    .sisfaci-ui .text-mobile-center {
        text-align: center !important;
    }
}
