/* ==========================================================================
   Finanzas — hoja de estilos única.
   Pensada para iPhone instalado en pantalla de inicio: respeta las áreas
   seguras, usa tipografía del sistema y sigue el tema claro/oscuro del equipo.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --fondo:        #f4f6f9;
  --superficie:   #ffffff;
  --superficie-2: #f8fafc;
  --texto:        #0f172a;
  --suave:        #61708a;
  --borde:        #e3e8f0;

  --acento:       #0f8b7d;
  --acento-tenue: #dff3f0;
  --peligro:      #d92d3c;
  --peligro-tenue:#fdeaec;
  --bien:         #16a34a;
  --alerta:       #d97706;
  --alerta-tenue: #fdf0da;

  --radio:     16px;
  --radio-sm:  10px;
  --sombra:    0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .18);

  --arriba:  env(safe-area-inset-top, 0px);
  --abajo:   env(safe-area-inset-bottom, 0px);
  --barra:   58px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:        #0a1018;
    --superficie:   #141d2a;
    --superficie-2: #1b2635;
    --texto:        #e9eef6;
    --suave:        #92a1b8;
    --borde:        #26334a;

    --acento:       #2dd4bf;
    --acento-tenue: #10312e;
    --peligro:      #f2555f;
    --peligro-tenue:#3b1519;
    --bien:         #3ecf7d;
    --alerta:       #f5a524;
    --alerta-tenue: #3a2a0c;

    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--acento); }

.oculto { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* --------------------------------- Iconos -------------------------------- */

.ico { width: 1.25em; height: 1.25em; flex: none; fill: none;
       stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
       stroke-linejoin: round; }

/* ------------------------------- Estructura ------------------------------ */

.app {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100dvh;
}

.cabecera {
  padding: calc(var(--arriba) + 14px) 18px 12px;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.cabecera.pegada { border-bottom-color: var(--borde); }
.cabecera h1 { font-size: 26px; letter-spacing: -.02em; margin: 0; flex: 1; }
.cabecera .sub { display: block; font-size: 13px; font-weight: 400; color: var(--suave); }

.accion-cabecera {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--superficie); border: 1px solid var(--borde);
  color: var(--texto);
}

main {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 18px calc(var(--barra) + var(--abajo) + 90px);
}

/* ------------------------------ Barra inferior --------------------------- */

.barra-tabs {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-bottom: var(--abajo);
  background: color-mix(in srgb, var(--superficie) 90%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--borde);
}

.barra-tabs button {
  display: grid; justify-items: center; gap: 3px;
  padding: 9px 0 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--suave);
  transition: color .15s;
}
.barra-tabs button .ico { width: 22px; height: 22px; stroke-width: 1.8; }
.barra-tabs button[aria-current="page"] { color: var(--acento); }

.fab {
  position: fixed;
  right: 18px;
  bottom: calc(var(--barra) + var(--abajo) + 18px);
  z-index: 31;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acento);
  color: #fff;
  box-shadow: 0 6px 20px -4px color-mix(in srgb, var(--acento) 60%, transparent);
  transition: transform .12s;
}
.fab:active { transform: scale(.93); }
.fab .ico { width: 26px; height: 26px; stroke-width: 2.4; }

/* -------------------------------- Tarjetas ------------------------------- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 14px;
  overflow: hidden;
}
.tarjeta > .cuerpo { padding: 16px; }

.titulo-seccion {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 22px 2px 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--suave);
}
.titulo-seccion button { font-size: 13px; font-weight: 600; color: var(--acento);
                         text-transform: none; letter-spacing: 0; }

/* Panel de saldo total */
.panel-saldo { padding: 20px 18px; }
.panel-saldo .etiqueta { font-size: 13px; color: var(--suave); font-weight: 600; }
.panel-saldo .cifra { font-size: 38px; font-weight: 700; letter-spacing: -.03em;
                      margin: 2px 0 4px; line-height: 1.05; }
.panel-saldo .nota { font-size: 13px; color: var(--suave); }

.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.kpi {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px;
}
.kpi .etiqueta { font-size: 12px; color: var(--suave); font-weight: 600;
                 display: flex; align-items: center; gap: 5px; }
