/* Finanzas Casa — estilo "estado de cuenta"
   Tinta azul marino sobre papel gris frío. Cifras grandes en serif (New York en iPhone),
   interfaz en la letra del sistema, números tabulares para que las cifras se alineen.
   Verde y rojo reservados para "bien" y "alerta". */

:root {
  --papel: #f3f5f8;
  --panel: #ffffff;
  --tinta: #15233b;
  --acero: #5b6576;
  --linea: #dce1e8;
  --accion: #1f4f8f;
  --accion-texto: #ffffff;
  --pista: #dfe8f5;          /* medidor: paso claro de la misma rampa que --accion */
  --bien: #17734a;
  --alerta: #b3261e;
  --aviso: #8a5a00;
  --aviso-fondo: #fbf1dc;
  /* Serie de gráficos (validada: daltonismo y modo claro sobre blanco) */
  --s0: #2a78d6; --s1: #eb6834; --s2: #1baf7a; --s3: #eda100; --s4: #e87ba4; --s5: #9aa3b0;
  --serif: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #12161d;
    --panel: #1a212c;
    --tinta: #e9edf3;
    --acero: #9ba5b5;
    --linea: #2c3543;
    --accion: #8db4ea;
    --accion-texto: #0d1a2c;
    --pista: #253247;
    --bien: #5ccb93;
    --alerta: #f2867e;
    --aviso: #e8b44c;
    --aviso-fondo: #2e2615;
    --s0: #3987e5; --s1: #d95926; --s2: #199e70; --s3: #c98500; --s4: #d55181; --s5: #6b7585;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--papel); color: var(--tinta); }
body {
  font: 16px/1.45 var(--sans);
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
  padding: env(safe-area-inset-top) 0 calc(72px + env(safe-area-inset-bottom));
}
main { max-width: 560px; margin: 0 auto; padding: 20px 20px 24px; }
h1 { font: 600 1.75rem/1.2 var(--serif); margin: 4px 0 20px; letter-spacing: -0.01em; }
h2 { font: 600 1.15rem/1.3 var(--serif); margin: 32px 0 12px; }
h3 { font-size: .95rem; margin: 16px 0 6px; color: var(--acero); font-weight: 600; }
p { margin: 0 0 8px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }

.cargando, .nota { color: var(--acero); }
.nota { font-size: .88rem; }
.error { color: var(--alerta); font-weight: 600; }

/* ---------- Encabezado de Inicio ---------- */
.saludo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.saludo span { color: var(--acero); font-size: .95rem; }
.selector-mes { display: flex; align-items: center; gap: 4px; }
.selector-mes strong { font-weight: 600; min-width: 8.5em; text-align: center; }
.selector-mes strong::first-letter { text-transform: uppercase; }
.selector-mes button {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linea);
  background: var(--panel); font-size: 1.1rem; line-height: 1; padding: 0;
}

/* ---------- Cifra disponible (el elemento protagonista) ---------- */
.disponible { margin: 20px 0 28px; }
.disponible .rotulo { color: var(--acero); font-size: .95rem; }
.disponible .cifra {
  display: block; font: 600 clamp(2.6rem, 12vw, 3.4rem)/1.05 var(--serif);
  letter-spacing: -0.02em; margin: 4px 0 16px; overflow-wrap: anywhere;
}
.disponible .cifra.negativa { color: var(--alerta); }
.medidor { height: 10px; border-radius: 5px; background: var(--pista); overflow: hidden; }
.medidor > span { display: block; height: 100%; border-radius: 5px; background: var(--accion); }
.medidor.excedido > span { background: var(--alerta); }
.disponible .detalle { margin-top: 8px; font-size: .9rem; color: var(--acero); }

/* ---------- Resumen tipo estado de cuenta ---------- */
.estado { background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 4px 16px; }
.estado .renglon { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea); }
.estado .renglon:first-child { border-top: none; }
.estado .renglon.total { font-weight: 700; }
.estado .renglon span:first-child { color: var(--acero); }
.estado .renglon.total span:first-child { color: var(--tinta); }
.estado .renglon.separado { border-top: 2px solid var(--linea); }
.positivo { color: var(--bien); }
.negativo { color: var(--alerta); }

.alerta {
  display: block; width: 100%; text-align: left; margin: 16px 0 0; padding: 12px 14px;
  background: var(--aviso-fondo); color: var(--aviso); border: 1px solid currentColor; border-radius: 12px; font-weight: 600;
}

/* ---------- Gráficos ---------- */
.pestanas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--linea); border-radius: 10px; padding: 3px; gap: 3px; margin-bottom: 16px; }
.pestanas button { border: none; background: transparent; border-radius: 8px; padding: 8px 4px; font-size: .9rem; color: var(--acero); min-height: 38px; }
.pestanas button[aria-pressed="true"] { background: var(--panel); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(21, 35, 59, .12); }
.grafico { background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; }
.grafico .vacio { color: var(--acero); margin: 0; }
.grafico h3:first-child { margin-top: 0; }

