/* Mis finanzas — Ing. Edgardo Escorcia
   Identidad verdiblanca: verde tradicional y blanco, con una franja vertical
   que evoca la camiseta y los cañaduzales. Cifras en tipografía condensada,
   como marcador. Las filas conservan los puntos guía de la libreta contable. */

:root {
  --papel: #f3f6f2;
  --superficie: #ffffff;
  --tinta: #10241a;
  --tinta-2: #4e6157;
  --linea: #c7d3ca;
  --banda: #0a5c2e;          /* cabecera y barra de pestañas */
  --sobre-banda: #ffffff;
  --franja: #37a35f;         /* franja alterna sobre la banda */
  --gasto: #12261b;          /* gastos: casi negro verdoso */
  --ahorro: #0b7a3b;         /* ahorro y acento: verde */
  --libre: #8fd3a6;          /* libre: verde claro */
  --alerta: #b3261e;
  --foco: #0b7a3b;
  --sobre-acento: #ffffff;
  --texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Si Barlow Condensed no carga, se usa una condensada del sistema para que las cifras y el mes no se rompan */
  --titulo: 'Barlow Condensed', 'Avenir Next Condensed', 'Roboto Condensed', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif-condensed, 'Barlow', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #08130d;
    --superficie: #102018;
    --tinta: #e8f1ea;
    --tinta-2: #9bb2a4;
    --linea: #24392d;
    --banda: #0b3a20;
    --franja: #1f7a45;
    --gasto: #7c9c89;
    --ahorro: #2fbf6b;
    --libre: #d7f5e1;
    --alerta: #f08a78;
    --foco: #2fbf6b;
    --sobre-acento: #06110b;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.0625rem/1.45 var(--texto);
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.envoltura { max-width: 40rem; margin: 0 auto; padding: 0 1.1rem; }
.suave { color: var(--tinta-2); }
.error { color: var(--alerta); min-height: 1.4em; margin: .25rem 0; font-weight: 500; }

/* Franja vertical: verde y blanco alternados */
.franja {
  height: .55rem;
  background: repeating-linear-gradient(90deg, #ffffff 0 .9rem, var(--franja) .9rem 1.8rem);
}

/* ---------- Cabecera ---------- */
#cabecera {
  position: sticky; top: 0; z-index: 5;
  background: var(--banda); color: var(--sobre-banda);
  padding-top: env(safe-area-inset-top);
}
.cab-fila { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .55rem; }
.marca-bloque { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marca { font: 800 1.35rem/1 var(--titulo); letter-spacing: .02em; }
.firma { font: 500 .85rem/1.3 var(--texto); opacity: .85; }
.enlace {
  background: none; border: 0; padding: .5rem 0 .5rem .75rem; cursor: pointer; min-height: 2.75rem;
  color: var(--sobre-banda); text-decoration: underline; text-underline-offset: 3px; opacity: .9;
}
.selector-mes { display: flex; align-items: center; gap: .5rem; padding: .1rem 0 .7rem; }
#mes-nombre {
  flex: 1; margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  font: 800 clamp(1.6rem, 8vw, 2.2rem)/1 var(--titulo); text-transform: uppercase; letter-spacing: .01em;
}
#mes-nombre .anio { font: 600 .95rem/1.3 var(--texto); letter-spacing: .28em; text-indent: .28em; opacity: .85; }
.paso {
  width: 2.75rem; height: 2.75rem; border-radius: .4rem; cursor: pointer;
  background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); color: var(--sobre-banda);
  font-size: 1.6rem; line-height: 1;
}
.paso:hover { background: rgba(255, 255, 255, .12); }
.semana-nav .paso { border-color: var(--linea); color: var(--tinta); }
.semana-nav .paso:hover { background: transparent; border-color: var(--tinta-2); }
#cabecera :focus-visible, #pestanas :focus-visible { outline-color: #ffffff; }

/* ---------- Contenido ---------- */
/* #contenido (y no «main») para ganarle en especificidad al padding de .envoltura */
#contenido { padding-top: .5rem; padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
h2 { margin: 0; font: 700 1.55rem/1.1 var(--titulo); letter-spacing: .01em; }

