/* Estilo "carbón y brasa": relieve suave sobre gris carbón (los botones salen de la pantalla y se
   hunden al tocarlos) y un solo naranja encendido para lo importante. Un solo tema oscuro, a propósito.
   Layout: columna de teléfono (máx. 440px), todo centrado alrededor de una rueda con lo que te queda del
   mes; debajo, ventas por día, tres botones como de reproductor y dos listas. */
:root {
  --fondo: #2a2c31;
  --relieve-luz: #35373d;      /* cara iluminada de los botones */
  --relieve-sombra: #25272b;   /* cara en sombra */
  --hundido: #24262a;
  --texto: #ececf0;
  --suave: #9a9da6;
  --apagado: #5d6068;
  --barra: #3d4047;
  --brasa-1: #ff7a2f;
  --brasa-2: #e8401c;
  --brasa: #ff6a2b;              /* para texto e íconos */
  --ambar: #ffb347;
  --brasa-rgb: 255, 106, 43;     /* el mismo acento, para brillos con transparencia */
  --ambar-rgb: 255, 179, 71;
  --sobre-acento: #ffffff;       /* texto e íconos encima del acento */
  --tinta-rgb: 255, 255, 255;    /* números y monedas del fondo */
  --brasa-grad: linear-gradient(145deg, var(--brasa-1), var(--brasa-2));
  --brillo: 0 8px 22px rgba(var(--brasa-rgb), .45);
  --relieve: -5px -5px 12px rgba(255, 255, 255, .045), 6px 6px 14px rgba(0, 0, 0, .5);
  --relieve-chico: -3px -3px 8px rgba(255, 255, 255, .045), 4px 4px 10px rgba(0, 0, 0, .5);
  --hueco: inset 4px 4px 10px rgba(0, 0, 0, .5), inset -4px -4px 10px rgba(255, 255, 255, .035);
  --halo: 0 0 34px -6px rgba(var(--brasa-rgb), .26);        /* luz naranja por detrás */
  --halo-chico: 0 0 16px -3px rgba(var(--brasa-rgb), .28);

  --letra: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --icons: "Material Symbols Rounded";
  --rebote: cubic-bezier(0.38, 1.21, 0.22, 1.00);
  --rebote-rapido: cubic-bezier(0.42, 1.67, 0.21, 0.90);
  --suavecito: cubic-bezier(0.34, 0.80, 0.34, 1.00);
  color-scheme: dark;
}
/* Personalización: colores de acento que evocan dinero y valor */
:root[data-color="oro"]       { --brasa-1: #f5cf5a; --brasa-2: #c28a1c; --brasa: #f2c14e; --ambar: #ffe9a8; --brasa-rgb: 240, 190, 70;  --ambar-rgb: 255, 233, 168; --sobre-acento: #2a1d00; }
:root[data-color="esmeralda"] { --brasa-1: #2fd08f; --brasa-2: #0a8f5c; --brasa: #3ddc97; --ambar: #b5f5d6; --brasa-rgb: 52, 211, 153;  --ambar-rgb: 181, 245, 214; }
:root[data-color="amatista"]  { --brasa-1: #b07cff; --brasa-2: #6f36d9; --brasa: #b98cff; --ambar: #e0ccff; --brasa-rgb: 160, 110, 255; --ambar-rgb: 224, 204, 255; }
:root[data-color="rubi"]      { --brasa-1: #ff6fb5; --brasa-2: #e0218a; --brasa: #ff72bf; --ambar: #ffc4e1; --brasa-rgb: 255, 95, 175;  --ambar-rgb: 255, 196, 225; }
:root[data-color="zafiro"]    { --brasa-1: #5aa9ff; --brasa-2: #1f5fe0; --brasa: #6cb2ff; --ambar: #c4e0ff; --brasa-rgb: 80, 155, 255;  --ambar-rgb: 196, 224, 255; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: .9375rem; line-height: 1.4; font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Degradado del fondo: luz arriba, un brillo de brasa detrás de la rueda y más oscuro abajo */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 32% at 50% 22%, rgba(var(--brasa-rgb), .13), transparent 70%),
    radial-gradient(130% 55% at 50% 0%, #3b3d44 0%, rgba(59, 61, 68, 0) 65%),
    linear-gradient(180deg, #2d2f35 0%, #24262a 55%, #1a1b1e 100%);
}
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.icon {
  font-family: var(--icons); font-weight: normal; font-style: normal;
  font-size: 1.5rem; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  font-feature-settings: "liga";
  user-select: none;
}
b, .num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brasa); outline-offset: 4px; }

/* Botón redondo con relieve que se hunde al tocarlo */
.bola {
  display: grid; place-items: center; border-radius: 999px;
  background: linear-gradient(145deg, var(--relieve-luz), var(--relieve-sombra)); color: var(--suave);
  box-shadow: var(--relieve-chico), var(--halo-chico);
  transition: box-shadow 160ms var(--suavecito), color 160ms var(--suavecito), transform 160ms var(--suavecito);
}
.bola:active { box-shadow: var(--hueco); color: var(--texto); }
.bola:disabled { opacity: .35; cursor: default; box-shadow: none; }
.brasa { background: var(--brasa-grad); color: var(--sobre-acento); box-shadow: var(--brillo); }
.brasa:active { box-shadow: 0 3px 10px rgba(var(--brasa-rgb), .4); transform: scale(.96); }
.control:active .bola:not(.brasa) { box-shadow: var(--hueco); color: var(--texto); }
.control:active .brasa { box-shadow: 0 3px 10px rgba(var(--brasa-rgb), .4); transform: scale(.96); }

/* ---------- Columna ---------- */
.app {
  max-width: 27.5rem; margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: .75rem 10rem;
  display: flex; flex-direction: column; gap: 1.75rem;
}
.top { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; gap: .75rem; }
.top .bola { width: 2.75rem; height: 2.75rem; position: relative; }
.top .bola .icon { font-size: 1.25rem; }
.titulo { text-align: center; }
.titulo p:first-child { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; color: var(--suave); }
.titulo p:last-child { font-size: .75rem; color: var(--apagado); font-weight: 600; }
.badge {
  position: absolute; top: -.25rem; right: -.25rem;
  min-width: 1.25rem; height: 1.25rem; padding-inline: .25rem; border-radius: 999px;
  background: var(--brasa-grad); color: var(--sobre-acento);
  font-size: .6875rem; line-height: 1.25rem; font-weight: 800; text-align: center;
}

/* ---------- Rueda del mes ---------- */
.mes { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.mes h1 { margin: 0; font-size: 1.625rem; line-height: 1.2; font-weight: 700; text-align: center; }
.rueda-fila { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; gap: .75rem; width: 100%; }
.rueda-fila .bola { width: 2.75rem; height: 2.75rem; }
.rueda {
  justify-self: center; width: min(15rem, 62vw); aspect-ratio: 1; max-width: 100%;
  border-radius: 999px; background: linear-gradient(145deg, var(--relieve-luz), var(--relieve-sombra)); box-shadow: var(--relieve), var(--halo);
  display: grid; place-items: center; padding: .75rem;
}
.rueda-in {
  position: relative; width: 100%; height: 100%; border-radius: 999px;
  box-shadow: var(--hueco); display: grid; place-items: center;
}
.rueda svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pista { fill: none; stroke: var(--barra); stroke-width: 3.2; }
.arco {
  fill: none; stroke: url(#grad-brasa); stroke-width: 3.2; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50px 50px;
  transition: stroke-dasharray 700ms var(--rebote);
}
.perilla { transform-origin: 50px 50px; transition: transform 700ms var(--rebote); }
.perilla circle { fill: var(--ambar); filter: drop-shadow(0 0 3px rgba(var(--ambar-rgb), .9)); }
.centro { position: relative; text-align: center; display: flex; flex-direction: column; gap: .125rem; }
.centro .k { color: var(--suave); font-size: .875rem; font-weight: 600; }
.centro .v { font-size: 2.125rem; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
.centro .v .sign { font-size: 1.125rem; vertical-align: .75em; margin-right: .0625rem; font-weight: 700; }
.centro .p { color: var(--brasa); font-size: .8125rem; font-weight: 700; }

.cifras { display: flex; justify-content: center; gap: 2rem; text-align: center; }
.cifras .k { color: var(--suave); font-size: .8125rem; font-weight: 600; }
.cifras b { display: block; font-size: 1.125rem; font-weight: 800; }
.compara { display: inline-flex; align-items: center; gap: .375rem; color: var(--suave); font-size: .875rem; font-weight: 600; margin-top: -.5rem; }
.compara .icon { font-size: 1.125rem; color: var(--brasa); }
.compara b { color: var(--texto); }

/* ---------- Ventas por día (hueco) ---------- */
.pozo::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: radial-gradient(130% 130% at 100% 100%, var(--brasa) 0%, rgba(var(--brasa-rgb), .45) 18%, transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.pozo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(45% 55% at 100% 100%, rgba(var(--brasa-rgb), .09), transparent 70%);
}
.pozo > * { position: relative; z-index: 1; }
.pozo { position: relative; border-radius: 1.5rem; box-shadow: var(--relieve), var(--halo); background: linear-gradient(145deg, var(--relieve-luz), var(--relieve-sombra)); padding: 1rem 1rem .875rem; display: flex; flex-direction: column; gap: .625rem; }
.pozo-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.pozo-head .k { color: var(--suave); font-size: .8125rem; font-weight: 600; }
.pozo-head .v { font-weight: 700; font-size: .9375rem; text-align: right; }
.pozo-head .v b { font-weight: 800; font-size: 1.125rem; }
.chart { position: relative; height: 5.5rem; touch-action: pan-y; cursor: pointer; }
.bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }
.b { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.col {
  height: var(--h); border-radius: 999px; background: var(--barra);
  transform-origin: bottom;
  transition: transform 500ms var(--rebote) calc(var(--i) * 12ms), background-color 150ms var(--suavecito), box-shadow 150ms;
}
.bars.pre .col { transform: scaleY(0); transition: none; }
.b.on .col { background: linear-gradient(180deg, var(--ambar), var(--brasa-2)); box-shadow: 0 0 10px rgba(var(--brasa-rgb), .55); }
.dot { align-self: center; width: 4px; height: 4px; border-radius: 999px; background: var(--apagado); }
.b.on .dot { background: var(--brasa); }
.eje { display: flex; justify-content: space-between; color: var(--apagado); font-size: .75rem; font-weight: 700; }
.eje span:last-child { color: var(--brasa); }
.detalle { color: var(--suave); font-size: .8125rem; font-weight: 600; }
.detalle b { color: var(--texto); font-weight: 800; }

/* ---------- Tres botones ---------- */
.controles {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; justify-content: center; align-items: flex-start; gap: 1.75rem;
  padding: 1.75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(26, 27, 30, 0), rgba(26, 27, 30, .94) 45%);
}
.control { display: flex; flex-direction: column; align-items: center; gap: .625rem; font-size: .8125rem; font-weight: 700; color: var(--suave); }
.control .bola { width: 3.25rem; height: 3.25rem; margin-top: .75rem; }
.control .bola .icon { font-size: 1.5rem; }
.control.grande .bola { width: 4.75rem; height: 4.75rem; margin-top: 0; }
.control.grande .bola .icon { font-size: 2.25rem; }
.control.grande { color: var(--texto); }

/* ---------- Listas ---------- */
.lista-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.lista-head h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.lista-head h2 span { color: var(--brasa); }
.link { color: var(--suave); font-weight: 700; font-size: .875rem; height: 2.75rem; padding-inline: .5rem; margin-right: -.5rem; border-radius: 999px; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.fila {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem;
  min-height: 4rem; padding: .625rem .75rem .625rem 1rem; border-radius: 1.125rem;
  transition: box-shadow 160ms var(--suavecito), background-color 160ms var(--suavecito);
}
.fila:active { box-shadow: var(--hueco); }
.fila.activa { background: rgba(0, 0, 0, .2); box-shadow: var(--hueco); }
.fila .t1 { display: block; font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .t2 { display: block; color: var(--suave); font-size: .8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .t2 .urge { color: var(--brasa); }
.fila .txt { min-width: 0; }
.fila .mini { width: 2.5rem; height: 2.5rem; }
.fila .mini .icon { font-size: 1.125rem; }
.fila .monto { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fila .monto.entra { color: var(--texto); }
.fila .monto.sale { color: var(--suave); }
.fila .monto.fuera { color: var(--apagado); text-decoration: line-through; }
.desvanece { -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }

/* ---------- Fondo animado (apenas visible) ---------- */
#lluvia { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.probar { display: flex; flex-direction: column; gap: .75rem; align-items: center; text-align: center; padding-top: .5rem; }
.probar p { color: var(--apagado); font-size: .8125rem; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; }
.chip {
  height: 2.5rem; padding-inline: 1rem; border-radius: 999px; font-size: .875rem; font-weight: 700; color: var(--suave);
  background: linear-gradient(145deg, var(--relieve-luz), var(--relieve-sombra)); box-shadow: var(--relieve-chico);
  transition: box-shadow 160ms var(--suavecito), color 160ms var(--suavecito);
}
.chip:active { box-shadow: var(--hueco); }
.chip[aria-pressed="true"] { box-shadow: var(--hueco); color: var(--brasa); background: rgba(0, 0, 0, .18); }

/* ---------- Hoja de la foto del ticket ---------- */
.hoja-fondo { position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity 200ms var(--suavecito); }
.hoja-fondo.show { opacity: 1; pointer-events: auto; }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  max-width: 27.5rem; margin-inline: auto;
  max-height: 92vh; overflow-y: auto;
  padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  border-radius: 1.75rem 1.75rem 0 0;
  background: linear-gradient(160deg, #34363c, #232428);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .5), 0 -2px 30px -8px rgba(var(--brasa-rgb), .35);
  display: flex; flex-direction: column; gap: 1rem;
  transform: translateY(105%); transition: transform 450ms var(--rebote);
}
.hoja.show { transform: none; }
.hoja h2 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.foto { position: relative; height: 13rem; border-radius: 1.125rem; overflow: hidden; box-shadow: var(--hueco); background: #1d1e21; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.escaner {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--ambar), var(--brasa), transparent);
  box-shadow: 0 0 14px 3px rgba(var(--brasa-rgb), .6);
}
.foto.leyendo .escaner { opacity: 1; animation: escanear 1.1s ease-in-out infinite alternate; }
@keyframes escanear { from { top: 4%; } to { top: 94%; } }
.datos { margin: 0; display: flex; flex-direction: column; gap: .125rem; }
.datos div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.datos dt { color: var(--suave); font-weight: 600; }
.datos dd { margin: 0; font-weight: 800; text-align: right; }
.datos dd.urge { color: var(--brasa); }
.nota-hoja { color: var(--apagado); font-size: .8125rem; font-weight: 600; }
.hoja-botones { display: flex; gap: .75rem; }
.hoja-botones .chip { height: 3.25rem; flex: 1; }
.guardar {
  flex: 2; height: 3.25rem; border-radius: 999px; font-weight: 800; font-size: 1rem;
  position: relative; overflow: hidden;
}
.guardar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, .22); }
.guardar.contando i { width: 100%; transition: width 3s linear; }
.guardar span { position: relative; }
.listo { display: flex; flex-direction: column; align-items: center; gap: .625rem; text-align: center; padding-block: .5rem; }
.listo .ok { width: 4rem; height: 4rem; }
.listo .ok .icon { font-size: 2.25rem; }
.listo p { font-size: 1.0625rem; }
.listo .suave { color: var(--suave); font-size: .875rem; font-weight: 600; }
.listo .chips { margin-top: .5rem; }

/* ---------- Personalización ---------- */
.aj-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.aj-cerrar { width: 2.5rem; height: 2.5rem; }
.aj-cerrar .icon { font-size: 1.25rem; }
.aj-grupo { display: flex; flex-direction: column; gap: .75rem; }
.aj-grupo h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.aj-nota { color: var(--suave); font-size: .8125rem; font-weight: 600; margin-top: -.5rem; }
.colores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem .75rem; }
.color { display: flex; flex-direction: column; align-items: center; gap: .625rem; padding-block: .375rem; font-size: .875rem; font-weight: 700; color: var(--suave); border-radius: 1rem; }
.muestra {
  width: 3.25rem; height: 3.25rem; border-radius: 999px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--m1), var(--m2)); color: var(--m-sobre, #fff);
  box-shadow: var(--relieve-chico), 0 0 18px -3px rgba(var(--mrgb), .55);
  transition: transform 250ms var(--rebote-rapido), outline-color 150ms;
  outline: 2px solid transparent; outline-offset: 4px;
}
.muestra .icon { font-size: 1.5rem; opacity: 0; transition: opacity 150ms var(--suavecito); }
.color[aria-pressed="true"] { color: var(--texto); }
.color[aria-pressed="true"] .muestra { transform: scale(1.08); outline-color: rgba(var(--mrgb), .9); }
.color[aria-pressed="true"] .muestra .icon { opacity: 1; }
.color:active .muestra { transform: scale(.94); }

/* ---------- Ajustes: fila hacia Mi régimen ---------- */
.aj-fila {
  width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .875rem;
  padding: .75rem; border-radius: 1.125rem; background: rgba(0, 0, 0, .16); box-shadow: var(--hueco);
}
.aj-fila .bola { width: 2.75rem; height: 2.75rem; color: var(--brasa); }
.aj-fila .t1 { display: block; font-weight: 800; font-size: 1rem; }
.aj-fila .t2 { display: block; color: var(--suave); font-size: .8125rem; font-weight: 600; }
.aj-fila .flecha { color: var(--suave); }
.aj-sep { border: 0; border-top: 1px solid rgba(255, 255, 255, .07); margin: .25rem 0; width: 100%; }

/* ---------- Próxima declaración en Inicio ---------- */
.sat-head { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 700; }

/* ---------- Página Mi régimen ---------- */
.pagina {
  position: fixed; inset: 0; z-index: 25; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #2d2f35 0%, #24262a 55%, #1a1b1e 100%);
  transform: translateX(100%); transition: transform 420ms var(--rebote);
}
.pagina.show { transform: none; }
.pag-in {
  max-width: 27.5rem; margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: calc(.75rem + env(safe-area-inset-top, 0px)) calc(2.5rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 1.5rem;
}
.pag-head { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; gap: .75rem; }
.pag-head .bola { width: 2.75rem; height: 2.75rem; }
.pag-head h2 { margin: 0; text-align: center; font-size: 1.125rem; font-weight: 800; }
.reg-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding-top: 1rem; }
.reg-vacio .grande-ic { width: 5rem; height: 5rem; color: var(--brasa); }
.reg-vacio .grande-ic .icon { font-size: 2.25rem; }
.reg-lead { font-size: 1.0625rem; line-height: 1.45; max-width: 22rem; }
.reg-lead b { color: var(--texto); }
.boton-brasa {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 3.5rem; padding-inline: 1.5rem; border-radius: 999px; font-size: 1rem; font-weight: 800; width: 100%; max-width: 20rem;
}
.reg-nota { color: var(--suave); font-size: .8125rem; font-weight: 600; max-width: 22rem; }
.reg-leyendo { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-top: 3rem; color: var(--suave); font-weight: 700; }
.aro { width: 3rem; height: 3rem; border-radius: 999px; border: 3px solid rgba(255, 255, 255, .08); border-top-color: var(--brasa); animation: girar 900ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.reg-error { color: var(--brasa); font-weight: 700; text-align: center; }
.reg-sec { display: flex; flex-direction: column; gap: .625rem; }
.reg-sec h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.reg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.tarjeta {
  border-radius: 1.25rem; padding: 1rem;
  background: linear-gradient(145deg, var(--relieve-luz), var(--relieve-sombra)); box-shadow: var(--relieve-chico), var(--halo-chico);
  display: flex; flex-direction: column; gap: .375rem;
}
.tarjeta .t1 { font-weight: 800; font-size: 1rem; }
.tarjeta .t2 { color: var(--suave); font-size: .875rem; font-weight: 600; }
.tarjeta .t2 b { color: var(--texto); }
.tarjeta .clave { display: inline-block; margin-right: .375rem; padding: 0 .5rem; border-radius: 999px; background: rgba(var(--brasa-rgb), .16); color: var(--brasa); font-size: .75rem; font-weight: 800; line-height: 1.375rem; }
.tarjeta.urge { box-shadow: var(--relieve-chico), 0 0 22px -4px rgba(var(--brasa-rgb), .55); }
.fecha-top { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.fecha-top .cuando { color: var(--brasa); font-weight: 800; font-size: .875rem; white-space: nowrap; }
.tarjeta .chip { align-self: flex-start; margin-top: .375rem; height: 2.25rem; font-size: .8125rem; }
.sat-texto { color: var(--apagado); font-size: .75rem; font-weight: 600; }
.corto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.corto li { color: var(--suave); font-weight: 600; font-size: .9375rem; padding-left: 1rem; position: relative; }
.corto li::before { content: ""; position: absolute; left: 0; top: .55em; width: .375rem; height: .375rem; border-radius: 999px; background: var(--brasa); }
.corto li b { color: var(--texto); }
.tope { display: flex; flex-direction: column; gap: .375rem; margin-top: .25rem; }
.tope-barra { height: .5rem; border-radius: 999px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.tope-barra i { display: block; height: 100%; border-radius: 999px; background: var(--brasa-grad); width: var(--w); box-shadow: 0 0 10px rgba(var(--brasa-rgb), .6); transition: width 700ms var(--rebote); }
.tope-pie { display: flex; justify-content: space-between; color: var(--suave); font-size: .8125rem; font-weight: 600; }
.reg-legal { color: var(--apagado); font-size: .75rem; font-weight: 600; line-height: 1.5; }
.reg-legal a { color: var(--suave); }

/* ---------- Formularios ---------- */
.hoja.alta { z-index: 31; }
.hoja-fondo.alta { z-index: 30; }
.campo { display: flex; flex-direction: column; gap: .375rem; }
.campo > span { color: var(--suave); font-size: .8125rem; font-weight: 700; }
.campo input {
  height: 3.125rem; border-radius: 1rem; border: 0; padding-inline: 1rem;
  background: rgba(0, 0, 0, .22); box-shadow: var(--hueco); color: var(--texto);
  font: inherit; font-size: 1.0625rem; font-weight: 700;
}
.campo input::placeholder { color: var(--apagado); font-weight: 600; }
.campo input:focus { outline: 2px solid rgba(var(--brasa-rgb), .8); outline-offset: 2px; }
.seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.seg button {
  height: 2.5rem; padding-inline: .875rem; border-radius: 999px; font-size: .875rem; font-weight: 700; color: var(--suave);
  background: linear-gradient(145deg, var(--relieve-luz), var(--relieve-sombra)); box-shadow: var(--relieve-chico);
}
.seg.dias button { width: 2.5rem; padding: 0; }
.seg button[aria-pressed="true"] { color: var(--sobre-acento); background: var(--brasa-grad); box-shadow: 0 0 14px -3px rgba(var(--brasa-rgb), .6); }

/* ---------- Interruptor ---------- */
.switch {
  position: relative; width: 3.25rem; height: 2rem; border-radius: 999px; flex: none;
  background: rgba(0, 0, 0, .3); box-shadow: var(--hueco); transition: background-color 200ms var(--suavecito);
}
.switch::after {
  content: ""; position: absolute; top: .25rem; left: .25rem; width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: linear-gradient(145deg, #4c4f57, #35373d); box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
  transition: transform 300ms var(--rebote-rapido), background 200ms var(--suavecito);
}
.switch[aria-checked="true"] { background: var(--brasa-grad); box-shadow: 0 0 14px -2px rgba(var(--brasa-rgb), .55); }
.switch[aria-checked="true"]::after { transform: translateX(1.25rem); background: #fff; }

/* ---------- Gastos que se repiten ---------- */
.rec-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rec-pie { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-top: .25rem; }
.rec-pie b { font-size: 1.25rem; font-weight: 800; }
.rec-pie span { color: var(--suave); font-size: .8125rem; font-weight: 600; text-align: right; }
.tarjeta.apagada { opacity: .55; }
.rec-editar { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: .25rem; }
.noti .t1 { display: block; font-weight: 800; }
.noti .t2 { display: block; color: var(--suave); font-size: .8125rem; font-weight: 600; }
.pregunta { gap: .5rem; }
.pq-botones { display: flex; gap: .75rem; margin-top: .375rem; }
.pq-botones .chip { flex: 1; height: 3rem; }
.pq-botones .guardar { height: 3rem; }

/* ---------- Ahorro ---------- */
.aho-inicio { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem; }
.aho-inicio .fila { padding-right: .5rem; }
.aho-inicio .mas { width: 3rem; height: 3rem; }
.aho-num { display: flex; align-items: flex-start; gap: .125rem; font-size: 2.5rem; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.aho-num .sign { font-size: 1.25rem; line-height: 1.6; font-weight: 700; }
.aho-botones { display: flex; gap: .75rem; margin-top: .5rem; }
.aho-botones .chip { flex: 1; height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }
.aho-botones .guardar { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }
.lugar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .875rem; }
.lugar .bola { width: 2.5rem; height: 2.5rem; color: var(--brasa); }
.lugar .bola .icon { font-size: 1.25rem; }
.lugar .tope-barra { grid-column: 2 / -1; height: .375rem; }
.lugar b { font-size: 1.0625rem; font-weight: 800; }
.monto.pone { color: var(--texto); }

/* ---------- Notificaciones ---------- */
.aviso-ios { border-radius: 1.25rem; padding: 1rem; background: rgba(var(--brasa-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--brasa-rgb), .35); display: flex; flex-direction: column; gap: .625rem; }
.aviso-ios p { color: var(--texto); font-weight: 600; font-size: .9375rem; }
.aviso-ios .chip { align-self: flex-start; }
.noti { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; }

/* ---------- Modo rosa (Rubí): ciruela oscuro con brillo rosa ---------- */
:root[data-color="rubi"] { --fondo: #2c252a; --relieve-luz: #3a3037; --relieve-sombra: #282126; --hundido: #241e22; --barra: #4a3c46; }
:root[data-color="rubi"] body::before {
  background:
    radial-gradient(60% 32% at 50% 22%, rgba(255, 95, 175, .2), transparent 70%),
    radial-gradient(130% 55% at 50% 0%, #473642 0%, rgba(71, 54, 66, 0) 65%),
    linear-gradient(180deg, #30282e 0%, #261f24 55%, #1b161a 100%);
}
:root[data-color="rubi"] .pagina { background: linear-gradient(180deg, #30282e 0%, #261f24 55%, #1b161a 100%); }
:root[data-color="rubi"] .hoja { background: linear-gradient(160deg, #3b3038, #251f23); }
:root[data-color="rubi"] .controles { background: linear-gradient(180deg, rgba(27, 22, 26, 0), rgba(27, 22, 26, .94) 45%); }

/* ---------- Bienvenida (primera vez) ---------- */
.bienvenida {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  background: linear-gradient(180deg, #2d2f35 0%, #24262a 55%, #1a1b1e 100%);
  opacity: 0; transition: opacity 300ms var(--suavecito);
}
:root[data-color="rubi"] .bienvenida { background: linear-gradient(180deg, #30282e 0%, #261f24 55%, #1b161a 100%); }
.bienvenida.show { opacity: 1; }
.ob-in {
  max-width: 27.5rem; min-height: 100%; margin-inline: auto;
  padding-inline: 1.5rem;
  padding-block: calc(1.5rem + env(safe-area-inset-top, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 1.5rem;
}
.ob-puntos { display: flex; justify-content: center; gap: .375rem; }
.ob-puntos i { width: .5rem; height: .5rem; border-radius: 999px; background: rgba(255, 255, 255, .15); transition: width 300ms var(--rebote-rapido), background 200ms; }
.ob-puntos i.on { width: 1.5rem; background: var(--brasa); box-shadow: 0 0 10px rgba(var(--brasa-rgb), .6); }
.ob-paso { flex: 1; display: flex; flex-direction: column; gap: 1.125rem; justify-content: center; }
.ob-paso[hidden] { display: none !important; }
.ob-ic { width: 4.5rem; height: 4.5rem; align-self: center; color: var(--brasa); }
.ob-ic.brasa { color: var(--sobre-acento); }
.ob-ic .icon { font-size: 2.25rem; }
.ob-titulo { margin: 0; font-size: 1.75rem; line-height: 1.15; font-weight: 800; text-align: center; text-wrap: balance; }
.ob-texto { color: var(--suave); font-size: 1.0625rem; font-weight: 600; text-align: center; }
.ob-lista li { font-size: 1.0625rem; }
.ob-paso .reg-nota { text-align: center; align-self: center; }
.ob-botones { display: flex; gap: .75rem; }
.ob-botones .chip { flex: 1; height: 3.25rem; }
.ob-saltar { align-self: center; }

/* ---------- Guía sobre la pantalla ---------- */
.guia { position: fixed; inset: 0; z-index: 45; }
.guia-hueco {
  position: fixed; border-radius: 1.5rem; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .74), 0 0 0 2px rgba(var(--brasa-rgb), .9), 0 0 26px 4px rgba(var(--brasa-rgb), .5);
  transition: all 380ms var(--rebote);
}
.guia-globo {
  position: fixed; left: 1rem; right: 1rem; max-width: 25.5rem; margin-inline: auto;
  border-radius: 1.25rem; padding: 1rem 1.125rem;
  background: linear-gradient(145deg, var(--relieve-luz), var(--relieve-sombra)); box-shadow: var(--relieve), var(--halo);
  display: flex; flex-direction: column; gap: .75rem;
  transition: top 380ms var(--rebote), bottom 380ms var(--rebote);
}
.guia-globo p { font-size: 1rem; font-weight: 600; line-height: 1.45; }
.guia-pie { display: flex; align-items: center; gap: .75rem; }
.guia-pie span { color: var(--suave); font-size: .8125rem; font-weight: 700; flex: 1; }
.guia-pie .guardar { flex: none; height: 2.75rem; padding-inline: 1.25rem; }

/* ---------- Modo día: el mismo relieve, en gris perla ---------- */
:root[data-modo="dia"] {
  --fondo: #e7e9ef; --hundido: #dde0e7; --texto: #23252b; --suave: #555a66; --apagado: #858a95; --barra: #c6cad3;
  --relieve-luz: #f2f4f8; --relieve-sombra: #d8dbe3;
  --relieve: -6px -6px 14px rgba(255, 255, 255, .9), 6px 6px 16px rgba(150, 158, 176, .55);
  --relieve-chico: -4px -4px 9px rgba(255, 255, 255, .9), 4px 4px 11px rgba(150, 158, 176, .55);
  --hueco: inset 4px 4px 9px rgba(150, 158, 176, .5), inset -4px -4px 9px rgba(255, 255, 255, .85);
  --halo: 0 0 34px -6px rgba(var(--brasa-rgb), .22);
  --halo-chico: 0 0 16px -3px rgba(var(--brasa-rgb), .24);
  --tinta-rgb: 40, 42, 50;
  --brasa: #cf4414;                                   /* acento más oscuro para leerse sobre claro */
  color-scheme: light;
}
:root[data-modo="dia"][data-color="oro"]       { --brasa: #946500; }
:root[data-modo="dia"][data-color="esmeralda"] { --brasa: #087548; }
:root[data-modo="dia"][data-color="amatista"]  { --brasa: #6534cc; }
:root[data-modo="dia"][data-color="rubi"]      { --brasa: #c4136c; --fondo: #f5e8ef; --hundido: #eedce6; --relieve-luz: #fdf4f9; --relieve-sombra: #ead5e0; --barra: #e0c3d2; }
:root[data-modo="dia"][data-color="zafiro"]    { --brasa: #1d58c8; }
:root[data-modo="dia"] body::before {
  background:
    radial-gradient(60% 32% at 50% 22%, rgba(var(--brasa-rgb), .12), transparent 70%),
    radial-gradient(130% 55% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 65%),
    linear-gradient(180deg, #eef0f4 0%, #e6e8ee 55%, #dadde5 100%);
}
:root[data-modo="dia"][data-color="rubi"] body::before {
  background:
    radial-gradient(60% 32% at 50% 22%, rgba(255, 95, 175, .16), transparent 70%),
    radial-gradient(130% 55% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 65%),
    linear-gradient(180deg, #fbf0f6 0%, #f4e5ee 55%, #ead6e2 100%);
}
:root[data-modo="dia"] .pagina,
:root[data-modo="dia"] .bienvenida { background: linear-gradient(180deg, #eef0f4 0%, #e6e8ee 55%, #dadde5 100%); }
:root[data-modo="dia"][data-color="rubi"] .pagina,
:root[data-modo="dia"][data-color="rubi"] .bienvenida { background: linear-gradient(180deg, #fbf0f6 0%, #f4e5ee 55%, #ead6e2 100%); }
:root[data-modo="dia"] .hoja { background: linear-gradient(160deg, #f4f5f9, #e1e4ea); box-shadow: 0 -10px 40px rgba(120, 130, 150, .35), 0 -2px 30px -8px rgba(var(--brasa-rgb), .3); }
:root[data-modo="dia"][data-color="rubi"] .hoja { background: linear-gradient(160deg, #fdf4f9, #eedce6); }
:root[data-modo="dia"] .controles { background: linear-gradient(180deg, rgba(222, 225, 232, 0), rgba(222, 225, 232, .95) 45%); }
:root[data-modo="dia"][data-color="rubi"] .controles { background: linear-gradient(180deg, rgba(236, 216, 227, 0), rgba(236, 216, 227, .95) 45%); }
:root[data-modo="dia"] .switch::after { background: linear-gradient(145deg, #ffffff, #e3e6ec); box-shadow: 2px 2px 5px rgba(150, 158, 176, .6); }
:root[data-modo="dia"] .fila.activa,
:root[data-modo="dia"] .aj-fila,
:root[data-modo="dia"] .chip[aria-pressed="true"],
:root[data-modo="dia"] .campo input { background: rgba(150, 158, 176, .12); }
:root[data-modo="dia"] .tope-barra { background: rgba(150, 158, 176, .3); }
:root[data-modo="dia"] .datos div { border-bottom-color: rgba(0, 0, 0, .07); }
:root[data-modo="dia"] .aj-sep { border-top-color: rgba(0, 0, 0, .08); }
:root[data-modo="dia"] .ob-puntos i:not(.on) { background: rgba(0, 0, 0, .12); }
:root[data-modo="dia"] .pozo::after { background: radial-gradient(45% 55% at 100% 100%, rgba(var(--brasa-rgb), .07), transparent 70%); }

/* ---------- Letra: títulos y números con personalidad; el texto sigue en Urbanist ---------- */
:root { --titulos: "Unbounded", "Urbanist", system-ui, sans-serif; --titulos-peso: 700; --titulos-esp: -0.02em; }
:root[data-letra="elegante"]  { --titulos: "DM Serif Display", Georgia, "Times New Roman", serif; --titulos-peso: 400; --titulos-esp: 0; }
:root[data-letra="divertida"] { --titulos: "Fredoka", "Urbanist", system-ui, sans-serif; --titulos-peso: 600; --titulos-esp: 0; }
:root[data-letra="sencilla"]  { --titulos: "Urbanist", system-ui, sans-serif; --titulos-peso: 800; --titulos-esp: -0.01em; }
.mes h1, .centro .v, .cifras b, .pozo-head .v b, .lista-head h2, .sat-head, .pag-head h2, .ob-titulo,
.aho-num, .rec-pie b, .hoja h2, .reg-sec h3, .aj-grupo h3, .fecha-top .t1, .lugar b, .guia-globo p:first-child {
  font-family: var(--titulos); font-weight: var(--titulos-peso); letter-spacing: var(--titulos-esp);
}
.guia-globo p:first-child { font-size: .9375rem; line-height: 1.5; }
.titulo p:first-child { font-family: var(--titulos); font-weight: var(--titulos-peso); }
.pag-head h2 { font-size: 1rem; text-wrap: balance; }
:root[data-letra="elegante"] .centro .v, :root[data-letra="elegante"] .aho-num { font-size: 2.5rem; }
:root[data-letra="elegante"] .mes h1 { font-size: 1.875rem; }

.letras { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.letra {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .875rem .5rem; border-radius: 1.125rem;
  background: linear-gradient(145deg, var(--relieve-luz), var(--relieve-sombra)); box-shadow: var(--relieve-chico);
  color: var(--suave); font-size: .8125rem; font-weight: 700;
  transition: box-shadow 160ms var(--suavecito), color 160ms var(--suavecito);
}
.letra .muestra-letra { font-size: 1.375rem; line-height: 1.25; color: var(--texto); }
.letra[aria-pressed="true"] { box-shadow: var(--hueco); color: var(--brasa); background: rgba(0, 0, 0, .14); }
:root[data-modo="dia"] .letra[aria-pressed="true"] { background: rgba(150, 158, 176, .12); }

/* ---------- Tamaño de letra ---------- */
:root[data-tam="chica"] { font-size: 93.75%; }
:root[data-tam="grande"] { font-size: 112.5%; }
:root[data-tam="muy-grande"] { font-size: 125%; }

/* ---------- Ajustes por apartados ---------- */
.aj-sub { color: var(--suave); font-size: .8125rem; font-weight: 800; margin: .25rem 0 -.375rem .25rem; }

/* ---------- Foto de ticket: lectura real ---------- */
.fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .625rem; }
.fotos .foto { height: 10rem; }
.fotos .foto span { position: absolute; left: .5rem; top: .5rem; padding: 0 .5rem; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .75rem; font-weight: 800; line-height: 1.5rem; }
.progreso { height: .375rem; border-radius: 999px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.progreso i { display: block; height: 100%; width: var(--p, 0%); background: var(--brasa-grad); transition: width 300ms var(--suavecito); }
.avisos-ticket { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.avisos-ticket li {
  display: grid; grid-template-columns: auto 1fr; gap: .625rem; align-items: start;
  padding: .75rem .875rem; border-radius: 1rem; background: rgba(var(--brasa-rgb), .1);
  box-shadow: inset 0 0 0 1px rgba(var(--brasa-rgb), .35); font-weight: 600; font-size: .9375rem;
}
.avisos-ticket .icon { color: var(--brasa); font-size: 1.25rem; }
.campos-ticket { display: flex; flex-direction: column; gap: .5rem; }
.campo-t { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .75rem; row-gap: .25rem; }
.campo-t > .et { grid-column: 1 / -1; color: var(--suave); font-size: .75rem; font-weight: 700; }
.campo-t input {
  min-width: 0; height: 2.75rem; border-radius: .875rem; border: 0; padding-inline: .875rem;
  background: rgba(0, 0, 0, .22); box-shadow: var(--hueco); color: var(--texto); font: inherit; font-size: 1rem; font-weight: 700;
}
:root[data-modo="dia"] .campo-t input { background: rgba(150, 158, 176, .12); }
.campo-t input:focus { outline: 2px solid rgba(var(--brasa-rgb), .8); outline-offset: 2px; }
.estado { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; }
.estado .icon { font-size: 1.375rem; }
.estado.ok .icon { color: var(--brasa); }
.estado.duda .icon, .estado.falta .icon { color: var(--suave); }
.campo-t.falta input { box-shadow: var(--hueco), inset 0 0 0 1.5px rgba(var(--brasa-rgb), .7); }
.botones-ticket { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.botones-ticket .chip { height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }
.botones-ticket .guardar { grid-column: 1 / -1; height: 3.25rem; }

/* ---------- Aviso ---------- */
.snack {
  position: fixed; left: 1rem; right: 1rem; z-index: 10;
  bottom: calc(8.25rem + env(safe-area-inset-bottom, 0px));
  max-width: 25.5rem; margin-inline: auto;
  background: var(--hundido); color: var(--texto); font-weight: 600;
  border-radius: 1rem; padding: .875rem 1.125rem; min-height: 3rem;
  box-shadow: var(--relieve);
  transform: translateY(.75rem); opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--suavecito), transform 350ms var(--rebote-rapido);
}
.snack.show { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* ===== Fondo de día "Concreto": gris cálido que brilla menos, con los efectos más marcados =====
   Cada fondo trae la fuerza de sus efectos (--fx) y --fx-oscuro pinta chispas y brillos con el acento
   oscuro, porque una luz sobre fondo claro no se ve. */
:root[data-modo="dia"][data-dia="concreto"] {
  --fondo: #d3d0ca; --hundido: #c8c4bd; --relieve-luz: #dedbd6; --relieve-sombra: #c1bdb6; --barra: #b1aca4;
  --suave: #4d4f57; --apagado: #76777d;
  --relieve: -6px -6px 14px rgba(255, 255, 255, .5), 6px 6px 16px rgba(92, 84, 74, .42);
  --relieve-chico: -4px -4px 9px rgba(255, 255, 255, .5), 4px 4px 11px rgba(92, 84, 74, .42);
  --hueco: inset 4px 4px 9px rgba(92, 84, 74, .38), inset -4px -4px 9px rgba(255, 255, 255, .45);
  --halo: 0 0 34px -6px rgba(var(--brasa-rgb), .34); --halo-chico: 0 0 16px -3px rgba(var(--brasa-rgb), .36);
  --tinta-rgb: 52, 47, 41;
  --fx: 2.4; --fx-oscuro: 1;
}
:root[data-modo="dia"][data-dia="concreto"] body::before {
  background:
    radial-gradient(62% 34% at 50% 22%, rgba(var(--brasa-rgb), .26), transparent 70%),
    radial-gradient(130% 55% at 50% 0%, #e7e4df 0%, transparent 65%),
    linear-gradient(180deg, #dcd9d4 0%, #d0ccc6 55%, #bcb7af 100%);
}
:root[data-modo="dia"][data-dia="concreto"] .pagina,
:root[data-modo="dia"][data-dia="concreto"] .bienvenida {
  background:
    radial-gradient(62% 30% at 50% 10%, rgba(var(--brasa-rgb), .2), transparent 70%),
    linear-gradient(180deg, #dcd9d4 0%, #d0ccc6 55%, #bcb7af 100%);
}
:root[data-modo="dia"][data-dia="concreto"] .hoja {
  background: linear-gradient(160deg, #dedbd6, #c8c4bd);
  box-shadow: 0 -10px 40px rgba(80, 66, 56, .35), 0 -2px 30px -8px rgba(var(--brasa-rgb), .4);
}
:root[data-modo="dia"][data-dia="concreto"] .controles { background: linear-gradient(180deg, rgba(188, 183, 175, 0), rgba(188, 183, 175, .95) 45%); }
:root[data-modo="dia"][data-dia="concreto"] .switch::after { background: linear-gradient(145deg, #dedbd6, #c8c4bd); box-shadow: 2px 2px 5px rgba(80, 66, 56, .45); }
:root[data-modo="dia"][data-dia="concreto"] :is(.fila.activa, .aj-fila, .chip[aria-pressed="true"], .campo input, .letra[aria-pressed="true"], .campo-t input) { background: rgba(80, 60, 45, .09); }
:root[data-modo="dia"][data-dia="concreto"] .tope-barra { background: rgba(80, 60, 45, .24); }

/* ===== Diseño escogido en el laboratorio (30 sep) ===== */
/* Fondo de noche "Negro": negro profundo que ahorra batería en pantallas OLED y hace brillar más la brasa */
:root[data-modo="noche"][data-noche="negro"] {
  --fondo: #0b0b0c; --hundido: #060607; --relieve-luz: #161618; --relieve-sombra: #030303; --barra: #1f1f22;
  --relieve: -4px -4px 10px rgba(255, 255, 255, .035), 6px 6px 14px rgba(0, 0, 0, .9);
  --relieve-chico: -3px -3px 7px rgba(255, 255, 255, .035), 4px 4px 10px rgba(0, 0, 0, .9);
  --hueco: inset 4px 4px 9px rgba(0, 0, 0, .85), inset -3px -3px 8px rgba(255, 255, 255, .03);
}
:root[data-modo="noche"][data-noche="negro"] body::before {
  background:
    radial-gradient(60% 32% at 50% 22%, rgba(var(--brasa-rgb), .16), transparent 70%),
    linear-gradient(180deg, #0b0b0c 0%, #050506 60%, #000 100%);
}
:root[data-modo="noche"][data-noche="negro"] .pagina,
:root[data-modo="noche"][data-noche="negro"] .bienvenida { background: linear-gradient(180deg, #0b0b0c 0%, #050506 60%, #000 100%); }
:root[data-modo="noche"][data-noche="negro"] .controles { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .95) 45%); }
/* De noche, hojas y menús de vidrio esmerilado: se ve borroso lo de atrás y el efecto sigue moviéndose */
:root[data-modo="noche"] .hoja {
  background: color-mix(in srgb, var(--fondo) 58%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 -12px 40px rgba(0, 0, 0, .35), 0 -2px 30px -8px rgba(var(--brasa-rgb), .35);
}
:root[data-modo="noche"] .hoja-fondo { background: rgba(0, 0, 0, .22); }
/* Colores con significado: verde lo que entra, rojo lo que sale; la brasa sigue siendo el acento */
:root[data-colores="si"] { --entra: #5fd49a; --sale: #ff7b72; }
:root[data-colores="si"][data-modo="dia"] { --entra: #0b6e43; --sale: #b3302a; }
:root[data-colores="si"] #vNum, :root[data-colores="si"] .fila .monto.entra { color: var(--entra); }
:root[data-colores="si"] #gNum, :root[data-colores="si"] .fila .monto.sale { color: var(--sale); }
:root[data-colores="si"] .compara .icon { color: var(--entra); }
:root[data-colores="si"] .compara.baja .icon { color: var(--sale); }

/* Barra para desplazarse: la del sistema se esconde; en su lugar sale una rayita color brasa mientras te mueves */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
.rayita {
  position: fixed; left: 0; top: 0; z-index: 95; width: 4px; border-radius: 4px;
  background: var(--brasa-grad); box-shadow: 0 0 8px rgba(var(--brasa-rgb), .55);
  opacity: 0; pointer-events: none; transition: opacity 300ms var(--suavecito);
}
.rayita.ve { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .rayita { transition: none; } }

/* ===== Mis lugares ===== */
.lugar-t {
  display: grid; grid-template-columns: auto 1fr auto; gap: .625rem; align-items: center;
  padding: .625rem .75rem .625rem .875rem; border-radius: 1rem; font-weight: 600; font-size: .9375rem;
  background: rgba(var(--brasa-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--brasa-rgb), .35);
}
.lugar-t .icon { color: var(--brasa); font-size: 1.25rem; }
.lugar-t.conocido { background: var(--hundido); box-shadow: var(--hueco); }
.lugar-t.conocido .icon { color: var(--entra, var(--brasa)); }
.lt-texto { min-width: 0; }
.lt-boton {
  padding: .5rem .875rem; border-radius: 999px; white-space: nowrap; text-decoration: none;
  background: var(--brasa-grad); color: var(--sobre-acento); font-weight: 700; font-size: .875rem; box-shadow: var(--brillo);
}
.lt-boton:focus-visible { outline: 2px solid var(--brasa); outline-offset: 2px; }

/* ===== App instalada: la pantalla no se mete debajo de la barra de arriba del iPhone ===== */
body { padding-top: env(safe-area-inset-top, 0px); }