/* ============================================================
   MI CÍRCULO VIRTUOSO · Design tokens v1 (julio 2026)
   Fuente canónica de la identidad visual de la marca.
   Módulos que lo consumen: landing, El Dinero y La Agenda.
   Cada app guarda una copia en static/tokens.css — si cambias algo aquí,
   sincroniza esas copias.
   ============================================================ */

:root {
  /* ---- Paleta de marca ---- */
  --cv-gold: #9c7c2c;          /* dorado principal (botones, acentos) */
  --cv-gold-dark: #7f631d;     /* dorado hover / énfasis */
  --cv-gold-soft: #d6bc71;     /* dorado suave (pestañas de la agenda, degradados */
  --cv-amber: #de9336;         /* ámbar Unique: acento secundario en superficies (barras, anillos, ahorro) */
  --cv-amber-deep: #b06f1e;    /* ámbar profundo: cuando el acento es texto o lleva texto blanco encima */
  --cv-sage: #dfe9df;          /* verde salvia: cabeceras de tabla (agenda) */
  --cv-cream: #faf8f2;         /* fondo general */
  --cv-ink: #26221a;           /* texto principal */

  /* ---- Semánticos (los que usan los componentes) ---- */
  --bg: var(--cv-cream);
  --card: #ffffff;
  --text: var(--cv-ink);
  --muted: #7a7260;
  --border: #e8e0cc;
  --accent: var(--cv-gold);
  --accent-dark: var(--cv-gold-dark);
  --accent-2: var(--cv-amber-deep);
  --gold-soft: var(--cv-gold-soft);
  --sage: var(--cv-sage);
  --brand-gradient: linear-gradient(135deg, #e6d49c 0%, #b3924a 100%);
  --green: #1e9e5a;            /* positivo / dentro de presupuesto */
  --red: #d64545;              /* negativo / excedido */
  --savings: var(--cv-amber);  /* ahorro */

  /* ---- Tipografía ---- */
  /* Titulares: EB Garamond (serif, como la agenda impresa).
     Cuerpo: Open Sans. Cargar desde Google Fonts:
     https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700
     https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap */
  --font-display: "EB Garamond", Georgia, serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Forma ---- */
  --radius: 14px;              /* tarjetas, diálogos */
  --radius-s: 8px;             /* botones, inputs */
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, .25);  /* diálogos, tarjeta de login */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1913;
    --card: #272217;
    --text: #f1ece0;
    --muted: #a99f8a;
    --border: #3c3524;
    --accent: #a8873a;
    --accent-dark: #bf9f4e;
    --accent-2: #e6a34f;
    --gold-soft: #c9a84c;
    --sage: #39413a;
    --brand-gradient: linear-gradient(135deg, #6e5a26 0%, #a8873a 100%);
    --savings: #de9336;
  }
}

/* ============================================================
   Componentes base (prefijo cv-) — para la guía y módulos nuevos.
   Cada módulo define los suyos equivalentes con estas mismas variables.
   ============================================================ */

.cv-btn {
  border: none; border-radius: var(--radius-s); padding: .55rem 1rem;
  background: var(--accent); color: #fff; font-size: .9rem; cursor: pointer;
  font-family: var(--font-body);
}
.cv-btn:hover { background: var(--accent-dark); }
.cv-btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }
.cv-btn--ghost:hover { background: rgba(127, 127, 127, .08); }

.cv-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem;
}

.cv-title { font-family: var(--font-display); letter-spacing: .02em; color: var(--text); }

.cv-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.cv-bar > .fill { height: 100%; background: var(--green); border-radius: 3px; }
.cv-bar > .fill.over { background: var(--red); }
.cv-bar > .fill.savings { background: var(--savings); }

.cv-th { background: var(--sage); color: var(--text); font-weight: 600; font-size: .8rem; }

.cv-header-strip {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--accent), var(--gold-soft)) 1;
}