/* Modernist — tokens del sistema de diseño de Claude Design.
   Bordes a 0 de radio, acento bermellón sobre papel.

   Dos temas. El claro es el original del diseño; el oscuro no es una
   inversión automática, sino la misma escala rehecha: los grises invierten
   su papel (n-600 sigue siendo «texto apagado», sólo que ahora es claro) y
   los colores saturados suben de luminosidad para no apagarse sobre negro. */
:root {
  color-scheme: light;
  --bg: #f3f2f2;
  --papel: #fff;
  --tinta: #201e1d;
  --sobre-tinta: #fff;
  --sobre-relleno: #fff;
  --sobre-acento: #fff;
  --acento: #ec3013;
  --acento-200: #ffe0d9;
  --acento-700: #ae1800;
  --acento-800: #7c1405;
  --n-100: #f8f4f4;
  --n-200: #eae7e7;
  --n-300: #d7d3d3;
  --n-400: #bab6b6;
  --n-500: #9b9797;
  --n-600: #7d7979;
  --n-700: #605d5d;
  --n-800: #444141;
  --n-900: #2d2b2b;
  --verde: #1f5c4d;

  --hero-bg: #201e1d;
  --hero-fg: #fff;
  --hero-suave: #bab6b6;
  --hero-track: #444141;

  /* Paleta de categorías: la del diseño. */
  --cat-casa: #2d2b2b;
  --cat-super: #6d7f5a;
  --cat-salud: #3d6b78;
  --cat-viajes: #a8552f;
  --cat-ocio: #7d6a95;
  --cat-resta: #b08434;
  --cat-ropa: #8a4a52;
  --cat-articulos: #7d7979;
  --cat-otros: #bab6b6;
  /* Archivo es la del diseño, pero traerla de Google sería una llamada a
     internet en cada instalación. Si algún día se sirve desde app/fuentes/,
     entra sola por estar la primera. Mientras, San Francisco del iPhone. */
  --fuente: "Archivo", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Negro cálido, no azulado: mantiene la temperatura del papel original. */
    --bg: #131211;
    --papel: #1c1a19;
    --tinta: #f2efee;
    --sobre-tinta: #1c1a19;
    --sobre-relleno: #1c1a19;
    --sobre-acento: #2a0f08;
    --acento: #ff563c;
    --acento-200: #4a1a10;
    --acento-700: #ff9783;
    --acento-800: #ffc4b8;
    --n-100: #232120;
    --n-200: #2c2a28;
    --n-300: #3a3735;
    --n-400: #5c5856;
    --n-500: #837e7c;
    --n-600: #a29d9b;
    --n-700: #bdb8b6;
    --n-800: #d6d1cf;
    --n-900: #ebe7e5;
    --verde: #58b394;

    --hero-bg: #262322;
    --hero-fg: #f2efee;
    --hero-suave: #a29d9b;
    --hero-track: #423e3c;

    /* Las mismas categorías, subidas de luz para que se vean sobre negro.
       'Casa' era casi negro y 'Otros' casi blanco: se cambian los papeles. */
    --cat-casa: #d3cecc;
    --cat-super: #a7c088;
    --cat-salud: #7fb8c9;
    --cat-viajes: #e08e5f;
    --cat-ocio: #b8a4d1;
    --cat-resta: #e0b65f;
    --cat-ropa: #d18f96;
    --cat-articulos: #a29d9b;
    --cat-otros: #6b6664;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--tinta);
  font-family: var(--fuente);
  /* Safari iOS agranda el texto al girar el móvil si no se le dice que no. */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

input, button, textarea, select {
  font-family: var(--fuente);
  color: inherit;
}
button { cursor: pointer; touch-action: manipulation; }

/* ── Armazón ───────────────────────────────────────────────────────────── */
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.cabecera {
  flex: none;
  background: var(--papel);
  border-bottom: 2px solid var(--tinta);
  /* En la pantalla de inicio de iOS la barra de estado se come el borde
     superior: env() devuelve 0 en el navegador y ~59px ya instalada. */
  padding: calc(env(safe-area-inset-top) + 14px) 20px 0;
}
.cabecera-fila { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.titulo { font: 800 21px/1.15 var(--fuente); letter-spacing: -0.02em; }
.subtitulo { font: 400 11.5px/1.3 var(--fuente); color: var(--n-600); margin-top: 2px; }

.btn-atras {
  border: none; background: none; padding: 0 6px 0 0;
  display: flex; align-items: center; color: var(--acento);
}
.btn-add {
  border: none; background: var(--acento); color: var(--sobre-acento);
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
}

.meses {
  display: flex; overflow-x: auto;
  margin: 12px -20px 0; padding: 0 20px;
}
.meses::-webkit-scrollbar { display: none; }
.meses { scrollbar-width: none; }
.mes-btn {
  flex: none; border: none; background: none;
  padding: 9px 12px 9px 0;
  font: 600 12.5px/1 var(--fuente);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  border-bottom: 3px solid transparent;
  color: var(--n-500);
}
.mes-btn.vacio { color: var(--n-400); }
.mes-btn[aria-current="true"] { color: var(--tinta); border-bottom-color: var(--acento); }
.mes-btn.vacio[aria-current="true"] { color: var(--n-600); }

.lienzo {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}
.lienzo::-webkit-scrollbar { display: none; }
.lienzo { scrollbar-width: none; }

.pantalla.entra { animation: entrar .22s ease both; }
/* Un mes vacío ocupa la pantalla entera: si no, queda un cartelito arriba y
   un desierto gris debajo, y parece que ha fallado la carga. */
.vacio-pantalla {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--papel);
  border-bottom: 2px solid var(--tinta);
}
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pantalla.entra { animation: none; } }

