/* jmv-gestion :: hoja unica. Movil primero. */

:root {
  /*
   * La paleta es la misma que DocuVault: colores de sistema de Apple, con el
   * teal de acento. Las dos apps son la misma suite, y saltar de una a la otra
   * no tiene que sentirse como cambiar de aplicacion.
   *
   * Los NOMBRES se quedan en castellano -- `--tinta`, `--acento` -- porque los
   * usan mil reglas de este archivo. Lo que se unifico son los valores.
   */
  --bg: #f2f2f7;
  --card: #ffffff;
  --tinta: #000000;
  --tenue: rgba(60, 60, 67, .6);
  --borde: rgba(60, 60, 67, .18);
  --acento: #238698;
  --acento-cl: rgba(35, 134, 152, .12);
  --ok: #248a3d;
  --ok-cl: rgba(52, 199, 89, .14);
  --alerta: #d70015;
  --alerta-cl: rgba(255, 59, 48, .12);
  --pronto: #c25e00;
  --pronto-cl: rgba(255, 149, 0, .14);
  /* La etiqueta "cita" en indigo: es lo unico que no es plata, y con el naranja
     se confundia con "vence pronto", que si lo es. */
  --cita: #5856d6;
  --cita-cl: rgba(88, 86, 214, .12);
  --sombra: 0 1px 2px rgba(16, 20, 30, .05), 0 4px 14px rgba(16, 20, 30, .05);
  --radio: 13px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  /*
   * Lo mínimo que se le deja libre arriba a una hoja: la barra de estado —el
   * reloj, la señal, la isla— y nunca menos de 8px, para que no quede pegada al
   * borde en una pantalla sin muesca.
   *
   * Va como variable propia y no como un env() suelto adentro del calc porque
   * así se puede pisar desde afuera, que es como `ui-teclado.ps1` simula un
   * iPhone con muesca en un Chrome de escritorio, donde el env() vale 0.
   */
  --tope-hoja: max(var(--safe-t), 8px);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* El oscuro de Apple es NEGRO puro, no gris azulado: en pantalla OLED los
       pixeles del fondo quedan apagados y el contraste es mayor. */
    --bg: #000000;
    --card: #1c1c1e;
    --tinta: #ffffff;
    --tenue: rgba(235, 235, 245, .6);
    --borde: rgba(235, 235, 245, .2);
    --acento: #30b0c7;
    --acento-cl: rgba(48, 176, 199, .18);
    --ok: #30d158;
    --ok-cl: rgba(48, 209, 88, .18);
    --alerta: #ff453a;
    --alerta-cl: rgba(255, 69, 58, .18);
    --pronto: #ff9f0a;
    --pronto-cl: rgba(255, 159, 10, .18);
    --cita: #7d7bea;
    --cita-cl: rgba(125, 123, 234, .18);
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  }
}

* {
  box-sizing: border-box;
}

/* Reglas como `.campo { display: block }` le ganan en especificidad al
   [hidden] del navegador. Esto lo deja siempre por encima. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tinta);
  /* Mismo stack que DocuVault: SF Pro primero en Apple, y el resto igual que
     antes. `-apple-system` va adelante de `system-ui` a proposito -- al reves,
     Safari elige la variante de texto y no la de display en los titulos. */
  font: 400 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Mientras hay una hoja abierta. El `top` negativo lo pone app.js con la
   posición en la que estabas, para que el fondo no salte al principio. */
body.sin-scroll {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------- Cabecera ----------------------------- */

.cab {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
  padding: max(env(safe-area-inset-top, 0px), 8px) 14px 0;
}

.cab-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
}

.cab-marca {
  min-width: 0;
}

.cab-top h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 660;
  letter-spacing: -.02em;
  line-height: 1.15;
}

/* Chiquita y pegada al título: cuesta 14px de alto en una cabecera que ya lleva
   el mes, los totales y los filtros. */
.hoy-es {
  display: block;
  margin-top: -1px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cab-acciones {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}

.icono:active {
  background: var(--borde);
}

/* El atajo a Telegram. Su SVG es macizo, no de trazo como los demás, así que
   hay que apagarle el trazo global. */
.icono-tg {
  text-decoration: none;
  color: var(--tenue);
}

.icono-tg svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

.icono-tg:active {
  color: var(--acento);
}

/* Gira mientras la app se está recargando, para que el toque tenga respuesta
   inmediata aunque la recarga tarde. */
#btnRecargar.girando svg {
  animation: girar .7s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #btnRecargar.girando svg {
    animation: none;
    opacity: .5;
  }
}

/* Selector de periodo */

.periodo {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.periodo-flecha {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}

.periodo-flecha svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.periodo-flecha:active:not(:disabled) {
  background: var(--borde);
}

.periodo-flecha:disabled {
  opacity: .28;
  cursor: default;
}

.periodo-actual {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0;
  justify-items: center;
  padding: 2px 8px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
}

.periodo-actual b {
  font-size: 16.5px;
  font-weight: 640;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.periodo-actual span {
  font-size: 10.5px;
  color: var(--tenue);
}

.periodo-actual:active {
  background: var(--borde);
}

/* Filas de la hoja para elegir periodo */
.opcion-periodo {
  justify-content: space-between;
}

/* Cuando las opciones van adentro de un campo (elegir la cuenta de un método
   nuevo) el grid del cuerpo de la hoja ya no las separa: la separación la pone
   el contenedor propio, y más chica porque son parte de un mismo campo. */
.opciones-cuenta {
  display: grid;
  gap: 6px;
}
.opciones-cuenta .opcion { padding: 10px 13px; font-size: 15px; }

.opcion-periodo.activo {
  border-color: var(--acento);
  background: var(--acento-cl);
}

.opcion-periodo .op-nombre {
  font-weight: 550;
}

.opcion-periodo .op-detalle {
  font-size: 13px;
  color: var(--tenue);
  flex: none;
}

/* Totales */

.totales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 7px 0 6px;
}

.tot {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 5px 8px 6px;
  box-shadow: var(--sombra);
  min-width: 0;
}

@media (min-width: 560px) {
  .tot {
    padding: 10px 12px;
  }
}

.tot span {
  display: block;
  font-size: 10.5px;
  color: var(--tenue);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tot strong {
  display: block;
  margin-top: 2px;
  /* Con tres cajas el ancho es un tercio: la tipografia acompaña o los importes
     grandes quedan cortados con puntos suspensivos. */
  font-size: clamp(13px, 3.7vw, 17px);
  font-weight: 660;
  letter-spacing: -.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tot em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--tenue);
  min-height: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tot-pend strong {
  color: var(--alerta);
}

.tot-pago strong {
  color: var(--ok);
}

.tot-tarjeta strong {
  color: var(--acento);
}

.ver-metodos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  margin: -2px 0 6px;
  padding: 3px;
  border: 0;
  background: transparent;
  color: var(--tenue);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
}

.ver-metodos svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

.ver-metodos:active {
  color: var(--acento);
}

/* Filas de la hoja "por metodo" */
.met-grupo {
  display: grid;
  gap: 4px;
}

.met-total {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--tinta);
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 6px 9px 6px 11px;
  cursor: pointer;
}

.met-total.desplegado {
  border-color: var(--acento);
}

.met-flecha {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--tenue);
  transition: transform .18s;
}

.met-flecha svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.met-total.desplegado .met-flecha {
  transform: rotate(180deg);
  color: var(--acento);
}

/* Vencimientos del metodo, al desplegarlo */
.met-detalle {
  display: grid;
  gap: 3px;
  padding: 0 4px 4px;
}

.met-item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--borde);
  padding: 5px 8px 5px 10px;
  margin-left: 8px;
  cursor: pointer;
}

.met-item:active {
  background: var(--bg);
}

.met-item.es-pago {
  color: var(--tenue);
}

.met-item.es-pago .mi-desc {
  text-decoration: line-through;
  text-decoration-color: var(--borde);
}

/* N/A: se lista para que no parezca que falta, pero se ve que no cuenta. */
.met-item.es-nada {
  opacity: .5;
  border-left-style: dashed;
}

.met-item.es-nada .mi-monto {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .04em;
}

.mi-fecha {
  flex: none;
  font-size: 11.5px;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.mi-desc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-monto {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
}

/* flex:1 empuja el importe y la flecha contra el borde derecho. */
.met-izq {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
}

.met-izq strong {
  font-size: 14px;
  font-weight: 570;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.met-izq span {
  font-size: 11px;
  color: var(--tenue);
  line-height: 1.25;
}

.met-der {
  flex: none;
  display: grid;
  justify-items: end;
  text-align: right;
}

.met-der b {
  font-size: 14px;
  font-weight: 640;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.met-pend {
  color: var(--alerta);
}

.met-pag {
  color: var(--ok);
}

.met-cero {
  color: var(--tenue);
  font-weight: 500;
}

.met-usd {
  font-size: 11px;
  color: var(--tenue);
  line-height: 1.25;
}

/* Filtros + busqueda */

/* Filtros, búsqueda y cambio de vista, todo en una fila. El toggle salió de su
   propio renglón: eran dos palabras que costaban 34px de alto. */
.barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

.filtros {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chips {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}

/* Mientras se escribe, los filtros se van y el campo toma todo el ancho: con los
   tres chips puestos quedaba lugar para una sola letra.

   La clase la lleva `.filtros`, que es el elemento que toca el JavaScript.
   Estaba escrita como `.barra.buscando`, que no es el mismo elemento, asi que
   nunca coincidia y los chips se quedaban puestos mientras escribias. */
.filtros.buscando .chips {
  display: none;
}

.chip {
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--card);
  color: var(--tenue);
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}

.chip.activo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.buscador {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0 12px;
  height: 32px;
  color: var(--tenue);
}

.buscador svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.buscador input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: 15px;
  outline: none;
}

/* Se oculta la X nativa de WebKit: no aparece en todos los navegadores ni se
   puede estilar. La reemplaza el boton .limpiar, que se comporta igual siempre. */
.buscador input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.limpiar {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin-right: -5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--borde);
  color: var(--tinta);
  cursor: pointer;
}

.limpiar svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}

.limpiar:active {
  filter: brightness(.9);
}

/* El circulo mide 26px: esto le da area de toque comoda sin agrandarlo. */
.limpiar {
  position: relative;
}

.limpiar::after {
  content: "";
  position: absolute;
  inset: -8px;
}

/* ------------------------------- Lista ------------------------------ */

main {
  padding: 12px 14px calc(96px + var(--safe-b));
}

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

/* La fila es solo el contenedor: adentro van las acciones (fijas, atras) y la
   cara (la tarjeta visible, que se desplaza con el swipe). */
.item {
  position: relative;
  border-radius: var(--radio);
  touch-action: pan-y;
  /* el gesto horizontal nos llega a nosotros */
}

.item-cara {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio);
  padding: 4px 9px;
  box-shadow: var(--sombra);
  cursor: pointer;
  will-change: transform;
}

.item.vence-hoy .item-cara {
  border-left-color: var(--pronto);
}

.item.vencido .item-cara {
  border-left-color: var(--alerta);
}

.item.es-pagado .item-cara {
  border-left-color: var(--ok);
}

/* N/A atenuado. Se atenua el CONTENIDO, no la fila ni la tarjeta:
   - en la fila entera, el menu del kebab y el panel del swipe heredaban la
     transparencia y quedaban ilegibles justo cuando hay que tocarlos;
   - en la tarjeta, al volverse semitransparente dejaba ver el panel de
     acciones que vive detras.
   Atenuando los hijos, el fondo de la tarjeta sigue tapando lo de atras. */
.item.es-na .item-cara>* {
  opacity: .58;
}

.item.es-pagado .monto-ars {
  color: var(--tenue);
  font-weight: 500;
}

/* Panel de acciones, detras de la cara. */
.item-acciones {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  align-items: stretch;
  border-radius: var(--radio);
  overflow: hidden;
}

.acc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 78px;
  padding: 0 6px;
  border: 0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.acc svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}

.acc-dup {
  background: var(--acento);
}

.acc-del {
  background: var(--alerta);
}

.acc-del.confirmando {
  background: #7f1030;
}

/* Kebab por fila. Se muestra por ANCHO de pantalla, no por capacidad de hover:
   atarlo a (hover: hover) lo hacia desaparecer en notebooks tactiles, que en
   Windows son mayoria. En pantallas chicas se usa el swipe. */
.kebab {
  display: none;
}

@media (min-width: 640px) {
  .kebab {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tenue);
    cursor: pointer;
    transition: opacity .12s;
  }

  .kebab svg {
    width: 17px;
    height: 17px;
  }

  .kebab:hover {
    background: var(--borde);
  }

  .item-cara {
    grid-template-columns: 40px minmax(0, 1fr) auto 38px 30px;
  }

  /* Donde hay mouse de verdad, se revela al pasar por encima para no ensuciar
     la lista. Sin mouse queda siempre visible, porque si no es inalcanzable. */
  @media (hover: hover) {
    .kebab {
      opacity: 0;
    }

    .item:hover .kebab,
    .kebab[aria-expanded="true"],
    .kebab:focus-visible {
      opacity: 1;
    }
  }
}

/* Menu del kebab. */
.menu-fila {
  position: absolute;
  z-index: 40;
  right: 8px;
  top: calc(100% - 6px);
  min-width: 168px;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(8, 10, 16, .28);
  display: grid;
  gap: 2px;
}

.menu-fila button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}

.menu-fila button:hover {
  background: var(--bg);
}

.menu-fila svg {
  width: 17px;
  height: 17px;
  color: var(--tenue);
}

.menu-fila .peligro,
.menu-fila .peligro svg {
  color: var(--alerta);
}

/* Bloque de fecha */
.fecha {
  text-align: center;
  line-height: 1.05;
}

.fecha b {
  display: block;
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -.03em;
}

.fecha i {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tenue);
}

.item.vencido .fecha b {
  color: var(--alerta);
}

.item.vence-hoy .fecha b {
  color: var(--pronto);
}

/* Cuerpo */
.cuerpo {
  min-width: 0;
}

.titulo {
  font-size: 15.5px;
  font-weight: 570;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item.es-pagado .titulo {
  text-decoration: line-through;
  text-decoration-color: var(--borde);
}

.meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--tenue);
  min-width: 0;
}

.meta>* {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metodo {
  flex: 0 1 auto;
}

/*
 * Cuanto hay en la cuenta de la que sale este pago.
 *
 * Va pegado al metodo y mas chico que el: es contexto para leer la fila, no un
 * dato de la fila. El punto lo ata al metodo -- "DA Patagonia · $ 152.942" se
 * lee como una sola cosa, mientras que separado parecerian dos etiquetas
 * sueltas.
 *
 * `flex: none` para que, cuando falte lugar, se recorte el nombre del metodo y
 * no el numero: el nombre se adivina por el principio, un importe a medias no.
 */
.saldo-met {
  flex: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
  opacity: .85;
}

.saldo-met::before {
  content: '·';
  margin-right: 5px;
  opacity: .6;
}

/* Cuando ese saldo no cubre lo que se viene. Es la cuenta que uno estaba por
   hacer en la cabeza, fila por fila. */
.saldo-met.no-cubre {
  color: var(--alerta);
  opacity: 1;
  font-weight: 550;
}

/* Link visitable desde la fila. Va SOLO el icono, en cualquier pantalla: el
   dominio en texto ensucia la lista y compite por el ancho con el metodo. El
   destino igual se ve en el title del enlace y al abrir el vencimiento. */
.chip-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
  color: var(--acento);
  text-decoration: none;
  background: var(--acento-cl);
  border-radius: 8px;
  padding: 4px;
  font-size: 11.5px;
  font-weight: 600;
  margin: -3px 0;
  /* no empuja el alto de la fila */
}

