/* Los estilos de la página de Cuentas, en su propio archivo.
 *
 * Vivían al final de `estilo.css` y el mismo día que se publicó la página
 * (23/09) Safari la enseñó sin ellos: tenía `estilo.css` guardado de las
 * otras páginas y no fue a pedir la versión nueva, así que el ticket y el
 * formulario salieron en texto pelón. Un archivo que el navegador nunca ha
 * visto no puede tenerlo guardado viejo. Además `estilo.css` ya pesaba 60 kB
 * y esto solo lo necesita una página.
 *
 * Usa las variables de `estilo.css` (colores, fuentes, --pendiente, --vivo),
 * que se carga antes. */

/* ── Cuentas ─────────────────────────────────────────────────────────────
 *
 * La quinta página, y tampoco se parece a las otras cuatro: es una CAJA
 * REGISTRADORA. El mes sale impreso en un ticket —papel un poco más cálido
 * que el fondo, letra de máquina, renglones unidos por puntitos, el borde
 * de abajo arrancado en picos— y todo lo demás son renglones sencillos, para
 * que el ticket sea lo único que pide la mirada (Ale, 23/09).
 *
 * El azul de marca sale tres veces: el botón «+ Movimiento», la cifra de
 * «pueden sacar» y el marco de la semana en curso. Ámbar es «esto pide
 * algo» (lo que les deben, un cargo que venció), igual que en el resto del
 * tablero; el verde, lo que entró. Un número en rojo no sale nunca: una
 * cuenta en negativo se dice con palabras. */

:root {
  --papel:       #FFFDF8;
  --papel-borde: #ECE6D8;
  --gasto:       #8A94A3;
  --retiro:      #3F5F86;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel:       #1B222C;
    --papel-borde: #2A3340;
    --gasto:       #6E7887;
    --retiro:      #8FB3DC;
  }
}

.hoja.caja { max-width: 60rem; gap: 2rem; }
.caja > * { min-width: 0; }
.caja__izq, .caja__der { display: grid; gap: 1.8rem; align-content: start; min-width: 0; }

@media (min-width: 52rem) {
  .hoja.caja { grid-template-columns: 19rem minmax(0, 1fr); gap: 2.6rem; }
  /* La caja se queda a la vista mientras se baja por los movimientos. */
  .caja__izq { position: sticky; top: 1rem; }
  .caja__par { grid-template-columns: 1fr 1fr; }
}

.cifra { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.punto {
  display: inline-block;
  width: .5rem; height: .5rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--color, var(--gasto));
  vertical-align: .1em;
}

.vacio { margin: 0; color: var(--tinta-suave); font-size: .88rem; }

.caja__titulo {
  margin: 0 0 .7rem;
  font: 500 .88rem var(--fuente);
  color: var(--tinta-suave);
}

.caja__par { display: grid; gap: 1.8rem; }

/* ── El mes y el botón ── */

.caja__mando { display: flex; align-items: center; gap: .3rem; }
.mes {
  margin: 0;
  min-width: 6.5rem;
  text-align: center;
  font: 600 1.25rem/1 var(--fuente-display);
}
.mes__flecha {
  width: 2.2rem; height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tinta-suave);
  font: 400 1.4rem/1 var(--fuente);
  cursor: pointer;
}
.mes__flecha:hover { background: var(--tarjeta); color: var(--tinta); }
.caja__nuevo {
  width: auto;
  margin-left: auto;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-size: .92rem;
  white-space: nowrap;
}

/* ── El ticket ──
 *
 * Los picos del borde de abajo son una máscara, no una imagen: así el papel
 * es un solo color en claro y en oscuro. La sombra va en el envoltorio,
 * porque una sombra dentro de la máscara quedaría recortada con ella. */
.ticket {
  filter: drop-shadow(0 1px 1px rgba(16,23,32,.07)) drop-shadow(0 6px 14px rgba(16,23,32,.06));
}
@media (prefers-color-scheme: dark) {
  .ticket { filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 6px 14px rgba(0,0,0,.3)); }
}
.ticket__papel {
  --diente: 7px;
  padding: 1.2rem 1.25rem calc(1.2rem + var(--diente));
  background: var(--papel);
  font: 400 .9rem/1.4 var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--diente)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--diente)) 100%;
}
.ticket__papel .cargando { font-family: var(--fuente-mono); }

.ticket__cabeza {
  margin: 0 0 .9rem;
  padding-bottom: .8rem;
  border-bottom: 1px dashed var(--tinta-suave);
  text-align: center;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--tinta-suave);
}

.ticket__renglones { margin: 0; }
/* El renglón de caja: nombre, puntitos hasta la cifra, cifra. */
.ticket__renglon { display: flex; align-items: baseline; gap: .4rem; margin: .35rem 0; }
.ticket__renglon dt::after { content: none; }
.ticket__renglon dd { margin: 0; order: 3; }
.ticket__renglon::after {
  content: "";
  order: 2;
  flex: 1;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--tinta-suave) 70%, transparent);
  transform: translateY(-.28em);
}
.ticket__renglon--total {
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1.5px solid var(--tinta);
  font-weight: 500;
}

.ticket__corte {
  position: relative;
  margin: 1.2rem -1.25rem .9rem;
  border-top: 1.5px dashed color-mix(in srgb, var(--tinta-suave) 60%, transparent);
}
.ticket__corte span {
  position: absolute;
  left: .6rem; top: -.72rem;
  padding: 0 .2rem;
  background: var(--papel);
  color: var(--tinta-suave);
  font-size: .9rem;
}

.ticket__rotulo {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.ticket__puede {
  margin: .15rem 0 .2rem;
  font: 700 2.3rem/1.1 var(--fuente-display);
  letter-spacing: -.02em;
  color: var(--marca);
}
.ticket__puede--cero { color: var(--tinta); }
.ticket__nota { margin: 0; font: 400 .8rem/1.45 var(--fuente); color: var(--tinta-suave); }

/* Se IMPRIME: el papel sale a tirones, como de una impresora de tickets, al
 * abrir la página y al cambiar de mes. Los tirones son `steps()`, no una
 * curva: una salida suave parecería una hoja que baja, no un ticket. */
@media (prefers-reduced-motion: no-preference) {
  .ticket { overflow: clip; overflow-clip-margin: 20px; }
  .ticket__papel--imprime { animation: imprime .9s steps(11, end) both; }
  @keyframes imprime {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
  }
}

/* ── ¿Dónde está el dinero? ── */

.donde { list-style: none; margin: 0; padding: 0; }
.donde__fila, .donde__real {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: .95rem;
}
.donde__debe { color: var(--tinta-suave); font-size: .88rem; }
.donde__nota { margin: .5rem 0 0; font-size: .85rem; color: var(--tinta-suave); }
.donde__real { margin: 0; border-bottom: 0; font-weight: 600; }

/* ── Les deben: el recuadro que pide algo ── */

.deben {
  padding: 1rem 1.15rem;
  border-radius: var(--radio);
  background: var(--pendiente);
  color: var(--pendiente-tinta);
}
.deben .caja__titulo { color: var(--pendiente-tinta); }
.deben__titulo .cifra { font-weight: 500; }
.deben__lista { list-style: none; margin: 0; padding: 0; }
.deben__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: .4rem .9rem;
  padding: .35rem 0;
  font-size: .92rem;
}
.deben__que b { font-weight: 600; }
.deben .acto { color: var(--pendiente-tinta); text-decoration: underline; text-underline-offset: 2px; }
.deben__nota { margin: .5rem 0 0; font-size: .85rem; }
/* Sin deudas no pide nada, así que tampoco lleva el ámbar. */
.deben--nada { padding: 0; background: none; color: inherit; }
.deben--nada .caja__titulo { color: var(--tinta-suave); }