.kpi .cifra { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.kpi.gasto .cifra  { color: var(--peligro); }
.kpi.ingreso .cifra { color: var(--bien); }

/* --------------------------------- Filas -------------------------------- */

.lista { display: flex; flex-direction: column; }
.lista > * + * { border-top: 1px solid var(--borde); }

.fila {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px;
  width: 100%; text-align: left;
  background: none;
}
.fila:active { background: var(--superficie-2); }

.emoji {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 19px;
  background: var(--superficie-2);
}

.fila .medio { flex: 1; min-width: 0; }
.fila .nombre { font-weight: 600; font-size: 15px;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .detalle { font-size: 12.5px; color: var(--suave); margin-top: 1px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .monto { font-weight: 650; font-size: 15px; text-align: right; flex: none; }
.fila .monto.neg { color: var(--peligro); }
.fila .monto.pos { color: var(--bien); }
.fila .monto small { display: block; font-size: 11px; font-weight: 500;
                     color: var(--suave); }

.dia-cabecera {
  padding: 14px 16px 6px;
  font-size: 12.5px; font-weight: 700; color: var(--suave);
  display: flex; justify-content: space-between;
  text-transform: capitalize;
}

/* ------------------------------ Barra de progreso ------------------------ */

.barra { height: 8px; border-radius: 99px; background: var(--superficie-2);
         overflow: hidden; margin-top: 9px; }
.barra > span { display: block; height: 100%; border-radius: 99px;
                transition: width .35s ease; }

.tope-fila { padding: 15px 16px; }
.tope-cima { display: flex; align-items: center; gap: 11px; }
.tope-cima .medio { flex: 1; min-width: 0; }
.tope-pie { display: flex; justify-content: space-between; margin-top: 7px;
            font-size: 12.5px; color: var(--suave); }
.tope-pie strong { color: var(--texto); }

/* --------------------------------- Chips -------------------------------- */

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px;
         scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 7px 14px; border-radius: 99px;
  background: var(--superficie); border: 1px solid var(--borde);
  font-size: 13.5px; font-weight: 600; color: var(--suave);
}
.chip[aria-pressed="true"] { background: var(--acento); border-color: var(--acento);
                             color: #fff; }

/* -------------------------------- Vacío --------------------------------- */

.vacio { text-align: center; padding: 46px 24px; color: var(--suave); }
.vacio .grande { font-size: 40px; margin-bottom: 10px; }
.vacio p { margin: 0 0 4px; font-size: 14.5px; }
.vacio .tenue { font-size: 13px; opacity: .8; }

/* -------------------------------- Botones ------------------------------- */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; border-radius: 13px;
  font-size: 16px; font-weight: 650;
  background: var(--acento); color: #fff;
  transition: opacity .12s, transform .12s;
}
.btn:active { transform: scale(.985); opacity: .9; }
.btn.secundario { background: var(--superficie-2); color: var(--texto);
                  border: 1px solid var(--borde); }
.btn.peligro { background: var(--peligro-tenue); color: var(--peligro); }
.btn:disabled { opacity: .45; }

/* -------------------------------- Sheet --------------------------------- */

.telon {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(8, 12, 20, .45);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.telon.abierto { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; inset: auto 0 0 0; z-index: 41;
  max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--fondo);
  border-radius: 22px 22px 0 0;
  transform: translateY(101%);
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  box-shadow: 0 -8px 40px -8px rgba(0, 0, 0, .35);
}
.sheet.abierto { transform: translateY(0); }

.sheet-cabecera {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--borde);
}
.sheet-cabecera h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 700; }
.sheet-cabecera button { font-size: 15px; font-weight: 600; color: var(--acento); }
.sheet-cuerpo { overflow-y: auto; padding: 16px 16px calc(var(--abajo) + 24px); }

/* ------------------------------ Formularios ----------------------------- */

.campo { margin-bottom: 15px; }
.campo > label { display: block; font-size: 12.5px; font-weight: 700;
                 color: var(--suave); margin-bottom: 6px;
                 text-transform: uppercase; letter-spacing: .03em; }