.chip-link svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
  flex: none;
}

.chip-link:active {
  filter: brightness(.92);
}

/* El icono mide 21px, muy poco para un dedo. Esto le da un area de toque de
   ~40px sin agrandarlo visualmente ni empujar el resto de la linea.
   El overflow visible es imprescindible: `.meta > *` recorta a los hijos y sin
   esto el pseudo-elemento que agranda el toque queda cortado. */
.chip-link {
  position: relative;
  overflow: visible;
}

.chip-link::after {
  content: "";
  position: absolute;
  inset: -10px -9px;
}

.nota-pago {
  color: var(--ok);
  flex: none;
}

/* Montos */
.montos {
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
}

.monto-ars {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.monto-usd {
  font-size: 11.5px;
  color: var(--tenue);
}

/* "—" = falta cargar el importe (todavía no llegó la factura). */
.monto-cero {
  color: var(--tenue);
  font-weight: 500;
}

/* "N/A" = este mes no aplica. No es un importe pendiente de cargar. */
.monto-na {
  color: var(--tenue);
  font-weight: 550;
  font-size: 12px;
  letter-spacing: .04em;
}

/*
 * Una cita se reconoce por una etiqueta que dice "cita", al lado de la hora.
 *
 * Antes se probó pintando la fecha de naranja y no servía: quedaba a un paso
 * del ámbar de "vence pronto", y encima mezclaba dos cosas distintas — el color
 * de la fecha dice CÓMO viene (vencida, pronto) y el tipo dice QUÉ es. Una
 * palabra se lee sin tener que interpretar ningún tono.
 */
.cita-derecha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.badge-cita {
  flex: none;
  padding: 2px 7px;
  border-radius: 7px;
  background: var(--cita-cl);
  color: var(--cita);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: lowercase;
}

/* La hora ocupa el lugar del importe: es el dato que uno busca de un vistazo.
   Tabular para que queden alineadas entre filas. */
.hora-cita {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.item.es-cita .item-cara {
  border-left-style: dashed;
}

/* Etiquetita al lado del nombre en el ABM de obligaciones. */
.etiqueta-cita {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--acento-cl);
  color: var(--acento);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: 1px;
}

/* Un ingreso. Índigo y no verde: el verde ya significa "pagado" en la barra de
   la izquierda, y dos cosas distintas con el mismo color obligan a interpretar.
   Lo que dice "esto entra" es la palabra y el signo +, no el tono. */
.etiqueta-ingreso {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--acento-cl);
  color: var(--acento);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: 1px;
}

/* Lo mismo para una obligación archivada, pero en gris: no dice QUÉ es -- eso
   ya lo dice la etiqueta "cita" -- sino que está guardada. Un color fuerte la
   pondría al nivel del tipo, que es el dato que hay que leer primero. */
.etiqueta-guardada {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px dashed var(--borde);
  color: var(--tenue);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: 1px;
}

/* El importe de un ingreso. El "+" hace el trabajo; el color acompaña. */
.monto-entra { color: var(--ok); }

.badge-ingreso {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--acento);
}

/* La barra izquierda de un ingreso va punteada, igual que la de una cita: dice
   que la fila no es una deuda tuya. El color sigue siendo el del estado. */
.item.es-ingreso { border-left-style: dashed; }

/* Un movimiento tampoco es una deuda: misma barra punteada. */
.item.es-movimiento { border-left-style: dashed; }

/*
 * La etiqueta "movimiento", al lado del importe.
 *
 * Hace falta que se lea sin abrir nada: el numero de un DEBIN es grande y sin
 * la etiqueta parece el gasto mas caro del mes, cuando en realidad esa plata no
 * se fue a ningun lado. En gris y no en un color de alarma, justamente porque
 * no pasa nada.
 */
.badge-movim {
  flex: none;
  padding: 2px 7px;
  border-radius: 7px;
  background: var(--borde);
  color: var(--tenue);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .03em;
}

/* Cuatro en una fila entran porque los nombres son de una palabra: "Pago",
   "Cita", "Ingreso", "Movimiento". Con "Un pago" y "Un movimiento" no entraban
   y habia que partirlas en dos por dos, que ocupaba el doble de alto para no
   decir mas. */
.segmentado.seg-cuatro label { min-width: 0; }
.segmentado.seg-cuatro span {
  padding-left: 1px;
  padding-right: 1px;
  font-size: 12.5px;
}

/* Tres opciones no entran con el mismo aire que dos. */
.segmentado.seg-tres label { min-width: 0; }
.segmentado.seg-tres span {
  padding-left: 2px;
  padding-right: 2px;
  font-size: 13.5px;
}

/* ------------------------- Escribirlo en una linea ---------------------- */

/*
 * Va arriba de todo el editor, antes que el tipo: es el camino rapido, y el
 * formulario de abajo queda como estaba para revisar y corregir. Por eso no
 * necesita una pantalla de "confirmas?": el formulario lleno ES la
 * confirmacion, y ademas se puede arreglar.
 */
.dictado > span small { font-weight: 400; color: var(--tenue); }

.dictado-caja {
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--borde);
  border-radius: 11px;
  background: var(--card);
}
.dictado-caja:focus-within {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
/*
 * Con `.dictado-caja input` a secas se veian DOS recuadros, uno dentro del
 * otro. Empatan en especificidad con `.campo input` -- una clase y un elemento
 * cada uno -- y esa esta mas abajo en el archivo, asi que ganaba y le devolvia
 * el borde, el fondo y el redondeo. El `.campo` de adelante desempata.
 */
.campo .dictado-caja input {
  flex: 1 1 auto; min-width: 0; width: auto;
  border: 0; background: none; border-radius: 0;
  color: var(--tinta);
  font: inherit; font-size: 16px;   /* 16px o iOS hace zoom al enfocar */
  padding: 11px 0;
  outline: none;
}

/* Y el aro de foco es de la caja, no del input: si no, al escribir se
   encendian los dos, uno adentro del otro. */
.campo .dictado-caja input:focus {
  border-color: transparent;
  box-shadow: none;
}
.dictado-caja button {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 9px;
  background: var(--acento); color: #fff;
  cursor: pointer;
}
.dictado-caja button svg { width: 18px; height: 18px; }
.dictado-caja button:active { filter: brightness(.92); }

/*
 * La X va como un item mas de la fila, no flotando encima: la caja ya es un
 * flex con la flecha adentro, y una X absoluta se le habria montado.
 *
 * Y hace falta repetirle el aspecto de `.limpiar` porque `.dictado-caja button`
 * le gana -- la volvia un boton violeta de 36px, igual que la flecha.
 */
.dictado-caja .limpiar {
  width: 26px; height: 26px;
  margin-right: 0;
  border-radius: 50%;
  background: var(--borde);
  color: var(--tinta);
}
.dictado-caja .limpiar svg { width: 14px; height: 14px; }
.dictado-caja .limpiar:active { background: var(--borde); filter: brightness(.9); }

/* --------------------------- Vista calendario --------------------------- */

/* Dos iconos, no dos palabras: se reconocen sin leer y entran en la barra de
   filtros en vez de ocupar una fila propia. */
.seg-vista {
  flex: none;
  /* Anclado a la derecha SIEMPRE. En la lista lo empujaba el buscador, pero en
     el calendario `#filtros` se esconde y el toggle se caia a la izquierda:
     saltaba de lado al cambiar de vista, que es justo cuando lo estas mirando. */
  margin: 0 0 0 auto;
  padding: 2px;
}

.seg-vista label { display: flex; }

.seg-vista svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seg-vista circle { fill: currentColor; stroke: none; }

/* Mas especifica a proposito: `.segmentado span` esta mas abajo en el archivo
   y, con la misma especificidad, ganaba por orden. */
.segmentado.seg-vista span {
  padding: 6px 9px;
}

.calendario {
  padding: 12px 14px calc(28px + var(--safe-b));
}

.cal-dias,
.cal-grilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dias {
  margin-bottom: 6px;
}

.cal-dias span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tenue);
  text-transform: uppercase;
}

/* Cada día es un cuadrado: el número arriba y abajo las marcas. Alto fijo para
   que la grilla no se deforme según lo que tenga cada día. */
.cal-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 52px;
  padding: 6px 2px 5px;
  border: 1px solid var(--borde);
  border-radius: 11px;
  background: var(--card);
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
}

/* Los días de relleno del mes anterior y el siguiente. */
.cal-dia.afuera {
  background: transparent;
  border-color: transparent;
  color: var(--tenue);
  opacity: .45;
  cursor: default;
}

.cal-dia.hoy {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento);
}

.cal-dia b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.cal-dia.hoy b {
  color: var(--acento);
}

.cal-marcas {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 14px;
}

/* Una marca por tipo, con el número al lado si hay más de uno. Dos marcas como
   máximo: así un día con ocho cosas ocupa lo mismo que uno con dos. */
.cal-marca {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--tenue);
  line-height: 1;
}

.punto {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tenue);
}

.p-vencido { background: var(--alerta); }
.p-pronto  { background: var(--pronto); }
.p-pagado  { background: var(--ok); }

/*
 * Las citas van CUADRADAS, no solo de otro color.
 *
 * Su naranja y el ámbar de "vence pronto" están a un paso, y en un punto de 7px
 * eso no se distingue. Con la forma no hace falta afinar el ojo -- ni ver bien
 * los colores. Los pagos son redondos: uno es plata, el otro no.
 */
.p-cita {
  background: var(--cita);
  border-radius: 2px;
}

/*
 * Los ingresos, en rombo.
 *
 * Tercera forma y no tercer color, por lo mismo que las citas: en 7px el ojo
 * distingue formas mucho antes que tonos, y los colores ya están tomados por el
 * estado. Redondo = plata que sale, cuadrado = cita, rombo = plata que entra.
 */
.p-ingreso {
  background: var(--acento);
  border-radius: 1px;
  transform: rotate(45deg);
}

.cal-leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--tenue);
}

.cal-leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Boton de estado */
.tilde {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1.6px solid var(--borde);
  border-radius: 50%;
  background: transparent;
  color: var(--borde);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}

.tilde svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.6;
}

.item.es-pagado .tilde {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}

.item.es-na .tilde {
  border-style: dashed;
}

.vacio {
  text-align: center;
  color: var(--tenue);
  padding: 48px 20px;
  margin: 0;
}

.pie-lista {
  text-align: center;
  color: var(--tenue);
  font-size: 12.5px;
  padding: 16px 0 0;
}

/* -------------------------------- FAB ------------------------------- */

.fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + var(--safe-b));
  z-index: 25;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--acento);
  color: #fff;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--acento) 42%, transparent);
  cursor: pointer;
}

.fab svg {
  width: 26px;
  height: 26px;
  stroke-width: 2.4;
}

.fab:active {
  transform: scale(.94);
}

/* ------------------------------- Hojas ------------------------------ */

/*
 * La hoja se ata al VISUAL viewport, no al layout viewport.
 *
 * En iOS, al abrirse el teclado el layout viewport no se achica: solo el visual.
 * Con `bottom: 0` la hoja quedaba anclada detrás del teclado, iOS scrolleaba la
 * página para revelar el campo enfocado y se llevaba la hoja entera por encima
 * del borde de arriba: el input donde estabas escribiendo terminaba fuera de la
 * pantalla. La variable la mantiene al día `app.js` escuchando `visualViewport`;
 * sin ese soporte queda en 0 y todo se comporta como antes.
 *
 * El alto sale de la MISMA variable que la posición, no de una segunda medida:
 * con dos, una podía decir "hay 510px libres" mientras la otra apoyaba la hoja
 * 414px más arriba, y la diferencia se iba por el borde de arriba.
 */
.hoja {
  position: fixed;
  /*
   * Pegada al piso SIEMPRE, y el teclado se descuenta con relleno.
   *
   * Antes se anclaba con `bottom: var(--vv-tapado)`. Geometricamente daba lo
   * mismo, pero dejaba una salida en falso: si esa medida quedaba con un valor
   * viejo -- pasa al abrir una hoja con la pagina scrolleada, porque el visual
   * viewport tarda en asentarse -- la hoja quedaba levantada del borde y se
   * veia la pantalla por detras, flotando en el aire.
   *
   * Con `bottom: 0` eso no puede pasar: en el peor caso sobra relleno abajo,
   * que es invisible porque ahi esta el teclado.
   */
  inset: auto 0 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
  /*
   * Se le resta también la barra de estado.
   *
   * Sin eso, con el teclado abierto el término de `100dvh - --vv-tapado` le
   * ganaba al 92dvh y el borde de arriba caía en 0 — que con `viewport-fit=cover`
   * está DEBAJO del reloj y la isla. El "Cerrar" de la hoja quedaba tapado por
   * la hora. Sin teclado no se veía, porque ahí ganaba el 92dvh y ese 8% de
   * sobra alcanzaba para despejarla de casualidad.
   */
  /* Lo que de verdad se ve, por encima del teclado y por debajo del reloj. */
  --alto-util: min(92dvh, calc(100dvh - var(--vv-tapado, 0px) - var(--tope-hoja)));
  max-height: calc(var(--alto-util) + var(--vv-tapado, 0px));
  /* El relleno de abajo es el teclado. Va aca y no antes: un `padding: 0`
     despues lo pisaba entero y la hoja seguia tapando lo que se escribe. */
  padding: 0 0 var(--vv-tapado, 0px);
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--bg);
  color: var(--tinta);
  /*
     Una hoja tiene el mismo fondo que la pagina, asi que sin un borde arriba no
     se lee que se abrio ENCIMA de algo: mirando el medio de la pantalla parecia
     que la lista simplemente habia cambiado. La linea marca donde empieza.
  */
  box-shadow: 0 -1px 0 var(--borde), 0 -14px 44px rgba(0, 0, 0, .55);
  overflow: hidden;
}

/* Columna flexible para que el cuerpo pueda scrollear.
   Sin esto el cuerpo toma la altura de su contenido, se desborda y lo recorta
   el overflow de la hoja: el contenido largo quedaba cortado y sin scroll.
   Va en [open] a proposito: un <dialog> cerrado tiene que seguir en display:none. */
.hoja[open] {
  display: flex;
  flex-direction: column;
}

/*
 * El editor ocupa SIEMPRE todo el alto disponible, no lo que mida su contenido.
 *
 * Con alto variable la hoja saltaba: al desplegar las sugerencias crecía y al
 * elegir una se achicaba, moviendo todo lo de abajo. Además, como está anclada
 * abajo, ese cambio de tamaño movía su borde de arriba y el toque terminaba
 * cayendo en otro lado. Fija arriba, nada se mueve.
 */
#editor[open] {
  /* Misma cuenta que el max-height de .hoja, y por el mismo motivo. */
  height: calc(var(--alto-util) + var(--vv-tapado, 0px));
}

.hoja-agarre,
.hoja-cab {
  flex: none;
}

.hoja::backdrop {
  /*
     Bien oscuro a proposito. Con .45 lo de atras seguia compitiendo por la
     atencion y la hoja no se despegaba; lo que hay detras tiene que apagarse
     para que el ojo sepa cual de las dos capas manda.
  */
  background: rgba(0, 0, 0, .72);
}