/* Barras horizontales ordenadas (por categoría): un solo tono */
.barra-fila { padding: 8px 0; }
.barra-fila + .barra-fila { border-top: 1px solid var(--linea); }
.barra-fila .textos { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.barra-fila .textos small { color: var(--acero); margin-left: 6px; }
.barra-fila .pista-barra { height: 8px; }
.barra-fila .pista-barra > span { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--s0); }

/* Barra segmentada delgada + lista con muestras de color */
.segmentada { display: flex; gap: 2px; height: 10px; margin: 4px 0 12px; }
.segmentada > span { height: 100%; border-radius: 5px; }
.leyenda { list-style: none; margin: 0; padding: 0; }
.leyenda li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.leyenda li + li { border-top: 1px solid var(--linea); }
.leyenda .muestra { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.leyenda .nombre { flex: 1; min-width: 0; }
.leyenda .monto-pct { text-align: right; white-space: nowrap; }
.leyenda .monto-pct small { color: var(--acero); margin-left: 6px; }
.leyenda li.cero { color: var(--acero); }
.c0 { background: var(--s0); } .c1 { background: var(--s1); } .c2 { background: var(--s2); }
.c3 { background: var(--s3); } .c4 { background: var(--s4); } .c5 { background: var(--s5); }

/* ---------- Cartola de movimientos ---------- */
.cartola { background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.mov {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; width: 100%;
  text-align: left; background: none; border: none; border-top: 1px solid var(--linea); padding: 12px 16px;
}
.mov:first-child { border-top: none; }
.mov .fecha { text-align: center; line-height: 1.05; }
.mov .fecha b { display: block; font: 600 1.3rem/1 var(--serif); }
.mov .fecha small { color: var(--acero); font-size: .75rem; }
.mov .texto { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mov .texto strong { font-weight: 600; overflow-wrap: anywhere; }
.mov .texto small { color: var(--acero); font-size: .82rem; }
.mov .monto { font-weight: 600; white-space: nowrap; }
.mov.anulado { opacity: .5; }
.mov.anulado .monto { text-decoration: line-through; }
.monto.neutro { color: var(--acero); }

.tag { display: inline-block; font-size: .72rem; padding: 1px 7px; margin: 3px 4px 0 0; border-radius: 4px; border: 1px solid var(--linea); color: var(--acero); }
.tag.aviso { border-color: var(--aviso); color: var(--aviso); }

/* ---------- Formularios y paneles ---------- */
.tarjeta {
  background: var(--panel); border: 1px solid var(--linea); border-radius: 14px;
  padding: 18px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 14px;
}
.tarjeta h1, .tarjeta h2 { margin: 0; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-weight: 600; font-size: .9rem; }
.campo small { color: var(--acero); font-size: .82rem; }
input, select {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--linea); background: var(--papel);
}
input:focus, select:focus { outline: 2px solid var(--accion); outline-offset: 0; border-color: transparent; }
input:disabled, select:disabled { opacity: .6; }

button {
  min-height: 46px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--linea); background: var(--panel);
}
button.primario { background: var(--accion); color: var(--accion-texto); border-color: var(--accion); font-weight: 600; }
button.peligro { color: var(--alerta); border-color: var(--alerta); background: transparent; }
button.enlace { border: none; background: none; color: var(--accion); padding-left: 0; min-height: 40px; align-self: flex-start; }
button:disabled { opacity: .45; cursor: not-allowed; }

.segmentos { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--linea); border-radius: 10px; padding: 3px; gap: 3px; }
.segmentos button { border: none; background: transparent; min-height: 40px; border-radius: 8px; color: var(--acero); }
.segmentos button.activo { background: var(--panel); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(21, 35, 59, .12); }

/* Listas y datos simples (Más, detalle) */
.lista { display: flex; flex-direction: column; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.fila {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: none; border: none; border-top: 1px solid var(--linea); border-radius: 0; padding: 14px 16px;
}
.fila:first-child { border-top: none; }
.fila-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fila-texto small { color: var(--acero); }
.fila.anulado { opacity: .5; }
.info { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .88rem; color: var(--acero); margin: 0; }
.info dd { margin: 0; color: var(--tinta); }
ul.simple { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: .92rem; }
ul.simple small { color: var(--acero); }

/* ---------- Navegación inferior ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--panel); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom);
}
.nav button { border: none; border-radius: 0; background: none; font-size: .78rem; color: var(--acero); min-height: 56px; padding: 6px 2px; position: relative; }
.nav button.activo { color: var(--tinta); font-weight: 700; }
.nav button.activo::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--accion); }

.aviso-red {
  position: sticky; top: 0; z-index: 5; background: var(--alerta); color: #fff; text-align: center;
  padding: 8px 12px; font-size: .9rem; font-weight: 600;
}
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom));
  max-width: calc(100% - 32px); background: var(--tinta); color: var(--papel); padding: 10px 16px;
  border-radius: 10px; z-index: 10;
}
.toast.error { background: var(--alerta); color: #fff; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }