/* ══════════════════════════════════════════════════════════════
   ARRIVO SMART — theme.css
   Tokens de marca compartidos por todo el portal (login, dashboard…).
   Colócalo en /static/theme.css y enlázalo en cada template:
     <link rel="stylesheet" href="/static/theme.css">

   Nota CSP / producción: hoy Manrope viene de Google Fonts (@import abajo).
   Para self-hostear: descarga los .woff2 a /static/fonts y reemplaza el
   @import por @font-face apuntando a /static/fonts (elimina la dependencia
   externa y permite una CSP estricta).
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Marca */
  --magenta:#D946EF;
  --violet:#A855F7;
  --lime:#84CC16;

  /* Superficies (tema oscuro) */
  --bg:#0B0F1A;
  --surface:#111627;
  --surface-2:#0E1322;
  --elevated:#151B2E;
  --line:#1F2937;
  --line-bright:#2C3850;

  /* Texto */
  --text:#F8FAFC;
  --muted:#94A3B8;
  --faint:#5C6B7A;

  /* Acentos funcionales */
  --grad:linear-gradient(135deg,#E879F9,#A855F7);
  --magenta-soft:rgba(217,70,239,.16);
  --ok:#84CC16;       /* entregado / activo */
  --warn:#E0A458;     /* pendiente / suspendido */
  --err:#F472B6;      /* error / fallido */

  /* Tipografía y forma */
  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:14px;
}

/* Base */
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* Marca reutilizable (wordmark en SemiBold para UI) */
.brand-wm{font-weight:600;letter-spacing:.005em;}
.brand-wm .smart{color:var(--lime);font-weight:500;}

/* ── Tema claro (toggle) — la marca se mantiene; cambian superficies/texto ── */
[data-theme="light"]{
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --surface-2:#F1F5F9;
  --elevated:#FFFFFF;
  --line:#E2E8F0;
  --line-bright:#CBD5E1;
  --text:#0F172A;
  --muted:#64748B;
  --faint:#94A3B8;
}

