/* ============================================================
   Invictia · Design Tokens (shared source of truth)
   Rediseño UX v1.0 — Bricolage Grotesque + Inter,
   paper #F5F4EF · ink #16162C · sun #FFC83D.
   Load this BEFORE any layout's inline <style> so its rules
   can be repointed to these vars. Retires the purple/gold theme.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- Core palette (canonical, from the reference HTMLs) ---- */
  --ink:#16162C;   --ink2:#23233C;
  --sun:#FFC83D;   --sun2:#C9870F;  --sun3:#FCF3DE;  --sun4:#F1E4BC;
  --paper:#F5F4EF; --white:#FFFFFF; --line:#E8E6DE;  --line2:#D8D5CA;
  --muted:#6C6C7E; --muted2:#9A9AA8;
  --red:#DC4C4C;   --red2:#FBEBEA;
  --green:#3C8C6E; --green2:#EAF4EF;
  --blue:#3A5BCC;  --blue2:#E9EEFB;
  --wa:#1FA855;

  /* ---- Radii ---- */
  --r:18px; --r2:12px; --r3:10px;

  /* ---- Typography ---- */
  --font-brand:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- Back-compat aliases ----
     Existing layouts/components reference these older names; mapping
     them here recolors most of the app for free. The inline :root in
     each layout should also be repointed, but these are the safety net. */
  --primary:var(--sun);
  --primary-2:var(--sun2);
  --primary-soft:rgba(255,200,61,.12);
  --accent:var(--sun);

  /* Sidebar (dark ink) */
  --sidebar:var(--ink);
  --sidebar-active-bg:rgba(255,200,61,.16);
  --sidebar-active-border:var(--sun);

  /* Page / text aliases */
  --page-bg:var(--paper);
  --text:var(--ink);
  --text-muted:var(--muted);
}

/* ---- Brand helpers (opt-in) ---- */
.font-brand{font-family:var(--font-brand)!important;letter-spacing:-.015em}
.font-body{font-family:var(--font-body)!important}

/* ============================================================
   Captura en lenguaje natural (barra + toast con Deshacer)
   ============================================================ */
.inv-capture-wrap{margin:0 0 16px}
.inv-capture{display:flex;align-items:center;gap:10px;background:var(--white);
  border:1.5px solid var(--line);border-radius:14px;padding:6px 8px 6px 15px;
  box-shadow:0 2px 16px -10px rgba(22,22,44,.22);transition:border-color .13s}
.inv-capture:focus-within{border-color:var(--sun2)}
.inv-capture-ic{color:var(--sun2);flex:0 0 auto;display:flex}
.inv-capture input{flex:1;border:none;outline:none;font-family:var(--font-body);
  font-size:15px;color:var(--ink);background:none;padding:9px 0;min-width:0}
.inv-capture input::placeholder{color:var(--muted2)}
.inv-capture-btn{font-family:var(--font-body);font-size:13.5px;font-weight:700;
  border:none;border-radius:10px;cursor:pointer;padding:9px 15px;
  background:var(--sun);color:var(--ink);transition:background .13s,transform .1s;flex:0 0 auto}
.inv-capture-btn:hover{background:#FFD45E}
.inv-capture-btn:active{transform:translateY(1px)}
.inv-capture-btn[disabled]{opacity:.55;cursor:default}
.inv-capture-hint{font-size:11.5px;color:var(--muted2);margin:8px 4px 0;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inv-capture-hint i{font-style:italic;color:var(--muted)}

.inv-toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#EDEDF2;
  border-radius:14px;padding:13px 16px;font-family:var(--font-body);font-size:13.5px;
  display:none;align-items:center;gap:14px;box-shadow:0 8px 32px -8px rgba(0,0,0,.4);
  z-index:100050;max-width:340px}
.inv-toast.show{display:flex;animation:inv-rise .3s ease}
@keyframes inv-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.inv-toast-ic{color:var(--sun);flex:0 0 auto;display:flex}
.inv-toast-c{flex:1;min-width:0}
.inv-toast-t{font-weight:700;color:#fff}
.inv-toast-s{font-size:12px;color:#9090B0;margin-top:2px}
.inv-toast-undo{background:none;border:none;color:var(--sun);font-weight:700;
  font-size:12.5px;cursor:pointer;white-space:nowrap;flex:0 0 auto;font-family:var(--font-body)}
.inv-toast-undo:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.inv-toast.show{animation:none}}