/* ============================================================
   DIOPTRISOFT — CSS MÓVIL ANDROID
   Activo con clase .capacitor-android en body
   REGLA: no tocar OptiMentor, no tocar login inputs,
          no override grids globales — solo fixes específicos
   ============================================================ */

:root {
    --keyboard-height: 0px;
    --android-status-bar: 28px;
}

/* ─── BASE ────────────────────────────────────────────────── */
body.capacitor-android {
    padding-top: var(--android-status-bar);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

body.capacitor-android.keyboard-open {
    padding-bottom: var(--keyboard-height);
}

/* Evitar scroll horizontal en toda la app */
body.capacitor-android .tab-view,
body.capacitor-android #login-screen {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ─── OPTIMENTOR CHAT — fix animación en Android WebView ──── */
/* La animación aparecer-chat arranca en opacity:0; en WebView  */
/* tiene mayor prioridad que !important inline → chat invisible. */
/* Desactivar con CSS estático antes de que se ejecute JS.      */
body.capacitor-android #ia-chat-container {
    animation: none !important;
    -webkit-animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
}

/* ─── PANTALLA DE LOGIN ────────────────────────────────────── */
body.capacitor-android #login-screen {
    overflow-y: auto !important;
}

body.capacitor-android .login-container {
    min-height: calc(100vh - var(--android-status-bar)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

body.capacitor-android .login-hero-panel {
    display: none !important;
}

body.capacitor-android .login-box {
    width: calc(100% - 32px) !important;
    max-width: 420px !important;
    margin: 16px auto !important;
    padding: 28px 20px !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
}

body.capacitor-android #login-company-name,
body.capacitor-android .login-box h2 {
    font-size: 1.5rem !important;
}

/* ─── TABS — scroll horizontal ────────────────────────────── */
@media (max-width: 768px) {
    body.capacitor-android .nav-tabs,
    body.capacitor-android .tabs-horizontal {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }
    body.capacitor-android .nav-tabs::-webkit-scrollbar { display: none !important; }
    body.capacitor-android .nav-tabs .nav-item,
    body.capacitor-android .nav-tabs .nav-link {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* ═══════════════════════════════════════════════════════
       REPORTES
    ═══════════════════════════════════════════════════════ */
    body.capacitor-android .reports-dashboard {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-top: 8px !important;
    }

    body.capacitor-android .reports-sidebar {
        gap: 10px !important;
    }

    body.capacitor-android .reports-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    body.capacitor-android .reports-title-bar h2 {
        font-size: 1.2rem !important;
    }

    body.capacitor-android .reports-title-bar p {
        font-size: 12px !important;
        display: none !important;
    }

    /* KPI cards en 2 columnas */
    body.capacitor-android .reports-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    body.capacitor-android .kpi-value {
        font-size: 1.2rem !important;
    }

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

    /* Gráficas — altura reducida */
    body.capacitor-android .reports-chart-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.capacitor-android .reports-chart-grid canvas,
    body.capacitor-android .reports-content canvas {
        max-height: 220px !important;
    }

    body.capacitor-android .reports-rankings-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Tabla de ventas en reportes — scroll horizontal */
    body.capacitor-android .reports-content .table-wrap,
    body.capacitor-android .reports-content table {
        display: block !important;
        overflow-x: auto !important;
        min-width: 500px !important;
        font-size: 12px !important;
    }

    /* Periodo buttons */
    body.capacitor-android .period-btn-group {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    body.capacitor-android .reports-btn {
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-height: 38px !important;
    }

    /* ═══════════════════════════════════════════════════════
       INVENTARIO — formulario nuevo producto
    ═══════════════════════════════════════════════════════ */
    body.capacitor-android #inv-form-container .inv-form-grid,
    body.capacitor-android .inv-form-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    body.capacitor-android #inv-form-container .inv-form-group-full,
    body.capacitor-android .inv-form-group-full {
        grid-column: 1 / -1 !important;
    }

    body.capacitor-android .inv-card-form-body {
        padding: 12px !important;
    }

    body.capacitor-android .inv-input-premium {
        font-size: 15px !important;
        padding: 10px 12px !important;
        min-height: 42px !important;
    }

    body.capacitor-android .inv-input-group label {
        font-size: 11px !important;
    }

    /* Tabla inventario */
    body.capacitor-android #inv-table-view {
        overflow-x: auto !important;
    }

    body.capacitor-android #tabla-inventario,
    body.capacitor-android #inv-table-view table {
        min-width: 600px !important;
        font-size: 12px !important;
    }

    /* Grid de cards de inventario */
    body.capacitor-android #inv-grid-view {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* ═══════════════════════════════════════════════════════
       DASHBOARD
    ═══════════════════════════════════════════════════════ */
    body.capacitor-android #view-dashboard .stats-grid,
    body.capacitor-android #view-dashboard .kpi-row,
    body.capacitor-android .dashboard-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    body.capacitor-android #view-dashboard canvas {
        max-height: 200px !important;
    }

    body.capacitor-android .dashboard-welcome h1,
    body.capacitor-android .dashboard-title {
        font-size: 1.2rem !important;
    }

    /* ═══════════════════════════════════════════════════════
       PACIENTES
    ═══════════════════════════════════════════════════════ */
    body.capacitor-android #tabla-pacientes,
    body.capacitor-android .pacientes-table {
        display: block !important;
        overflow-x: auto !important;
        min-width: 500px !important;
        font-size: 13px !important;
    }

    body.capacitor-android .paciente-card .paciente-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    body.capacitor-android .paciente-card .paciente-actions .btn {
        flex: 1 !important;
        min-width: 80px !important;
        font-size: 11px !important;
        padding: 6px 8px !important;
    }

    /* ═══════════════════════════════════════════════════════
       HISTORIA CLÍNICA
    ═══════════════════════════════════════════════════════ */
    body.capacitor-android .hc-grid-3,
    body.capacitor-android .hc-grid-4,
    body.capacitor-android [style*="grid-template-columns: repeat(3"],
    body.capacitor-android [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr 1fr !important;
    }

    body.capacitor-android .hc-ojo-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    /* ═══════════════════════════════════════════════════════
       VENTAS
    ═══════════════════════════════════════════════════════ */
    body.capacitor-android .venta-productos-lista {
        max-height: 35vh !important;
        overflow-y: auto !important;
    }

    body.capacitor-android .venta-resumen-row {
        flex-direction: column !important;
        gap: 6px !important;
    }

    body.capacitor-android #tabla-ventas,
    body.capacitor-android .ventas-table {
        display: block !important;
        overflow-x: auto !important;
        min-width: 500px !important;
        font-size: 12px !important;
    }

    /* ═══════════════════════════════════════════════════════
       CITAS / CALENDARIO
    ═══════════════════════════════════════════════════════ */
    body.capacitor-android .calendario-grid,
    body.capacitor-android .citas-grid {
        grid-template-columns: 1fr !important;
    }

    body.capacitor-android .cita-card {
        padding: 10px !important;
        font-size: 13px !important;
    }

    /* ═══════════════════════════════════════════════════════
       ÓRDENES
    ═══════════════════════════════════════════════════════ */
    body.capacitor-android #tabla-ordenes,
    body.capacitor-android .ordenes-table {
        display: block !important;
        overflow-x: auto !important;
        min-width: 500px !important;
        font-size: 12px !important;
    }

    /* ═══════════════════════════════════════════════════════
       DEUDAS / GASTOS
    ═══════════════════════════════════════════════════════ */
    body.capacitor-android .deudas-grid,
    body.capacitor-android .gastos-grid {
        grid-template-columns: 1fr !important;
    }

    body.capacitor-android #tabla-deudas,
    body.capacitor-android #tabla-gastos {
        display: block !important;
        overflow-x: auto !important;
        min-width: 480px !important;
        font-size: 12px !important;
    }

    /* ═══════════════════════════════════════════════════════
       BOTONES GENERALES — mínimo táctil
    ═══════════════════════════════════════════════════════ */
    body.capacitor-android .btn:not(.nav-link):not(.btn-xs) {
        min-height: 40px !important;
    }

    /* ═══════════════════════════════════════════════════════
       TABLAS GENÉRICAS
    ═══════════════════════════════════════════════════════ */
    body.capacitor-android .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ─── BANNER OFFLINE ──────────────────────────────────────── */
#offline-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #dc2626;
    color: #fff;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ─── BOTÓN NATIVO CÁMARA ─────────────────────────────────── */
.btn-nativo-camara {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59,130,246,.4);
}

