/* ============================================================================
   ProAir Purchases — ProAirs design system (2026-10-13), replacing PRO 2  (SHARED)
   Loaded on every screen. Holds the canonical tokens, the vendored fonts (OFL,
   no CDN) and the reusable card foundation, extracted from the dashboard so the
   whole app adopts the same look. Navy/steel/leaf/brass, Archivo.

   STEP 1 is foundation-only and must NOT change how anything currently looks:
   · Tokens are published as `--ds-*` on :root. The existing app uses unprefixed
     names (--bg, --ink, …, defined in proair-interfaz.css) so it is untouched.
   · The dashboard (.dash-ds, in dashboard-ds.css) now sources its local tokens
     from these `--ds-*` values — identical hexes, so it renders the same.
   · `.ds-panel` / `.ds-kpi` are reusable classes for the app-wide rollout; no
     element uses them yet.
   ============================================================================ */

/* ---- Fonts (vendored locally, served by nginx — never a CDN) -------------- */
@font-face { font-family: "Archivo"; src: url("vendor/archivo/archivo-latin-standard-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("vendor/archivo/archivo-latin-standard-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face {
  font-family: "Geist Mono";
  src: url("vendor/geist/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---- Canonical tokens (prefixed so they don't disturb the current app) ---- */
:root {
  --ds-bg: #EDF2F6;
  --ds-surface: #FFFFFF;
  --ds-raised: #E4EBF1;
  --ds-line: #D5DBE3;
  --ds-line-strong: #5E7F9F;       /* input / filter / secondary-button borders */
  --ds-ink: #141C33;
  --ds-ink-2: #4D586E;
  --ds-ink-3: #4D586E;             /* never lighter than this */
  --ds-accent: #1E2E56;            /* white text on top */
  --ds-accent-soft: rgba(94, 127, 159, .16);
  --ds-warn: #8F5B0C; --ds-warn-bg: rgba(143, 91, 12, .10);
  --ds-good: #46663A; --ds-good-bg: #E8F0E1;
  --ds-bad: #B23A32;  --ds-bad-bg: rgba(178, 58, 50, .10);
  --ds-month-now: #8F5B0C;         /* current month / highlight in charts */
  --ds-shadow-sm: 0 1px 2px rgba(30, 46, 86, .06);
  --ds-shadow-lg: 0 16px 36px -24px rgba(30, 46, 86, .30);
  --ds-font-display: "Archivo", system-ui, sans-serif;
  --ds-font-ui: "Archivo", system-ui, sans-serif;
  --ds-font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}

/* ---- Reusable card foundation (for the app-wide rollout; unused for now) --- */
.ds-panel {
  background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 20px;
  padding: 22px 24px; box-shadow: var(--ds-shadow-sm), var(--ds-shadow-lg);
}
.ds-kpi {   /* outer bezel */
  position: relative; background: rgba(30, 46, 86, .05); padding: 5px; border-radius: 22px;
  border: 1px solid rgba(20, 24, 32, .05);
}
.ds-kpi-core {   /* inner white core */
  position: relative; background: var(--ds-surface); border-radius: 17px; padding: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; overflow: hidden;
}

/* ============================================================================
   STEP 2 — app-wide common components. Loaded after proair-interfaz.css/app.css
   so these override the old look, using the --ds-* tokens. The dashboard
   (.dash-ds) keeps its own look because dashboard-ds.css loads afterwards.
   Only visual properties change; layout structure is left intact.
   ============================================================================ */

/* ---- 1 · Light sidebar ---------------------------------------------------- */
.sidebar { background: var(--ds-surface); color: var(--ds-ink-2); border-right: 1px solid var(--ds-line); }
.brand { color: var(--ds-ink); }
.brand .mark { background: var(--ds-accent); color: #fff; }
.nav-cat-btn { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--ds-ink-3); }
.nav-cat-btn:hover:not(:disabled) { color: var(--ds-ink); }
.nav-cat.actual .nav-cat-btn { color: var(--ds-ink); }
.nav-cat.actual .nav-ico { color: var(--ds-accent); }
.nav-item { color: var(--ds-ink-2); border-left-color: transparent; }
.nav-item:hover { background: var(--ds-raised); color: var(--ds-ink); }
.nav-item.active { background: var(--ds-accent-soft); color: var(--ds-accent); border-left-color: var(--ds-accent); font-weight: 600; }
.nav-sep { background: var(--ds-line); }
.nav-note { color: var(--ds-ink-3); }
.nav-badge { background: var(--ds-accent-soft); color: var(--ds-accent); font-weight: 600; }   /* soft counter pill */
/* mobile nav (shown < 900px) — keep it light too */
.mnav-cats { border-bottom-color: var(--ds-line) !important; }
.mnav-cat { color: var(--ds-ink-3); }
.mnav-cat.active { color: var(--ds-accent); border-bottom-color: var(--ds-accent) !important; }
.mnav-cat.active .nav-ico { color: var(--ds-accent); }
.mnav-items { background: var(--ds-raised) !important; }
.mnav-item { color: var(--ds-ink-2); }
.mnav-item.active { background: var(--ds-accent); color: #fff; }

/* ---- 2 · Topbar ----------------------------------------------------------- */
.topbar { border-bottom: 1px solid var(--ds-line); }
.topbar .search { border: 1px solid var(--ds-line-strong); border-radius: 10px; color: var(--ds-ink); }
.topbar .search:focus { outline: 2px solid var(--ds-accent); outline-offset: -1px; border-color: var(--ds-accent); }
.who { color: var(--ds-ink-3); }

/* ---- 3 · Tables (scoped to .main; dashboard protected) -------------------- */
.main thead th {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--ds-ink-3);
  border-bottom: 1px solid var(--ds-line); background: var(--ds-surface);
  position: sticky; top: 0; z-index: 1;    /* header stays put while the list scrolls */
}
.main tbody td { height: 52px; padding: 8px 10px; border-bottom: 1px solid var(--ds-line); color: var(--ds-ink); }
.main tbody tr:hover { background: var(--ds-raised); }
.main .num { text-align: right; font-variant-numeric: tabular-nums; }
/* mobile: each row becomes a card */
@media (max-width: 700px) {
  .main .page table, .main .page thead, .main .page tbody, .main .page tr, .main .page td { display: block; }
  .main .page thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .main .page tbody tr { border: 1px solid var(--ds-line); border-radius: 14px; margin-bottom: 10px; padding: 6px 14px; background: var(--ds-surface); box-shadow: var(--ds-shadow-sm); }
  .main .page tbody td { height: auto; border: 0; padding: 5px 0; }
  .main .page .num { text-align: left; }
  /* keep the dashboard's own tables as real tables (not cards) */
  .dash-ds table, .dash-ds thead, .dash-ds tbody, .dash-ds tr, .dash-ds td { display: revert; }
  .dash-ds thead { position: static; width: auto; height: auto; clip: auto; }
  .dash-ds tbody tr { border: 0; border-radius: 0; margin: 0; padding: 0; background: none; box-shadow: none; }
  .dash-ds tbody td { height: auto; padding: 8px 10px; }
}

/* ---- 4 · Buttons ---------------------------------------------------------- */
.btn {
  background: var(--ds-accent); border: 1px solid var(--ds-accent); color: #fff; border-radius: 999px;
  transition: transform .2s cubic-bezier(.32, .72, 0, 1), background .2s;
}
.btn:hover { background: #121C38; border-color: #121C38; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--ds-surface); color: var(--ds-ink); border: 1px solid var(--ds-line-strong); }
.btn.ghost:hover { background: var(--ds-raised); }
.chip { border: 1px solid var(--ds-line-strong); color: var(--ds-ink-2); border-radius: 999px; transition: transform .2s cubic-bezier(.32, .72, 0, 1); }
.chip.on { background: var(--ds-accent); color: #fff; border-color: var(--ds-accent); }
.chip:active { transform: scale(.98); }
@media (max-width: 700px) { .btn, .chip, .mnav-cat, .nav-item { min-height: 44px; } }

/* ---- 5 · Forms ------------------------------------------------------------ */
.field label { color: var(--ds-ink-2); font-weight: 500; }
.field input, .field select, .field textarea, .select {
  border: 1px solid var(--ds-line-strong); border-radius: 9px; color: var(--ds-ink);
}
.field input:focus, .field select:focus, .field textarea:focus, .select:focus {
  outline: 2px solid var(--ds-accent); outline-offset: -1px; border-color: var(--ds-accent);
}
.form-error, .login-error, .field .err { color: var(--ds-bad); font-size: 13px; }

/* ---- 6 · Status badges (text + soft state color, never color alone) ------- */
.pill.ok, .pill.synced { background: var(--ds-good-bg); color: var(--ds-good); }
.pill.warn, .pill.queued { background: var(--ds-warn-bg); color: var(--ds-warn); }
.pill.bad, .pill.review { background: var(--ds-bad-bg); color: var(--ds-bad); }
.pill.progreso { background: var(--ds-accent-soft); color: var(--ds-accent); }
.pill.cerrado { background: var(--ds-raised); color: var(--ds-ink-3); }
.m-ok { color: var(--ds-good); } .m-warn { color: var(--ds-warn); } .m-bad { color: var(--ds-bad); }

/* ---- 7 · Empty & error states --------------------------------------------- */
.empty { color: var(--ds-ink-3); }
.alert { background: var(--ds-bad-bg); color: var(--ds-bad); border-left: 3px solid var(--ds-bad); border-radius: 10px; }
.alert.info { background: var(--ds-warn-bg); color: var(--ds-warn); border-left-color: var(--ds-warn); }

/* ---- 8 · Visible focus ring everywhere ------------------------------------ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ds-accent); outline-offset: 2px;
}

/* links / accents that used the old blue */
.pname, .crumb, .linkout { color: var(--ds-accent); }

/* ============================================================================
   STEP 3 — SAMPLE module: Invoices only (scoped to .v-invoices, the wrapper
   vistaFacturas() renders). Presentation only — no logic/data/endpoint change.
   Template for rolling the look out to the other modules.
   ============================================================================ */
.v-invoices .page-head h1 { font-family: var(--ds-font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ds-ink); }
.v-invoices .page-head .sub { color: var(--ds-ink-2); font-size: 14px; max-width: 70ch; }

/* summary KPI cards */
.v-invoices .cards { gap: 16px; }
.v-invoices .card {
  flex: 1 1 190px; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 16px;
  padding: 18px 20px; box-shadow: var(--ds-shadow-sm), var(--ds-shadow-lg);
}
.v-invoices .card .label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--ds-ink-2); }
.v-invoices .card .value { font-family: var(--ds-font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ds-ink); font-variant-numeric: tabular-nums; margin-top: 4px; }
.v-invoices .card .value.m-warn { color: var(--ds-warn); }
.v-invoices .card .foot { color: var(--ds-ink-3); }

/* invoice gallery cards */
.v-invoices .inv-grid { gap: 16px; }
.v-invoices .inv-card {
  border: 1px solid var(--ds-line); border-radius: 16px; background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm); transition: box-shadow .25s cubic-bezier(.32, .72, 0, 1), transform .25s cubic-bezier(.32, .72, 0, 1);
}
.v-invoices .inv-card:hover { box-shadow: var(--ds-shadow-sm), var(--ds-shadow-lg); border-color: var(--ds-line); transform: translateY(-2px); }
.v-invoices .inv-thumb { background: var(--ds-raised); }
.v-invoices .inv-body { padding: 12px 14px 14px; }
.v-invoices .inv-body .vendor { color: var(--ds-ink); }
.v-invoices .inv-body .amt { color: var(--ds-ink); }
.v-invoices .inv-body .dim { color: var(--ds-ink-3); }

@media (prefers-reduced-motion: reduce) {
  .v-invoices .inv-card { transition: none; }
  .v-invoices .inv-card:hover { transform: none; }
}

/* ===================================================================
   Mobile nav v2 (≤900px) — Raul 2026-10-14
   Finishes the light theme (the generic .mobile-nav rules in proair-interfaz.css
   were dark-theme, #d6d7d9 on light = invisible), adds horizontal scroll-snap,
   a 24px right-edge "there's more" fade, 44px touch targets, and an icon+label
   grid for the six top categories on phones ≤430px. Active tab is centered on
   load by centrarNavActivo() in app.js.
   =================================================================== */
.mobile-nav { background: var(--ds-surface); }
.mobile-nav a { color: var(--ds-ink-3); }                 /* Slate #4D586E — was dark-theme #d6d7d9 */
.mnav-item { color: var(--ds-ink-2); font-weight: 500; }  /* submenu inactive: Slate, weight 500 */

.mnav-scroll { position: relative; }
.mnav-cats, .mnav-items { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mnav-cats::-webkit-scrollbar, .mnav-items::-webkit-scrollbar { display: none; }
.mnav-cat, .mnav-item { scroll-snap-align: start; min-height: 44px; }   /* 44px touch target */
.mnav-item { display: inline-flex; align-items: center; }

/* 24px fade at the right edge, only while there is more to scroll (.more set in JS) */
.mnav-scroll.more::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 24px; pointer-events: none; }
.mnav-scroll.cats.more::after  { background: linear-gradient(to right, rgba(255,255,255,0), var(--ds-surface)); }
.mnav-scroll.items.more::after { background: linear-gradient(to right, rgba(228,235,241,0), var(--ds-raised)); }

/* Phones ≤430px: the six top categories become an icon + short-label grid (no sliding). */
@media (max-width: 430px) {
  .mnav-scroll.cats { overflow: visible; }
  .mnav-cats { display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; }
  .mnav-cat { flex: none; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px;
              font-size: 10px; line-height: 1.1; min-height: 50px; border-bottom-width: 2px; }
  .mnav-cat .nav-ico { width: 21px; height: 21px; }
  .mnav-scroll.cats.more::after { display: none; }   /* no scroll → no fade */
}