/* PRUEBA «modo claro con más color y profundidad». Solo afecta al tema claro.
   Para volver atrás: borra este archivo y su <link> en index.html (y su línea en service-worker.js). */
:root[data-theme="light"] {
  --bg: #f1f4f7; --tint-a: rgb(251 59 30 / .07); --tint-b: rgb(10 90 133 / .08);
  --edge: rgb(0 27 43 / .07); --edge-top: rgb(255 255 255 / 0);
  --shadow-1: 0 1px 2px rgb(0 27 43 / .04), 0 6px 20px rgb(0 27 43 / .06);
  --shadow-2: 0 14px 34px rgb(0 27 43 / .11), 0 3px 8px rgb(0 27 43 / .05);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #f1f4f7; --tint-a: rgb(251 59 30 / .07); --tint-b: rgb(10 90 133 / .08);
  --edge: rgb(0 27 43 / .07); --edge-top: rgb(255 255 255 / 0);
  --shadow-1: 0 1px 2px rgb(0 27 43 / .04), 0 6px 20px rgb(0 27 43 / .06);
  --shadow-2: 0 14px 34px rgb(0 27 43 / .11), 0 3px 8px rgb(0 27 43 / .05);
} }

/* Franja de color de las tarjetas: solo en claro (en oscuro queda apagada). */
:root[data-theme="light"], :root:not([data-theme="dark"]) { --lp-band: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lp-band: 0; } }
:root[data-theme="dark"] { --lp-band: 0; }

/* Tarjetas del inicio: franja fina de color arriba según su área */
.home-card:not(.is-quiet) { position: relative; overflow: hidden; }
.home-card:not(.is-quiet)::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: var(--lp-band, 0); background: linear-gradient(90deg, var(--tone, var(--hot)), color-mix(in srgb, var(--tone, var(--hot)) 30%, transparent) 60%, transparent); pointer-events: none; }
.home-card[aria-labelledby="home-critical-h"] { --tone: var(--c-stock); }
.home-card[aria-labelledby="home-today-h"] { --tone: var(--c-sunat); }

/* Accesos rápidos: el icono lleva un degradado suave de su tono (en claro) */
:root[data-theme="light"] .quick-icon { background: linear-gradient(145deg, var(--tone-bg, var(--hot-soft)), color-mix(in srgb, var(--tone, var(--hot)) 18%, var(--surface))); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .quick-icon { background: linear-gradient(145deg, var(--tone-bg, var(--hot-soft)), color-mix(in srgb, var(--tone, var(--hot)) 18%, var(--surface))); } }
:root[data-theme="light"] .quick-card.quick-scan .quick-icon { background: linear-gradient(135deg, var(--hot), var(--hot-strong)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .quick-card.quick-scan .quick-icon { background: linear-gradient(135deg, var(--hot), var(--hot-strong)); } }