/* ─── OPTIMENTOR: BOTÓN OCULTAR (solo Android) ────────────── */
.mentor-hide-btn {
    display: none; /* oculto en web */
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2147483647;
    padding: 0;
    line-height: 1;
}
.mentor-hide-btn .material-symbols-outlined {
    font-size: 13px !important;
    line-height: 1;
}
body.capacitor-android .mentor-hide-btn {
    display: flex;
}

/* FAB para mostrar OptiMentor cuando fue ocultado */
.mentor-show-fab {
    display: none; /* controlado por JS */
    position: fixed;
    bottom: 90px;
    right: 16px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border: none;
    color: #fff;
    align-items: center;
    justify-content: center;
    z-index: 999997;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.45);
    cursor: pointer;
}

/* ─── BUSCADOR GLOBAL INLINE — solo ícono en Android ────────── */
/* El tap abre un diálogo Swal (ver capacitor-bridge.js _patchAndroidSearch) */
@media (max-width: 768px) {
    body.capacitor-android #inline-search-wrapper {
        margin-left: 10px !important;
    }
    body.capacitor-android .inline-search-pill {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }
    body.capacitor-android .inline-search-pill input,
    body.capacitor-android .inline-search-pill .inline-search-close {
        display: none !important;
    }
    body.capacitor-android .inline-search-pill .inline-search-icon {
        font-size: 1.3rem !important;
        margin: 0 !important;
    }
    /* Panel de resultados: position:fixed para que no quede dentro del ícono de 40px */
    body.capacitor-android #global-search-floating-panel {
        position: fixed !important;
        top: 56px !important;
        left: 6px !important;
        right: 6px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        z-index: 99998 !important;
    }

    /* ─── NUEVA VENTA — header ──────────────────────────────── */
    body.capacitor-android #view-venta > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    body.capacitor-android #card-buscar-deuda {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    body.capacitor-android #vendedor-bubble {
        width: fit-content !important;
        align-self: flex-end !important;
    }
    /* Tabla de items de venta */
    body.capacitor-android #lista-productos-venta,
    body.capacitor-android .venta-items-table {
        display: block !important;
        overflow-x: auto !important;
        min-width: 480px !important;
        font-size: 12px !important;
    }

    /* ─── CONSENTIMIENTOS ─────────────────────────────────── */
    body.capacitor-android .cons-tab-wrapper {
        padding: 12px !important;
    }
    body.capacitor-android .cons-tab-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px 16px !important;
    }
    body.capacitor-android .cons-tab-title-group {
        width: 100% !important;
    }
    body.capacitor-android .cons-tab-header > .cons-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    body.capacitor-android .cons-content-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    body.capacitor-android .cons-nav-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    body.capacitor-android .cons-nav-btn {
        flex: 1 !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        padding: 6px 10px !important;
    }
    /* Modal firma — de 2 columnas a 1 en móvil */
    body.capacitor-android .cons-modal-grid {
        grid-template-columns: 1fr !important;
    }
    body.capacitor-android .cons-modal-box {
        max-height: 95vh !important;
        border-radius: 16px !important;
    }
    body.capacitor-android .cons-table th,
    body.capacitor-android .cons-table td {
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
    }
    /* Tabla historial en scroll horizontal */
    body.capacitor-android #cons-tab-body .cons-table {
        min-width: 520px !important;
    }
    body.capacitor-android .cons-content-card > div:first-child {
        overflow-x: auto !important;
    }
    /* Grid de plantillas: 1 columna */
    body.capacitor-android .cons-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── INVENTARIO: override inline style SIEMPRE en Android ── */