/* ── Renglones sencillos: próximos cargos y cuánto deja cada hora ── */

.hilera { list-style: none; margin: 0; padding: 0; }
.hilera__fila {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--linea);
}
.hilera__que { flex: 1; min-width: 10rem; }
.hilera__que small, .mov__que small {
  display: block;
  margin-top: .1rem;
  color: var(--tinta-suave);
  font-size: .8rem;
}
.hilera__actos { display: flex; gap: .7rem; width: 100%; justify-content: flex-end; }
@media (min-width: 36rem) { .hilera__actos { width: auto; } }
/* Un cargo que ya venía y nadie marcó: pide algo, así que ámbar. */
.hilera__fila--pide small { color: var(--pendiente-tinta); }
.hilera__fila--pide { box-shadow: inset 3px 0 0 var(--pendiente-tinta); padding-left: .7rem; }

/* ── Semana a semana ── */

.semanas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: .6rem;
}
.semana { padding: .4rem .35rem; border-radius: 8px; }
.semana--actual { outline: 1.5px solid var(--marca); outline-offset: 0; }
.semana__barras {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 5.5rem;
  border-bottom: 1px solid var(--linea);
}
.semana__barras span {
  flex: 1;
  height: var(--alto);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
}
.barra-e { background: var(--vivo-tinta); }
.barra-g { background: var(--gasto); }
.barra-r { background: var(--retiro); }
@media (prefers-reduced-motion: no-preference) {
  .semana__barras span { animation: crece .7s var(--suave) both; }
  .semana:nth-child(2) span { animation-delay: .05s; }
  .semana:nth-child(3) span { animation-delay: .1s; }
  .semana:nth-child(4) span { animation-delay: .15s; }
  .semana:nth-child(5) span { animation-delay: .2s; }
  .semana:nth-child(6) span { animation-delay: .25s; }
  @keyframes crece { from { transform: scaleY(0); } }
}
.semana__pie {
  display: flex;
  flex-direction: column;
  margin: .35rem 0 0;
  font-size: .76rem;
  color: var(--tinta-suave);
}
.semana { min-width: 0; }
.semana__pie .cifra { color: var(--tinta); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; }
.semanas__leyenda { display: flex; gap: 1rem; margin: .7rem 0 0; font-size: .78rem; color: var(--tinta-suave); }
.semanas__leyenda span::before {
  content: "";
  display: inline-block;
  width: .55rem; height: .55rem;
  margin-right: .35rem;
  border-radius: 2px;
  vertical-align: -.02em;
}
.semanas__e::before { background: var(--vivo-tinta); }
.semanas__g::before { background: var(--gasto); }
.semanas__r::before { background: var(--retiro); }

/* ── Movimientos ── */

.caja__filtro { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .5rem; }
.caja__filtro button {
  padding: .3rem .8rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--tarjeta);
  color: var(--tinta-suave);
  font: 500 .82rem var(--fuente);
  cursor: pointer;
}
.caja__filtro button:hover { color: var(--tinta); }
.caja__filtro button[aria-pressed='true'] { border-color: var(--tinta); color: var(--tinta); }

.movs { list-style: none; margin: 0; padding: 0; }
.mov {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .2rem .8rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: .93rem;
}
.mov__fecha { font: 400 .8rem var(--fuente-mono); color: var(--tinta-suave); }
.mov__que { overflow-wrap: anywhere; }
.mov__cifra { text-align: right; }
.mov--entra .mov__cifra { color: var(--vivo-tinta); }
.mov--espera .mov__cifra, .mov--pase .mov__cifra { color: var(--tinta-suave); }
/* La fecha y el texto ocupan los dos pisos del renglón; a la derecha, la
   cifra arriba y «borrar» debajo, a la altura de la línea pequeña. Así
   borrar no gasta un renglón propio en cada movimiento. */
.mov__fecha, .mov__que { grid-row: span 2; }
.mov .borrar { grid-column: 3; justify-self: end; align-self: end; padding-right: 0; }
.movs > .vacio { padding: .6rem 0; }

