/* ============================================================================
   Portal 3S — Sistema de diseño "Fintech moderno" con la paleta azul 3S
   (#99CCFF #4DA6FF #0080FF #005AB3 #003366). Neutros slate + marino #003366
   en el sidebar, contenido claro de alto contraste. Sin dependencias externas.
   ============================================================================ */
:root {
  /* Neutros slate (contenido) */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;

  /* Marino profundo (sidebar / fondos oscuros) */
  --navy-900:#003366; --navy-800:#004080; --navy-line:rgba(255,255,255,.08);

  /* Acento primario: tema por omision "Azul 3S". El usuario puede cambiar de
     tema (js/core/temas.js sobreescribe estas variables); los diluidos 50/100
     y todos los anillos/brillos se derivan con color-mix del acento activo. */
  --azul-300:#99CCFF; --azul-400:#4DA6FF; --azul-500:#0080FF;
  --azul-600:#005AB3; --azul-700:#005AB3;
  --azul-50:color-mix(in srgb, var(--azul-500) 9%, #fff);
  --azul-100:color-mix(in srgb, var(--azul-500) 18%, #fff);
  --grad-primario:linear-gradient(135deg,var(--azul-500),var(--azul-600));

  /* Semánticos */
  --sky-50:#f0f9ff; --sky-500:#0ea5e9; --sky-600:#0284c7; --sky-700:#0369a1;
  --emerald-50:#ecfdf5; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857;
  --amber-50:#fffbeb; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309;
  --purple-50:#faf5ff; --purple-500:#a855f7; --purple-600:#9333ea; --purple-700:#7e22ce;
  --red-50:#fef2f2; --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c;

  --fondo: var(--slate-50);
  --linea: var(--slate-200);
  --texto: var(--slate-900);
  --texto-2: var(--slate-500);
  --texto-3: var(--slate-400);

  --r-2xl:18px; --r-xl:12px; --r-lg:10px; --r-full:9999px;
  --sh-sm:0 1px 2px rgba(15,23,42,.06);
  --sh-md:0 4px 16px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.05);
  --sh-lg:0 24px 60px rgba(2,6,23,.25);
  --sh-primario:0 6px 20px color-mix(in srgb, var(--azul-500) 35%, transparent);
  --anillo-acento:color-mix(in srgb, var(--azul-500) 15%, transparent);

  /* Alto realmente visible; lo actualiza main.js con visualViewport cuando el
     teclado en pantalla tapa parte de la ventana. 100dvh es el respaldo. */
  --alto-visible:100dvh;

  --sans:"Inter var","Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* el atributo hidden gana siempre */

body { margin:0; font-family:var(--sans); color:var(--texto); background:var(--fondo);
  -webkit-font-smoothing:antialiased; }
a { color:var(--azul-600); text-decoration:none; }
h1,h2,h3 { letter-spacing:-.02em; }
h1 { font-size:20px; margin:0; font-weight:700; color:var(--slate-900); }
h2 { font-size:16px; margin:0; font-weight:600; }
.mono { font-family:var(--mono); font-size:.8em; color:var(--slate-500); }
svg.ic { width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
svg.ic.sm { width:14px; height:14px; }

/* ---------- Marca ---------- */
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px;
  letter-spacing:-.02em; color:var(--slate-900); }
/* El logo original mide 190x60 px con transparencia. Se muestra a alturas que
   dejan el ancho por debajo de esa resolucion nativa (32px -> 101px, 26px ->
   82px), asi se mantiene nitido tambien en pantallas de doble densidad. */
.logo-3s { height:32px; width:auto; display:block; flex:none; }
.sidebar-brand .logo-3s {
  height:26px;
  /* Logo de UNA SOLA TINTA oscura (3S) sobre el menú, que es oscuro en los 16
     temas: brightness(0) lo vuelve negro e invert(1) blanco, conservando la
     transparencia. Así un único archivo sirve para fondo claro y oscuro. */
  filter:brightness(0) invert(1); }
/* Logo A COLOR (E2C): el filtro de arriba lo dejaría como una mancha blanca.
   La clase la pone main.js con lo que informa la instancia. */
body.logo-a-color .sidebar-brand .logo-3s { filter:none; }

/* Cuadro con las iniciales: sustituido por el logo, se conserva por si alguna
   vista necesita una marca compacta (p. ej. el sidebar plegado). */
.brand-mark { display:inline-grid; place-items:center; width:32px; height:32px;
  background:var(--grad-primario); color:#fff; border-radius:var(--r-lg);
  font-size:13px; font-weight:800; box-shadow:var(--sh-primario); }

/* ---------- Botones ---------- */
.btn { font:inherit; font-weight:500; border:1px solid var(--linea); border-radius:var(--r-lg);
  padding:8px 14px; cursor:pointer; background:#fff; color:var(--slate-700);
  display:inline-flex; align-items:center; gap:7px; transition:all .2s; }
.btn:hover { border-color:var(--slate-300); box-shadow:var(--sh-sm); }
.btn-primary { background:var(--grad-primario); color:#fff; border:none; font-weight:600;
  padding:9px 16px; }
.btn-primary:hover { box-shadow:var(--sh-primario); filter:brightness(1.06); }
.btn-ghost { background:transparent; border-color:transparent; color:var(--slate-500); }
.btn-ghost:hover { background:var(--slate-100); color:var(--slate-700); border-color:transparent; box-shadow:none; }
.btn-danger { background:var(--red-600); color:#fff; border-color:var(--red-600); }
.btn-block { width:100%; justify-content:center; }
.btn-sm { padding:5px 11px; font-size:13px; border-radius:var(--r-lg); }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ---------- Campos ---------- */
input,select { font:inherit; padding:9px 13px; border:1px solid var(--linea);
  border-radius:var(--r-lg); width:100%; background:var(--slate-50); color:var(--texto);
  transition:all .15s; }
input::placeholder { color:var(--slate-400); }
input:focus,select:focus { outline:none; background:#fff; border-color:var(--azul-500);
  box-shadow:0 0 0 3px var(--anillo-acento); }

/* ---------- Login / selección de empresa (fondo marino con brillos) ---------- */
.auth-wrap { min-height:100vh; display:grid; place-items:center; padding:20px;
  background:
    radial-gradient(600px 420px at 12% -8%, color-mix(in srgb, var(--azul-500) 30%, transparent), transparent 60%),
    radial-gradient(700px 480px at 105% 108%, color-mix(in srgb, var(--azul-400) 22%, transparent), transparent 60%),
    var(--navy-900); }
.auth-card { width:392px; max-width:100%; background:#fff; border:1px solid rgba(255,255,255,.12);
  border-radius:22px; box-shadow:var(--sh-lg); padding:34px; }
.auth-card .brand { justify-content:center; font-size:22px; margin-bottom:6px; }
.auth-sub { text-align:center; color:var(--texto-2); margin:0 0 22px; font-size:14px; }
.auth-card label { display:block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--slate-500); margin-bottom:16px; }
.auth-card input { margin-top:7px; font-weight:400; text-transform:none; letter-spacing:normal; }
.form-error { background:var(--red-50); color:var(--red-700); border:1px solid #fee2e2;
  padding:10px 12px; border-radius:var(--r-lg); font-size:13px; margin-top:14px; }

.empresa-list { list-style:none; padding:0; margin:0 0 16px; }
.empresa-list li { margin-bottom:9px; }
.empresa-btn { width:100%; text-align:left; display:flex; justify-content:space-between;
  align-items:center; gap:10px; padding:13px 15px; border:1px solid var(--linea);
  border-radius:var(--r-xl); background:#fff; cursor:pointer; font:inherit; font-weight:500;
  transition:all .2s; }
.empresa-btn:hover { border-color:var(--azul-500); box-shadow:0 0 0 3px var(--anillo-acento); }

/* ---------- Layout app ---------- */
.app { display:grid; grid-template-columns:256px 1fr; min-height:100vh; }

/* Sidebar marino profundo */
.sidebar { background:linear-gradient(180deg,var(--navy-900),var(--navy-800)); color:#e2e8f0;
  display:flex; flex-direction:column; padding:22px 16px; }
.sidebar-brand { margin-bottom:28px; padding:0 6px; color:#fff; }
/* Sin flex:1: el menu ocupa lo suyo y los temas quedan JUSTO debajo. Lo que
   empuja el pie hacia abajo es el margin-top:auto de .sidebar-foot. */
.nav { display:flex; flex-direction:column; gap:4px; }
.nav-item { display:flex; align-items:center; gap:11px;
  color:color-mix(in srgb, var(--azul-300) 55%, #fff); padding:10px 12px;
  border-radius:var(--r-lg); font-weight:500; font-size:14px; transition:all .15s; }
.nav-item:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active { background:linear-gradient(135deg,
    color-mix(in srgb, var(--azul-500) 25%, transparent),
    color-mix(in srgb, var(--azul-400) 18%, transparent));
  color:#fff; font-weight:600;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--azul-300) 40%, transparent); }
.nav-item.active svg { stroke:var(--azul-300); }
.sidebar-tema { margin-top:20px; }
.sidebar-foot { border-top:1px solid var(--navy-line); padding-top:16px; margin-top:auto; }
.empresa-actual { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:color-mix(in srgb, var(--azul-300) 75%, transparent); margin-bottom:3px; padding:0 4px; }
.empresa-nombre { font-size:14px; font-weight:600; color:#f1f5f9; margin-bottom:10px; padding:0 4px; }
.sidebar-foot .btn { margin-top:6px; }

/* Selector de tema (puntos de color en el pie del sidebar) */
.tema-selector { display:flex; gap:7px; flex-wrap:wrap; padding:2px 4px 10px; }
.tema-dot { width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(255,255,255,.25); transition:all .15s; }
.tema-dot:hover { transform:scale(1.12); border-color:rgba(255,255,255,.6); }
.tema-dot.activo { border-color:#fff; box-shadow:0 0 0 2px color-mix(in srgb, var(--azul-400) 60%, transparent); }
.sidebar .btn-ghost { color:color-mix(in srgb, var(--azul-300) 55%, #fff); }
.sidebar .btn-ghost:hover { background:rgba(255,255,255,.08); color:#fff; }

.content { display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:12px; padding:16px 28px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:30; }
.topbar h1 { flex:1; min-width:0; }
.usuario-info { color:var(--texto-2); font-size:13px; font-weight:500; }

/* Empresa activa en la barra superior */
.empresa-top { display:flex; align-items:center; gap:8px; min-width:0; }
.empresa-top-lbl { font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--slate-400); }
/* El nombre se recorta antes que empujar al resto de la barra: hay empresas con
   nombres largos ("Confort All Mexico - Distribuidora"). */
.empresa-top-nombre { font-size:14px; font-weight:700; color:var(--slate-900);
  max-width:26ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vista { padding:26px 28px; padding-bottom:calc(26px + env(safe-area-inset-bottom)); }

/* Boton hamburguesa: solo aparece cuando el sidebar pasa a drawer */
.btn-menu { display:none; border:1px solid var(--linea); background:#fff; border-radius:var(--r-lg);
  width:40px; height:40px; place-items:center; cursor:pointer; color:var(--slate-700); flex:none; }
.btn-menu svg.ic { width:20px; height:20px; }
.nav-backdrop { display:none; }

/* ---------- KPIs ---------- */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin-bottom:22px; }
.kpi { background:#fff; border:1px solid var(--linea); border-radius:var(--r-2xl); padding:19px 20px;
  transition:all .2s; }
.kpi:hover { box-shadow:var(--sh-md); border-color:var(--slate-300); transform:translateY(-1px); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.kpi .lbl { color:var(--slate-500); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.kpi .val { font-size:28px; font-weight:800; letter-spacing:-.03em; color:var(--slate-900);
  font-variant-numeric:tabular-nums;
  /* Nunca dos líneas: la tarjeta tiene alto fijo y el salto la descuadraba.
     El recorte es la última red de seguridad; el tamaño de abajo evita llegar
     a ella en los importes que la empresa produce de verdad. */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Escalones por longitud del texto (los aplica kpi() en js/core/panel.js).
   Con ~173px útiles en la tarjeta más estrecha del panel:
     hasta 12 caracteres  -> 28px   "L. 45,230.00"
     13 a 15              -> 23px   "L. 9,277,867.55"
     16 o más             -> 19px   "L. 12,345,678.90" */
.kpi .val-sm { font-size:23px; }
.kpi .val-xs { font-size:19px; }
.kpi .sub { color:var(--texto-3); font-size:12px; margin-top:3px; }
.kpi-ic { width:36px; height:36px; border-radius:var(--r-lg); display:grid; place-items:center; }
.kpi-ic svg { width:17px; height:17px; }
.kpi-ic.blue{background:var(--azul-50);color:var(--azul-600);}
.kpi-ic.emerald{background:var(--emerald-50);color:var(--emerald-600);}
.kpi-ic.amber{background:var(--amber-50);color:var(--amber-600);}
.kpi-ic.purple{background:var(--purple-50);color:var(--purple-600);}

.card { background:#fff; border:1px solid var(--linea); border-radius:var(--r-2xl); padding:20px; margin-bottom:18px; }
.card h3 { margin:0 0 16px; font-size:14px; font-weight:600; color:var(--slate-700);
  display:flex; align-items:center; gap:8px; }
.card h3 svg { color:var(--azul-500); }
.grid-2 { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; }
/* Altura fija para las gráficas: evita el crecimiento infinito de Chart.js
   (con maintainAspectRatio:false el canvas necesita un contenedor acotado). */
.chart-box { position:relative; height:280px; width:100%; }
.chart-box canvas { position:absolute; inset:0; }
@media (max-width:920px){ .grid-2{grid-template-columns:1fr;} }

/* ---------- Toolbar / tablas ---------- */
.toolbar { display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.toolbar input[type="search"] { max-width:340px; background:#fff; }
.toolbar .spacer { flex:1; }
.filtro-periodo input[type="month"], .filtro-periodo select { width:auto; background:#fff; }
.filtro-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--slate-500); }
.tabla-wrap { overflow-x:auto; background:#fff; border:1px solid var(--linea); border-radius:var(--r-2xl); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--slate-100); white-space:nowrap; }
th { color:var(--slate-400); font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.06em; background:var(--slate-50); }
tbody tr { transition:background .15s; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--azul-50); }
.num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:13px; }
/* Valor ausente o no aplicable: presente pero sin competir con el dato real. */
.texto-tenue { color:var(--texto-3); }
/* Listas largas dentro de un modal (elegir usuario del ERP): la tabla se
   desplaza sola en vez de estirar el modal fuera de la pantalla. */
.tabla-scroll { max-height:min(52vh, 420px); overflow-y:auto; }
.paginacion { display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:14px; color:var(--texto-2); font-size:13px; }

/* ---------- Badges semánticos (fórmula diluida) ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:2px 9px; border-radius:var(--r-full); border:1px solid transparent; }
.badge-zinc    { background:var(--slate-100);   color:var(--slate-600);   border-color:var(--slate-200); }
.badge-blue    { background:var(--azul-50);   color:var(--azul-700);  border-color:var(--azul-100); }
.badge-emerald { background:var(--emerald-50);  color:var(--emerald-700); border-color:#d1fae5; }
.badge-amber   { background:var(--amber-50);    color:var(--amber-700);   border-color:#fef3c7; }
.badge-purple  { background:var(--purple-50);   color:var(--purple-700);  border-color:#f3e8ff; }
.badge-red     { background:var(--red-50);      color:var(--red-700);     border-color:#fee2e2; }
/* compatibilidad con clases previas */
.pill { display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:2px 9px;
  border-radius:var(--r-full); background:var(--slate-100); color:var(--slate-600); border:1px solid var(--slate-200); }
.pill.ok { background:var(--emerald-50); color:var(--emerald-700); border-color:#d1fae5; }
.pill.no { background:var(--slate-100); color:var(--slate-500); border-color:var(--slate-200); }

/* ---------- Modal (glassmorphic backdrop) ---------- */
.modal { position:fixed; inset:0; display:grid; place-items:center; z-index:50; padding:20px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(2,6,23,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-card { position:relative; background:#fff; border:1px solid var(--linea); border-radius:20px;
  width:580px; max-width:100%; max-height:min(90vh, calc(var(--alto-visible) - 24px));
  overflow:auto; box-shadow:var(--sh-lg); }

/* Con el teclado abierto el modal se ancla arriba: centrado, su mitad util
   quedaria oculta bajo el teclado. */
body.teclado-abierto .modal { align-items:flex-start; padding-top:8px; }
body.teclado-abierto .modal-card { max-height:calc(var(--alto-visible) - 16px); }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:20px 24px;
  border-bottom:1px solid var(--linea); position:sticky; top:0; background:#fff; z-index:1; }
.modal-x { border:none; background:none; font-size:22px; cursor:pointer; color:var(--slate-400);
  line-height:1; padding:2px 6px; border-radius:var(--r-lg); transition:all .15s; }
.modal-x:hover { background:var(--slate-100); color:var(--slate-700); }
.modal-body { padding:24px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid label { display:block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--slate-500); }
.form-grid label.col-2 { grid-column:1 / -1; }
.form-grid input,.form-grid select { margin-top:6px; font-weight:400; text-transform:none; letter-spacing:normal; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }

/* ---------- Aviso de entorno (demo / pruebas) ----------
   Franja fija y ámbar, deliberadamente difícil de ignorar: dos instancias
   idénticas apuntando a bases distintas se confunden con facilidad. */
.aviso-entorno { position:fixed; top:0; left:0; right:0; z-index:90;
  background:var(--amber-500); color:#3b2400; text-align:center;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 12px; }
/* El contenido baja para no quedar debajo de la franja */
body.entorno-prueba .app, body.entorno-prueba .auth-wrap { padding-top:22px; }
body.entorno-prueba .topbar { top:22px; }

/* ---------- Toast ---------- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--navy-900);
  color:#fff; padding:11px 18px; border-radius:var(--r-xl); font-size:14px; font-weight:500; z-index:80;
  box-shadow:var(--sh-lg); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; gap:8px; }
.toast.ok { background:var(--emerald-600); border-color:transparent; }
.toast.err { background:var(--red-600); border-color:transparent; }

.loading,.empty { color:var(--texto-2); padding:36px; text-align:center; font-size:14px; }

/* ---------- Fichas de detalle: cabecera, pestañas y resumen ---------- */
.ficha-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.ficha-head .titulo { font-size:16px; font-weight:700; color:var(--slate-900); }
.tabs-wrap { min-width:0; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--linea); margin-bottom:16px; }
.tab { font:inherit; font-size:13px; font-weight:600; color:var(--slate-500); background:none;
  border:none; border-bottom:2px solid transparent; padding:8px 12px; margin-bottom:-1px;
  cursor:pointer; transition:all .15s; }
.tab:hover { color:var(--slate-800); }
.tab.active { color:var(--azul-600); border-bottom-color:var(--azul-500); }
.tab-body .tabla-wrap { border-radius:var(--r-xl); }
.resumen-chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.chip { background:var(--slate-50); border:1px solid var(--linea); border-radius:var(--r-xl);
  padding:8px 14px; min-width:110px; }
.chip .lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--slate-400); }
.chip .val { font-size:15px; font-weight:700; color:var(--slate-900); font-variant-numeric:tabular-nums; }
tbody tr.row-click { cursor:pointer; }
.modal-card.ancha { width:860px; }

/* ---------- Modal secundario y pantallas de búsqueda ---------- */
.modal-2 { z-index:70; }   /* por encima del modal principal (50) */

/* Campo con botón de apoyo a la derecha (Cliente, Producto) */
.campo-con-boton { display:flex; gap:6px; align-items:flex-start; }
.campo-con-boton > .buscador { flex:1; min-width:0; }
.btn-campo { flex:none; padding:0; width:38px; height:38px; display:grid;
  place-items:center; border:1px solid var(--linea); border-radius:var(--r-lg);
  background:#fff; color:var(--slate-600); cursor:pointer; transition:all .15s; }
.btn-campo:hover { border-color:var(--azul-500); color:var(--azul-600); }
.btn-campo svg.ic { width:17px; height:17px; }

.filtros-busqueda { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px; align-items:end; margin-bottom:16px; }
.filtros-busqueda label { display:block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--slate-500); }
.filtros-busqueda label input, .filtros-busqueda label select {
  margin-top:6px; font-weight:400; text-transform:none; letter-spacing:normal; }
/* Sustituye al botón "Buscar": los resultados salen al teclear, y este texto
   es la señal de que la consulta está corriendo y cuántos trajo. */
.resumen-busqueda { font-size:12px; font-weight:600; color:var(--slate-500);
  margin-bottom:8px; min-height:18px; }
.resultados-busqueda { max-height:52vh; overflow:auto; }

/* ---------- Buscador con autocompletado ---------- */
.buscador { position:relative; min-width:0; }
.buscador-lista { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); max-height:280px; overflow:auto; min-width:320px; }
.buscador-item { display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; text-align:left; padding:8px 12px; border:none; background:none;
  font:inherit; font-size:13px; cursor:pointer; }
/* .activo = fila resaltada con las flechas del teclado */
.buscador-item:hover, .buscador-item.activo { background:var(--azul-50); }
.bi-nombre { font-weight:500; color:var(--slate-800); }
.bi-meta { display:flex; gap:10px; align-items:center; font-size:11px; color:var(--slate-500); }
.buscador-vacio { padding:10px 12px; font-size:13px; color:var(--slate-500); }

/* ---------- Mantenimiento de accesos ---------- */
.aviso-accesos { font-size:13px; color:var(--texto-2); margin:0 0 14px; }
.tabla-permisos td { white-space:normal; padding:7px 16px; }
.tabla-permisos .col-nivel { width:190px; }
.tabla-permisos select { padding:6px 10px; }

/* ---------- Filtros rapidos (chips de un clic) ---------- */
.chips-filtro { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
/* Rótulo del grupo: ancho fijo para que las filas de botones (Tipo, Estado)
   arranquen alineadas y se lean como dos filtros distintos, no como uno solo. */
.chips-filtro .filtro-lbl { flex:0 0 52px; }
.chips-scroll { display:flex; gap:8px; flex-wrap:wrap; min-width:0; }
.chip-filtro { font:inherit; font-size:13px; font-weight:600; color:var(--slate-600);
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-full);
  padding:7px 15px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.chip-filtro:hover { border-color:var(--azul-400); color:var(--azul-600); }
.chip-filtro.activo { background:var(--grad-primario); color:#fff;
  border-color:transparent; box-shadow:var(--sh-primario); }

/* ---------- Editor de lineas de documento ---------- */
.lineas td { white-space:normal; padding:8px 10px; vertical-align:middle; }
.lineas input { padding:7px 9px; }
.lineas .num-input { width:96px; text-align:right; font-variant-numeric:tabular-nums; }
.lineas .buscador { min-width:240px; }
.lineas .importe { font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:13px;
  color:var(--slate-700); white-space:nowrap; }
.lineas thead th { position:sticky; top:0; z-index:2; }   /* encabezado fijo al desplazar */
.doc-totales { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* Formulario de documento a pantalla alta: solo las lineas se desplazan; los
   datos del encabezado y el pie con totales y acciones quedan siempre visibles. */
.modal-card.alta { height:min(92vh, calc(var(--alto-visible) - 24px)); display:flex; flex-direction:column; }
.modal-card.alta .modal-body { flex:1; min-height:0; display:flex; flex-direction:column; padding-bottom:0; }
.form-doc { display:flex; flex-direction:column; flex:1; min-height:0; }
.lineas-cab { display:flex; align-items:center; gap:10px; margin:10px 0 8px; }
.lineas-cab h3 { margin:0; font-size:13px; font-weight:600; color:var(--slate-700); }
.lineas-cab .spacer { flex:1; }
/* Tres columnas en el encabezado del documento: con dos, los cinco campos
   ocupaban tres filas y le robaban altura al editor de líneas. */
.form-doc > .form-grid:not(.bloque-cuotas) { grid-template-columns:repeat(3, 1fr); }
/* El desplazamiento vive SOLO aqui: si .tabla-wrap conservara su overflow
   habria dos barras y el encabezado pegajoso no tendria contra que fijarse. */
.lineas-scroll { flex:1; min-height:120px; overflow:auto;
  border:1px solid var(--linea); border-radius:var(--r-xl); background:#fff; }
.lineas-scroll .tabla-wrap { overflow:visible; border:none; border-radius:0; }
/* Totales y botones comparten fila: apilados gastaban ~60px de alto que en una
   tablet en horizontal salen directamente de las líneas visibles. */
.doc-pie { position:sticky; bottom:0; background:#fff; padding:10px 0 14px;
  border-top:1px solid var(--linea); margin-top:10px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; }
.doc-pie .form-actions { margin-top:0; }
.doc-pie .doc-totales { margin:0; }

/* ---------- Mapa de calor (patron dia × hora) ---------- */
.heatmap { display:grid; gap:3px; }
.hm-hora { font-size:10px; color:var(--slate-400); text-align:center; font-variant-numeric:tabular-nums; }
.hm-dia { font-size:11px; font-weight:600; color:var(--slate-500); display:flex; align-items:center; }
.hm-celda { height:24px; border-radius:4px; background:var(--slate-100); }

/* ============================================================================
   Modo captura (a-pantalla): en tablet y móvil el editor de documentos toma
   toda la pantalla. Recupera los márgenes del modal, el borde y las esquinas
   —unos 60px de alto— justo donde el teclado los hace escasear. En escritorio
   la regla no aplica y el modal se sigue viendo como ventana.
   ============================================================================ */
@media (max-width:1023px) {
  .modal.a-pantalla { padding:0; place-items:stretch; }
  /* Nada que ver detrás y nada que cerrar por error tocando fuera */
  .modal.a-pantalla .modal-backdrop { display:none; }
  .modal.a-pantalla > .modal-card {
    width:100%; max-width:none; border:none; border-radius:0;
    max-height:var(--alto-visible); }
  .modal.a-pantalla .modal-head { padding:10px 16px; }
  .modal.a-pantalla .modal-head h2 { font-size:15px; }
}
/* En tablet se conserva el reparto fijo: encabezado, líneas desplazables y pie.
   En móvil no se toca: allí todo el contenido se desplaza junto (ver más abajo). */
@media (min-width:641px) and (max-width:1023px) {
  .modal.a-pantalla > .modal-card.alta {
    height:var(--alto-visible); display:flex; flex-direction:column; }
  .modal.a-pantalla .modal-card.alta .modal-body { padding:12px 16px 0; }
  /* Los márgenes negativos hacen que el pie cubra todo el ancho: sin ellos el
     contenido se vería pasar por los costados al desplazar. */
  .modal.a-pantalla .doc-pie { margin:8px -16px 0;
    padding:8px 16px calc(8px + env(safe-area-inset-bottom)); }
}

/* Pantallas de poca altura (tablet en horizontal, portátiles pequeños): el
   editor de documentos aprovecha cada píxel vertical para mostrar más líneas.
   Se recortan márgenes y rellenos, nunca los objetivos táctiles. */
@media (min-width:641px) and (max-height:860px) {
  .modal-card.alta { height:min(96vh, calc(var(--alto-visible) - 16px)); }
  .modal-head { padding:12px 20px; }
  .modal-card.alta .modal-body { padding:14px 20px 0; }
  .form-doc .form-grid { gap:10px; }
  .form-doc .form-grid label { font-size:10px; }
  .form-doc .form-grid input, .form-doc .form-grid select { margin-top:3px; }
  .form-doc .bloque-cuotas { margin-top:10px; }
  .lineas-cab { margin:8px 0 6px; }
  .doc-pie { padding:8px 0 10px; margin-top:8px; }
  .doc-pie .chip { padding:5px 12px; min-width:0; }
  .lineas td { padding:5px 10px; }
}

/* ============================================================================
   Responsive — tablet y móvil
   El sidebar se convierte en drawer deslizante controlado por body.menu-abierto.
   ============================================================================ */
@media (max-width:1023px) {
  .app { grid-template-columns:1fr; }
  .btn-menu { display:grid; }
  .sidebar { position:fixed; inset:0 auto 0 0; width:276px; max-width:82vw; z-index:60;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:none; padding-top:calc(22px + env(safe-area-inset-top)); }
  body.menu-abierto .sidebar { transform:none; box-shadow:var(--sh-lg); }
  .nav-backdrop { position:fixed; inset:0; z-index:55; background:rgba(2,6,23,.5);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; pointer-events:none; transition:opacity .25s; }
  body.menu-abierto .nav-backdrop { display:block; opacity:1; pointer-events:auto; }
  .topbar { padding:12px 16px; }
  .vista { padding:18px 16px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
}

@media (max-width:640px) {
  /* Cada filtro pasa a ser UNA fila que se desliza de lado. Envueltos, "Tipo"
     ocupaba tres renglones y, con "Estado" debajo, la tabla empezaba fuera de
     la pantalla. Va por ancho y no por (pointer:coarse): en una tablet táctil
     de 768px caben de sobra en una línea y no hay nada que desplazar. */
  .chips-scroll { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; }
  .chips-scroll::-webkit-scrollbar { display:none; }

  .form-grid { grid-template-columns:1fr; }
  .form-grid label.col-2 { grid-column:auto; }
  .modal { padding:0; align-items:end; }
  .modal-card { width:100%; max-height:94vh; border-radius:20px 20px 0 0; }
  /* .ancha tiene más especificidad que la regla de arriba: hay que anularla
     explícitamente o el modal intentaría medir 860px. */
  .modal-card.ancha { width:100%; }
  .modal-head { padding:14px 18px; }
  .modal-body { padding:18px; }
  .toolbar input[type="search"] { max-width:none; flex:1 1 100%; order:2; }
  .toolbar .spacer { display:none; }
  /* Los desplegables de filtro comparten fila en vez de ocupar una cada uno */
  .toolbar select { flex:1 1 140px; width:auto; }

  .topbar { padding:10px 14px; }
  .topbar h1 { font-size:17px; }
  /* En un teléfono la barra solo tiene sitio para el título y la empresa: el
     usuario se sacrifica antes que el dato de en qué empresa se está. */
  .usuario-info { display:none; }
  .empresa-top-lbl { display:none; }
  .empresa-top-nombre { max-width:11ch; font-size:13px; }
  /* El título cede espacio primero: la empresa no debe partirse ni desplazar
     el botón de cambiar fuera de la pantalla. */
  .topbar h1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .vista { padding:14px 12px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }

  /* ---------- Tablas como tarjetas ----------
     Una tabla de 7 columnas no se lee en un teléfono ni desplazándola. Cada
     fila pasa a ser una tarjeta y cada celda una línea "etiqueta → valor",
     tomando la etiqueta del atributo data-label que ponen los módulos. */
  .tabla-wrap { border:none; background:none; overflow:visible; }
  .tabla-wrap table, .tabla-wrap thead, .tabla-wrap tbody,
  .tabla-wrap tr, .tabla-wrap td { display:block; width:100%; }
  .tabla-wrap thead { display:none; }
  .tabla-wrap tr {
    background:#fff; border:1px solid var(--linea); border-radius:var(--r-xl);
    margin-bottom:10px; padding:6px 0; }
  .tabla-wrap tbody tr:hover { background:#fff; }
  .tabla-wrap td {
    display:flex; align-items:baseline; justify-content:space-between; gap:14px;
    white-space:normal; border-bottom:none; padding:5px 14px; text-align:left; }
  .tabla-wrap td::before {
    content:attr(data-label);
    flex:none; font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--slate-400); }
  .tabla-wrap td:not([data-label])::before { content:none; }
  .tabla-wrap td.num { font-family:var(--mono); }
  /* El dato identificador encabeza la tarjeta, sin etiqueta */
  .tabla-wrap td.celda-principal {
    font-weight:650; font-size:15px; padding-top:9px; padding-bottom:7px; }
  .tabla-wrap td.celda-principal::before { content:none; }
  /* El botón de acción ocupa el ancho, al pie de la tarjeta */
  .tabla-wrap td.celda-accion { padding-top:9px; }
  .tabla-wrap td.celda-accion .btn { width:100%; justify-content:center; }
  .tabla-wrap td.empty { justify-content:center; padding:28px 14px; }
  .paginacion { flex-wrap:wrap; justify-content:space-between; gap:8px; }

  /* ---------- Documento en móvil ----------
     En escritorio el modal tiene alto fijo y solo se desplazan las líneas. En un
     teléfono ese reparto no cabe: los campos del encabezado consumen casi toda
     la pantalla y el editor se queda sin sitio. Aquí se desactiva el alto fijo y
     todo el contenido se desplaza junto, con el pie siempre visible. */
  .modal-card.alta { height:auto; max-height:calc(var(--alto-visible) - 12px); display:block; }
  .modal-card.alta .modal-body { display:block; padding:18px; }
  .form-doc { display:block; }
  .lineas-scroll { overflow:visible; border:none; min-height:0; padding:0; }

  /* Editor de líneas: cada línea es una tarjeta con sus campos etiquetados */
  .lineas .buscador, .lineas .num-input { min-width:0; width:100%; }
  .lineas td[data-label="Producto"] { flex-direction:column; align-items:stretch; gap:5px; }
  .lineas td { padding:6px 12px; }

  /* El pie queda pegado al fondo del modal: "Guardar" siempre alcanzable.
     Los márgenes negativos lo hacen cubrir todo el ancho del cuerpo, para que
     el contenido no se vea pasar por los costados al desplazar. */
  /* En móvil el pie vuelve a apilarse: no caben totales y botones en una fila */
  .doc-pie { margin:0 -18px; padding:12px 18px calc(8px + env(safe-area-inset-bottom));
    flex-direction:column; align-items:stretch; gap:10px; }
  .doc-totales { justify-content:flex-start; }

  /* Acciones de cualquier modal: a lo ancho y apiladas, con la principal abajo
     (es la zona que alcanza el pulgar) */
  .form-actions { flex-direction:column; align-items:stretch; gap:8px; }
  .form-actions .btn { width:100%; justify-content:center; }

  /* ---------- Panel ---------- */
  /* Dos KPIs por fila: uno solo obligaría a desplazar siete pantallas */
  .kpi-grid { grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .kpi { padding:14px; border-radius:var(--r-xl); }
  /* En celular la tarjeta baja a ~131px útiles (dos por fila), así que los
     escalones de longitud tienen que ser más agresivos que en escritorio. */
  .kpi .val { font-size:21px; }
  .kpi .val-sm { font-size:17px; }
  .kpi .val-xs { font-size:15px; }
  .kpi .lbl { font-size:10px; }
  .kpi .sub { font-size:11px; }
  .kpi-top { margin-bottom:9px; }
  .kpi-ic { width:28px; height:28px; }
  .kpi-ic svg { width:15px; height:15px; }

  .card { padding:14px; margin-bottom:12px; }
  .grid-2 { gap:12px; }
  .chart-box { height:240px; }

  /* El mapa de calor conserva un tamaño legible y se desplaza dentro del panel */
  .heatmap-scroll { overflow-x:auto; }
  .heatmap { min-width:520px; }
}

/* Pantallas tactiles: objetivos de toque comodos y sin zoom de iOS en inputs */
@media (pointer:coarse) {
  input,select { font-size:16px; min-height:44px; }
  .btn { min-height:42px; }
  .btn-sm { min-height:36px; }
  .chip-filtro { min-height:42px; padding:8px 18px; }
  .nav-item { padding:12px 14px; min-height:44px; }
  .empresa-btn { min-height:52px; }
  th,td { padding:13px 16px; }
}
.sub-titulo { margin:18px 0 10px; font-size:13px; font-weight:600; color:var(--slate-700); }
.bloque-cuotas { margin-top:14px; }
/* Encabezado plegado: resumen en una línea, tocable para volver a abrirlo */
.cab-resumen { font-size:13px; font-weight:600; color:var(--slate-700);
  background:var(--slate-50); border:1px solid var(--linea); border-radius:var(--r-lg);
  padding:9px 14px; margin-bottom:4px; cursor:pointer; }
.cab-resumen:hover { border-color:var(--azul-500); color:var(--azul-600); }

.chips-doc { margin-bottom:12px; }
.chips-doc .chip { padding:5px 12px; min-width:0; }
.aviso-panel { font-size:12px; color:var(--texto-2); margin:-6px 0 16px; }