body.capacitor-android .inv-form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

/* ══════════════════════════════════════════════════════════════
   MEJORAS COMPARTIDAS — aplican en APK Y en navegador móvil
   (sin clase body.capacitor-android, solo @media)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ─── INVENTARIO: form grid inline override ──────────────── */
    .inv-form-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* ─── NUEVA VENTA — header apilado ──────────────────────── */
    #view-venta > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    #card-buscar-deuda {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    #vendedor-bubble {
        width: fit-content !important;
        align-self: flex-end !important;
    }

    /* ─── CONSENTIMIENTOS — header y modal ───────────────────── */
    .cons-tab-wrapper {
        padding: 12px !important;
    }
    .cons-tab-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .cons-tab-header > .cons-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .cons-modal-grid {
        grid-template-columns: 1fr !important;
    }
    .cons-grid {
        grid-template-columns: 1fr !important;
    }
    .cons-content-card > div:first-child {
        overflow-x: auto !important;
    }
    #cons-tab-body .cons-table {
        min-width: 520px !important;
    }

    /* ─── TABLAS GENERALES — scroll horizontal ───────────────── */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ─── TRASLADO ENTRE SEDES (SweetAlert2) ────────────────────── */
body.capacitor-android .swal2-container .swal2-popup {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    padding: 16px !important;
}
body.capacitor-android .swal2-html-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Grid origen/destino → 1 columna en móvil */
body.capacitor-android .swal2-html-container [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
}
/* Tabla de productos en traslado — scroll horizontal */
body.capacitor-android .swal2-html-container table {
    display: block !important;
    overflow-x: auto !important;
    min-width: 440px !important;
    font-size: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}
