/* ════════════════════════════════════════════════════════════
   PIOLA · theme.css — Sistema de color unificado
   Única fuente de verdad para colores y tipografías de TODA la app.
   Anclado en Ultra Violet #6A00F4 + Soft Apricot #FFD6A5.
   Contrastes verificados WCAG AA/AAA (claro y oscuro).

   Modo CLARO por defecto (:root). Modo OSCURO con
   <html data-theme="dark">. Se definen tanto los nombres nuevos
   (--violet, --line, --dim...) como los históricos que ya usan
   los módulos (--accent, --border, --muted...) apuntando a los
   mismos valores, así todo queda consistente sin tocar módulos.
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&family=DM+Mono:wght@400;500&display=swap');

:root, :root[data-theme="light"] {
  color-scheme: light;   /* scrollbars, date pickers y selects nativos en claro */
  /* NEUTRALES */
  --bg:#F4F1EC; --surface:#FFFFFF; --surface2:#FBF9F6; --surface3:#F2EEE8;
  --surface-2:#FBF9F6; --surface-3:#F2EEE8;
  --border:#E7E2DB; --line:#E7E2DB; --line-strong:#D8D2C9;
  --text:#251C36; --muted:#6B6478; --dim:#6B6478; --muted2:#A39CAF; --mute:#A39CAF;
  /* VIOLETA — Ultra Violet */
  --violet:#6A00F4; --violet-ink:#5200BD; --violet-hover:#5A00D0;
  --violet-soft:#F1E7FE; --violet-line:#E0CCFB;
  --accent:#6A00F4; --accent-text:#5200BD;
  /* APRICOT — Soft Apricot */
  --apricot:#FFD6A5; --apricot-ink:#A85D00; --apricot-strong:#FF9F45;
  --apricot-soft:#FFF3E4; --apricot-line:#FBE1BE; --orange:#A85D00;
  /* SEMANTICOS */
  --success:#0E8046; --success-soft:#E3F5EB; --success-line:#C8EBD8;
  --danger:#D63A4E;  --danger-soft:#FBEAED;  --danger-line:#F3D8DD; --danger-ink:#C0273C;
  --warn:#8F5500;    --warn-soft:#FCEFD8;    --warn-line:#F3DEBB;
  --info:#5200BD;    --info-soft:#F1E7FE;
  --celeste-ink:#1B6E96; --celeste-soft:#EAF6FB; --celeste-line:#CFE8F3;
  --col-fin:#A01F60;
  /* SISTEMA */
  --radius:18px; --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(37,27,54,.05);
  --shadow:0 1px 2px rgba(37,27,54,.04),0 10px 30px rgba(37,27,54,.07);
  --shadow-lift:0 10px 24px rgba(37,27,54,.10);
  --shadow-pop:0 12px 40px rgba(37,27,54,.16);
  --ring:0 0 0 3px rgba(106,0,244,.25);
  --font-body:'Nunito Sans',sans-serif; --font-display:'Montserrat',sans-serif; --font-mono:'DM Mono',monospace;
  --f-body:'Nunito Sans',sans-serif; --f-display:'Montserrat',sans-serif; --f-mono:'DM Mono',monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;    /* scrollbars, date pickers y selects nativos en oscuro (07/09) */
  /* NEUTRALES */
  --bg:#161222; --surface:#1E1830; --surface2:#26203A; --surface3:#2E2745;
  --surface-2:#26203A; --surface-3:#2E2745;
  --border:#352C4B; --line:#352C4B; --line-strong:#443A5E;
  --text:#F1ECFA; --muted:#B4ABC6; --dim:#B4ABC6; --muted2:#847C99; --mute:#847C99;
  /* VIOLETA */
  --violet:#9A5CFF; --violet-ink:#C4A2FF; --violet-hover:#A970FF;
  --violet-soft:#241C3A; --violet-line:#3A2E5C;
  --accent:#7C3AFF; --accent-text:#C4A2FF;
  /* APRICOT */
  --apricot:#FFD6A5; --apricot-ink:#FFC078; --apricot-strong:#FF9F45;
  --apricot-soft:#2E2416; --apricot-line:#4A3A22; --orange:#FFC078;
  /* SEMANTICOS */
  --success:#4ECB84; --success-soft:#173A2A; --success-line:#1F5138;
  --danger:#FF7A8A;  --danger-soft:#3A1E24;  --danger-line:#54303A; --danger-ink:#FF8FA3;
  --warn:#E0A758;    --warn-soft:#332616;    --warn-line:#4A3A22;
  --info:#C4A2FF;    --info-soft:#241C3A;
  --celeste-ink:#57C8FF; --celeste-soft:#16303C; --celeste-line:#1F4456;
  --col-fin:#FF6FA6;
  /* SISTEMA */
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.25),0 12px 36px rgba(0,0,0,.4);
  --shadow-lift:0 12px 28px rgba(0,0,0,.45);
  --shadow-pop:0 16px 44px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(154,92,255,.35);
}

/* ════════════════════════════════════════════════════════════
   COMPONENTES CANÓNICOS — misma lógica para todos los módulos.
   Botón CTA (acción "agregar/crear/nuevo"): relleno apricot +
   texto oscuro. --on-apricot es el texto legible sobre apricot.
   ════════════════════════════════════════════════════════════ */
:root, :root[data-theme="light"], :root[data-theme="dark"] { --on-apricot:#3a2200; }

.btn-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--apricot); color:var(--on-apricot);
  border:1px solid var(--apricot-line); border-radius:8px;
  padding:9px 18px; font-family:var(--font-body); font-weight:700; font-size:13px;
  cursor:pointer; transition:background .18s ease, transform .12s ease;
}
.btn-cta:hover{ background:var(--apricot-strong); }
.btn-cta:active{ transform:translateY(1px); }

/* ════════════ Scrollbars — sutiles y theme-aware (claro/oscuro) ════════════ */
*{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted2); }
::-webkit-scrollbar-corner{ background:transparent; }