/* =====================================================================
   Temas globales. Se eligen en /admin/ → General → Tema y el servidor
   pone <html data-theme="…">. Sin data-theme = Kietol (style.css).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) KIETOL — naranja + azul marino (valores base de style.css)
   --------------------------------------------------------------------- */
:root:not([data-theme]) .tile.total::after,
[data-theme="kietol"] .tile.total::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent);
}
:root:not([data-theme]) .claim .calc,
[data-theme="kietol"] .claim .calc { border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; }
:root:not([data-theme]) .pending,
[data-theme="kietol"] .pending { border-left: 4px solid var(--accent); }

/* ---------------------------------------------------------------------
   2) ORO — azul marino y oro, en relieve
   --------------------------------------------------------------------- */
[data-theme="oro"] {
  --gold-1: #8a6a1f; --gold-2: #d9b45a; --gold-3: #f6e3a6;
  --gold-text: linear-gradient(180deg, #f6e3a6 0%, #d9b45a 45%, #8a6a1f 100%);
  --gold-coin: radial-gradient(circle at 35% 30%, #f6e3a6, #d9b45a 48%, #8a6a1f 100%);
  --accent: #b08a2e; --accent-deep: #8a6a1f; --accent-soft: #f6eedb;
  --btn-bg: linear-gradient(180deg, #ecd185 0%, #c99f40 55%, #a57d26 100%);
  --btn-bg-hover: linear-gradient(180deg, #f3dc98 0%, #d3aa4a 55%, #ae862c 100%);
  --btn-ink: #2b1f05;
  --btn-shadow: 0 6px 16px rgba(138, 106, 31, .28), inset 0 1px 0 rgba(255, 255, 255, .55);
  --total-note: rgba(246, 227, 166, .72);
  --grand: #e3c06a;
  --heading-accent: #9a7420;
  --brand-glow: 0 0 24px rgba(217, 180, 90, .5);
  --warn-bg: #fbf8ef; --warn-ink: #7a5b14;
}
[data-theme="oro"] .tile-ic { background: var(--accent-soft); color: var(--gold-1); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(138, 106, 31, .18); }
[data-theme="oro"] .tile.total {
  background: linear-gradient(145deg, #1b3a5e 0%, #102339 55%, #0b1a2c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 10px 24px rgba(16, 35, 57, .28), 0 2px 0 #0a1626;
}
[data-theme="oro"] .tile.total::before {
  content: ""; position: absolute; inset: 6px; border-radius: 10px; border: 1px solid rgba(217, 180, 90, .55); pointer-events: none;
}
[data-theme="oro"] .tile.total::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .07) 48%, transparent 56%);
}
[data-theme="oro"] .tile.total .label { color: rgba(246, 227, 166, .78); }
[data-theme="oro"] .tile.total .value {
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45));
}
[data-theme="oro"] .tile.total .tile-ic {
  border-radius: 50%; background: var(--gold-coin); color: #3b2a06; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(255, 255, 255, .6), 0 2px 6px rgba(0, 0, 0, .35);
}
[data-theme="oro"] .block,
[data-theme="oro"] .claim { box-shadow: inset 0 1px 0 #fff, 0 2px 0 #e9edf2, 0 8px 18px rgba(16, 35, 57, .05); }
[data-theme="oro"] .claim .calc { background: #eef1f5; box-shadow: inset 0 1px 3px rgba(16, 35, 57, .16), 0 1px 0 #fff; }
[data-theme="oro"] .claim .calc b { color: var(--gold-1); }
[data-theme="oro"] .pending {
  position: relative; background: #fbf8ef; border: 1px solid #ead9a6;
  box-shadow: inset 0 0 0 4px #fbf8ef, inset 0 0 0 5px rgba(217, 180, 90, .45);
}
[data-theme="oro"] .pending .sub,
[data-theme="oro"] .pending .lead { padding-right: 76px; }
[data-theme="oro"] .pending::after {
  content: "?"; position: absolute; top: 14px; right: 16px; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font: 700 26px var(--font); color: #3b2a06; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  background: var(--gold-coin);
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, .25), inset 0 3px 3px rgba(255, 255, 255, .55), 0 3px 8px rgba(0, 0, 0, .18),
              inset 0 0 0 5px rgba(246, 227, 166, .35);
}
[data-theme="oro"] .pending li { border-bottom-color: rgba(138, 106, 31, .3); }
[data-theme="oro"] .totals {
  position: relative; background: linear-gradient(145deg, #1b3a5e 0%, #102339 55%, #0b1a2c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 10px 24px rgba(16, 35, 57, .22);
}
[data-theme="oro"] .totals::before {
  content: ""; position: absolute; inset: 7px; border-radius: 11px; border: 1px solid rgba(217, 180, 90, .45); pointer-events: none;
}
[data-theme="oro"] .totals dd.grand {
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="oro"] .lang-switch button[aria-pressed="true"],
[data-theme="oro"] .chip[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--gold-2); }
[data-theme="oro"] .login-icon { border-radius: 50%; background: var(--gold-coin); color: #3b2a06; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), inset 0 2px 2px rgba(255,255,255,.6), 0 3px 8px rgba(0,0,0,.2); }

/* ---------------------------------------------------------------------
   3) ATARDECER — degradado naranja → magenta → azul
   --------------------------------------------------------------------- */
[data-theme="atardecer"] {
  --grad: linear-gradient(110deg, #f07415 0%, #d9445f 50%, #2c6493 100%);
  --grad-soft: linear-gradient(110deg, rgba(240, 116, 21, .55), rgba(217, 68, 95, .35), rgba(44, 100, 147, .45));
  --grad-text: linear-gradient(90deg, #ffb27a, #ff8aa0 55%, #9cc4ea);
  --accent: #e0533a; --accent-deep: #b8364f; --accent-soft: #fdeee9;
  --btn-bg: var(--grad);
  --btn-bg-hover: linear-gradient(110deg, #f58a33 0%, #e25a73 50%, #3a77aa 100%);
  --btn-shadow: 0 8px 18px rgba(217, 68, 95, .26);
  --total-note: rgba(255, 255, 255, .65);
  --grand: #ff9e7a;
  --heading-accent: #d9445f;
  --bar: var(--grad);
  --warn-bg: linear-gradient(135deg, #fff3ea 0%, #fbeef2 50%, #edf3fa 100%);
  --warn-ink: #8f2f45;
}
[data-theme="atardecer"] .tile-ic { background: var(--accent-soft); color: var(--accent-deep); }
[data-theme="atardecer"] .tile.total {
  border: 2px solid transparent;
  background: linear-gradient(#102339, #102339) padding-box, var(--grad) border-box;
  box-shadow: 0 12px 26px rgba(16, 35, 57, .25);
}
[data-theme="atardecer"] .tile.total::after {
  content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(217, 68, 95, .35), transparent 65%);
}
[data-theme="atardecer"] .tile.total .value,
[data-theme="atardecer"] .totals dd.grand { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="atardecer"] .tile.total .tile-ic { border-radius: 12px; }
[data-theme="atardecer"] .block h2 .k { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="atardecer"] .claim { border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad-soft) border-box; }
[data-theme="atardecer"] .claim .calc { background: linear-gradient(90deg, rgba(240, 116, 21, .10), rgba(44, 100, 147, .10)); }
[data-theme="atardecer"] .pending { border: 1px solid #f1d9d4; }
[data-theme="atardecer"] .pending .sub { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="atardecer"] .pending li { border-bottom: 1px solid rgba(217, 68, 95, .15); }
[data-theme="atardecer"] .totals { position: relative; border: 2px solid transparent; background: linear-gradient(#102339, #102339) padding-box, var(--grad) border-box; }
[data-theme="atardecer"] .login-page[data-brand]::before {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 14px rgba(217, 68, 95, .35));
}
[data-theme="atardecer"] .login-card input { border-bottom-color: #d9445f; }

/* ---------------------------------------------------------------------
   4) AZULGRANA — azul #004D98, grana #A50044 y oro, sin rayas
   --------------------------------------------------------------------- */
[data-theme="azulgrana"] {
  --bg: #f4f6fa; --ink: #0d1b3e; --ink-2: #3c4a68; --muted: #6c7896; --line: #dfe4ee; --line-strong: #c9d1e0;
  --navy: #0b1f45; --navy-2: #004d98;
  --blue: #004d98; --blue-soft: #e2ecf7; --bar: #004d98; --bar-track: #e6ebf3;
  --accent: #a50044; --accent-deep: #8a0039; --accent-soft: #f7e1ea;
  --or: #edbb00;
  --btn-bg: #a50044; --btn-bg-hover: #8f003b; --btn-ink: #ffffff;
  --btn-shadow: 0 8px 18px rgba(165, 0, 68, .25);
  --total-value: #edbb00; --total-note: #f3d36b; --grand: #edbb00;
  --heading-accent: #a50044;
  --brand-glow: 0 0 22px rgba(165, 0, 68, .3);
  --warn-bg: #f8edf2; --warn-ink: #7a0f3a;
}
[data-theme="azulgrana"] .tile.total { background: linear-gradient(120deg, #0b1f45 0%, #004d98 100%); }
[data-theme="azulgrana"] .tile.total .tile-ic { border-radius: 50%; background: var(--accent); color: var(--or); box-shadow: 0 0 0 2px var(--or); }
[data-theme="azulgrana"] .tile.total .value { text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
[data-theme="azulgrana"] .claim .calc { background: var(--accent-soft); color: #5b1530; }
[data-theme="azulgrana"] .claim .calc b { color: var(--accent); }
[data-theme="azulgrana"] .pending { border: 1px solid #ecd3de; }
[data-theme="azulgrana"] .pending li em { color: var(--blue); font-weight: 700; }
[data-theme="azulgrana"] .totals { background: linear-gradient(120deg, #0b1f45 0%, #004d98 100%); }
[data-theme="azulgrana"] .ledger td.cat span { color: var(--blue); }
[data-theme="azulgrana"] .login-icon { border-radius: 50%; box-shadow: 0 0 0 3px var(--or); }

/* El PDF conserva fondos y degradados */
@media print {
  [data-theme] .tile.total, [data-theme] .totals, [data-theme] .claim, [data-theme] .pending, [data-theme] .claim .calc {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}