body.capacitor-android .swal2-html-container .traslado-row td {
    padding: 6px 4px !important;
}
/* Botones de acción del traslado */
body.capacitor-android .swal2-actions {
    flex-direction: column !important;
    gap: 8px !important;
}
body.capacitor-android .swal2-actions button {
    width: 100% !important;
}
body.capacitor-android .swal2-title {
    font-size: 1.1rem !important;
    padding: 0 0 8px 0 !important;
}

/* ─── PROVEEDORES — VER ESTADO ───────────────────────────────── */
@media (max-width: 768px) {
    /* RAÍZ: el detalle tiene display:flex sin flex-direction, queda en row
       (nav lateral + contenido). En móvil debe ser columna. */
    .prov-detail-view.active {
        flex-direction: column !important;
    }
    .st-detail-nav-bar {
        flex-shrink: 0 !important;
        flex-wrap: wrap !important;
    }
    #prov-estado-cuenta {
        padding: 10px !important;
    }

    /* Cabecera del proveedor (info + botones) → apilar verticalmente */
    #prov-estado-cuenta [style*="display:flex; justify-content:space-between; align-items:flex-end"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    /* Grid de resumen (4 columnas → 2×2) */
    .st-summary-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    /* Tarjetas de facturas: 3 cols (Capital/Abonado/Pendiente) → 2 cols */
    .st-invoice-card [style*="grid-template-columns:repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    /* Encabezado de cada tarjeta → columna */
    .st-invoice-card > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    /* Botones de pago/detalle → fila compacta */
    .st-invoice-card [style*="display:flex; justify-content:space-between; align-items:center"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    /* Avatar del proveedor */
    .st-manage-avatar {
        width: 46px !important;
        height: 46px !important;
        font-size: 1.2rem !important;
        flex-shrink: 0 !important;
    }
    /* Selector rápido de proveedores → scroll horizontal */
    .st-quick-switcher {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    /* Grid principal (lista de tarjetas) → 1 columna */
    .st-grid {
        grid-template-columns: 1fr !important;
    }
    /* Filtros del header */
    .st-filter-row-unified {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .st-search-input-wrap {
        min-width: unset !important;
        width: 100% !important;
    }
}