.sec { margin-top: 1.9rem; }
.sec-cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-top: 4px solid var(--ahorro); padding-top: .5rem; margin-bottom: .2rem;
}
.sec-cab .monto { font-size: 1.35rem; }
.sub { margin: 1.1rem 0 .1rem; font: 600 .95rem var(--texto); color: var(--tinta-2); display: flex; justify-content: space-between; }

.vacio { color: var(--tinta-2); margin: .8rem 0; }
.aviso {
  margin: .6rem 0; padding: .6rem .8rem; border-left: 4px solid var(--alerta);
  background: var(--superficie); font-weight: 500;
}

/* ---------- Filas con puntos guía ---------- */
.filas { list-style: none; margin: 0; padding: 0; }
.fila {
  display: flex; align-items: baseline; gap: .5rem; width: 100%;
  padding: .7rem 0; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
}
button.fila:hover .fila-et { text-decoration: underline; text-underline-offset: 3px; }
.fila.fija { cursor: default; padding: .5rem 0; }
.fila.fuerte { font-weight: 600; }
.fila-et { min-width: 0; overflow-wrap: anywhere; }
.fila-et small { display: block; color: var(--tinta-2); font-size: .85rem; font-weight: 400; }
.punteado { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--linea); transform: translateY(-.3em); }
.monto { font: 700 1.2rem/1.2 var(--titulo); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pos { color: var(--ahorro); }
.neg { color: var(--alerta); }
small.pos, small.neg { font-weight: 500; }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .45rem; }
.dot-gasto { background: var(--gasto); }
.dot-ahorro { background: var(--ahorro); }
.dot-libre { background: var(--libre); box-shadow: inset 0 0 0 1px var(--ahorro); }

.fila-doble { display: flex; align-items: center; gap: .25rem; }
.fila-doble .fila { flex: 1; }
.mini {
  flex: none; min-height: 2.75rem; padding: 0 .6rem; background: none; border: 0; cursor: pointer;
  color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; font-size: .9rem;
}

/* ---------- Casillas de recibido / pagado ---------- */
.con-marca { display: flex; align-items: center; }
.con-marca .fila { flex: 1; min-width: 0; }
.casilla { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: -.55rem; cursor: pointer; }
.casilla input { width: 1.4rem; height: 1.4rem; accent-color: var(--ahorro); cursor: pointer; }
.hecho .fila-et, .hecho .monto { color: var(--tinta-2); }

/* ---------- Reparto del mes (barra) ---------- */
.barra { display: flex; gap: 2px; height: 2.6rem; margin: .8rem 0 .5rem; border-radius: .35rem; overflow: hidden; background: var(--linea); }
.seg { flex: 0 1 auto; min-width: 0; }
.seg-gasto { background: var(--gasto); }
.seg-ahorro { background: var(--ahorro); }
.seg-libre { background: var(--libre); }

/* ---------- Tabla plan vs real ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; margin-top: .4rem; }
.tabla th { font-weight: 500; color: var(--tinta-2); text-align: right; padding: .3rem 0 .3rem .5rem; border-bottom: 1px solid var(--linea); }
.tabla td { text-align: right; padding: .55rem 0 .55rem .5rem; border-bottom: 1px dotted var(--linea); }
.tabla th:first-child, .tabla td:first-child { text-align: left; padding-left: 0; overflow-wrap: anywhere; }
.tabla tfoot td { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--ahorro); }

/* ---------- Botones ---------- */
.btn {
  min-height: 2.75rem; padding: 0 1.15rem; border-radius: .4rem; cursor: pointer;
  border: 1.5px solid var(--ahorro); background: var(--ahorro); color: var(--sobre-acento); font-weight: 600;
}
.btn:hover { filter: brightness(1.08); }
.btn-sec { background: transparent; color: var(--ahorro); }
.btn-peligro { background: transparent; color: var(--alerta); border-color: var(--alerta); }
.botones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }

.segmentado { display: flex; border: 1.5px solid var(--banda); border-radius: .5rem; padding: 3px; gap: 3px; margin-top: .9rem; }
.segmentado button {
  flex: 1; min-height: 2.5rem; border: 0; border-radius: .35rem; background: transparent; cursor: pointer; font-weight: 500; color: var(--tinta-2);
}
.segmentado button[aria-pressed="true"] { background: var(--banda); color: var(--sobre-banda); font-weight: 600; }