.tabs {
  flex: none; background: var(--papel);
  border-top: 2px solid var(--tinta);
  display: flex; padding: 8px 4px calc(env(safe-area-inset-bottom) + 8px);
}
.tab {
  flex: 1; border: none; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0; color: var(--n-500);
}
.tab[aria-current="page"] { color: var(--acento); }
.tab span { font: 600 9.5px/1 var(--fuente); letter-spacing: .02em; }

/* ── Piezas recurrentes ────────────────────────────────────────────────── */
.rotulo { font: 600 10px/1 var(--fuente); letter-spacing: .12em; text-transform: uppercase; color: var(--n-600); }
.rotulo-xs { font: 600 9.5px/1 var(--fuente); letter-spacing: .1em; text-transform: uppercase; color: var(--n-600); }
.num { font-variant-numeric: tabular-nums; }

.bloque { background: var(--papel); padding: 20px; border-bottom: 2px solid var(--tinta); }
.seccion { padding: 18px 20px 6px; }
.lista { background: var(--papel); border-top: 1px solid var(--n-300); border-bottom: 2px solid var(--tinta); }
.lista-fila { border-bottom: 1px solid var(--n-200); }

.cifra { font: 800 46px/0.9 var(--fuente); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.cifra-md { font: 800 34px/1 var(--fuente); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.barra { height: 10px; background: var(--n-200); position: relative; }
.barra > i { display: block; height: 100%; }
.barra-hoy { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta); }

.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--tinta); gap: 1px; border-bottom: 2px solid var(--tinta); }
.trio > div { background: var(--papel); padding: 13px 14px; }
.trio b { display: block; font: 800 19px/1.1 var(--fuente); letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }

.aviso {
  width: 100%; text-align: left; border: none;
  border-bottom: 2px solid var(--tinta); background: var(--acento-200);
  padding: 14px 20px; display: flex; align-items: center; gap: 12px;
}
.aviso-n {
  width: 26px; height: 26px; background: var(--acento); color: var(--sobre-acento); flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 800 13px/1 var(--fuente);
}

.cat-fila { width: 100%; text-align: left; border: none; background: none; padding: 12px 20px; display: block; }
.punto { width: 9px; height: 9px; flex: none; }
.mini-barra { flex: 1; height: 5px; background: var(--n-200); }

.campo {
  width: 100%; border: 1px solid var(--n-300); background: var(--papel);
  padding: 11px 12px; font: 400 16px/1.2 var(--fuente); outline: none;
  border-radius: 0; -webkit-appearance: none;
}
.campo:focus { border-color: var(--tinta); }

