/* ============================================================
   BANNER ERP — Mobile Responsive CSS
   iPhone 11 / 13 (390 × 844) and all screens ≤ 768px
   ============================================================ */

/* ── Safe area (iPhone notch) ─────────────────────────────── */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

/* ══════════════════════════════════════════════════════════
   TOPBAR — todas las vistas
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .topbar {
        padding: 0 12px 0 12px !important;
        padding-left: calc(12px + var(--sal)) !important;
        padding-right: calc(12px + var(--sar)) !important;
        height: 54px !important;
        gap: 8px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 150 !important;
    }
    .topbar h1 {
        font-size: 0.92rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px !important;
    }
    .topbar h1 span { display: none !important; }

    /* Ocultar botones secundarios, mantener logout compacto */
    .topbar .refresh-btn { display: none !important; }
    .topbar .btn-back    { display: none !important; }
    .topbar .btn-logout {
        padding: 5px 9px !important;
        font-size: 0.7rem !important;
        white-space: nowrap;
    }
    /* Topbar-right: menos gap */
    .topbar-right {
        gap: 6px !important;
        flex-shrink: 0;
    }

    /* Hamburger siempre visible y con buen tamaño táctil */
    #btnHamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0;
        font-size: 1.3rem !important;
        padding: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════
   BODY / LAYOUT BASE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }
    /* Cuando sidebar está cerrado, main-content ocupa todo */
    .main-content {
        margin-left: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    /* Sidebar overlay */
    .sidebar.mode-full {
        z-index: 200 !important;
    }
    .sidebar-overlay {
        z-index: 199 !important;
    }
    body.sidebar-open {
        overflow: hidden !important;
    }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD — fixes específicos
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Page body */
    .page-body {
        padding: 12px !important;
        padding-bottom: calc(16px + var(--sab)) !important;
    }

    /* Summary pills → slider horizontal con snap */
    .summary-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
        padding-bottom: 6px !important;
        /* Ocultar scrollbar */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .summary-bar::-webkit-scrollbar { display: none; }
    .sum-pill {
        flex: 0 0 auto !important;
        min-width: 140px !important;
        padding: 10px 14px !important;
        border-radius: 14px !important;
        scroll-snap-align: start !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3px !important;
    }
    .sum-val {
        font-size: 1.3rem !important;
        font-weight: 800 !important;
    }
    .sum-label {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }

    /* Areas grid — 1 columna en mobile */
    .areas-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .area-card {
        padding: 14px !important;
    }
    .area-card .area-phases {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    /* Modal de crear pedido en dashboard */
    #modalCrear > div,
    .modal-crear-box {
        width: 96vw !important;
        max-width: 96vw !important;
        margin: 0 auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        padding: 16px !important;
        border-radius: 14px !important;
    }

    /* Service grid */
    .service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Form rows */
    .crear-form-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Dashboard topbar tabs (área modal) */
    .modal-tabs,
    .tab-row {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .modal-tab,
    .tab-btn {
        font-size: 0.7rem !important;
        padding: 5px 8px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   RECEPCION — fixes específicos
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Main content padding */
    .main-content {
        padding: 12px !important;
    }

    /* Header / h1 */
    .header h1 {
        font-size: 1.15rem !important;
        margin-bottom: 2px !important;
    }
    .header p {
        font-size: 0.72rem !important;
        margin-bottom: 0 !important;
    }
    .header {
        margin-bottom: 10px !important;
    }

    /* KPI chips row — 2 columnas */
    .rec-kpi-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        flex-wrap: unset !important;
    }
    .rec-kpi-card {
        min-width: 0 !important;
        flex: unset !important;
        padding: 8px 9px !important;
    }
    .rec-kpi-value {
        font-size: 1rem !important;
    }
    .rec-kpi-label {
        font-size: 0.62rem !important;
    }

    /* Filtro fechas — scroll horizontal sin wrap */
    .kpi-filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 5px !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .kpi-filter-bar::-webkit-scrollbar { display: none; }
    .kpi-filter-bar .kpi-btn,
    .kpi-filter-bar .kpi-btn-filtrar {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    .kpi-filter-bar .kpi-sep { flex-shrink: 0 !important; }
    #kpi-desde, #kpi-hasta {
        width: 110px !important;
        flex-shrink: 0 !important;
    }
    #kpi-rango-label { display: none !important; }

    /* Actions bar — grid 2 columnas en mobile */
    /* actions-bar mobile: manejado en recepcion.php inline style */

    /* Stat cards (segunda fila de métricas) */
    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        margin-bottom: 12px !important;
    }
    .stat-card {
        min-width: 0 !important;
        padding: 10px 12px !important;
        font-size: 0.78rem !important;
    }
    .stat-card .stat-number {
        font-size: 1.4rem !important;
    }

    /* Columnas — ocultar grid, usar tabs */
    .columns-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .column-panel {
        min-height: auto !important;
        padding: 12px !important;
        border-radius: 10px !important;
        margin-bottom: 0 !important;
    }

    /* Modal stat records (bottom sheet) */
    #modalStatRecords {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    #modalStatRecords > div {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        padding: 16px 14px !important;
        margin: 0 !important;
    }
    .stat-table {
        font-size: 0.72rem !important;
    }
    .stat-table td, .stat-table th {
        padding: 6px 5px !important;
    }

    /* Modal gastos */
    #statModalGastos table {
        font-size: 0.72rem !important;
    }

    /* Modal crear pedido */
    [style*="width:400px"],
    [style*="max-width:400px"] {
        width: 94vw !important;
        max-width: 94vw !important;
    }

    /* Selection grid (pago) */
    .selection-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* Tabs móviles de columnas */