/* ---------- Semana día a día ---------- */
.semana-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .4rem 0; }
.semana-nav span { font: 700 1.2rem var(--titulo); }

/* ---------- Me deben ---------- */
details.deuda { border-bottom: 1px solid var(--linea); }
details.deuda summary { list-style: none; cursor: pointer; }
details.deuda summary::-webkit-details-marker { display: none; }
details.deuda summary .fila { padding: .8rem 0; }
details.deuda[open] summary .fila-et { font-weight: 600; }
.deuda-cuerpo { padding: 0 0 1rem; }
progress { width: 100%; height: .55rem; accent-color: var(--ahorro); margin: .2rem 0 .4rem; }
.abono { display: flex; align-items: baseline; gap: .5rem; padding: .25rem 0; }
.abono .mini { min-height: 2.25rem; }

/* ---------- Pestañas ---------- */
#pestanas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  background: var(--banda);
  padding-bottom: env(safe-area-inset-bottom);
}
#pestanas .interior { max-width: 40rem; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
#pestanas button {
  min-height: 3.4rem; padding: 0 2px; background: none; border: 0; border-top: 4px solid transparent;
  cursor: pointer; font-size: .9rem; font-weight: 500; color: rgba(255, 255, 255, .78); white-space: nowrap;
}
#pestanas button[aria-current="page"] { color: #ffffff; font-weight: 700; border-top-color: #ffffff; background: rgba(255, 255, 255, .08); }

/* ---------- Formularios y diálogo ---------- */
dialog {
  border: 0; border-radius: .6rem; padding: 1.25rem;
  width: min(28rem, calc(100% - 1.5rem)); background: var(--superficie); color: var(--tinta);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
dialog::backdrop { background: rgba(4, 20, 10, .6); }
dialog h2 { margin-bottom: .6rem; overflow-wrap: anywhere; }
.campo { margin-bottom: .85rem; }
.campo label { display: block; margin-bottom: .25rem; font-weight: 500; font-size: .95rem; }
.campo input:not([type="checkbox"]), .campo select {
  width: 100%; min-height: 2.9rem; padding: .5rem .7rem;
  border: 1.5px solid var(--linea); border-radius: .4rem; background: var(--papel);
}
.campo input:focus, .campo select:focus { border-color: var(--foco); }
.campo .ayuda { margin: .25rem 0 0; font-size: .85rem; color: var(--tinta-2); }
.campo.check label { display: flex; gap: .6rem; align-items: center; min-height: 2.75rem; cursor: pointer; }
.campo.check input { width: 1.3rem; height: 1.3rem; accent-color: var(--ahorro); }
.acciones { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.espacio { flex: 1; }

/* ---------- Inicio de sesión: pantalla verde ---------- */
.login {
  position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.25rem;
  background: var(--banda); color: var(--sobre-banda);
}
.login .franja { position: absolute; top: 0; left: 0; right: 0; }
.login-caja { width: min(22rem, 100%); }
.login-caja h1 { margin: 0; font: 800 3rem/1 var(--titulo); letter-spacing: .02em; text-transform: uppercase; }
.login-caja .firma { margin: .3rem 0 1.2rem; font-size: 1rem; }
.login-caja .suave { color: rgba(255, 255, 255, .8); }
.login-caja .error { color: #ffc2b8; }
.login-caja .campo input { background: #ffffff; color: #10241a; border-color: #ffffff; }
.login-caja .btn { width: 100%; background: #ffffff; color: var(--banda); border-color: #ffffff; }
.login .campo label { color: #ffffff; }
.login :focus-visible { outline-color: #ffffff; }

/* ---------- Aviso emergente ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(4.8rem + env(safe-area-inset-bottom)); z-index: 20;
  transform: translateX(-50%); max-width: calc(100% - 2rem);
  padding: .65rem 1rem; border-radius: .4rem; background: var(--tinta); color: var(--papel);
  font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toast.visible { opacity: 1; }
.toast.error { background: var(--alerta); color: #fff; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }