/* ---------- Vista para celular (26-sep-2026, a petición de Auditoría) ----------
   Solo aplica en pantallas angostas (celular / app instalada en teléfono).
   En computadora no cambia nada. ---------------------------------------------- */
@media (max-width: 760px){
  #app{ flex-direction:column; }

  /* Menú lateral → cajón deslizable (se abre con ☰ o con "Menú" de la barra inferior) */
  #sidebar{
    position:fixed; top:0; left:0; bottom:0; width:min(84vw, 300px); height:100vh; z-index:40;
    transform:translateX(-104%); transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.45);
    padding-bottom:env(safe-area-inset-bottom);
  }
  body.menu-abierto #sidebar{ transform:none; }
  #velo-menu{
    display:none; position:fixed; inset:0; background:rgba(5,8,16,.55); z-index:39;
  }
  body.menu-abierto #velo-menu{ display:block; }
  .nav-item, .nav-admin{ padding:12px 12px; font-size:15px; }
  .nav-label{ padding-top:16px; }

  /* Barra superior compacta: ☰ + título; periodo en una segunda línea */
  #topbar{
    flex-wrap:wrap; gap:8px 10px; padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top));
    row-gap:8px;
  }
  /* Fila 1: ☰ + título · Fila 2: selector propio de la vista (sucursal, etc.) · Fila 3: ◀ Año Mes ▶ */
  #topbar > *{ margin:0; }
  #topbar #btnMenu{ order:-2; display:inline-flex; }
  #topbar h1{ order:-1; flex:1 1 calc(100% - 48px); font-size:16px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #topbar .spacer{ display:none; }
  #topbar > select:not(#anioSelect):not(#mesSelect):not(#granSelect):not(#periodSelect){ order:3; flex:1 1 100%; max-width:100%; }
  #topbar #btnRegresar{ order:4; }
  #topbar #periodoPrev, #topbar #anioSelect, #topbar #mesSelect, #topbar #periodoNext, #topbar #granSelect{ order:5; }
  /* El estado de conexión se oculta en celular para ganar altura; la fecha de actualización está en "Actualizados" */
  #topbar #statusPill{ display:none; }
  #topbar select{ padding:6px 8px; font-size:14px; max-width:100%; }
  #topbar .btn{ min-height:36px; }
  #topbar #btnMenu{ min-height:34px; width:34px; }

  /* Contenido: márgenes chicos, tarjetas a una columna, tablas con desplazamiento lateral */
  #content{ padding:14px 14px calc(84px + env(safe-area-inset-bottom)); }
  .section-head{ flex-wrap:wrap; gap:4px 10px; margin:20px 0 10px; }
  .section-head h2{ font-size:16px; }
  .kpi-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .kpi-grid .card{ min-width:0; }
  .card{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .card table{ min-width:560px; }
  .row-2, .comp-grid, .update-grid, .suc-block{ grid-template-columns:1fr !important; }
  .btn, button.btn{ min-height:38px; }
  .btn-mini, .seg button, .chip, .tag-btn{ min-height:32px; }
  .seg{ flex-wrap:wrap; max-width:100%; min-width:0; }
  .filter-row > *{ max-width:100%; min-width:0; }
  input, select, textarea{ font-size:16px; } /* evita el zoom automático de iPhone */
  select, input[type="text"], input[type="number"], input[type="date"], textarea{ max-width:100%; }
  .banner{ display:block; line-height:1.5; }
  .brand-mark img{ height:22px; }

  /* Barra inferior con las 4 vistas más usadas + Menú */
  #barra-inferior{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30;
    background:var(--sidebar-bg); border-top:1px solid var(--sidebar-border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  #barra-inferior button{
    flex:1 1 0; background:none; border:none; color:var(--sidebar-text); font:inherit; font-size:10.5px; font-weight:600;
    display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; border-radius:10px; cursor:pointer;
  }
  #barra-inferior button .ico{ font-size:19px; line-height:1; }
  #barra-inferior button.active{ color:#fff; background:var(--sidebar-active-bg); }
  #barra-inferior button .badge-num{
    position:absolute; margin-left:22px; margin-top:-4px; background:var(--brand-orange); color:#fff; font-size:9.5px;
    border-radius:999px; padding:1px 5px; font-weight:700;
  }
}
/* ---------- Computadora: botón ☰ para ocultar / mostrar la barra izquierda ----------
   Se recuerda la elección en este navegador. ---------------------------------------- */
#btnMenu{ display:inline-flex; align-items:center; justify-content:center; width:38px; padding:0; font-size:20px; flex:0 0 auto; }
#barra-inferior{ display:none; }
#velo-menu{ display:none; }
@media (min-width: 761px){
  /* En Chrome el ancho 0 no basta cuando la barra es un contenedor flex; se oculta por completo */
  body.sidebar-oculto #sidebar{ display:none; }
}