.hoja[open] {
  animation: subir .26s cubic-bezier(.22, 1, .36, 1);
}

.hoja[open]::backdrop {
  animation: fundir .26s ease;
}

/* La hoja entra con un desplazamiento CORTO y un fundido.
   Con el deslizamiento largo de antes, las filas recorrían cientos de píxeles
   al entrar y un toque rápido caía sobre la fila de arriba. Con 14px, el
   recorrido es mucho menor que media fila, así que ningún toque puede aterrizar
   en la vecina y no hace falta bloquear nada. */
@keyframes subir {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}

@keyframes fundir {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hoja[open],
  .hoja[open]::backdrop {
    animation: none;
  }
}

.hoja form {
  display: contents;
}

.hoja-agarre {
  width: 38px;
  height: 4px;
  border-radius: 99px;
  background: var(--borde);
  margin: 8px auto 0;
}

.hoja-cab {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--borde);
}

.hoja-cab h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 620;
  text-align: center;
}

.hoja-cab .txt:first-child {
  justify-self: start;
}

.hoja-cab .txt:last-child {
  justify-self: end;
}

.txt {
  border: 0;
  background: none;
  color: var(--acento);
  font: inherit;
  font-size: 15.5px;
  padding: 8px 6px;
  cursor: pointer;
}

.txt-fuerte {
  font-weight: 640;
}

/* El colchon de abajo no es decorativo: en iOS la barra flotante de Safari tapa
   el borde inferior del viewport de layout, que es contra el que se posiciona la
   hoja. Sin este espacio, el ultimo campo queda atras de la barra y no hay como
   scrollearlo hacia arriba. */
/* Mientras la hoja entra deslizándose, sus filas todavía se están moviendo: un
   toque rápido cae sobre la fila de arriba, que es la que ocupa ese punto en ese
   instante. Se ignoran los toques hasta que termina la animación. */
.hoja-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  /* imprescindible: si no, no scrollea */
  padding: 14px 16px calc(40px + var(--safe-b));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-padding-bottom: 40px;
  display: grid;
  /*
   * Una sola columna, y del ancho del cuerpo. Con el `auto` implícito la
   * columna crece hasta el hijo más ancho, así que cualquier cosa que se pase
   * -- un margen negativo, un número largo que no parte -- ensanchaba la
   * grilla entera y la hoja se scrolleaba de costado.
   */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}

/*
 * El filtro de una hoja: los mismos chips y el mismo buscador que la lista
 * principal, en el mismo alto. Es la parte visible de que Cuentas y Métodos son
 * la misma aplicación que el mes.
 *
 * Queda fijo arriba porque filtrar una lista larga y perder el campo al
 * segundo renglón obliga a subir para cambiar de idea.
 */
.barra-hoja {
  position: sticky;
  /*
   * `top: 0` no es el borde de arriba de la hoja: es el borde de la caja de
   * relleno del cuerpo, o sea 14px más abajo. Por esa franja se veía pasar la
   * lista por detrás de la barra.
   *
   * Se arregla sacándole el relleno de arriba al cuerpo (`.con-barra`) y
   * poniéndoselo a la barra, que así cubre desde el borde mismo. El aire de
   * arriba lo repone el primer elemento que no es la barra.
   */
  top: 0;
  z-index: 3;
  /* Los márgenes negativos cancelan el padding del cuerpo: si no, al scrollear
     se ven las filas pasando por los 16px de los costados. El ancho va escrito
     y no deducido, para que la barra no pueda estirar la grilla. */
  box-sizing: border-box;
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 11px 16px 9px;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--borde);
}

.hoja-cuerpo.con-barra { padding-top: 0; }
.con-barra > :first-child:not(.barra-hoja) { margin-top: 11px; }

/* Sin nada que listar, filtrar no significa nada. */
.hoja-cuerpo.sin-nada .barra-hoja { display: none; }

/* El buscador solo, sin chips al lado, no necesita empujar nada. */
#filtrosMetodos .buscador { flex: 1 1 auto; }

/* Deja aire arriba y abajo cuando el navegador trae un campo a la vista, para
   que no quede pegado al borde del área que dejó libre el teclado. */
.hoja-cuerpo .campo,
.hoja-cuerpo .grupo-tit {
  scroll-margin-block: 14px 20px;
}

/* Con teclado abierto el alto util se parte al medio; ahi conviene que la hoja
   ocupe todo lo que pueda. */
@media (max-height: 560px) {
  .hoja {
    max-height: 100dvh;
    border-radius: 0;
  }
}

/* ------------------------------- Campos ----------------------------- */

.campo {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.campo>span,
.campo>legend {
  display: block;
  margin-bottom: 5px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 560;
  color: var(--tenue);
}

.campo small {
  font-weight: 400;
}

/* ---------------------- Campo con sugerencias --------------------------- */

/*
 * La lista va EN EL FLUJO, debajo del campo, no flotando encima.
 *
 * Flotando habría que sacarla del `overflow-y: auto` del cuerpo de la hoja, que
 * la recorta, y pelear con el teclado del celular. En el flujo empuja lo de
 * abajo, que en una hoja que ya scrollea no molesta, y no se puede recortar.
 */
.combo {
  display: block;
}

/*
 * La ✕ que limpia el campo, apoyada adentro y a la derecha. El <span> existe
 * solo para poder posicionarla.
 *
 * El `position: relative` va SUELTO, no colgado de `.campo`: el buscador de
 * obligaciones usa este mismo envoltorio fuera de un `.campo`, se quedaba sin
 * ancla y la ✕ terminaba flotando debajo del input.
 */
.campo-con-x {
  display: block;
  position: relative;
}

/* Dentro de .campo hay que apagarle los estilos de etiqueta, que se los lleva
   cualquier span hijo directo. */
.campo>.campo-con-x {
  margin-bottom: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.campo-con-x input {
  padding-right: 42px;
}

/* Buscador de la lista de obligaciones. Hereda el aspecto de los campos. */
.buscar-oblig {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--tinta);
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 11px;
  padding: 11px 42px 11px 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.buscar-oblig:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}

/* Safari le pone su propia ✕ al type=search y quedarían dos. */
.buscar-oblig::-webkit-search-cancel-button {
  display: none;
}

/*
 * La X de un campo con etiqueta, que va flotando adentro del recuadro.
 *
 * Va atada a `.campo-con-x` y no suelta: sin ese prefijo le ganaba tambien a la
 * X del buscador de la barra -- son la misma clase y esta esta mas abajo en el
 * archivo -- y como es absoluta, se colgaba del primer ancestro posicionado que
 * encontrara. Mientras la barra no estuvo posicionada nadie lo noto; al hacerla
 * pegajosa, la X salto afuera del campo y se pego al borde derecho de la barra.
 */
.campo-con-x .limpiar {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tenue);
}

.campo-con-x .limpiar svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

.campo-con-x .limpiar:active {
  background: var(--borde);
  filter: none;
}

.sugerencias {
  list-style: none;
  margin: 6px 0 0;
  padding: 4px;
  max-height: 210px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
}

.sugerencias button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.sugerencias li.activa button,
.sugerencias button:hover {
  background: var(--acento-cl);
}

/* La opción de crear algo nuevo se distingue: es la única que agrega datos. */
.sugerencias li.crear button {
  color: var(--acento);
  font-weight: 600;
}

.sugerencias li.crear {
  border-top: 1px solid var(--borde);
  margin-top: 4px;
  padding-top: 4px;
}

.sugerencias li.vacia {
  padding: 12px;
  font-size: 14px;
  color: var(--tenue);
}

/* ---------------------------- Menú en grupos ----------------------------- */

.grupo-menu {
  margin-bottom: 8px;
}

