/* ============================================================
   Teix — capa responsive
   Desktop-first app adaptada a tablet (≤900px) y móvil (≤600px).
   Estrategia:
   · La barra lateral pasa a panel deslizante (off-canvas) con botón ☰.
   · La barra superior se compacta; el botón principal se vuelve icónico.
   · Tablas con scroll horizontal; rejillas internas a 1 columna.
   · Cabeceras de página y grupos de botones se apilan / envuelven.
   ============================================================ */

/* El botón hamburguesa solo existe en pantallas estrechas */
.nav-toggle{ display:none; }

/* ============================================================
   iOS · notch · safe-area + arreglos táctiles
   Se aplica a todas las pantallas: env(safe-area-inset-*) vale 0 en
   dispositivos sin notch, así que en escritorio no cambia nada.
   Requiere viewport-fit=cover (ya en el <meta viewport>).
   ============================================================ */
html{ -webkit-text-size-adjust:100%; }
body{ min-height:100vh; min-height:100dvh; }
.app{ min-height:100vh; min-height:100dvh; }
.sidebar{ height:100vh; height:100dvh; }

/* la barra superior queda BAJO el notch / status bar translúcida: reserva el inset */
.topbar{
  height:calc(64px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  padding-left:max(30px, env(safe-area-inset-left));
  padding-right:max(30px, env(safe-area-inset-right));
}
/* sidebar (off-canvas en móvil): logo bajo el notch, pie sobre el home indicator */
.sidebar{ padding-top:env(safe-area-inset-top); }
.sb-foot{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); }

/* contenido: respeta el home indicator y el notch lateral (apaisado) */
.wrap{
  padding-left:max(40px, env(safe-area-inset-left));
  padding-right:max(40px, env(safe-area-inset-right));
  padding-bottom:calc(80px + env(safe-area-inset-bottom));
}

/* flotantes y overlays sobre el home indicator / notch */
.assist-fab{ bottom:calc(24px + env(safe-area-inset-bottom)); right:calc(24px + env(safe-area-inset-right)); }
.toast-host{ bottom:calc(24px + env(safe-area-inset-bottom)); }
.drawer{ height:100dvh; padding-top:env(safe-area-inset-top); }
.drawer, .modal{ max-height:calc(100dvh - 16px); }
.notif-pop{ max-height:calc(100dvh - 90px); overflow-y:auto; }

/* táctil: sin flash gris al pulsar + scroll con inercia */
a, button, .nav-item, .btn, .btn-icon, .notif-item, .tap, .seg, .qa-btn{ -webkit-tap-highlight-color:transparent; }
.scroll, .sb-nav, .notif-pop{ -webkit-overflow-scrolling:touch; }
/* iOS no hace zoom al enfocar si la fuente es ≥16px (lo forzamos solo en táctil real) */
@media (max-width:900px) and (pointer:coarse){
  input, textarea, select{ font-size:16px !important; }
}

/* ===========================================================
   ≤ 900px — barra lateral off-canvas
   =========================================================== */
@media (max-width:900px){
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; height:100dvh;
    z-index:120;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.2,.8,.25,1);
    box-shadow:none;
    width:min(284px,86vw);
  }
  .sidebar.open{
    transform:translateX(0);
    box-shadow:var(--shadow-lg);
  }
  .nav-scrim{
    position:fixed; inset:0; z-index:115;
    background:rgba(20,28,46,.42); backdrop-filter:blur(2px);
    animation:scrimIn .2s ease;
  }
  .main{ width:100%; min-width:0; }

  /* hamburguesa visible */
  .nav-toggle{
    display:grid; place-items:center;
    width:40px; height:40px; flex-shrink:0;
    border-radius:10px; background:var(--surface);
    border:1px solid var(--border-strong); color:var(--ink-2);
    transition:.12s;
  }
  .nav-toggle:hover{ background:var(--blue-50); border-color:var(--blue-300); color:var(--ink); }

  .topbar{ gap:12px; padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  .search{ width:auto; flex:1; min-width:0; }
  .search:focus-within{ width:auto; }
}

/* ===========================================================
   ≤ 720px — contenido, tablas, cabeceras
   =========================================================== */
@media (max-width:720px){
  .wrap{ padding-top:20px; padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); padding-bottom:calc(64px + env(safe-area-inset-bottom)); }

  /* cabeceras de página: el grupo de acciones baja debajo del título */
  .page-head{ flex-wrap:wrap; align-items:flex-start; gap:14px; }
  .page-head > div:last-child{ flex-wrap:wrap; }
  .page-title{ font-size:23px; }

  /* tablas .tbl → scroll horizontal dentro de su tarjeta.
     (!important para vencer el overflow:hidden inline de algunas tarjetas) */
  .card:has(> table.tbl){ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  table.tbl{ min-width:560px; }

  /* barra superior: ocultar atajo de teclado, compactar */
  .kbd{ display:none; }

  /* botones de la barra superior (Onboarding + Enviar correo) → solo icono */
  .topbar .btn .btn-label{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .topbar .btn{ padding:9px 11px; }

  /* drawer agenda a ancho casi completo */
  .drawer{ width:min(680px,100vw); }

  /* PageSpeed: la fila se aplastaba y desaparecía la URL. Ahora la URL ocupa toda la
     primera línea y las métricas + botones (Medir / enviar / desplegar) bajan debajo. */
  .ps-row{ flex-wrap:wrap !important; row-gap:10px !important; }
  .ps-row .ps-row-info{ flex-basis:100% !important; }
}

/* ===========================================================
   ≤ 600px — móvil: rejillas internas a 1 columna
   =========================================================== */
@media (max-width:600px){
  /* cualquier rejilla declarada inline colapsa a una columna */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }

  .stat-grid,
  .svc-grid,
  .task-grid,
  .tpl-grid{ grid-template-columns:1fr !important; }

  /* cabecera de página apilada */
  .page-head{ flex-direction:column; align-items:stretch; }
  .page-head > div:last-child{ width:100%; }

  /* el editor de tarea/cliente: acciones del pie envueltas */
  .modal{ width:min(560px,94vw); }

  /* segmentos y barras de filtro con scroll si no caben */
  .seg{ max-width:100%; overflow-x:auto; }

  /* botones algo más compactos */
  .btn{ padding:9px 13px; }

  /* hero de ficha de cliente: la columna de identidad ya no exige 340px */
  .hero-id{ min-width:0; }
  .hero-actions{ width:100%; }

  /* KPI / tarjetas: un poco menos de padding */
  .card-pad{ padding:18px 18px; }

  /* paleta de comandos y popovers que cuelgan a la derecha */
  .notif-pop{ width:min(340px,calc(100vw - 24px)); }
}

/* ===========================================================
   ≤ 420px — pantallas muy pequeñas
   =========================================================== */
@media (max-width:420px){
  .page-title{ font-size:21px; }
  .topbar{ height:calc(58px + env(safe-area-inset-top)); gap:9px; padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); }
  .wrap{ padding-top:16px; padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); padding-bottom:calc(56px + env(safe-area-inset-bottom)); }

  /* asistente flotante un poco más discreto */
  .assist-fab{ right:16px; bottom:16px; width:52px; height:52px; }
}