.entrada {
  width: 100%; padding: 13px 14px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 12px;
  -webkit-appearance: none; appearance: none;
}
.entrada:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
select.entrada { background-image: none; }
textarea.entrada { min-height: 72px; resize: vertical; }

/* Monto grande */
.monto-grande {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; padding: 14px 16px;
}
.monto-grande .simbolo { font-size: 20px; font-weight: 600; color: var(--suave); }
.monto-grande input {
  flex: 1; min-width: 0;
  border: 0; background: none; padding: 0;
  font-size: 34px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.monto-grande input:focus { outline: none; }

/* Selector segmentado */
.segmentos {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 3px; padding: 3px;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 12px;
}
.segmentos button {
  padding: 9px 4px; border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--suave);
}
.segmentos button[aria-pressed="true"] {
  background: var(--superficie); color: var(--texto);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* Rejilla de categorías y emoji */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
           gap: 8px; }
.rejilla button {
  display: grid; justify-items: center; gap: 5px;
  padding: 10px 4px; border-radius: 13px;
  background: var(--superficie); border: 1px solid var(--borde);
  font-size: 11px; font-weight: 600; color: var(--suave);
  line-height: 1.2; text-align: center;
}
.rejilla button span.e { font-size: 21px; }
.rejilla button[aria-pressed="true"] {
  border-color: var(--acento); color: var(--texto);
  background: var(--acento-tenue);
}
.rejilla.emojis { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
.rejilla.emojis button { padding: 9px 0; font-size: 22px; }

.colores { display: flex; flex-wrap: wrap; gap: 9px; }
.colores button { width: 32px; height: 32px; border-radius: 50%;
                  border: 2px solid transparent; }
.colores button[aria-pressed="true"] { border-color: var(--texto);
                                       outline: 2px solid var(--fondo);
                                       outline-offset: -5px; }

/* ------------------------------ Interruptor ----------------------------- */

.fila-ajuste { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.fila-ajuste .medio { flex: 1; }
.fila-ajuste .nombre { font-weight: 600; font-size: 15px; }
.fila-ajuste .detalle { font-size: 12.5px; color: var(--suave); margin-top: 1px; }

.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.switch i {
  position: absolute; inset: 0; border-radius: 99px;
  background: var(--borde); transition: background .2s;
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s;
}
.switch input:checked + i { background: var(--bien); }
.switch input:checked + i::after { transform: translateX(20px); }

/* -------------------------------- Bloqueo ------------------------------- */

.bloqueo {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: calc(var(--arriba) + 28px) 28px calc(var(--abajo) + 34px);
  background: var(--fondo);
}
.bloqueo .marca { font-size: 44px; }
.bloqueo h1 { margin: 0; font-size: 21px; font-weight: 700; }
.bloqueo .aviso { font-size: 13.5px; color: var(--suave); min-height: 20px;
                  text-align: center; }
.bloqueo .aviso.mal { color: var(--peligro); font-weight: 600; }

.puntos { display: flex; gap: 13px; }
.puntos i { width: 12px; height: 12px; border-radius: 50%;
            border: 1.6px solid var(--suave); transition: background .12s; }
.puntos i.on { background: var(--acento); border-color: var(--acento); }

.teclado { display: grid; grid-template-columns: repeat(3, 74px);
           gap: 16px; justify-content: center; }
.teclado button {
  height: 74px; border-radius: 50%;
  font-size: 27px; font-weight: 500;
  background: var(--superficie); border: 1px solid var(--borde);
  display: grid; place-items: center;
}
.teclado button:active { background: var(--acento-tenue); }
.teclado button.plano { background: none; border: 0; font-size: 15px;
                        font-weight: 600; color: var(--acento); }

/* ------------------------------ Avisos / toast -------------------------- */

.toast {
  position: fixed; z-index: 70;
  left: 50%; bottom: calc(var(--barra) + var(--abajo) + 86px);
  transform: translate(-50%, 16px);
  max-width: min(92vw, 30rem);
  padding: 11px 18px; border-radius: 99px;
  background: #10192b; color: #fff;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.mal { background: var(--peligro); }

.cinta-offline {
  padding: 7px 18px; text-align: center;
  font-size: 12.5px; font-weight: 600;
  background: var(--alerta-tenue); color: var(--alerta);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}