.chip {
  display: inline-block;
  margin-left: .3rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--pista);
  color: var(--tinta-suave);
  font: 500 .72rem var(--fuente);
  vertical-align: .08em;
}
.chip--pide { background: var(--pendiente); color: var(--pendiente-tinta); }

/* ── ¿En qué se fue? ── */

.gastos { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.gastos li { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: .9rem; }
.gastos__barra {
  flex-basis: 100%;
  height: .4rem;
  margin-top: .25rem;
  border-radius: 99px;
  background: linear-gradient(var(--gasto), var(--gasto)) 0 0 / var(--ancho) 100% no-repeat, var(--pista);
}

/* ── Anotar: el diálogo ── */

.apunte {
  /* Anclado arriba y no centrado: al cambiar de tipo cambia de alto, y
     centrado saltaría arriba y abajo bajo el dedo. */
  margin: max(1rem, 6vh) auto auto;
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - max(2rem, 12vh));
  padding: 1.4rem 1.3rem 1.2rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  background: var(--tarjeta);
  color: var(--tinta);
  box-shadow: var(--sombra);
}
.apunte::backdrop { background: rgba(11,16,23,.45); }
@media (prefers-reduced-motion: no-preference) {
  .apunte[open] { animation: asoma .3s var(--suave); }
  @keyframes asoma { from { opacity: 0; transform: translateY(12px) scale(.98); } }
}
.apunte__titulo { margin: 0 0 1rem; font: 600 1.2rem var(--fuente-display); }

.apunte__tipos, .apunte__dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--linea);
  border-radius: 999px;
}
.apunte__tipos button, .apunte__dos button {
  padding: .55rem .3rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--tinta-suave);
  font: 500 .86rem var(--fuente);
  cursor: pointer;
}
.apunte__tipos button[aria-pressed='true'], .apunte__dos button[aria-pressed='true'] {
  background: var(--tinta);
  color: var(--tarjeta);
}

.apunte__campos { display: grid; gap: .9rem; margin: 1.1rem 0 0; }
.casilla { display: grid; gap: .3rem; min-width: 0; }
.casilla__nombre { font-size: .82rem; color: var(--tinta-suave); }
.casilla__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .9rem; }
.casilla__error { font-size: .8rem; color: var(--peligro); }
.casilla__error:empty { display: none; }
.apunte :is(input:not([type='checkbox']), select) {
  width: 100%;
  min-width: 0;
  padding: .6rem .7rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 1rem var(--fuente);
}
.apunte [aria-invalid='true'] { border-color: var(--peligro); }
/* El signo de pesos va pegado dentro de la casilla del monto. */
.casilla__pesos { position: relative; display: block; }
.casilla__pesos::before {
  content: "$";
  position: absolute;
  left: .7rem; top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-suave);
  font-family: var(--fuente-mono);
  pointer-events: none;
}
.apunte .casilla__pesos input { padding-left: 1.5rem; font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }
#monto { font-size: 1.3rem; }

.mitades { display: grid; gap: .5rem; }
.mitad { display: grid; gap: .3rem; font-size: .88rem; }
.mitad b { font-weight: 500; }

.pagos { display: grid; gap: .6rem; }
.pago {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  padding: .7rem;
  border-radius: 12px;
  background: var(--fondo);
}
.pago__cayo { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--tinta-suave); }
.pagos > .acto, .apunte__campos > .acto { justify-self: start; text-decoration: underline; text-underline-offset: 2px; }

.apunte__fallo { margin: .9rem 0 0; color: var(--peligro); font-size: .88rem; }
.apunte__fallo:empty { display: none; }
.apunte__botones { display: grid; grid-template-columns: 1fr 2fr; gap: .6rem; margin-top: 1.2rem; }
.apunte [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ticket__papel--imprime, .semana__barras span, .apunte[open] { animation: none; }
}