@media (min-width: 769px) {
    .mob-col-tabs { display: none !important; }
}
@media (max-width: 768px) {
    .mob-col-tabs {
        display: flex !important;
        background: rgba(0,0,0,0.06);
        border-radius: 10px;
        padding: 3px;
        margin-bottom: 10px;
        overflow-x: auto;
        gap: 2px;
    }
    .mob-col-tab {
        flex: 1;
        min-width: 80px;
        text-align: center;
        padding: 8px 6px;
        border-radius: 7px;
        font-size: 0.68rem;
        font-weight: 600;
        color: #64748b;
        cursor: pointer;
        white-space: nowrap;
        border: none;
        background: transparent;
        transition: background .2s, color .2s;
    }
    .mob-col-tab.active {
        background: #fff;
        color: #4f46e5;
        box-shadow: 0 1px 4px rgba(0,0,0,.10);
    }
}

/* ══════════════════════════════════════════════════════════
   KANBAN — fixes específicos
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Topbar kanban */
    .topbar {
        background: rgba(15,23,42,.95) !important;
    }

    /* Board horizontal scroll con snap */
    .board-wrap {
        padding: 10px 10px 12px !important;
        gap: 10px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    /* Columnas */
    .kanban-col {
        flex: 0 0 87vw !important;
        width: 87vw !important;
        min-width: 87vw !important;
        max-height: 74vh !important;
        scroll-snap-align: center !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .col-header {
        padding: 10px 12px !important;
        flex-shrink: 0;
    }
    .col-header h3 {
        font-size: 0.82rem !important;
    }
    .col-body {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
        gap: 8px !important;
        max-height: calc(74vh - 52px) !important;
    }

    /* Cards */
    .kanban-card {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
    }
    .kanban-card .card-title {
        font-size: 0.82rem !important;
    }
    .kanban-card .card-meta {
        font-size: 0.68rem !important;
        gap: 4px !important;
    }

    /* Modal detalles kanban */
    .modal-ovl > .modal-box {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        padding: 14px !important;
        margin: auto !important;
        border-radius: 14px !important;
    }
    .modal-head h2 {
        font-size: 1rem !important;
    }

    /* Scroll dots indicator */
    .board-scroll-hint {
        display: flex !important;
        justify-content: center;
        padding: 6px 0 4px;
    }
    .board-scroll-dots {
        display: flex !important;
        gap: 5px;
        align-items: center;
    }
    .board-scroll-dots span {
        width: 7px; height: 7px;
        border-radius: 50%;
        background: #cbd5e1;
        transition: background .25s, transform .25s;
        display: block;
    }
    .board-scroll-dots span.active {
        background: #6366f1;
        transform: scale(1.3);
    }
}

/* ══════════════════════════════════════════════════════════
   TABLAS — scroll horizontal universal
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .table-responsive,
    .stat-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    table {
        min-width: 480px;
    }
    /* Excepciones para tablas pequeñas */
    .sum-table, .mini-table {
        min-width: unset !important;
    }
}

/* ══════════════════════════════════════════════════════════
   MODALES — universales
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Centrado vertical → bottom sheet */
    [style*="position:fixed"][style*="inset:0"],
    [style*="position: fixed"][style*="inset: 0"] {
        align-items: flex-end !important;
    }

    /* Caja del modal */
    [style*="width:400px"],
    [style*="max-width: 680px"],
    [style*="max-width:680px"] {
        width: 96vw !important;
        max-width: 96vw !important;
        border-radius: 16px 16px 0 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════
   FORMULARIOS e INPUTS — prevenir zoom iOS
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important; /* iOS no hace zoom si ≥16px */
    }
}

/* ══════════════════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .login-card {
        padding: 24px 18px 20px !important;
        margin: 12px !important;
        border-radius: 16px !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR — comportamiento móvil
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 200 !important;
        transition: transform 0.28s cubic-bezier(.4,0,.2,1) !important;
    }
    .sidebar:not(.mode-full) {
        transform: translateX(-100%) !important;
        box-shadow: none !important;
    }
    .sidebar.mode-full {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,.45) !important;
    }
    /* icon mode en mobile = full visible */
    .sidebar.mode-icon {
        transform: translateX(0) !important;
        width: 260px !important;
    }
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 199;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .sidebar-overlay.active {
        display: block !important;
    }
}