/* ══════════════════════════════════════════════════════════════
   PICO BRAND THEMING  (added — Arrivo Smart)
   Overrides Pico's default azure accent + surfaces so the plain
   admin pages (clients, users, audit, forms, transactions…) match
   the brand. theme.css loads AFTER pico.min.css → wins on cascade.
   Declared under [data-theme=...] to beat Pico's per-theme rules.
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"],[data-theme="light"]{
  /* accent → magenta / secondary → violet */
  --pico-primary-background:#D946EF;
  --pico-primary-hover-background:#C026D3;
  --pico-primary-border:#D946EF;
  --pico-primary-hover-border:#C026D3;
  --pico-primary-inverse:#fff;
  --pico-primary-focus:rgba(217,70,239,.375);
  --pico-secondary-background:#7C3AED;
  --pico-secondary-hover-background:#6D28D9;
  --pico-secondary-border:#7C3AED;
  --pico-secondary-hover-border:#6D28D9;
  --pico-secondary-inverse:#fff;
  --pico-secondary-focus:rgba(168,85,247,.35);
  /* text + surfaces → theme-aware brand tokens */
  --pico-color:var(--text);
  --pico-h1-color:var(--text);--pico-h2-color:var(--text);--pico-h3-color:var(--text);
  --pico-h4-color:var(--text);--pico-h5-color:var(--text);--pico-h6-color:var(--text);
  --pico-muted-color:var(--muted);
  --pico-muted-border-color:var(--line);
  --pico-card-background-color:var(--surface);
  --pico-card-border-color:var(--line);
  --pico-card-sectioning-background-color:var(--surface-2);
  --pico-form-element-background-color:var(--surface-2);
  --pico-form-element-border-color:var(--line-bright);
  --pico-form-element-color:var(--text);
  --pico-form-element-active-background-color:var(--surface-2);
  --pico-form-element-active-border-color:#D946EF;
  --pico-form-element-focus-color:#D946EF;
  --pico-table-border-color:var(--line);
  --pico-table-row-stripped-background-color:rgba(148,163,184,.05);
  --pico-code-background-color:var(--surface-2);
  --pico-code-color:var(--muted);
  --pico-mark-background-color:var(--magenta-soft);
  --pico-mark-color:var(--text);
  --pico-text-selection-color:var(--magenta-soft);
}
/* link / outline accent per theme (contrast) */
[data-theme="dark"]{ --pico-primary:#E879F9; --pico-primary-underline:rgba(232,121,249,.4); --pico-secondary:#C4B5FD; }
[data-theme="light"]{ --pico-primary:#A21CAF; --pico-primary-underline:rgba(162,28,175,.4); --pico-secondary:#7C3AED; }

/* brand focus ring on buttons/links */
:where(button,[type=submit],[type=button],a[role=button]):focus-visible{
  box-shadow:0 0 0 .15rem rgba(217,70,239,.4);
}

/* ── status chips (brand, theme-aware) ── */
.st{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.74rem;
    font-weight:700;line-height:1.55;border:1px solid transparent;white-space:nowrap}
.st-ok  {color:#84CC16;background:rgba(132,204,22,.14);border-color:rgba(132,204,22,.30)}
.st-bad {color:#F23E5C;background:rgba(242,62,92,.13);border-color:rgba(242,62,92,.32)}
.st-warn{color:#D97706;background:rgba(245,165,36,.15);border-color:rgba(245,165,36,.34)}
.st-mut {color:var(--muted);background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.26)}
[data-theme="dark"] .st-warn{color:#F5A524}

/* ══════════════════════════════════════════════════════════════
   COMPACT CONTENT SCALE  ·  paridad de densidad con Messages/WABAs
   ----------------------------------------------------------------
   Las páginas con <style> propio (messages, wabas, dashboard,
   pricing_import, client_pricing) cargan DESPUÉS de theme.css en
   {% block head %} y siguen ganando — este bloque NO las toca.
   Solo afecta a las páginas planas (clients, balance, users, audit,
   security, forms) que heredaban los tamaños grandes de Pico.
   Valores calcados de table.msg / .msg-filters / .msg-pagehead.
   ══════════════════════════════════════════════════════════════ */

/* Pico inflaba el font-size base en pantallas anchas (≥1280/1536px):
   por eso el <h2> y las tablas salían gigantes. Lo fijamos a 100%. */
:root{ --pico-font-size:100% !important; }

.as-content{ font-size:13.5px; line-height:1.55; }

/* Títulos — h2 = header de página (parity .msg-pagehead h1 = 23/800/-.03em) */
.as-content h2{ font-size:23px; font-weight:800; letter-spacing:-.03em; line-height:1.15; margin:0 0 18px; }
.as-content h3{ font-size:15px; font-weight:700; letter-spacing:-.01em; margin:1.5rem 0 .7rem; }
.as-content h4,.as-content h5{ font-size:13px; margin:.8rem 0 .5rem; }
.as-content hgroup{ margin-bottom:18px; }
.as-content hgroup>*{ margin:0; }
.as-content p{ margin:0 0 .8rem; }
.as-content hr{ margin:1.2rem 0; }

/* Tablas densas (parity table.msg: 12.5px; th 10px uppercase; td 10px 12px) */
.as-content figure{ margin:0 0 1rem; border-radius:14px; overflow-x:auto; }
.as-content table{ font-size:12.5px; margin:0; }
.as-content thead th{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.as-content tbody td{ padding:10px 12px; vertical-align:middle; }
.as-content tbody td small{ font-size:11px; }

/* Controles de formulario compactos (parity .msg-filters: 12.5px, 8px 12px) */
.as-content :is(select,input:not([type=checkbox]):not([type=radio]),textarea){
  font-size:12.5px; padding:8px 12px; border-radius:10px; margin-bottom:.15rem; }
.as-content select{ padding-right:34px; }   /* deja sitio al chevron de Pico */
.as-content label{ font-size:12px; font-weight:600; color:var(--muted); margin-bottom:.3rem; }
.as-content label > :is(select,input,textarea){ margin-top:.3rem; }
.as-content small{ font-size:11px; color:var(--muted); }

/* Botones / links-as-button compactos (los del chrome viven fuera de .as-content) */
.as-content :is(button,a[role=button],input[type=submit]){ font-size:12.5px; padding:8px 16px; }

/* Cards (article) apretadas; el monto de balance queda prominente */
.as-content article{ padding:1rem 1.15rem; margin-bottom:1rem; border-radius:14px; }
.as-content article > header{ font-size:13px; margin-bottom:.5rem; }
.as-content article h3{ font-size:26px; margin:.15rem 0; letter-spacing:-.02em; }

/* Paginación */
.as-content nav ul{ font-size:12px; }
.as-content nav small{ font-size:11.5px; }