/* El encabezado se lee como un rótulo de sección, no como una opción más: si
   pareciera un botón de acción, habría cinco cosas iguales y ninguna diría cuál
   lleva a algo y cuál sólo abre. */
.grupo-cab {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--tenue);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.grupo-cab svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.grupo-cab[aria-expanded="true"] {
  color: var(--acento);
}

.grupo-cab[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

/* Un hilo a la izquierda mientras está abierto: dice hasta dónde llega el
   grupo sin tener que encerrarlo en una caja.

   El `gap` hace falta: la separación entre opciones la daba el grid de
   `.hoja-cuerpo`, y adentro de un grupo eso ya no llega — quedaban pegadas
   una contra otra. */
.grupo-cuerpo {
  display: grid;
  gap: 9px;
  padding-left: 10px;
  border-left: 2px solid var(--acento-cl);
  margin: 2px 0 10px 6px;
}

@media (prefers-reduced-motion: reduce) {
  .grupo-cab svg { transition: none; }
}

/* ---------------------------- ¿Me alcanza? ------------------------------- */

/*
 * Va pegada a los totales y no adentro de ellos: no es una cuarta caja, es una
 * conclusión. Con cuatro cajas el importe de siete cifras ya no entraba, y
 * además "te quedan" no es de la misma familia que "falta pagar" — uno es un
 * dato del mes, el otro es una cuenta entre el mes y lo que tenés hoy.
 */
.alcanza {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px 10px;
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  background: var(--card);
  color: var(--tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/*
 * Rótulo a la izquierda, números a la derecha, alineados entre renglones.
 * Antes era una frase; decía lo mismo con el doble de palabras y no dejaba
 * comparar las dos filas de un vistazo, que es justo para lo que están.
 */
/*
 * Columnas EXPLICITAS, no `repeat(auto-fit, minmax(0, max-content))`: eso no es
 * una declaración válida, el navegador la descarta entera y la grilla se cae a
 * una sola columna — los seis textos apilados uno debajo del otro.
 */
.alcanza-grilla {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1px 14px;
}

.alcanza-grilla.con-usd {
  grid-template-columns: 1fr auto auto;
}

.alcanza-fila {
  display: contents;
}

.alcanza-rotulo {
  font-size: 11.5px;
  color: var(--tenue);
  white-space: nowrap;
}

.alcanza-num {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-align: right;
  white-space: nowrap;
  color: var(--tenue);
}

/* El saldo actual manda: es el número que sabés cierto. El proyectado es una
   cuenta hecha sobre él, y no puede gritar más fuerte que el dato del que sale. */
.alcanza-fila.es-hoy .alcanza-rotulo {
  color: var(--tinta);
  font-weight: 600;
}

.alcanza-fila.es-hoy .alcanza-num {
  font-size: 15px;
  font-weight: 650;
  color: var(--tinta);
}

/* Cuando no alcanza. Es el único momento en que esta línea pide algo: el resto
   del tiempo es un dato tranquilizador y no tiene por qué gritar. */
.alcanza.no-alcanza { border-color: var(--alerta); }
.alcanza.no-alcanza .alcanza-fila:not(.es-hoy) .alcanza-num { color: var(--alerta); }

/* ------------------------------- Saldos --------------------------------- */

/* Los dos totales, uno al lado del otro y nunca sumados: pesos y dólares no se
   convierten, porque eso obligaría a elegir una cotización y sostenerla. */
.resumen-saldo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
}
.resumen-saldo:empty { display: none; }
.resumen-saldo > div {
  background: var(--card);
  border-radius: var(--radio);
  padding: 9px 13px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.resumen-saldo span { font-size: 11px; color: var(--tenue); }
.resumen-saldo b {
  font-size: 19px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/*
 * La lista es su propia grilla, no hijos sueltos del cuerpo de la hoja.
 *
 * Antes cada fila llevaba `margin-bottom` y encima le caía el `gap` del cuerpo,
 * asi que entre dos cuentas habia veinte pixeles: la lista se leia como fichas
 * separadas y no como una lista. Un contenedor propio deja elegir la distancia
 * de adentro sin pelearse con la de afuera.
 */
.lista-cuentas {
  display: grid;
  gap: 5px;
}

.cuenta-fila {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 13px;
  border: 0;
  border-radius: 12px;
  background: var(--card);
  color: var(--tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cuenta-fila strong { font-size: 15px; font-weight: 550; }
.cuenta-fila .ob-izq span { font-size: 11.5px; }
.cuenta-plata {
  flex: none;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Un saldo en rojo no es un error de la app: es que se le escaparon
   movimientos, y es el recordatorio de ir a mirar el banco. Se ve como un
   aviso porque eso es. */
.cuenta-fila.en-rojo { box-shadow: inset 0 0 0 1px var(--alerta); }
.cuenta-fila.en-rojo .cuenta-plata { color: var(--alerta); font-weight: 700; }

/* De qué cuenta sale un método, en la hoja de Métodos. Se toca. */
.met-cuenta {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: transparent;
  color: var(--acento);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.met-cuenta.sin { color: var(--tenue); font-style: italic; }

/* Separador de las archivadas. No es una opción: no se puede tocar ni la
   alcanzan las flechas del teclado, que saltean lo que no tiene data-op. */
.sugerencias li.sug-sep {
  margin-top: 4px;
  padding: 8px 12px 4px;
  border-top: 1px solid var(--borde);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tenue);
}

/* Dentro de la lista la etiqueta va a la derecha del nombre, no pegada. */
.sugerencias button .etiqueta-guardada {
  float: right;
  margin-left: 10px;
}

/* Renglón debajo de un campo autocompletable, para decir si lo que escribiste
   ya existe o se va a crear. Sin esto, escribir un nombre nuevo no da ninguna
   señal de qué va a pasar al guardar. */
.pista-campo {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tenue);
}

.pista-campo:empty {
  display: none;
}

.pista-campo.es-nuevo {
  color: var(--acento);
}

/* Dato al pasar, no algo que tengas que hacer: en bastardilla y del color del
   acento, para que se lea distinto de un aviso. */
.pista-campo.es-info {
  color: var(--acento);
  font-style: italic;
  font-weight: 450;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  /* 16px evita el zoom automatico en iOS */
  color: var(--tinta);
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 11px;
  padding: 11px 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.campo textarea {
  resize: vertical;
  min-height: 76px;
  line-height: 1.4;
}

.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  padding-right: 34px;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}

/* Campo de contraseña con el ojito para verla.
   El <span> que envuelve existe solo para poder apoyar el botón encima del
   input. Hay que apagarle los estilos de etiqueta, porque en .campo los lleva
   cualquier span hijo directo y si no se comería el diseño del campo. */
.campo>.con-ojo {
  display: block;
  position: relative;
  margin-bottom: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Sitio para el botón, para que el texto no se meta abajo. */
.con-ojo input {
  padding-right: 46px;
}

.ojo {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
}

.ojo svg {
  width: 19px;
  height: 19px;
}

.ojo:active {
  background: var(--borde);
}

.ojo:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* Se muestra el ojo tachado solo cuando la contraseña está a la vista. */
.ojo .cerrado {
  display: none;
}

.ojo[aria-pressed="true"] .abierto {
  display: none;
}

.ojo[aria-pressed="true"] .cerrado {
  display: block;
}

.campo-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

/* Separadores del editor: arriba lo del mes, abajo lo de la obligación. */
.grupo-tit {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 -4px;
  font-size: 11.5px;
  font-weight: 660;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tenue);
}

.grupo-tit small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--acento);
}

.grupo-tit-oblig {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}

/* Ficha de la obligación dentro del editor: se lee, no se toca. */
.oblig-ficha {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--borde);
}

.of-fila {
  display: flex;
  align-items: center;
  gap: 10px;
}

.of-izq {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.of-izq strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.of-izq span {
  font-size: 11.5px;
  color: var(--tenue);
}

/* Observaciones: se leen tal cual, respetando los saltos de línea. */
.of-obs {
  margin: 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--card);
  font-size: 13px;
  line-height: 1.4;
  color: var(--tinta);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 130px;
  overflow-y: auto;
}

.of-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: var(--acento-cl);
  color: var(--acento);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  max-width: 100%;
}

.of-link svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
  flex: none;
}

.of-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.of-link:active {
  filter: brightness(.93);
}

/* Filas del ABM de obligaciones */
.opcion-oblig {
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.ob-izq {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

.ob-izq strong {
  font-size: 15px;
  font-weight: 560;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-izq span {
  font-size: 11.5px;
  color: var(--tenue);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-borrar {
  flex: none;
  color: var(--alerta);
  display: grid;
  place-items: center;
}

.ob-borrar svg {
  width: 17px;
  height: 17px;
}

/* Input con un boton pegado a la derecha (el "Abrir" del link). */
.campo-con-boton {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.campo-con-boton input {
  flex: 1 1 auto;
  min-width: 0;
}

.btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  border: 0;
  background: inherit;
  color: var(--acento);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn-mini svg {
  width: 15px;
  height: 15px;
}

.btn-mini:active {
  filter: brightness(.94);
}

/* Sugerencia del importe del mes anterior */
.pista-anterior {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: -4px;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px dashed var(--acento);
  background: var(--acento-cl);
  color: var(--acento);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}

.pista-anterior svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
  flex: none;
}

.pista-anterior span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pista-anterior:active {
  filter: brightness(.93);
}

/* Segmentado de estado */
/* Se reparte en partes iguales sean dos opciones o tres. Antes estaba fijo en
   repeat(3, 1fr) y el selector de dos quedaba ocupando dos tercios, con un
   hueco muerto a la derecha. */
.segmentado {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  background: var(--borde);
  border-radius: 11px;
  padding: 3px;
}

.segmentado label {
  position: relative;
}

.segmentado input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmentado span {
  display: block;
  text-align: center;
  cursor: pointer;
  padding: 9px 4px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 550;
  color: var(--tenue);
}

.segmentado input:checked+span {
  background: var(--card);
  color: var(--tinta);
  box-shadow: var(--sombra);
}

.segmentado input:focus-visible+span {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

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

.btn {
  font: inherit;
  font-size: 16px;
  font-weight: 580;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer;
}

.btn-ancho {
  width: 100%;
}

.btn-primario {
  background: var(--acento);
  color: #fff;
}

.btn-peligro {
  background: var(--alerta-cl);
  color: var(--alerta);
  border-color: transparent;
  margin-top: 4px;
}

.btn-suave {
  background: var(--card);
  color: var(--acento);
  border-color: var(--borde);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.btn-suave svg {
  width: 18px;
  height: 18px;
}

.btn:active {
  transform: scale(.985);
}

.opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font: inherit;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  color: var(--tinta);
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
}

.opcion svg {
  color: var(--tenue);
  flex: none;
}

.opcion:active {
  background: var(--borde);
}

/* Salir, al pie y sin caja.
   Era una opción igual a las demás y competía con lo que se usa todos los días.
   Acá es un renglón: se encuentra cuando se lo busca y no antes. */
/*
 * El menú no scrollea, así que los 40px de holgura que `.hoja-cuerpo` reserva
 * para eso son aire muerto: dejaban a "Cerrar sesión" flotando con un hueco
 * abajo. Queda sólo lo que hace falta para despejar el indicador de inicio.
 */
#menu .hoja-cuerpo {
  /*
   * La mitad de la franja del indicador de inicio, no la franja entera.
   *
   * Respetarla completa dejaba a "Cerrar sesión" flotando con 34px de vacío
   * abajo — medido, y era TODO safe-area. iOS no reserva ese alto debajo del
   * último control de una hoja: dibuja el indicador ENCIMA del fondo. Con la
   * mitad, el texto queda despejado y el renglón termina donde uno espera.
   *
   * No baja de ahí: pegado al borde, el toque empieza a competir con el gesto
   * de subir para salir de la app.
   */
  padding-bottom: 0;
}

.opcion-salir {
  display: block;
  padding: 4px 10px 0;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--alerta);
  /* Apagado a proposito. En rojo pleno gritaba mas que cualquier cosa del menu,
     y es lo que menos veces se toca: tiene que estar, no llamar. */
  opacity: .55;
}

.opcion-salir:active {
  opacity: .95;
}

/* ------------------------------ Metodos ----------------------------- */

.metodos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

/*
 * Se parte en dos lineas: el nombre arriba, las etiquetas abajo.
 *
 * Con el nombre, la cuenta y los usos en una sola fila no entraba en un
 * telefono -- y el badge de usos lleva `white-space: nowrap` y `flex: none`,
 * asi que no cedia: simplemente se salia de la pantalla por la derecha.
 * Envolver es mejor que achicar, porque los tres datos hacen falta enteros.
 */
.metodos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  background: var(--card);
  /* Sin borde: la misma ficha que una cuenta, para que las dos hojas se lean
     igual. El fondo ya la separa del de la hoja. */
  border: 0;
  border-radius: 12px;
  padding: 5px 8px 7px 13px;
}

.metodos .nombre-met {
  /* Ocupa la primera linea entera, asi las etiquetas caen abajo siempre y no
     a veces si y a veces no segun el largo del nombre. */
  flex: 1 1 60%;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  padding: 4px 0;
  outline: none;
}

.metodos .nombre-met:focus {
  border-bottom: 1px solid var(--acento);
}

.metodos .uso {
  font-size: 11.5px;
  color: var(--tenue);
  flex: none;
}

/*
 * En qué se usa el método: el mismo renglón gris y chico que lleva una cuenta
 * debajo del nombre. Antes era una píldora con fondo, que pesaba más que el
 * nombre del método y hacía que cada ficha ocupara el doble.
 */
.metodos .en-uso {
  color: var(--tenue);
  font-size: 11.5px;
  white-space: nowrap;
}

.metodos .icono {
  width: 34px;
  height: 34px;
  color: var(--tenue);
  flex: none;
}

.metodos .icono svg {
  width: 18px;
  height: 18px;
}

/* Estado "toca de nuevo": tiene que leerse solo, sin cartel flotante. */
.metodos .icono.confirmando {
  width: auto;
  padding: 0 12px;
  background: var(--alerta-cl);
  color: var(--alerta);
  font-size: 14px;
  font-weight: 600;
}

/* El email del invitado: mismo lugar que .nombre-met pero no se edita. */
.metodos .nombre-met-fijo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  padding: 7px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Un ajuste que cuelga del interruptor de arriba. Sangrado y con una linea a la
 * izquierda: se lee que es SUYO y no otra opcion mas de la lista.
 */
.sub-ajuste {
  margin: -2px 0 10px 14px;
  padding-left: 14px;
  border-left: 2px solid var(--borde);
}

.sub-ajuste .campo {
  margin-top: 8px;
}

/* ------------------------- Bandeja de avisos ------------------------ */

.icono-campana {
  position: relative;
}

/*
 * El punto de "hay algo sin leer". Sin numero a proposito: que haya 2 o 5 no
 * cambia lo que vas a hacer, que es abrir y mirar. Un numero solo agrega ruido.
 */
.icono-campana .punto {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--alerta);
  /* El borde del color del fondo lo despega del dibujo de la campana. */
  box-shadow: 0 0 0 2px var(--bg);
}

.aviso-item {
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

/* Lo que llego despues de la ultima vez que miraste. */
.aviso-item.es-nuevo {
  border-color: color-mix(in srgb, var(--acento) 55%, var(--borde));
}

.aviso-cab {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.aviso-cab strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 650;
}

.aviso-cuando {
  flex: none;
  font-size: 11.5px;
  color: var(--tenue);
  white-space: nowrap;
}

/*
 * El cuerpo viene con los saltos de linea del mensaje original: son los que
 * separan cada vencimiento de los demas. Sin pre-line quedaria todo en un
 * parrafo corrido e ilegible.
 */
.aviso-cuerpo {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tinta);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.aviso-veces {
  display: inline-block;
  margin-top: 8px;
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--borde);
  color: var(--tenue);
  font-size: 11px;
  font-weight: 600;
}

/* ---------------------------- Compartido ---------------------------- */

/*
 * Lo que te comparten. Se distingue por textura, no por color: los colores ya
 * estan tomados por el estado (vencido, pronto, pagado), que es lo que hay que
 * leer primero. Un color mas ahi adentro compite con esa lectura.
 *
 * El borde punteado y el fondo apagado dicen "esto no es tuyo" sin gritar.
 */
.item.es-prestado > .item-cara {
  border-style: dashed;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  /* Sin sombra: la tarjeta queda plana, apoyada en vez de levantada. Es lo que
     mas se nota de los tres cambios, y no gasta ningun color. */
  box-shadow: none;
  /* No hay swipe ni editor detras, asi que tampoco la mano de "esto se abre". */
  cursor: default;
}

/*
 * Lo que estas compartiendo vos. Misma forma que el chip del link -- son dos
 * avisos del mismo rango: "esto tiene algo mas" -- pero en gris y no en el
 * color de acento, porque el link se toca y esto no.
 */
.chip-gente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--tenue);
  background: var(--borde);
  border-radius: 8px;
  padding: 4px;
  margin: -3px 0;   /* no empuja el alto de la fila */
}

