/* Ajustes por theme sobre la base común. */
/* ============================================================
   PER-THEME OVERRIDES
   ============================================================ */

/* ---- Rosa (la dulce) ---- */
body[data-theme="rosa"] .progress-fill-pagado{ background:linear-gradient(90deg,#E05A9B,#C0396B); }
body[data-theme="oceano"] .progress-fill-pagado{ background:linear-gradient(90deg,#0C2D48,#2E8BC0); }

/* ---- Celeste grid (cuaderno pastel): retro windows ---- */
body[data-theme="celeste"] .win,
body[data-theme="celeste"] .hero{ border:2px solid var(--lav); border-radius:20px; box-shadow:0 6px 14px rgba(122,111,168,.22); }
body[data-theme="celeste"] .win-bar{ background:var(--pink); margin:0; padding:9px 16px; border-bottom:2px solid var(--lav); }
body[data-theme="celeste"] .win-body{ background:var(--cream); padding:14px 18px; }
body[data-theme="celeste"] .card .win-body{ gap:12px; }

/* ---- Dark lime (retro nocturno) — terminal windows, fuentes retro ---- */
body[data-theme="dark"]{ --shadow:0 8px 0 rgba(0,0,0,.5); }
/* fonts: Space Grotesk cuerpo · Archivo titulares · Caveat script */
body[data-theme="dark"] *{ font-family:'Space Grotesk',sans-serif; }
body[data-theme="dark"] h1,
body[data-theme="dark"] .app-header h1,
body[data-theme="dark"] .page-title h1{ font-family:'Archivo',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.01em; color:#EFEBDD; }
/* window frame */
body[data-theme="dark"] .win,
body[data-theme="dark"] .hero{ border:2.5px solid #111; border-radius:18px; box-shadow:0 8px 0 rgba(0,0,0,.55); color:#161616; }
body[data-theme="dark"] .win-body,
body[data-theme="dark"] .hero{ background:var(--cream); color:#161616; }
/* title bar: light pink, black traffic dots, Caveat window name */
body[data-theme="dark"]{ --wb-dot:radial-gradient(circle at center, transparent 0 3px, #161616 3.1px 4.4px, transparent 4.5px); }
body[data-theme="dark"] .win-bar{ background:var(--pink); color:#161616; margin:0; padding:10px 14px; border-bottom:2.5px solid #111; position:relative; }
body[data-theme="dark"] .win-bar::before{ color:#161616; }
body[data-theme="dark"] .win-bar::after{ border-color:#161616; background:#EFEBDD; }
body[data-theme="dark"] .win-bar > span{ font-family:'Caveat',cursive; font-weight:700; font-size:18px; line-height:1; color:#161616; }
body[data-theme="dark"] .win-bar .btn{ font-family:'Space Grotesk',sans-serif; }
/* rows */
body[data-theme="dark"] .item-row{ background:#fff; border:2px solid #161616; color:#161616; }
/* el contorno negro va en el wrap (que es el que redondea) y no en el .swipe-fg:
   sobre el fg las esquinas se las comería el recorte y al abrir la bandeja
   dejaría una línea en el medio */
body[data-theme="dark"] .swipe-fg{ background:#fff; color:#161616; }
body[data-theme="dark"] .swipe-wrap{ border:2px solid #161616; }
body[data-theme="dark"] .item-desc,
body[data-theme="dark"] .item-amt,
body[data-theme="dark"] .hero-val,
body[data-theme="dark"] .sum-card .val{ color:#161616; }
/* inputs: --ink en este theme es crema, así que sobre el fondo claro del
   campo el texto tipeado quedaba invisible */
body[data-theme="dark"] .inp,
body[data-theme="dark"] select.inp,
body[data-theme="dark"] textarea.inp{ background:#fff; color:#161616; border-color:#161616; }
body[data-theme="dark"] .inp::placeholder,
body[data-theme="dark"] textarea.inp::placeholder{ color:#8a8570; }
body[data-theme="dark"] .inp:focus{ border-color:#88a827; }
body[data-theme="dark"] .inp option{ background:#fff; color:#161616; }
/* readable muted / accents on cream */
body[data-theme="dark"] .muted,
body[data-theme="dark"] .item-meta,
body[data-theme="dark"] .hero-lbl,
body[data-theme="dark"] .m-lbl,
body[data-theme="dark"] .sum-card .lbl2,
body[data-theme="dark"] .dolar-chip .t,
body[data-theme="dark"] .lbl{ color:#6b6650; }
body[data-theme="dark"] .hero-sub{ color:#8a6d1e; }
body[data-theme="dark"] .icon-btn{ color:#161616; opacity:.85; }
/* buttons: dark text on fills */
body[data-theme="dark"] .btn{ background:var(--cream2); color:#161616; border-color:#111; }
body[data-theme="dark"] .btn-l,
body[data-theme="dark"] .btn-pink{ background:var(--pink); color:#161616; border-color:#111; }
body[data-theme="dark"] .btn-mint{ background:#C8F04B; color:#161616; border-color:#111; }
/* filters (dentro de card crema) */
body[data-theme="dark"] .filter-btn{ color:#161616; border-color:#c9c3ac; background:transparent; }
body[data-theme="dark"] .filter-btn.active{ background:#161616; color:#C8F04B; border-color:#161616; }
/* sum-cards & dolar chips */
body[data-theme="dark"] .sum-card{ border:2px solid #161616; }
body[data-theme="dark"] .dolar-chip{ color:#161616; border:2px solid #161616; }
body[data-theme="dark"] .hero-mini > div{ border:2px solid #161616; }
/* progress con rayas lima */
body[data-theme="dark"] .progress-track{ border:2px solid #161616; background:#dcd6c2; }
body[data-theme="dark"] .progress-fill-pagado{ background:repeating-linear-gradient(45deg,#C8F04B 0 10px,#b3d93e 10px 20px); }

/* ---- Pixel michi (kawaii retro): hard shadow windows ---- */
body[data-theme="pixel"]{ --shadow:5px 6px 0 rgba(217,106,147,.35); }
body[data-theme="pixel"] .win,
body[data-theme="pixel"] .hero{ border:3px solid var(--lav); border-radius:16px; box-shadow:5px 6px 0 rgba(217,106,147,.35); }
body[data-theme="pixel"] .win-bar{ background:var(--mint); color:var(--purple-dark); margin:0;
  padding:8px 14px; border-bottom:3px solid var(--lav); letter-spacing:.06em; }
body[data-theme="pixel"] .win-body{ background:#fff; }
body[data-theme="pixel"] .item-row,
body[data-theme="pixel"] .swipe-fg{ background:#fff; }
body[data-theme="pixel"] .btn,
body[data-theme="pixel"] .tab{ border-radius:10px; border-width:2.5px; border-color:var(--lav); box-shadow:3px 4px 0 rgba(217,106,147,.3); }
body[data-theme="pixel"] .nav-fab{ border-radius:14px; }

/* ---- Tinta (Notion-sobrio) ---- */
body[data-theme="tinta"]{ --shadow:none; --radius:10px; --win-border:1px; }
body[data-theme="tinta"] .win,
body[data-theme="tinta"] .hero{ box-shadow:none; border:1px solid var(--lav-light); border-radius:10px; }
body[data-theme="tinta"] .win-bar{ background:var(--cream2); border-bottom:1px solid var(--lav-light); }
body[data-theme="tinta"] .win-bar::after{ border-radius:6px; border-width:1px; }
body[data-theme="tinta"] .btn,
body[data-theme="tinta"] .tab,
body[data-theme="tinta"] .filter-btn,
body[data-theme="tinta"] .chip,
body[data-theme="tinta"] .dolar-chip{ border-radius:8px; }
body[data-theme="tinta"] .btn{ border-width:1px; }
body[data-theme="tinta"] .item-row{ background:transparent; border-bottom:1px solid var(--lav-light); border-radius:0; }
/* el .swipe-fg tapa la bandeja de acciones: NO puede ser transparente */
body[data-theme="tinta"] .swipe-fg{ background:var(--cream); border-bottom:1px solid var(--lav-light); border-radius:0; }
/* filas rectas: si el wrap redondea, por las esquinas se asoma la bandeja */
body[data-theme="tinta"] .swipe-wrap{ border-radius:0; }
body[data-theme="tinta"] .sum-card{ border:1px solid var(--lav-light); }
/* tinta es sobria: los importes van en tinta, no en color */
body[data-theme="tinta"] .sum-card .val{ color:var(--ink); }
body[data-theme="tinta"] .sum-card .lbl2{ color:var(--muted); }
body[data-theme="tinta"] .sum-card .val.neg{ color:var(--red-dark); }
body[data-theme="tinta"] .progress-track{ border-radius:3px; height:6px; }
body[data-theme="tinta"] .progress-fill-pagado{ background:var(--purple-dark); }
body[data-theme="tinta"] h1,body[data-theme="tinta"] h2,body[data-theme="tinta"] h3,
body[data-theme="tinta"] .win-bar,body[data-theme="tinta"] .hero-val,
body[data-theme="tinta"] .item-amt,body[data-theme="tinta"] .sum-card .val{ font-weight:700; }

/* ---- Yellow (crema y mostaza): amarillo, azul noche y negro ----
   El amarillo es un fondo claro, así que en todos los lugares donde la base
   pone texto blanco sobre --lav hay que pasarlo a negro. */
body[data-theme="yellow"]{ --shadow:0 8px 22px rgba(18,16,12,.07); }
body[data-theme="yellow"] .win,
body[data-theme="yellow"] .prog-card{ border-color:#EFCE72; }
body[data-theme="yellow"] .win-bar{ border-bottom-color:#EFCE72; }
body[data-theme="yellow"] .btn-mint,
body[data-theme="yellow"] .tab.active,
body[data-theme="yellow"] .filter-btn.active,
body[data-theme="yellow"] .swipe-tray .sw-mover{ color:#12100C; }
body[data-theme="yellow"] .month-card.active{ border-color:#E0A200; }
body[data-theme="yellow"] .month-card.active .mc-name,
body[data-theme="yellow"] .month-card.active .mc-val,
body[data-theme="yellow"] .month-card.active .mc-lbl{ color:#12100C; }
/* "Te queda" en azul noche, como las barras del presupuesto de la referencia */
body[data-theme="yellow"] .sum-card.is-queda .val{ color:#1D3A8A; }
body[data-theme="yellow"] .sum-card.is-queda .val.neg{ color:#C62828; }

/* ---- Índigo (limpio y vivo): blanco, violeta y azul noche ---- */
body[data-theme="indigo"]{ --shadow:0 10px 30px rgba(16,23,54,.08); --radius:26px; }
body[data-theme="indigo"] .win,
body[data-theme="indigo"] .prog-card{ border-color:#EFEFF6; }
body[data-theme="indigo"] .win-bar{ border-bottom-color:#EFEFF6; }
/* la tarjeta del mes activo va en degradé, como el saldo de la referencia */
body[data-theme="indigo"] .month-card.active{
  background:linear-gradient(135deg,#7C3AED,#A78BFA); border-color:transparent;
  box-shadow:0 8px 20px rgba(109,40,224,.28);
}
body[data-theme="indigo"] .quick-actions .qa{ border-color:#EAE6FB; }
body[data-theme="indigo"] .swipe-tray .sw-dup{ color:#101736; }

/* ---- Malva (fintech suave): blush, violeta profundo, malva y mostaza ---- */
body[data-theme="malva"]{ --shadow:0 10px 26px rgba(61,17,82,.10); }
body[data-theme="malva"] .win,
body[data-theme="malva"] .prog-card{ border-width:2px; }
body[data-theme="malva"] .win-bar{ border-bottom-width:2px; }
/* "Te queda" en azul petróleo, como las tarjetas de la referencia */
body[data-theme="malva"] .sum-card.is-queda .val{ color:#2C5F7C; }
body[data-theme="malva"] .sum-card.is-queda .val.neg{ color:#A83E6B; }
body[data-theme="malva"] .swipe-tray .sw-dup{ background:#CBDDE7; color:#24506A; }

/* ---- Carbón (negro y rojo) ----
   A diferencia de Dark lime, acá las superficies también son oscuras y --ink
   es claro, así que casi todo funciona sin parches. Sólo hace falta ajustar
   los pocos lugares donde una variable se usa como fondo y como texto. */
body[data-theme="carbon"]{ --shadow:0 10px 26px rgba(0,0,0,.5); }
body[data-theme="carbon"] .win,
body[data-theme="carbon"] .prog-card{ border-color:#2A2C33; }
/* --peach es el naranja del progreso; de fondo de tarjeta iría demasiado fuerte */
body[data-theme="carbon"] .sum-card.is-pend{ background:#3B2913; border-color:#3B2913; }
body[data-theme="carbon"] .sum-card.is-queda .val{ color:#3FBF6F; }
body[data-theme="carbon"] .sum-card.is-queda .val.neg{ color:#FF6168; }
/* las categorías son pasteles claros: el texto de la pastilla va oscuro */
body[data-theme="carbon"] .pill-cat{ color:#17181C; }
/* el rojo queda reservado para Borrar; Mover va en grafito */
body[data-theme="carbon"] .swipe-tray .sw-mover{ background:#3A3E48; }
body[data-theme="carbon"] .swipe-tray .sw-dup{ color:#FF7B84; }
body[data-theme="carbon"] .swipe-tray .sw-edit{ background:#2E6F4A; }
body[data-theme="carbon"] .theme-swatch{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
/* el velo de los modales es violeta por defecto: acá va negro */
body[data-theme="carbon"] .modal-overlay{ background:rgba(0,0,0,.64); }

/* ---- Marfil (editorial chic) ---- */
body[data-theme="marfil"] .win,
body[data-theme="marfil"] .hero{ border:none; box-shadow:0 8px 22px rgba(25,25,25,.08); }
body[data-theme="marfil"] .win-bar{ background:var(--cream2); border-bottom:1px solid var(--lav-light); }
body[data-theme="marfil"] .btn-l{ background:#191919; color:#FAF3E3; border-color:#191919; }
body[data-theme="marfil"] .tab.active{ background:#191919; border-color:#191919; color:#FAF3E3; }
body[data-theme="marfil"] .tab.add{ background:#EAF0F9; color:#191919; }
body[data-theme="marfil"] .btn-mint{ background:#191919; border-color:#191919; color:#FAF3E3; }
body[data-theme="marfil"] .filter-btn.active{ background:#191919; border-color:#191919; color:#FAF3E3; }
body[data-theme="marfil"] .bottom-nav .nav-item{ color:#FAF3E3; }
body[data-theme="marfil"] .bottom-nav .nav-item.active{ color:#F4A8D0; }

/* ---- Dark lime: bloques nuevos (meses, nota, resumen, progreso, themes) ---- */
body[data-theme="dark"] .month-card{ border-color:#161616; color:#161616; }
body[data-theme="dark"] .month-card .mc-name,
body[data-theme="dark"] .month-card .mc-lbl{ color:#6b6650; }
body[data-theme="dark"] .month-card.active .mc-name,
body[data-theme="dark"] .month-card.active .mc-val,
body[data-theme="dark"] .month-card.active .mc-lbl{ color:#161616; }
body[data-theme="dark"] .month-card.add{ background:transparent; border-color:#3a3a3a; color:#EFEBDD; }
body[data-theme="dark"] .mes-nota{ border-color:#3a3a3a; color:#EFEBDD; }
body[data-theme="dark"] .quick-actions .qa{ border-color:#111; color:#161616; }
body[data-theme="dark"] .sum-card .val,
body[data-theme="dark"] .sum-card .lbl2{ color:#161616; }
body[data-theme="dark"] .sum-card.is-queda{ background:#C8F04B; }
body[data-theme="dark"] .prog-card{ background:var(--cream); border:2.5px solid #111; }
body[data-theme="dark"] .prog-card .pc-lbl{ color:#6b6650; }
body[data-theme="dark"] .prog-card .pc-pct{ color:#161616; }
body[data-theme="dark"] .prog-card .pc-legend{ color:#6b6650; }
/* la card de config es crema: el texto del selector va oscuro, no --ink */
body[data-theme="dark"] .theme-swatch{ border-color:#161616; }
body[data-theme="dark"] .theme-card.active .theme-swatch{ border-color:#161616; box-shadow:inset 0 0 0 1px rgba(0,0,0,.10), 0 0 0 3px #C8F04B; }
body[data-theme="dark"] .theme-swatch .tcheck{ background:#161616; color:#C8F04B; }
body[data-theme="dark"] .theme-card .tname{ color:#161616; }
body[data-theme="dark"] .theme-card.soon .theme-swatch{ border-color:#6b6650; color:#161616; }
body[data-theme="dark"] .home-search .hs-ic{ color:#6b6650; }

/* ---- Dark lime: chrome sobre fondo oscuro (tabs + nav) ---- */
body[data-theme="dark"] .tab{ background:transparent; color:#EFEBDD; border-color:#3a3a3a; }
body[data-theme="dark"] .tab.active{ background:#C8F04B; color:#161616; border-color:#111; }
body[data-theme="dark"] .tab.add{ background:#F49BD4; color:#161616; border-color:#111; }
body[data-theme="dark"] .bottom-nav .nav-item{ color:#EFEBDD; }
body[data-theme="dark"] .bottom-nav .nav-item.active{ color:#C8F04B; }

/* ---- Tinta: chrome ---- */
body[data-theme="tinta"] .tab.active,
body[data-theme="tinta"] .filter-btn.active{ background:#37352F; border-color:#37352F; }