/* ════════════════════════════════════════════════════════════════════════════
 * Viva Gerencia™ — Mobile Responsive Enhancement v2
 * © 2026 Viva Consulting Empresas
 * Optimización profunda para iPhone/Android — financial-grade UX
 * ════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL BASE — sin overflow lateral, viewport correcto
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html, body { overflow-x: hidden !important; }
  body { font-size: 14px; }
  * { box-sizing: border-box; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONNECT-BAR (Google Sheets URL input)
   En desktop: una sola fila. En mobile: stack vertical con full-width.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .connect-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .connect-bar > * {
    flex: 1 1 auto;
    min-width: 0;
  }
  .connect-bar input[type="text"] {
    width: 100% !important;
    flex: 1 1 100% !important;
    font-size: 16px !important; /* iOS no zoom on focus */
  }
  .connect-bar .btn {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
  .source-badge {
    font-size: 10px !important;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #vg-refresh-bar {
    flex-wrap: wrap !important;
    margin: 6px 8px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  #vg-refresh-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABS DE MESES (Ene-Dic) — scroll horizontal en móvil
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tabs-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    padding: 8px 8px !important;
    gap: 4px !important;
  }
  .tabs-row::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 auto;
    font-size: 11px !important;
    padding: 8px 12px !important;
    min-width: 50px;
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   GRIDS DE KPIs — pasar de 4-5 columnas a 2 columnas en mobile, 1 en muy chico
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .kpis-grid,
  .kpi-grid,
  .grid-kpis,
  [class*="kpi"][class*="grid"],
  div[style*="grid-template-columns"][style*="repeat"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .kpi-card,
  [class*="kpi-card"] {
    padding: 12px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
  }
  .kpi-value, .kpi-val, [class*="kpi-value"], [class*="kpi-val"] {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  .kpi-label, .kpi-lbl, [class*="kpi-label"] {
    font-size: 10.5px !important;
  }
  .kpi-icon { width: 32px !important; height: 32px !important; font-size: 14px !important; }
}
@media (max-width: 380px) {
  .kpis-grid, .kpi-grid, .grid-kpis,
  [class*="kpi"][class*="grid"],
  div[style*="grid-template-columns"][style*="repeat"] {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLAS FINANCIERAS — scroll horizontal con sticky-first-column
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .table-wrap, .data-table-wrap, .tbl-wrap, [class*="table-wrap"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    margin: 0 -8px;
    padding: 0 8px;
  }
  table {
    font-size: 11.5px !important;
    width: max-content !important;
    min-width: 100% !important;
  }
  th, td {
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }
  /* Sticky primera columna en tablas financieras (concepto/cuenta) */
  table thead th:first-child,
  table tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg2, #111827);
    z-index: 2;
    box-shadow: 2px 0 4px rgba(0,0,0,.3);
  }
  table thead th:first-child { z-index: 3; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHARTS — limitar altura en mobile + responsive width
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  canvas { max-height: 280px !important; max-width: 100% !important; }
  .chart-card, .chart-wrap, [class*="chart-card"] {
    padding: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MAIN CONTAINER — padding reducido y full-width
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .main, .shell, .container, [class*="container"] {
    padding: 10px 8px !important;
    max-width: 100% !important;
  }
  .card, .panel, [class*="card"], [class*="panel"] {
    border-radius: 10px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIOS — inputs ≥16px (iOS no zoom on focus), labels claros
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }
  label {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }
  button, .btn, [role="button"] {
    min-height: 40px;
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN / REGISTER / FORGOT — pantallas centradas
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .login-container, .auth-container, .auth-box, [class*="auth-box"], [class*="login-box"] {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 24px 18px !important;
    border-radius: 14px !important;
    margin: 0 auto !important;
  }
  .auth-logo, .login-logo {
    width: 60px !important;
    height: 60px !important;
  }
  .auth-title, .login-title {
    font-size: 20px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALES — full-width bottom-sheet en mobile
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .modal, [role="dialog"], [class*="modal"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    align-self: flex-end !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .modal-overlay { align-items: flex-end !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODNAV (sidebar / navegación interna)
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #modNav, .modnav, [class*="sidebar"], [class*="modnav"] {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #1E3A5F) !important;
    padding: 8px !important;
  }
  #modNav a, .modnav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — ajustes finos
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  h1, .h1 { font-size: 22px !important; line-height: 1.25 !important; }
  h2, .h2 { font-size: 18px !important; }
  h3, .h3 { font-size: 16px !important; }
  h4, .h4 { font-size: 14px !important; }
  p, .text { font-size: 13px; line-height: 1.5; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PILLS / BADGES / CHIPS
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .badge, .pill, .chip, [class*="badge"], [class*="pill"] {
    font-size: 9.5px !important;
    padding: 2px 8px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDING PAGES (promo, welcome, video, demo)
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero, .landing-hero, [class*="hero"] {
    padding: 40px 20px !important;
    text-align: center !important;
  }
  .hero h1 { font-size: 26px !important; }
  .hero p { font-size: 14px !important; }
  .feature-grid, [class*="feature"][class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  iframe { width: 100% !important; max-width: 100% !important; }
  video { width: 100% !important; height: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   USERS LIST / SUPERADMIN — listas más densas
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .user-row, .user-card, [class*="user-row"], [class*="user-card"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  .user-row > *, .user-card > * {
    font-size: 11.5px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPACING / GAPS
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [style*="padding: 32px"] { padding: 16px !important; }
  [style*="padding: 24px"] { padding: 14px !important; }
  [style*="padding: 20px"] { padding: 12px !important; }
  [style*="margin: 32px"] { margin: 16px !important; }
  [style*="gap: 24px"] { gap: 12px !important; }
  [style*="gap: 32px"] { gap: 16px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PWA — better mobile experience
══════════════════════════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {
  /* iOS specific: prevent rubber-band scrolling on body */
  body { position: relative; overflow-x: hidden; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ULTRA-COMPACT (≤380px / iPhone SE original)
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  body { font-size: 13px; }
  .topbar { height: 50px !important; }
  .topbar-logo span { font-size: 12px !important; letter-spacing: .5px !important; }
  .btn { padding: 6px 10px !important; font-size: 11px !important; }
  .kpi-value, .kpi-val { font-size: 16px !important; }
  table { font-size: 10.5px !important; }
  th, td { padding: 4px 6px !important; }
}