.chip {
  border: 1px solid var(--n-300); background: var(--papel); color: var(--n-700);
  padding: 8px 11px; font: 600 11.5px/1 var(--fuente);
}
.chip[aria-pressed="true"] { border-color: var(--tinta); background: var(--tinta); color: var(--sobre-tinta); }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--n-300); gap: 1px; border-top: 1px solid var(--n-300); border-bottom: 1px solid var(--n-300); }
.teclado button { background: var(--papel); border: none; padding: 16px 0; font: 800 21px/1 var(--fuente); color: var(--tinta); }
.teclado button:active { background: var(--n-100); }

.btn-principal { width: 100%; border: none; background: var(--acento); color: var(--sobre-acento); padding: 15px 16px; font: 600 13.5px/1 var(--fuente); text-align: left; }
.btn-secundario { border: 1px solid var(--tinta); background: none; padding: 12px 14px; font: 600 12.5px/1 var(--fuente); text-align: left; }
.btn-peligro { width: 100%; border: 1px solid var(--acento-700); background: none; color: var(--acento-700); padding: 12px 14px; font: 600 12.5px/1 var(--fuente); text-align: left; }

.pie { padding: 16px 20px; font: 400 11px/1.55 var(--fuente); color: var(--n-500); }

.brindis {
  position: fixed; left: 20px; right: 20px; bottom: calc(env(safe-area-inset-bottom) + 84px);
  background: var(--tinta); color: var(--sobre-tinta); padding: 13px 16px;
  font: 600 12.5px/1.3 var(--fuente); z-index: 20;
  animation: entrar .18s ease both;
}

/* ── Pulido ────────────────────────────────────────────────────────────────
   Sin bordes redondeados ni sombras: el sistema es plano a propósito. Lo que
   sí faltaba era acuse de recibo al tocar — en el móvil, un botón que no
   responde al dedo se siente roto aunque funcione. */
.cat-fila:active,
.lista-fila:active,
.aviso:active,
.mes-btn:active,
.tab:active { background: var(--n-100); }

.btn-principal:active { background: var(--acento-700); }
.btn-secundario:active,
.chip:active { background: var(--n-100); }
.teclado button:active { background: var(--n-200); }

button, .chip, .btn-principal, .btn-secundario, .btn-peligro, .tab, .mes-btn {
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Que el foco de teclado se vea, para quien navegue sin tocar la pantalla. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* Una barra a cero seguía pintando un pelo de color por el borde. */
.barra > i[style*="width:0%"], .mini-barra > i[style*="width:0%"] { display: none; }

/* Límite del presupuesto: la cifra es un campo que se escribe. Sin marco
   propio, para que siga pareciendo la cifra de siempre hasta que la tocas. */
.pres-campo {
  width: 50px; border: none; background: none; outline: none;
  text-align: right; padding: 0 2px 0 0; border-radius: 0;
  /* 16 px: con menos, Safari del iPhone amplía la página al enfocar. */
  font: 800 16px/1 var(--fuente); color: var(--tinta);
  -webkit-appearance: none; appearance: none;
}
.pres-campo:focus { background: var(--n-100); }

/* Gasto puntual dentro de una barra: el mismo acento, rayado, para que se lea
   como parte del gasto pero distinto del de todos los meses. */
.rayado {
  background: repeating-linear-gradient(135deg, var(--acento) 0 2px, var(--acento-200) 2px 5px);
}

/* ── Bienvenida: sin datos todavía ─────────────────────────────────────── */
.bienvenida {
  height: 100%; overflow-y: auto; background: var(--papel);
  padding: calc(env(safe-area-inset-top) + 48px) 24px calc(env(safe-area-inset-bottom) + 24px);
  display: flex; flex-direction: column;
}
.bienvenida-marca { font: 800 30px/1.1 var(--fuente); letter-spacing: -0.03em; }
.bienvenida-texto { font: 400 14px/1.55 var(--fuente); color: var(--n-800); margin: 18px 0 28px; }
.bienvenida-texto ol { padding-left: 20px; margin: 14px 0 0; }
.bienvenida-texto li { margin-bottom: 10px; }
.bienvenida-boton { display: block; text-align: center; margin-top: auto; }
/* Fuera de la vista pero no «display:none»: Safari no abre el selector de
   ficheros de un campo oculto del todo al tocar su etiqueta. */
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }