/* Finanzas — hoja de estilos.

   ── La idea ────────────────────────────────────────────────────────────────
   Esto es una app de celular. Se diseñó a 390 px de ancho y todo lo demás es
   consecuencia de eso: la navegación abajo, donde alcanza el pulgar; la acción
   principal —capturar un gasto— en un botón que no hay que buscar; y una sola
   cifra grande arriba, porque de pie en una caja se lee un número, no un panel.

   ── El elemento propio ─────────────────────────────────────────────────────
   La barra de disponible (`.reparto`). Debajo de la cifra, una línea partida en
   tres muestra cuánto de la plata está libre, cuánto ya tiene dueño y cuánto es
   de terceros. Es la tesis del sistema hecha imagen —apartar no es gastar, pero
   tampoco es disponible— y es lo único que la hoja de cálculo nunca tuvo.

   ── Claro y oscuro ─────────────────────────────────────────────────────────
   Se sigue el modo del teléfono, sin ajuste que configurar. Toda la paleta vive
   en variables; ningún color está escrito dos veces. */

:root {
  color-scheme: light dark;

  /* Azul de tinta, no azul corporativo */
  --lienzo: #f4f6fb;
  --tarjeta: #ffffff;
  --tinta: #0f1729;
  --tinta-2: #5a6785;
  --tinta-3: #8b97b4;
  --borde: #e4e9f5;
  --azul: #2e5bff;
  --azul-suave: #e8eeff;
  --hondo: #16255c;
  --hondo-2: #24397f;
  --verde: #0e9f6e;
  --verde-suave: #e3f7ef;
  --rojo: #e5484d;
  --rojo-suave: #fdeaea;
  --sombra: 0 1px 2px rgb(16 23 41 / 4%), 0 8px 24px rgb(16 23 41 / 6%);

  --cifra: "Sora", ui-sans-serif, system-ui, sans-serif;
  --texto: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --r: 20px;
  --r-chico: 14px;
  --r-pastilla: 999px;

  /* Alto de la barra inferior, para que el contenido nunca quede debajo */
  --abajo: calc(66px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-color-scheme: dark) {
  :root {
    --lienzo: #080c18;
    --tarjeta: #121a2e;
    --tinta: #eaeffb;
    --tinta-2: #8fa0c4;
    --tinta-3: #66759a;
    --borde: #1e2740;
    --azul: #5b82ff;
    --azul-suave: #16234a;
    --hondo: #16255c;
    --hondo-2: #24397f;
    --verde: #38d39f;
    --verde-suave: #10291f;
    --rojo: #ff6b6e;
    --rojo-suave: #2c1518;
    --sombra: none;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Que el rebote del scroll en iOS no muestre una franja blanca */
  overscroll-behavior-y: none;
}

/* ── El marco ─────────────────────────────────────────────────────────────── */

.hoja {
  max-width: 30rem;
  margin: 0 auto;
  padding: 0 1rem var(--abajo);
}

.tope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: max(0.9rem, env(safe-area-inset-top, 0px)) 0 0.9rem;
}
.tope .donde {
  font-family: var(--cifra);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.tope .sub {
  font-size: 0.8rem;
}

/* Botón redondo de la cabecera */
.redondo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--r-pastilla);
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--tinta-2);
  cursor: pointer;
  padding: 0;
}
.redondo:active {
  transform: scale(0.94);
}

/* ── Barra inferior ───────────────────────────────────────────────────────── */

.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--tarjeta) 88%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
}
.barra a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0.55rem 0 0.5rem;
  color: var(--tinta-3);
  text-decoration: none;
  font-size: 0.66rem;
  letter-spacing: 0.01em;
  position: relative;
}
.barra a.activa {
  color: var(--azul);
}
.barra a .cuenta {
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pastilla);
  background: var(--rojo);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}

/* El botón de capturar: la acción principal, siempre a la mano.
   Va encima de la barra y no dentro, para que no compita con la navegación. */
.capturar {
  position: fixed;
  z-index: 21;
  right: max(1rem, calc(50vw - 15rem + 1rem));
  bottom: calc(var(--abajo) + 0.9rem);
  width: 56px;
  height: 56px;
  border-radius: var(--r-pastilla);
  border: none;
  background: var(--azul);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--azul) 40%, transparent);
}
.capturar:active {
  transform: scale(0.93);
}

/* ── La hoja de «Más» ─────────────────────────────────────────────────────── */

.telon {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgb(8 12 24 / 45%);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: aparecer 0.16s ease-out;
}
.panel {
  width: 100%;
  max-width: 30rem;
  background: var(--tarjeta);
  border-radius: var(--r) var(--r) 0 0;
  padding: 0.6rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  animation: subir 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel .agarre {
  width: 38px;
  height: 4px;
  border-radius: var(--r-pastilla);
  background: var(--borde);
  margin: 0.3rem auto 0.9rem;
}
.panel a,
.panel button {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 0.2rem;
  border: none;
  border-bottom: 1px solid var(--borde);
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: 0.98rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.panel a:last-of-type,
.panel button:last-of-type {
  border-bottom: none;
}
.panel svg {
  color: var(--tinta-3);
  flex: 0 0 auto;
}

@keyframes subir {
  from {
    transform: translateY(14%);
  }
}
@keyframes aparecer {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .telon,
  .panel {
    animation: none;
  }
}

/* ── La tarjeta principal ─────────────────────────────────────────────────── */

.principal {
  background: linear-gradient(160deg, var(--hondo-2), var(--hondo));
  color: #fff;
  border-radius: var(--r);
  padding: 1.15rem 1.2rem 1.25rem;
  margin-bottom: 0.75rem;
}
.principal .rotulo {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 62%);
  margin: 0 0 0.15rem;
}
.principal .grande {
  font-family: var(--cifra);
  font-size: clamp(2.2rem, 11vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  display: block;
}
.principal .pie {
  font-size: 0.82rem;
  color: rgb(255 255 255 / 66%);
  margin: 0.35rem 0 0;
}

/* El elemento propio: cuánto de la plata está de verdad libre. */
.reparto {
  display: flex;
  gap: 3px;
  height: 7px;
  margin-top: 0.9rem;
  border-radius: var(--r-pastilla);
  overflow: hidden;
}
.reparto span {
  display: block;
  height: 100%;
  border-radius: var(--r-pastilla);
}
.reparto .libre {
  background: #fff;
}
.reparto .apartado {
  background: rgb(255 255 255 / 42%);
}
.reparto .ajeno {
  background: rgb(255 255 255 / 20%);
}
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: rgb(255 255 255 / 70%);
}
.leyenda i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: baseline;
}

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--sombra);
  display: grid;
  gap: 0.7rem;
}

.par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
}
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.75rem;
}
.cifra {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  padding: 0.85rem 0.9rem;
  box-shadow: var(--sombra);
}
.cifra .rotulo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--tinta-2);
  margin-bottom: 0.3rem;
}
.cifra .valor {
  font-family: var(--cifra);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.cifra .nota {
  display: block;
  font-size: 0.74rem;
  color: var(--tinta-3);
  margin-top: 0.2rem;
}
.cifra.buena .valor {
  color: var(--verde);
}
.cifra.mala .valor {
  color: var(--rojo);
}
.cifra.destacada {
  border-color: var(--azul);
}

/* ── Encabezados de sección ───────────────────────────────────────────────── */

h2 {
  font-family: var(--cifra);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin: 1.5rem 0 0.6rem;
}

/* ── Listas ───────────────────────────────────────────────────────────────── */

.lista {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.fila {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--borde);
}
.fila:last-child {
  border-bottom: none;
}
.principal-txt {
  flex: 1;
  min-width: 0;
}
.titulo {
  display: block;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sub {
  display: block;
  font-size: 0.79rem;
  color: var(--tinta-3);
}
.monto {
  font-family: var(--cifra);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.monto.entrada {
  color: var(--verde);
}

/* Grupos plegables */
details.grupo {
  border-bottom: 1px solid var(--borde);
}
details.grupo:last-child {
  border-bottom: none;
}
details.grupo > summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  list-style: none;
}
details.grupo > summary::-webkit-details-marker {
  display: none;
}
details.grupo > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.8px solid var(--tinta-3);
  border-bottom: 1.8px solid var(--tinta-3);
  transform: rotate(-45deg);
  transition: transform 0.16s;
  flex: 0 0 auto;
}
details.grupo[open] > summary::after {
  transform: rotate(45deg);
}
details.grupo .adentro {
  padding: 0 1rem 0.5rem 1.9rem;
}
details.grupo .adentro .fila {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--borde);
}

.vacio {
  text-align: center;
  color: var(--tinta-3);
  font-size: 0.9rem;
  padding: 2.2rem 1rem;
}
.cargando {
  text-align: center;
  color: var(--tinta-3);
  padding: 3rem 1rem;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */

button {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.7rem 1.1rem;
  border: none;
  border-radius: var(--r-pastilla);
  background: var(--azul);
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s;
}
button:active {
  transform: scale(0.97);
}
button.suave {
  background: var(--azul-suave);
  color: var(--azul);
}
button.peligro {
  background: transparent;
  color: var(--rojo);
  border: 1px solid var(--rojo);
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
.botones {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Formularios ──────────────────────────────────────────────────────────── */

label {
  display: block;
  font-size: 0.8rem;
  color: var(--tinta-2);
}
label > span {
  display: block;
  margin-bottom: 0.3rem;
}
input,
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  background: var(--lienzo);
  color: var(--tinta);
  -webkit-appearance: none;
  appearance: none;
}
input[type="number"] {
  font-family: var(--cifra);
  font-variant-numeric: tabular-nums;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}
textarea {
  resize: vertical;
  min-height: 3.4rem;
}
.pareja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

/* ── Avisos ───────────────────────────────────────────────────────────────── */

.aviso {
  border-radius: var(--r-chico);
  background: var(--rojo-suave);
  color: var(--rojo);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
}
.aviso.bueno {
  background: var(--verde-suave);
  color: var(--verde);
}
.aviso-item {
  border-left: 3px solid var(--borde);
}
.aviso-item.urgente {
  border-left-color: var(--rojo);
}

/* ── Pantalla de entrar ───────────────────────────────────────────────────── */
/* Se llama `portada` y no `entrada` a propósito: «entrada» ya significaba plata
   que entra (`.monto.entrada`). Con el mismo nombre, un `<span class="monto
   entrada">` heredaba `min-height: 100dvh` y una fila de $5.000.000 medía 870
   píxeles de alto. Dos conceptos, dos nombres. */

.portada {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 2rem;
}
.titulo-entrada {
  font-family: var(--cifra);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin: 0;
}
.lema {
  color: var(--tinta-3);
  margin: 0.2rem 0 1.6rem;
}

/* ── Capturar ─────────────────────────────────────────────────────────────── */

.oculto {
  display: none;
}
.propuesta .pregunta {
  border-top: 1px solid var(--borde);
  padding-top: 0.8rem;
}
.propuesta .pregunta h2 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}
.pastilla {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-pastilla);
  background: var(--rojo-suave);
  color: var(--rojo);
  font-size: 0.68rem;
  font-weight: 600;
}
.secreto {
  display: block;
  font-family: var(--cifra);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  background: var(--azul-suave);
  color: var(--azul);
  border-radius: var(--r-chico);
  padding: 0.9rem;
  margin: 0.5rem 0;
  word-break: break-all;
  user-select: all;
}
pre.crudo {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--tinta-2);
  margin: 0;
  max-height: 15rem;
  overflow-y: auto;
}
.resumen {
  font-family: var(--cifra);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}
ul.senales {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--tinta-2);
}
ul.senales li {
  margin-bottom: 0.3rem;
}

/* ── Pantallas anchas ─────────────────────────────────────────────────────── */
/* La app es de celular. En un monitor no se estira: se centra, con la barra
   inferior contenida al mismo ancho para que no quede una franja de lado a lado. */

@media (min-width: 34rem) {
  .barra {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 30rem;
    border: 1px solid var(--borde);
    border-radius: var(--r) var(--r) 0 0;
  }
}

/* Los botones con ícono: el texto y el dibujo en la misma línea de base.
   Se declara aquí y no en cada botón para que ninguno se quede sin él. */
button svg {
  vertical-align: -0.22em;
  margin-right: 0.4rem;
}
button.capturar svg,
button.redondo svg {
  margin-right: 0;
  vertical-align: 0;
}