/* ==========================================================================
   mobile.css - Mobile-first optimizations para iPhone y celulares
   Solo CSS / media queries. NO modifica funcionalidades.
   Se carga al final para sobrescribir cualquier estilo previo.
   ========================================================================== */

/* ===== iOS / Mobile global tweaks (siempre activos) ===== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    /* Mejor scroll en iOS */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
}

/* Sin doble-tap-zoom delay en botones y links */
button, a, [role="button"], [onclick], select {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* INPUTS: font-size minimo 16px para evitar zoom automatico de iOS Safari */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input[type="url"],
input[type="month"],
select,
textarea {
    font-size: 16px !important;
}

/* Sin estilos por defecto de Safari en inputs */
input, textarea, select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px; /* iOS pone radius si appearance es default */
}

/* select sigue siendo seleccionable */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px !important;
}

/* ==========================================================================
   TABLET (≤ 900px)
   ========================================================================== */
@media (max-width: 900px) {

    /* ===== NAVIGATION: scrollable horizontal con snap ===== */
    .nav-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 6px;
        padding: 8px 12px;
        scrollbar-width: none; /* Firefox */
        background: #fff;
        border-bottom: 1px solid #e5e5e5;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .nav-container::-webkit-scrollbar { display: none; }

    .nav-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
        padding: 10px 14px !important;
        font-size: 0.88rem !important;
        min-height: 40px;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        border-radius: 100px;
    }

    .nav-icon {
        font-size: 1.05rem;
    }

    /* ===== HEADER mas compacto ===== */
    .main-header,
    .header-content {
        padding: 12px 16px !important;
    }

    .header-content h1,
    .header-title {
        font-size: 1.2rem !important;
    }

    /* ===== MAIN CONTENT ===== */
    .main-content,
    .content-section {
        padding: 14px 12px !important;
    }

    .section-header {
        padding: 0 4px !important;
        margin-bottom: 14px !important;
    }
    .section-header h2 {
        font-size: 1.3rem !important;
        margin: 0 0 4px !important;
    }
    .section-header p {
        font-size: 0.85rem !important;
        margin: 0 !important;
    }

    /* ===== BOTONES DE ACCION en filas (Ventas / Personal / Inventario) ===== */
    .personal-acciones,
    section button[class*="btn-"] {
        flex-wrap: wrap;
    }

    .personal-acciones button,
    .ventas-acciones button {
        flex: 1 1 calc(50% - 4px);
        min-height: 44px; /* Apple guideline */
        font-size: 0.88rem;
    }

    /* En ventas hay botones añadidos via JS al final del h2 */
    section#ventas > button,
    section#personal > button,
    section#inventario > button {
        min-height: 44px;
        font-size: 0.9rem;
        padding: 10px 14px !important;
    }

    /* ===== KPI GRIDS: 2 columnas en lugar de 4 ===== */
    .kpi-grid,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .kpi-card {
        padding: 12px !important;
    }

    .kpi-card h2 {
        font-size: 1.25rem !important;
    }

    .kpi-card small {
        font-size: 0.7rem !important;
    }

    /* ===== TABLAS: scrollable ===== */
    .tabla-productos-wrapper,
    .asistencias-tabla-wrapper,
    .brecha-tabla-wrapper,
    .ch-pedidos {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.tabla-analisis,
    table.tabla-asistencias {
        font-size: 0.82rem !important;
    }

    table.tabla-analisis th,
    table.tabla-analisis td,
    table.tabla-asistencias th,
    table.tabla-asistencias td {
        padding: 8px 10px !important;
    }

    /* ===== MODAL OVERLAY: usar mas pantalla ===== */
    .modal-overlay {
        padding: 0;
        align-items: stretch !important;
    }

    .modal-content,
    .modal-compra {
        max-width: 100% !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .modal-header {
        flex-shrink: 0;
        padding: 14px 16px !important;
        padding-top: max(14px, env(safe-area-inset-top)) !important;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 5;
        border-bottom: 1px solid #e5e5e5;
    }

    .modal-header h3 {
        font-size: 1.1rem !important;
        margin: 0 !important;
    }

    .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px !important;
    }

    .modal-footer {
        flex-shrink: 0;
        padding: 12px 16px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        background: #fafafa;
        border-top: 1px solid #e5e5e5;
        position: sticky;
        bottom: 0;
        z-index: 5;
    }

    .modal-footer button {
        min-height: 44px;
        font-size: 0.95rem;
    }

    /* Form rows: 2 col → 1 col en mobile */
    .form-row {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 10px !important;
    }

    .form-group label {
        font-size: 0.85rem !important;
        font-weight: 600;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px 14px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ===== VENTAS LIST: cards mas verticales ===== */
    .ventas-resumen h4 {
        font-size: 1rem !important;
    }

    .venta-item {
        padding: 14px !important;
    }

    .venta-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .venta-header h5 {
        font-size: 1.05rem !important;
        flex: 1 1 100%;
        order: 1;
    }

    .venta-status {
        order: 2;
        flex: 1 1 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .venta-total {
        font-size: 1.15rem !important;
        font-weight: 800;
    }

    .venta-info p {
        font-size: 0.85rem !important;
        line-height: 1.5;
        margin: 4px 0 !important;
    }

    .venta-info p strong {
        font-size: 0.78rem;
        color: #525252;
        display: block;
        margin-bottom: 1px;
    }

    .venta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
    }

    .venta-actions button,
    .venta-actions a {
        flex: 1 1 calc(33% - 4px);
        min-height: 40px;
        font-size: 0.82rem;
        padding: 8px 10px;
    }

    /* Productos vendidos: stack mejor */
    .productos-vendidos h6 {
        font-size: 0.85rem !important;
        margin: 8px 0 6px !important;
    }

    .producto-vendido {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 4px 10px !important;
        font-size: 0.82rem !important;
        padding: 6px 0 !important;
        border-bottom: 1px dashed #f0f0f0;
    }

    .producto-vendido span:nth-child(2) {
        grid-column: 1 / -1;
        color: #737373;
        font-size: 0.78rem;
    }
    .producto-vendido span:last-child {
        font-weight: 700;
        color: #065f46;
    }

    /* ===== BADGE "VENDIENDO COMO X" ===== */
    .ventas-user-badge {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }
    .btn-cambiar-usuario {
        width: 100%;
        text-align: center;
    }

    /* ===== CARTERA DE CLIENTES TOOLBAR ===== */
    .cartera-toolbar {
        flex-direction: column;
        align-items: stretch !important;
    }
    .cartera-search-box {
        min-width: 0 !important;
        width: 100%;
    }
    .cartera-filtro {
        justify-content: space-between;
    }
    .cartera-filtro select {
        flex: 1;
        margin-left: 8px;
    }
    .btn-export-csv {
        width: 100%;
        text-align: center;
        padding: 12px !important;
    }

    /* ===== BUSCADOR DE CLIENTE EXISTENTE (modal venta) ===== */
    .cliente-search-wrap {
        padding: 12px !important;
    }
    .cliente-search-input {
        font-size: 16px !important; /* iOS anti-zoom */
    }
    .cliente-search-item {
        padding: 12px 14px !important;
    }
    .cliente-search-item .cs-row1 strong {
        font-size: 0.95rem !important;
    }

    /* ===== SUB-MODAL: Historial Cliente ===== */
    .cliente-historial-info {
        grid-template-columns: 1fr 1fr !important;
    }
    .ch-kpis {
        grid-template-columns: 1fr 1fr !important;
    }
    .ch-kpi strong {
        font-size: 1.2rem !important;
    }

    /* ===== MODAL EDIT/CONFIRM ASISTENCIA ===== */
    .edit-tiempos-grid {
        grid-template-columns: 1fr !important;
    }
    .confirm-del-tiempos {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .confirm-del-card-header {
        gap: 10px !important;
    }

    /* ===== HORARIO SEMANAL EDITOR ===== */
    .horario-dia-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    .horario-dia-toggle {
        justify-self: start;
    }

    /* ===== EMPLEADOS CARDS ===== */
    .empleados-grid {
        grid-template-columns: 1fr !important;
    }
    .empl-stats {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px !important;
    }
    .empl-stat strong {
        font-size: 0.95rem !important;
    }
    .empl-jornada-grid {
        gap: 3px !important;
    }
    .mini-dia strong {
        font-size: 0.58rem !important;
    }

    /* ===== PIN-GATE modal ===== */
    .pin-modal-box {
        margin: 16px !important;
        max-width: calc(100% - 32px) !important;
    }
    .pin-input {
        font-size: 1.4rem !important;
        letter-spacing: 0.5em !important;
    }

    /* ===== Footer "Total General" en venta ===== */
    .total-breakdown {
        padding: 14px !important;
    }
    .total-general h4 {
        font-size: 1.15rem !important;
    }

    /* ===== Cliente seleccionado pill ===== */
    .cliente-selected-pill {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        text-align: center;
    }
    .cliente-selected-pill button {
        width: 100%;
    }
}

/* ==========================================================================
   MOBILE (≤ 600px) - iPhone size
   ========================================================================== */
@media (max-width: 600px) {

    /* Mas compacto en pantallas muy chicas */
    .header-content {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
        padding-top: max(12px, env(safe-area-inset-top)) !important;
    }

    .header-title {
        text-align: center;
    }

    .header-right,
    .user-display {
        justify-content: center;
        font-size: 0.85rem !important;
    }

    /* KPI grid a 1 columna en phones pequenos */
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }

    /* Resumen ventas: stat grid en 2 cols */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .stat-item {
        padding: 10px !important;
        font-size: 0.82rem !important;
    }

    /* Empleados stats - 3 cols puede ser apretado, vamos a 1 fila scroll */
    .empl-stats {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Ventas actions: 2 cols */
    .venta-actions button,
    .venta-actions a {
        flex: 1 1 calc(50% - 4px);
    }

    /* Sub-modal historial - 1 columna */
    .cliente-historial-info {
        grid-template-columns: 1fr !important;
    }
    .ch-kpis {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Cartera: tabla con menos columnas visibles */
    table.tabla-analisis {
        font-size: 0.76rem !important;
    }
    table.tabla-analisis th,
    table.tabla-analisis td {
        padding: 6px 8px !important;
    }

    /* Modal: header sticky con sombra al scroll */
    .modal-header {
        box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    }
    .modal-footer {
        box-shadow: 0 -1px 0 rgba(0,0,0,0.05);
    }
    .modal-footer button {
        padding: 12px 14px !important;
        font-size: 0.92rem;
    }

    /* Resumen card Ventas: campos en 1 col */
    .ventas-resumen .stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* En cartera, hide email y direccion en pantallas muy pequenas - el usuario las ve en el sub-modal */
    table.tabla-analisis thead th:nth-child(3),
    table.tabla-analisis thead th:nth-child(4),
    table.tabla-analisis tbody td:nth-child(3),
    table.tabla-analisis tbody td:nth-child(4) {
        display: none;
    }

    /* Productos en modal: cards mas compactas */
    .producto-venta-item {
        padding: 10px !important;
    }
    .producto-venta-item .producto-inputs {
        flex-direction: column;
        gap: 6px;
        align-items: stretch !important;
    }
    .producto-venta-item .producto-inputs > * {
        width: 100% !important;
    }
}

/* ==========================================================================
   SAFE AREA INSETS para iPhones con notch / Dynamic Island
   ========================================================================== */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ==========================================================================
   LANDSCAPE en mobile
   ========================================================================== */
@media (max-width: 900px) and (orientation: landscape) {
    .header-content {
        flex-direction: row !important;
    }
    .nav-container {
        padding: 6px 12px;
    }
    .nav-btn {
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
    }
}