.chip-gente svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
  flex: none;
}

.chip-de {
  flex: none;
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--borde);
  color: var(--tenue);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* La lista de "compartir con" en los dos editores. */
.compartir {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}

.compartir .grupo-tit {
  margin: 0;
}

/* ------------------------- Personas y lotes ------------------------- */

/* Cada persona, en la hoja de Personas. Abre su pantalla. */
.metodos .opcion-persona {
  width: 100%;
  justify-content: space-between;
}

.opcion-persona .ob-flecha {
  flex: none;
  color: var(--tenue);
  display: grid;
  place-items: center;
}

.opcion-persona .ob-flecha svg {
  width: 18px;
  height: 18px;
}

/* "Todos" y "Ninguno", arriba de la lista de interruptores. */
.acciones-lote {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
}

.acciones-lote .btn {
  flex: 1 1 0;
}

/* Deshabilitados cuando ya no cambian nada: "Todos" con todo prendido no hace
   mas que un pedido al servidor para nada. */
.acciones-lote .btn:disabled {
  opacity: .45;
  cursor: default;
}

/* Las fechas sueltas que ve alguien, fuera de los conceptos. */
.sueltas:not(:empty) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 2px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--borde);
  font-size: 12.5px;
  color: var(--tenue);
}

/* --------------------------- Invitaciones --------------------------- */

#formInvitar {
  margin: 14px 0 10px;
}

#invitacionNueva {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 14px;
}

/*
 * Un token de 64 caracteres no entra en una linea de celular. Se deja partir
 * por cualquier lado: aca importa poder leerlo entero, no que quede prolijo.
 */
.enlace-invitacion {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinta);
  overflow-wrap: anywhere;
  user-select: all;
}

.nota {
  font-size: 12.5px;
  color: var(--tenue);
  margin: 2px 0 0;
}

/* --------------------------- Duplicar mes --------------------------- */

.chips-mes {
  display: grid;
  grid-auto-flow: column;
  gap: 7px;
}

.chips-mes .chip {
  display: grid;
  gap: 1px;
  justify-items: center;
  padding: 8px 6px;
  min-width: 0;
}

.chips-mes .chip b {
  font-size: 13.5px;
  font-weight: 620;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.chips-mes .chip span {
  font-size: 11px;
  opacity: .75;
}

.frase-confirmar {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--acento-cl);
  color: var(--tinta);
}

.frase-confirmar b {
  font-weight: 680;
  color: var(--acento);
}

.detalle-dup {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: 14px;
  color: var(--tenue);
}

.detalle-dup li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.detalle-dup li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--borde);
}

/* --------------------------- Notificaciones ------------------------- */

.switch-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.switch-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.switch-txt strong {
  font-size: 15px;
  font-weight: 570;
}

.switch-txt span {
  font-size: 12.5px;
  color: var(--tenue);
}

.switch-fila input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-pista {
  flex: none;
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 99px;
  background: var(--borde);
  transition: background .16s;
}

.switch-pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .16s;
}

.switch-fila input:checked~.switch-pista {
  background: var(--ok);
}

.switch-fila input:checked~.switch-pista::after {
  transform: translateX(18px);
}

.switch-fila input:focus-visible~.switch-pista {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.codigo-caja {
  text-align: center;
  letter-spacing: .28em;
  text-indent: .28em;
  font-size: 30px;
  font-weight: 700;
  padding: 16px;
  border-radius: 14px;
  background: var(--acento-cl);
  color: var(--acento);
  border: 1px dashed var(--acento);
  user-select: all;
}

.nota-vacia {
  text-align: center;
  padding: 20px;
}

/* ------------------------ Login / instalador ------------------------ */

/* La barra de estado es translúcida (`black-translucent`), así que el contenido
   pasa por debajo del reloj: hay que dejarle su lugar. */
.pantalla-login {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top, 0px)) 18px
           max(24px, env(safe-area-inset-bottom, 0px));
}

.login-caja {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: var(--sombra);
  display: grid;
  gap: 14px;
}

.login-marca {
  text-align: center;
  display: grid;
  gap: 4px;
  justify-items: center;
}

/* El icono de la app en la pantalla de entrar. El SVG ya trae su propio fondo y
   sus esquinas, asi que aca no va ninguna caja: la duplicaria. */
.login-icono {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
}

/* La pantalla del PIN usa este otro: un candado, que dice "esto esta trabado".
   El icono de la app no comunicaria eso. */
.login-logo {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--acento);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

.login-marca h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.login-marca p {
  margin: 0;
  font-size: 14px;
  color: var(--tenue);
}

.login-caja form {
  display: grid;
  gap: 13px;
}

.campo-pin {
  text-align: center;
  letter-spacing: .5em;
  text-indent: .5em;
  font-size: 22px !important;
  font-weight: 640;
}

.txt-centrado {
  display: block;
  text-align: center;
  text-decoration: none;
}

.alerta {
  margin: 0;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--alerta-cl);
  color: var(--alerta);
  font-size: 14px;
}

.aviso {
  margin: 0;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--acento-cl);
  color: var(--tinta);
  font-size: 14px;
}

.aviso-ok {
  background: var(--ok-cl);
  color: var(--ok);
}

/* ------------------------------- Toast ------------------------------ */

.aviso-flotante {
  position: fixed;
  left: 50%;
  bottom: calc(88px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100vw - 32px);
  background: var(--tinta);
  color: var(--bg);
  padding: 11px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  animation: asomar .2s ease;
}

.aviso-flotante[hidden] {
  display: none;
}

@keyframes asomar {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

/* ------------------------------ Escritorio -------------------------- */

@media (min-width: 640px) {
  .cab {
    padding-inline: max(20px, calc(50vw - 380px));
  }

  main {
    padding-inline: max(20px, calc(50vw - 380px));
  }

  .hoja {
    inset: 0;
    margin: auto;
    border-radius: 18px;
    max-height: 88dvh;
  }

  .hoja[open] {
    animation: aparecer .18s ease;
  }

  @keyframes aparecer {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  .item:hover .item-cara {
    border-color: color-mix(in srgb, var(--acento) 35%, var(--borde));
  }
}