/*
  Estilos propios de Servans.
  - Sin fuentes externas ni CDN (privacidad): usamos las fuentes del sistema.
  - Colores con buen contraste (texto oscuro sobre fondo claro, >= 4.5:1).
  - "Mobile first": se ve bien en el celular y se acomoda en pantallas grandes.
*/

/* =====================================================================
   VARIABLES DE TEMA
   Es lo ÚNICO que una paleta (tema) puede redefinir. El tema por defecto
   ("oceano") vive aquí, en :root. Un tema futuro se escribe así, y solo
   cambia variables de este bloque (nunca las de "Colores fijos"):

     html[data-tema="otro"] {
       --color-primario: ...;
       --color-primario-hover: ...;
     }

   (html[data-tema="..."] pesa más que :root, por eso gana sin !important.)
   El atributo data-tema lo pone templates/base.html.
   ===================================================================== */
:root {
  /* Superficie oscura (barra superior). Blanco sobre #0f2a3d: 14.8:1. */
  --color-superficie-oscura: #0f2a3d;
  --color-texto-sobre-oscura: #ffffff;
  --color-barra-subrayado-hover: color-mix(in srgb, var(--color-texto-sobre-oscura) 60%, transparent);

  /* Color de marca (teal). Blanco sobre #0f766e: 5.5:1; sobre #115e59: 7.6:1. */
  --color-primario: #0f766e;
  --color-primario-hover: #115e59;
  --color-primario-fondo: #f0fdfa;         /* fondo suave del primario (ítem activo, hover) */
  --color-texto-sobre-primario: #ffffff;   /* texto encima de fondos primarios */

  /* Fondos, bordes y textos generales. */
  --color-fondo: #f4f6f8;
  --color-superficie: #ffffff;
  --color-tarjeta: var(--color-superficie);
  --color-borde: #cbd2d9;
  --color-texto: #1f2933;
  --color-texto-suave: #4b5563;

  /* Botón claro (sobre la barra oscura). */
  --color-boton-claro-fondo: var(--color-tarjeta);
  --color-boton-claro-texto: var(--color-primario-hover);
  --color-boton-claro-hover: #e5e7eb;

  /* Movimiento. */
  --duracion-corta: 150ms;
  --curva-suave: cubic-bezier(0.2, 0, 0, 1);

  /* Sombras (la sombra flotante usa el teal del primario). */
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.08);
  --sombra-flotante: 0 4px 12px rgba(15, 118, 110, 0.35);

  /* Tarjeta destacada oscura ("Te queda este mes"). Contrastes sobre
     #111827: blanco 17:1, texto suave 11:1, rojo claro 8:1 (mínimo 4.5:1). */
  --color-destacado: #111827;
  --color-texto-sobre-destacado: #ffffff;
  --color-texto-sobre-destacado-suave: #cbd5e1;
  --color-texto-sobre-destacado-negativo: #fca5a5;

  /* Chips de filtro: normal = blanco con borde; activo = oscuro. */
  --color-chip-fondo: var(--color-superficie);
  --color-chip-borde: var(--color-borde);
  --color-chip-texto: var(--color-texto);
  --color-chip-activo-fondo: var(--color-destacado);
  --color-chip-activo-texto: var(--color-texto-sobre-destacado);

  /* Barra de navegación inferior (celular). */
  --color-nav-inferior-fondo: var(--color-superficie);
  --color-nav-inferior-texto: var(--color-texto-suave);
  --color-nav-inferior-activo: var(--color-primario);
  --sombra-nav-inferior: 0 -1px 6px rgba(0, 0, 0, 0.08);

  /* Menú ☰ del celular (panel que se despliega bajo el banner oscuro).
     Texto oscuro sobre fondo blanco: mismo contraste que el resto del sitio. */
  --color-menu-movil-fondo: var(--color-superficie);
  --color-menu-movil-texto: var(--color-texto);
  --color-menu-movil-borde: var(--color-borde);
  --color-menu-movil-activo: var(--color-primario);
  --color-menu-movil-activo-fondo: var(--color-primario-fondo);
  --color-menu-movil-hover: var(--color-fondo);
  --sombra-menu-movil: 0 8px 20px rgba(0, 0, 0, 0.2);

  /* Menú "⋮" (Editar / Eliminar) de la lista de movimientos. */
  --sombra-menu: 0 6px 16px rgba(0, 0, 0, 0.16);

  /* Gastos fijos: insignia "Monto variable" y tarjetas apagadas. */
  --color-insignia-variable-texto: var(--color-texto-suave);
  --color-insignia-variable-fondo: var(--color-fondo);
  --color-insignia-variable-borde: var(--color-borde);
  --color-cobro-bloque-borde: var(--color-borde);
  --color-gasto-fijo-apagado-fondo: var(--color-fondo);
  --color-gasto-fijo-apagado-texto: var(--color-texto-suave);
  --color-gf-neutro-texto: var(--color-texto-suave);
  --color-casilla: var(--color-primario);   /* color de la casilla marcada (accent-color) */

  /* Avisos (fase 11). Contador numérico del menú: en la barra oscura es una
     pastilla clara; en el menú ☰ y en "Más" (fondo blanco) es una pastilla
     del color de marca. El número SIEMPRE se ve (no depende del color). */
  --color-contador-fondo: var(--color-primario);
  --color-contador-texto: var(--color-texto-sobre-primario);
  --color-contador-barra-fondo: var(--color-boton-claro-fondo);
  --color-contador-barra-texto: var(--color-boton-claro-texto);
  /* Tarjeta y filas de avisos. */
  --color-aviso-urgente-borde: var(--color-error);
  --color-aviso-urgente-etiqueta-fondo: var(--color-error-fondo);
  --color-aviso-urgente-etiqueta-texto: var(--color-error);
  --color-aviso-fila-borde: var(--color-borde);
  --color-recordatorio-atrasado-fondo: var(--color-aviso-fondo);
  --color-recordatorio-atrasado-texto: var(--color-aviso);
  --color-recordatorio-hoy-fondo: var(--color-primario-fondo);
  --color-recordatorio-hoy-texto: var(--color-primario-hover);
}

/* =====================================================================
   COLORES FIJOS (no dependen del tema)
   Estado y datos: significan lo mismo en todas las paletas, así que
   ningún html[data-tema] debe tocarlos.
   ===================================================================== */
:root {
  --color-error: #b91c1c;           /* rojo */
  --color-error-fondo: #fef2f2;
  --color-exito: #15803d;           /* verde */
  --color-exito-fondo: #f0fdf4;
  --color-aviso: #92400e;           /* ámbar */
  --color-aviso-fondo: #fffbeb;
  --color-peligro-hover: #7f1d1d;   /* rojo más oscuro al pasar el mouse por "Eliminar" */

  /* Ingresos y gastos (montos, íconos, tarjetas del inicio). Apuntan a los
     colores de éxito/error. */
  --color-ingreso: var(--color-exito);
  --color-ingreso-fondo: var(--color-exito-fondo);
  --color-gasto: var(--color-error);
  --color-gasto-fondo: var(--color-error-fondo);

  /* Transferencias entre cuentas: no son ingreso ni gasto, así que usan un
     tercer color (índigo), distinto del verde y del rojo/naranjo. Contraste
     del índigo #4338ca: 7.9:1 sobre blanco, 7.3:1 sobre el fondo gris y
     7.1:1 sobre su fondo suave #eef2ff (AA pide 4.5:1 para texto). */
  --color-transferencia: #4338ca;
  --color-transferencia-fondo: #eef2ff;

  /* Presupuestos: barra de avance y alerta "Excedido". El naranjo oscuro
     contrasta 5:1 sobre blanco; la etiqueta usa texto aún más oscuro sobre
     fondo crema (7:1). La barra (verde azulado / naranjo) contrasta más
     de 3:1 con su fondo gris, el mínimo para elementos gráficos. */
  --color-presupuesto-barra-fondo: #e5e7eb;
  --color-presupuesto-ok: #0f766e;        /* verde azulado */
  --color-presupuesto-excedido: #c2410c;  /* naranjo oscuro */
  --color-excedido-fondo: #fff7ed;
  --color-excedido-texto: #9a3412;

  /* Gastos fijos: lo relacionado con el cobro automático ("Se cobra solo",
     "Fijo") conserva su azul. #1e3a8a sobre #eff6ff contrasta 9.6:1. */
  --color-insignia-azul-texto: #1e3a8a;
  --color-insignia-azul-fondo: #eff6ff;
  --color-insignia-cobro-texto: var(--color-insignia-azul-texto);
  --color-insignia-cobro-fondo: var(--color-insignia-azul-fondo);
  --color-cobro-bloque-texto: var(--color-insignia-cobro-texto);
  --color-cobro-bloque-fondo: var(--color-insignia-cobro-fondo);
  --color-insignia-fijo-texto: var(--color-insignia-azul-texto);
  --color-insignia-fijo-fondo: var(--color-insignia-azul-fondo);

  /* Bloque "Gastos fijos del mes" del inicio. */
  --color-gf-atrasado-texto: var(--color-aviso);
  --color-gf-atrasado-fondo: var(--color-aviso-fondo);
  --color-gf-pagado: var(--color-exito);
}

/* Medidas (no son colores ni dependen del tema). */
:root {
  --radio: 8px;
  --radio-grande: 1.25rem;              /* tarjetas redondeadas del inicio */
  --alto-barra-inferior: 4rem;           /* alto de la barra inferior (sin la zona segura) */
  --espacio-sobre-barra: 2rem;           /* aire entre el último botón y la barra */
  --objetivo-tactil: 2.75rem;            /* 44px: tamaño mínimo cómodo para el dedo */
  --alto-campo: 3rem;                    /* 48px: alto de los campos de formulario (input y select) */
  /* Banner superior del celular: relleno arriba/abajo + el botón ☰ (44px).
     En pantallas bajas (celular girado) el relleno se achica, ver más abajo. */
  --relleno-banner: 0.75rem;
  --alto-banner: calc(var(--objetivo-tactil) + 2 * var(--relleno-banner) + env(safe-area-inset-top, 0px));
  /* Espacio total que hay que dejar al final de la página en el celular:
     barra + zona segura del sistema (barra de gestos del iPhone) + aire. */
  --espacio-inferior: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom, 0px) + var(--espacio-sobre-barra));
}

/* ---------- Base ---------- */
/* Red de seguridad: si algún elemento se desborda a lo ancho por accidente,
   el navegador del celular agranda la pantalla de layout para que quepa y la
   barra inferior fija (position: fixed) queda pegada al fondo de esa pantalla
   agrandada, FUERA de la vista. "clip" recorta el desborde sin crear un
   contenedor de scroll (a diferencia de "hidden"), así no rompe position:
   sticky. */
html {
  overflow-x: clip;
  /* Sin rebote elástico vertical. En Safari del iPhone, al llegar al final
     del scroll el rebote desplaza TODA la capa de la página (también el
     banner sticky) y al terminar recalcula su posición: la barra superior
     desaparecía un instante y volvía. Además, al llegar al fondo Safari
     vuelve a mostrar su barra de herramientas y cambia el alto visible.
     "none" corta el rebote (y el "tirar para recargar") en vertical. */
  overscroll-behavior-y: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-texto);
  background: var(--color-fondo);
  overscroll-behavior-y: none;   /* ídem html: algunas versiones de Safari miran el body */
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}

a {
  color: var(--color-primario);
}

a:hover {
  color: var(--color-primario-hover);
}

/* Contorno visible al navegar con teclado (Tab): importante para accesibilidad. */
:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
}

/* Link "Saltar al contenido": invisible hasta que se enfoca con Tab. */
.saltar {
  position: absolute;
  left: -9999px;
}

.saltar:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--color-superficie);
}

/* ---------- Barra superior ---------- */
.barra {
  background: var(--color-superficie-oscura);
  color: var(--color-texto-sobre-oscura);
}

.barra__interior {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--relleno-banner) + env(safe-area-inset-top, 0px)) 1rem var(--relleno-banner);
  display: flex;
  flex-wrap: wrap;           /* en pantallas angostas los elementos bajan de línea */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.barra__marca {
  color: var(--color-texto-sobre-oscura);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

.barra__marca:hover {
  color: var(--color-texto-sobre-oscura);
  text-decoration: underline;
}

.barra__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.barra__nav a {
  color: var(--color-texto-sobre-oscura);
}

.barra__usuario {
  font-weight: 600;
  overflow-wrap: anywhere;   /* nombres largos no rompen el diseño */
}

.barra__form {
  margin: 0;
}

/* ---------- Menú ☰ del celular (details/summary, sin JavaScript) ---------- */
/* En el celular el banner queda FIJO arriba al hacer scroll (sticky), así
   el ☰ siempre está a mano. sticky funciona porque .barra es hija directa de
   <body> y ningún ancestro crea un contenedor de scroll (html usa
   overflow-x: clip, no hidden). Un elemento sticky también sirve de
   referencia para el panel (position: absolute) del menú ☰.
   z-index 30: por encima del contenido, de los menús ⋮ (10) y de la barra
   inferior (20). El panel del ☰ vive DENTRO del banner, así que siempre
   queda por encima del contenido. Desde 48rem vuelve a ser normal (más abajo). */
.barra {
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Saltos a un ancla y foco con Tab: el navegador deja el elemento por debajo
   del banner fijo, no tapado por él (títulos, menús ⋮, campos). */
:root:has(body.con-barra-inferior) {
  scroll-padding-top: var(--alto-banner);
}

/* Pantallas bajas (celular girado): banner más delgado para no ocupar
   tanto alto. El botón ☰ sigue midiendo 44px. */
@media (max-height: 30rem) {
  :root {
    --relleno-banner: 0.25rem;
  }
}

/* En el celular, usuario + "Cerrar sesión" viven dentro del menú ☰
   (se vuelven a mostrar desde 48rem, más abajo). */
.barra__nav--sesion {
  display: none;
}

.menu-movil {
  margin-left: auto;           /* pegado a la derecha del banner */
}

/* El botón: al menos 44x44px. Cerrado es solo el ícono; abierto muestra
   "Cerrar" con texto visible (ver el comentario en base.html). */
.menu-movil__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--objetivo-tactil);
  min-height: var(--objetivo-tactil);
  padding: 0 0.5rem;
  color: var(--color-texto-sobre-primario);
  border-radius: var(--radio);
  list-style: none;            /* quita el triángulo por defecto (Chrome, Firefox) */
  cursor: pointer;
}

.menu-movil__boton::-webkit-details-marker {
  display: none;               /* ídem en Safari */
}

.menu-movil__cerrado,
.menu-movil__abierto {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
}

.menu-movil__abierto,
.menu-movil[open] .menu-movil__cerrado {
  display: none;
}

.menu-movil[open] .menu-movil__abierto {
  display: flex;
}

.menu-movil__boton:focus-visible {
  outline-color: var(--color-texto-sobre-primario);
}

/* El panel cuelga justo debajo del banner, a todo el ancho. Si no cabe en la
   pantalla (celular horizontal, letra grande) hace scroll por dentro:
   100dvh = alto visible real, descontando el banner y la barra inferior
   (con su zona segura), así el panel termina justo sobre la barra. */
.menu-movil__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: calc(100vh - var(--alto-banner) - var(--alto-barra-inferior) - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - var(--alto-banner) - var(--alto-barra-inferior) - env(safe-area-inset-bottom, 0px));
  padding: 0.5rem max(1rem, env(safe-area-inset-right, 0px)) 0.75rem max(1rem, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--color-menu-movil-texto);
  background: var(--color-menu-movil-fondo);
  border-bottom: 1px solid var(--color-menu-movil-borde);
  box-shadow: var(--sombra-menu-movil);
}

/* "Más" dentro del menú ☰: en vertical ya está en la barra inferior, así que
   se oculta (el vertical queda igual que siempre). Solo el modo "teléfono
   horizontal" (al final del archivo) lo muestra. */
.menu-movil__item--horizontal {
  display: none;
}

.menu-movil__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada link: ancho completo y al menos 44px de alto. La barra lateral
   transparente reserva el sitio de la marca de "sección actual". */
.menu-movil__enlace {
  display: flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  padding: 0 0.75rem;
  color: var(--color-menu-movil-texto);
  text-decoration: none;
  border-left: 0.25rem solid transparent;
  border-radius: var(--radio);
}

.menu-movil__enlace:hover {
  color: var(--color-menu-movil-texto);
  background: var(--color-menu-movil-hover);
}

/* Sección actual: negrita + barra lateral + color (no depende solo del color). */
.menu-movil__enlace[aria-current="page"] {
  font-weight: 700;
  color: var(--color-menu-movil-activo);
  background: var(--color-menu-movil-activo-fondo);
  border-left-color: currentColor;
}

.menu-movil__enlace:focus-visible {
  outline-offset: -3px;
}

/* Usuario y "Cerrar sesión", separados de los links por una línea. */
.menu-movil__sesion {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-menu-movil-borde);
}

.menu-movil__usuario {
  margin: 0 0 0.5rem;
  padding: 0 0.75rem;
  overflow-wrap: break-word;   /* nombres de usuario largos no desbordan */
}

.menu-movil__salir {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--objetivo-tactil);
}

/* ---------- Contenido ---------- */
.contenido {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.tarjeta {
  max-width: 440px;
  margin: 0 auto;
  padding: 1.5rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tarjeta--ancha {
  max-width: none;
  margin-top: 1.5rem;
}

.tarjeta--vacia {
  border-style: dashed;
  color: var(--color-texto-suave);
}

/* ---------- Formularios ---------- */
.campo {
  margin-bottom: 1rem;
}

.campo label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;               /* los inputs usan la misma letra que el resto */
  font-size: 1rem;             /* 16px evita que iOS haga zoom al tocar el campo */
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

/* Todos los campos de un formulario miden lo mismo (48px), también los
   select y la fecha, que sin esto quedan unos píxeles más bajos o más
   altos que sus vecinos. min-height: un campo más grande (ej. el monto del
   registro rápido) se respeta. Las casillas y los radios no son "campos". */
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select {
  min-height: var(--alto-campo);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--color-primario);
}

.campo--error input,
.campo--error select,
.campo--error textarea {
  border-color: var(--color-error);
}

/* Campos de fecha y de mes (clase que ponen EntradaFecha y EntradaMes en
   finanzas/forms.py; los selectores por type son una red por si algún
   <input> se escribe a mano). Safari del iPhone les da un ancho mínimo
   propio: sin min-width: 0 y appearance: none el campo se sale por la
   derecha y la página queda más ancha que la pantalla. Con appearance: none
   Safari además deja de darles alto propio, por eso el height fijo (48px en
   todos los navegadores; height y no min-height para que otra regla con
   min-height, como la del registro rápido, no lo cambie), y centra el
   texto, por eso el text-align del valor. */
.campo-fecha,
.campo input[type="date"],
.campo input[type="month"],
.campo input[type="time"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--alto-campo);   /* 48px */
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}

.campo-fecha::-webkit-date-and-time-value,
.campo input[type="date"]::-webkit-date-and-time-value,
.campo input[type="month"]::-webkit-date-and-time-value,
.campo input[type="time"]::-webkit-date-and-time-value {
  text-align: left;            /* Safari iOS centra el valor; lo alineamos como los demás */
}

.campo__errores {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-error);
  font-size: 0.9rem;
  font-weight: 600;
}

.campo__ayuda {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.campo__ayuda ul {
  margin: 0;
  padding-left: 1.2rem;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-texto-sobre-primario);
  background: var(--color-primario);
  border: 1px solid var(--color-primario);
  border-radius: var(--radio);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.boton:hover {
  color: var(--color-texto-sobre-primario);
  background: var(--color-primario-hover);
  border-color: var(--color-primario-hover);
}

.boton--ancho {
  width: 100%;
  margin-top: 0.5rem;
}

.boton--chico {
  padding: 0.35rem 0.8rem;
  font-size: 0.9rem;
}

/* Botón claro, pensado para ir sobre la barra oscura. */
.boton--secundario {
  color: var(--color-boton-claro-texto);
  background: var(--color-boton-claro-fondo);
  border-color: var(--color-boton-claro-fondo);
}

.boton--secundario:hover {
  color: var(--color-boton-claro-texto);
  background: var(--color-boton-claro-hover);
  border-color: var(--color-boton-claro-hover);
}

/* ---------- Mensajes y alertas ---------- */
.mensajes {
  list-style: none;
  margin: 0 auto 1.5rem;
  padding: 0;
  max-width: 960px;
}

.mensaje,
.alerta {
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  border: 1px solid var(--color-borde);
  border-left-width: 5px;
  background: var(--color-superficie);
  margin-bottom: 0.5rem;
}

.alerta {
  margin-bottom: 1rem;
}

.alerta p {
  margin: 0;
}

.alerta p + p {
  margin-top: 0.35rem;
}

.mensaje--success {
  border-color: var(--color-exito);
  background: var(--color-exito-fondo);
  color: var(--color-exito);
}

.mensaje--error,
.alerta--error {
  border-color: var(--color-error);
  background: var(--color-error-fondo);
  color: var(--color-error);
}

.mensaje--warning {
  border-color: var(--color-aviso);
  background: var(--color-aviso-fondo);
  color: var(--color-aviso);
}

.mensaje--info {
  border-color: var(--color-primario);
}

/* ---------- Links al pie de las tarjetas ---------- */
.enlaces {
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ---------- Navegación principal (Cuentas, Categorías) ---------- */
/* margin-right:auto empuja el bloque de usuario hacia la derecha. */
.barra__nav--principal {
  margin-right: auto;
}

.barra__nav--principal a {
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}

.barra__nav--principal a:hover {
  color: var(--color-texto-sobre-oscura);
  border-bottom-color: var(--color-barra-subrayado-hover);
}

/* Página actual: subrayado grueso (no solo color, para que se note siempre). */
.barra__nav--principal a[aria-current="page"] {
  font-weight: 700;
  border-bottom-color: var(--color-texto-sobre-oscura);
}

/* ---------- Utilidades ---------- */
/* Oculta visualmente pero sigue disponible para lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.texto-suave {
  color: var(--color-texto-suave);
}

/* ---------- Secciones y cabeceras (título + botón) ---------- */
.seccion + .seccion {
  margin-top: 2.5rem;
}

.cabecera {
  display: flex;
  flex-wrap: wrap;             /* en el celular el botón baja bajo el título */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.cabecera h1,
.cabecera h2 {
  margin: 0;
}

/* ---------- Tablas ---------- */
/* El scroll horizontal queda DENTRO de este contenedor, no en toda la página. */
.tabla-contenedor {
  overflow-x: auto;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
}

.tabla th,
.tabla td {
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-borde);
}

.tabla thead th {
  font-size: 0.875rem;
  color: var(--color-texto-suave);
  background: var(--color-fondo);
  white-space: nowrap;
}

.tabla tbody th {
  font-weight: 600;
  overflow-wrap: anywhere;     /* nombres largos no ensanchan la tabla */
}

.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td {
  border-bottom: 0;
}

/* Números alineados a la derecha: así las cifras se comparan de un vistazo. */
.tabla th.tabla__numero,
.tabla td.tabla__numero {
  text-align: right;
  white-space: nowrap;
}

/* ---------- Montos de dinero ---------- */
.monto {
  font-variant-numeric: tabular-nums;   /* todos los dígitos con el mismo ancho */
}

.monto--negativo {
  color: var(--color-error);
}

/* ---------- Acciones en línea (Editar / Eliminar) ---------- */
.acciones {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  white-space: nowrap;
}

.acciones__peligro {
  color: var(--color-error);
}

.acciones__peligro:hover {
  color: var(--color-peligro-hover);
}

/* ---------- Etiquetas (badges) ---------- */
.etiqueta {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
}

.etiqueta--ingreso {
  color: var(--color-exito);
  background: var(--color-exito-fondo);
}

.etiqueta--gasto {
  color: var(--color-error);
  background: var(--color-error-fondo);
}

.etiqueta--neutra {
  color: var(--color-texto-suave);
  background: var(--color-fondo);
}

/* ---------- Botón de peligro y alerta de aviso ---------- */
.boton--peligro {
  background: var(--color-error);
  border-color: var(--color-error);
}

.boton--peligro:hover {
  background: var(--color-peligro-hover);
  border-color: var(--color-peligro-hover);
}

.alerta--aviso {
  border-color: var(--color-aviso);
  background: var(--color-aviso-fondo);
  color: var(--color-aviso);
}

/* Separador "o" entre dos campos alternativos (ej. elegir categoría o
   crear una nueva): una línea a cada lado del texto. */
.separador-o {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
  color: var(--color-texto-suave);
  font-size: 0.875rem;
}

.separador-o::before,
.separador-o::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-borde);
}

/* ---------- Transacciones ---------- */
/* Botón secundario para fondos claros (ej. "Guardar y agregar otra"):
   mismo tamaño que .boton pero sin relleno, para que la acción principal
   ("Guardar") siga siendo la más visible. */
.boton--contorno {
  color: var(--color-primario);
  background: var(--color-superficie);
}

.boton--contorno:hover {
  color: var(--color-primario-hover);
  background: var(--color-fondo);
}

/* Montos de transacciones: color según el tipo (el signo +/- va en el texto). */
.monto--gasto {
  color: var(--color-gasto);
}

.monto--ingreso {
  color: var(--color-ingreso);
}

/* Saldo actual en negrita: es el dato que más interesa en la lista de cuentas. */
.tabla td.tabla__destacado {
  font-weight: 600;
}

/* La fecha no se parte en dos líneas ("04 oct" / "2026"). */
.tabla td.tabla__fecha {
  white-space: nowrap;
}

/* Nota de la transacción: debajo de la categoría, en letra más chica y suave. */
.tabla__nota {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-texto-suave);
}

/* Paginación: Anterior | Página X de Y | Siguiente. En el celular baja de línea si no cabe. */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
}

.paginacion a,
.paginacion__inactivo {
  padding: 0.4rem 0;             /* zona de toque más alta en pantallas táctiles */
}

.paginacion__inactivo {
  color: var(--color-texto-suave);
}

.paginacion__estado {
  font-weight: 600;
}

/* Resumen "dato: valor" (ej. la transacción que se va a eliminar). */
.resumen {
  margin: 0 0 1rem;
}

.resumen div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-borde);
}

.resumen dt {
  font-weight: 600;
  color: var(--color-texto-suave);
}

.resumen dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ---------- Pantallas más grandes ---------- */
@media (min-width: 640px) {
  .contenido {
    padding-top: 2.5rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  .tarjeta {
    padding: 2rem;
  }
}


/* =====================================================================
   Pantalla de inicio (dashboard) y barra de navegación inferior.
   Reglas: todo color con var(--...), tamaños de letra en rem.
   ===================================================================== */

/* ---------- Botón grande (acción principal de un estado vacío) ---------- */
.boton--grande {
  min-height: var(--objetivo-tactil);
  padding: 0.85rem 1.25rem;
  font-size: 1.0625rem;
  border-radius: var(--radio-grande);
}

/* ---------- Contenedor del inicio ---------- */
/* Una sola columna; en pantallas anchas no se estira de más (se lee mejor). */
.inicio {
  max-width: 40rem;
  margin: 0 auto;
}

/* Separación vertical entre los bloques del inicio. */
.inicio > * + * {
  margin-top: 1.25rem;
}

/* ---------- Saludo ---------- */
.inicio__antetitulo {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.inicio__titulo {
  margin: 0;
  font-size: 1.5rem;
  overflow-wrap: anywhere;               /* usernames largos no desbordan */
}

/* ---------- Bienvenida (usuario sin cuentas) ---------- */
.bienvenida {
  padding: 1.5rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.bienvenida__titulo {
  font-size: 1.25rem;
}

.bienvenida p {
  margin: 0 0 0.75rem;
  color: var(--color-texto-suave);
}

/* ---------- Selector de mes:  <  Octubre 2026  > ---------- */
/* Grid de 3 columnas: flecha | título | flecha. Las columnas de las flechas
   tienen ancho fijo, así el título queda centrado aunque falte una flecha. */
.selector-mes {
  display: grid;
  grid-template-columns: var(--objetivo-tactil) 1fr var(--objetivo-tactil);
  align-items: center;
  gap: 0.5rem;
}

.selector-mes__flecha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-texto);
  text-decoration: none;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: 50%;
}

.selector-mes__flecha:hover {
  color: var(--color-primario);
  border-color: var(--color-primario);
}

/* Hueco invisible del mismo tamaño cuando no hay mes anterior/siguiente. */
.selector-mes__flecha--vacia {
  visibility: hidden;
}

.selector-mes__titulo {
  margin: 0;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
}

/* .inicio > * + * pondría 1.25rem antes de "Volver al mes actual"; lo pegamos al selector.
   Igual en la lista de presupuestos, que usa el mismo selector. */
.inicio > .selector-mes__volver,
.presupuestos > .selector-mes__volver {
  margin: 0.25rem 0 0;
  text-align: center;
  font-size: 0.875rem;
}

.selector-mes__volver a {
  display: inline-block;
  padding: 0.6rem 0.5rem;               /* zona de toque más alta */
}

/* ---------- Chips de filtro por cuenta ---------- */
/* En el celular: una sola fila con scroll horizontal (se desliza con el dedo).
   El margen negativo hace que la fila llegue hasta el borde de la pantalla,
   y el padding devuelve el espacio para que el primer chip no quede pegado. */
.chips__lista {
  display: flex;
  gap: 0.5rem;
  margin: 0 -1rem;
  padding: 0.375rem 1rem;                /* deja ver el contorno de foco (no se recorta) */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;         /* al soltar, se acomoda a un chip */
  scrollbar-width: none;                 /* oculta la barra de scroll (Firefox) */
}

.chips__lista::-webkit-scrollbar {
  display: none;                         /* oculta la barra de scroll (Chrome, Safari) */
}

.chips__lista li {
  flex: 0 0 auto;                        /* los chips no se encogen: se hace scroll */
  scroll-snap-align: start;
  scroll-margin-left: 1rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  max-width: 14rem;
  padding: 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-chip-texto);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;               /* nombres muy largos terminan en "..." */
  background: var(--color-chip-fondo);
  border: 1px solid var(--color-chip-borde);
  border-radius: 999px;
}

.chip:hover {
  color: var(--color-chip-texto);
  border-color: var(--color-primario);
}

/* Chip activo: fondo oscuro (cambia el relleno, no solo el color del texto). */
.chip[aria-current="page"],
.chip[aria-current="page"]:hover {
  color: var(--color-chip-activo-texto);
  background: var(--color-chip-activo-fondo);
  border-color: var(--color-chip-activo-fondo);
}

/* ---------- Tarjeta destacada oscura ("Te queda este mes") ---------- */
.destacada {
  padding: 1.5rem;
  color: var(--color-texto-sobre-destacado);
  background: var(--color-destacado);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.destacada__titulo {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-texto-sobre-destacado-suave);
}

.destacada__monto {
  margin: 0.25rem 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;               /* montos enormes bajan de línea en vez de desbordar */
}

/* El rojo normal no se lee bien sobre fondo oscuro: usamos un rojo claro. */
.destacada .monto--negativo {
  color: var(--color-texto-sobre-destacado-negativo);
}

.destacada__detalle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-texto-sobre-destacado-suave);
  overflow-wrap: anywhere;
}

/* ---------- Ingresos y gastos del mes (dos tarjetas lado a lado) ---------- */
/* Grid de 2 columnas iguales (1fr 1fr = "una fracción del espacio cada una"). */
.totales {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.total {
  min-width: 0;                          /* permite que el contenido se ajuste en pantallas muy angostas */
  padding: 1rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.total__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
}

.total--ingreso .total__icono {
  color: var(--color-ingreso);
  background: var(--color-ingreso-fondo);
}

.total--gasto .total__icono {
  color: var(--color-gasto);
  background: var(--color-gasto-fondo);
}

.total__titulo {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-texto-suave);
}

.total__monto {
  margin: 0.125rem 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.total--ingreso .total__monto {
  color: var(--color-ingreso);
}

.total--gasto .total__monto {
  color: var(--color-gasto);
}

/* ---------- Bloques con título + link (Saldo actual, Movimientos) ---------- */
.bloque {
  padding: 1rem 1.25rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.bloque__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bloque__titulo {
  margin: 0;
  font-size: 1.125rem;
}

.bloque__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}

.bloque__nota {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-texto-suave);
}

/* ---------- Grupos de saldos (Disponible / Tarjetas de crédito) ---------- */
.grupo-saldos + .grupo-saldos {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-borde);
}

.grupo-saldos__titulo {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-suave);
}

.grupo-saldos__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Fila: nombre y tipo a la izquierda, monto a la derecha (flex + space-between). */
.saldo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-borde);
}

.saldo__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.saldo__nombre {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.saldo__tipo {
  font-size: 0.8125rem;
  color: var(--color-texto-suave);
}

.saldo__valor {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* Deuda de tarjeta: color de gasto, además de la palabra "Deuda". */
.saldo__valor--deuda {
  color: var(--color-gasto);
}

.grupo-saldos__pie {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-top: 0.6rem;
  font-weight: 700;
}

.grupo-saldos__total {
  white-space: nowrap;
}

/* ---------- Lista de movimientos ---------- */
.movimientos {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.movimientos li + li {
  border-top: 1px solid var(--color-borde);
}

/* Cada fila es un link: ícono | textos (crecen) | monto y fecha. */
.movimiento {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.5rem 0;
  color: var(--color-texto);
  text-decoration: none;
}

.movimiento:hover {
  color: var(--color-texto);
}

.movimiento:hover .movimiento__titulo {
  text-decoration: underline;
}

.movimiento__icono {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
}

.movimiento__icono--ingreso {
  color: var(--color-ingreso);
  background: var(--color-ingreso-fondo);
}

.movimiento__icono--gasto {
  color: var(--color-gasto);
  background: var(--color-gasto-fondo);
}

/* flex: 1 = ocupa el espacio sobrante; min-width: 0 permite recortar con "...". */
.movimiento__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.movimiento__titulo,
.movimiento__detalle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;               /* notas largas terminan en "..." */
}

.movimiento__titulo {
  font-weight: 600;
}

.movimiento__detalle {
  font-size: 0.8125rem;
  color: var(--color-texto-suave);
}

.movimiento__lado {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 600;
  white-space: nowrap;
}

.movimiento__fecha {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-texto-suave);
}

/* Estado vacío de movimientos. */
.vacio {
  padding: 1.25rem 0 0.5rem;
  text-align: center;
}

.vacio__texto {
  margin: 0 0 0.75rem;
  color: var(--color-texto-suave);
}

.vacio .boton {
  min-height: var(--objetivo-tactil);
}

/* =====================================================================
   Presupuestos (lista del mes). Mismo estilo de tarjetas que el inicio.
   Reglas: todo color con var(--...), tamaños de letra en rem.
   ===================================================================== */
.presupuestos {
  max-width: 40rem;
  margin: 0 auto;
}

.presupuestos > * + * {
  margin-top: 1.25rem;
}

/* Título a la izquierda, "Administrar categorías" a la derecha (baja si no cabe). */
.presupuestos__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
}

.presupuestos__titulo {
  margin: 0;
  font-size: 1.5rem;
}

.presupuestos__lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tarjeta de un presupuesto. */
.presupuesto {
  padding: 1rem 1.25rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

/* Excedido: borde del color de alerta (además del texto "Excedido"). */
.presupuesto--excedido {
  border-color: var(--color-presupuesto-excedido);
}

/* Nombre | etiqueta "Excedido" | porcentaje (empujado a la derecha). */
.presupuesto__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.presupuesto__nombre {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  overflow-wrap: anywhere;               /* nombres largos bajan de línea */
}

/* Etiqueta tipo píldora: ícono + texto, así no depende solo del color. */
.presupuesto__alerta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-excedido-texto);
  background: var(--color-excedido-fondo);
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
}

.presupuesto__porcentaje {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
}

.presupuesto--excedido .presupuesto__porcentaje {
  color: var(--color-presupuesto-excedido);
}

/* "$86.000,00 / $100.000,00": lo gastado destacado, el límite más suave. */
.presupuesto__montos {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  margin: 0.25rem 0 0.5rem;
}

.presupuesto__gastado {
  font-size: 1.125rem;
  font-weight: 700;
}

.presupuesto__limite {
  align-self: flex-end;
  font-size: 0.9375rem;
  color: var(--color-texto-suave);
}

/* Barra de avance (<progress>). Cada navegador dibuja la barra a su manera,
   por eso hay que estilizar sus partes internas por separado:
   - Chrome/Safari/Edge: ::-webkit-progress-bar (fondo) y ::-webkit-progress-value (relleno).
   - Firefox: el fondo es el propio <progress> y el relleno ::-moz-progress-bar.
   Van en reglas SEPARADAS: si un navegador no entiende uno de los
   selectores de una lista, descarta la regla completa. */
.presupuesto__barra {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  color: var(--color-presupuesto-ok);
  background: var(--color-presupuesto-barra-fondo);
  border: 0;
  border-radius: 999px;
}

.presupuesto__barra::-webkit-progress-bar {
  background: var(--color-presupuesto-barra-fondo);
  border-radius: 999px;
}

.presupuesto__barra::-webkit-progress-value {
  background: var(--color-presupuesto-ok);
  border-radius: 999px;
}

.presupuesto__barra::-moz-progress-bar {
  background: var(--color-presupuesto-ok);
  border-radius: 999px;
}

.presupuesto--excedido .presupuesto__barra {
  color: var(--color-presupuesto-excedido);
}

.presupuesto--excedido .presupuesto__barra::-webkit-progress-value {
  background: var(--color-presupuesto-excedido);
}

.presupuesto--excedido .presupuesto__barra::-moz-progress-bar {
  background: var(--color-presupuesto-excedido);
}

/* "Quedan $X" a la izquierda, Editar / Eliminar a la derecha. */
.presupuesto__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  margin-top: 0.25rem;
}

.presupuesto__estado {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.presupuesto--excedido .presupuesto__estado {
  font-weight: 600;
  color: var(--color-presupuesto-excedido);
}

/* Links Editar / Eliminar con zona de toque cómoda para el dedo. */
.presupuesto__pie .acciones a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  font-size: 0.9375rem;
}

/* Botones "Nuevo presupuesto" / "Copiar ...", uno bajo el otro. */
.presupuestos__acciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.presupuestos__acciones .boton--ancho {
  margin-top: 0;
}

.copiar-presupuestos {
  margin: 0;
}

.copiar-presupuestos .copiar-presupuestos__detalle {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--color-texto-suave);
}

.presupuestos__nota {
  font-size: 0.8125rem;
  color: var(--color-texto-suave);
}

/* ---------- Presupuestos dentro del inicio ---------- */
/* Dentro de una tarjeta (.bloque) las filas no llevan su propia tarjeta:
   se separan con una línea, como los movimientos. El excedido se sigue
   notando por la etiqueta "Excedido", el texto y el color de la barra. */
.presupuestos__lista--compacta {
  gap: 0;
  margin-top: 0.25rem;
}

.presupuestos__lista--compacta .presupuesto {
  padding: 0.75rem 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.presupuestos__lista--compacta .presupuesto + .presupuesto {
  border-top: 1px solid var(--color-borde);
}

/* Nota pegada bajo el título del bloque (ej. "Considera todas las cuentas"). */
.bloque__nota--arriba {
  margin: 0 0 0.25rem;
}

/* Segunda nota seguida de otra: sin el espacio grande de arriba. */
.bloque__nota--junta {
  margin-top: 0.25rem;
}

/* ---------- Tarjeta "Si gastas todo lo presupuestado" ---------- */
.proyeccion__subtitulo {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.proyeccion__monto {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* "Te faltarían $X": en palabras y con el color de gasto (no solo color). */
.proyeccion__faltante {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-gasto);
}

.proyeccion__barra {
  margin-top: 0.25rem;
}

.proyeccion__avance {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.proyeccion__detalles {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.proyeccion__detalles li + li {
  margin-top: 0.25rem;
}

/* Exceso: mismo naranjo que "Excedido" en las filas de presupuesto. */
.proyeccion__exceso {
  font-weight: 600;
  color: var(--color-presupuesto-excedido);
}

/* ---------- Barra de navegación inferior (solo celular, con sesión) ---------- */
/* position: fixed la deja pegada al borde inferior de la PANTALLA (no de la
   página): no se mueve al hacer scroll. */
.nav-inferior {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  /* Zona segura: en celulares con barra de gestos el sistema reserva un
     espacio abajo; env() lo entrega (0px si no existe). */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background: var(--color-nav-inferior-fondo);
  border-top: 1px solid var(--color-borde);
  box-shadow: var(--sombra-nav-inferior);
}

/* 5 columnas: las 4 secciones comparten el espacio y el "+" central tiene ancho fijo. */
.nav-inferior__lista {
  display: grid;
  grid-template-columns: 1fr 1fr 4.5rem 1fr 1fr;
  align-items: stretch;
  height: var(--alto-barra-inferior);
  max-width: 32rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.nav-inferior__lista li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.nav-inferior__enlace {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  width: 100%;
  height: 100%;
  min-height: var(--objetivo-tactil);
  padding: 0;                  /* todo el ancho de la columna para el texto */
  font-size: 0.75rem;
  color: var(--color-nav-inferior-texto);
  text-decoration: none;
}

.nav-inferior__enlace:hover {
  color: var(--color-nav-inferior-activo);
}

.nav-inferior__texto {
  max-width: 100%;
  letter-spacing: -0.01em;     /* un poco más juntas: "Presupuestos" en negrita cabe sin "..." */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Sección actual: color + negrita + una rayita arriba (no depende solo del color). */
.nav-inferior__enlace[aria-current="page"] {
  font-weight: 700;
  color: var(--color-nav-inferior-activo);
}

.nav-inferior__enlace[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 0.1875rem;
  background: currentColor;
  border-radius: 0 0 0.25rem 0.25rem;
}

/* Botón "+": círculo grande que sobresale hacia arriba (translateY negativo). */
.nav-inferior__nuevo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--color-texto-sobre-primario);
  background: var(--color-primario);
  border: 0.25rem solid var(--color-fondo);   /* "anillo" que lo separa de la barra */
  border-radius: 50%;
  box-shadow: var(--sombra-flotante);
  transform: translateY(-1rem);
}

.nav-inferior__nuevo:hover {
  color: var(--color-texto-sobre-primario);
  background: var(--color-primario-hover);
}

.nav-inferior__nuevo[aria-current="page"] {
  background: var(--color-primario-hover);
}

/* Con sesión, en el celular: espacio al final de la página para que la barra
   fija no tape el último botón (Guardar, Eliminar, paginación...). */
.con-barra-inferior .contenido {
  padding-bottom: var(--espacio-inferior);
}

/* Al navegar con Tab, el navegador deja el elemento enfocado por encima de la barra. */
:root:has(body.con-barra-inferior) {
  scroll-padding-bottom: var(--espacio-inferior);
}

/* En el celular la barra inferior reemplaza a la navegación principal de
   arriba (queda solo la marca, el usuario y "Cerrar sesión"). */
.barra__nav--principal {
  display: none;
}

/* Zonas seguras laterales (celular en horizontal con "notch"). max() elige
   el mayor: el margen normal de 1rem o lo que pida el sistema. */
.barra__interior,
.contenido {
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

/* Celulares comunes (375px, 360px): cada sección de la barra mide unos
   72px y "Movimientos"/"Presupuestos" en NEGRITA (sección actual) a 12px
   miden ~75px, así que se cortaban ("Movimien..."). A 11px miden ~68px y
   caben. El "..." queda solo como respaldo en pantallas aún más angostas. */
@media (max-width: 24rem) {
  .nav-inferior__enlace {
    font-size: 0.6875rem;
  }
}

/* Pantallas muy angostas (menos de ~350px): letras un poco más chicas
   (10px, el mismo tamaño de las barras de pestañas de los celulares). */
@media (max-width: 22rem) {
  .nav-inferior__enlace {
    font-size: 0.625rem;
  }

  .destacada__monto {
    font-size: 1.875rem;
  }
}

/* ---------- Pantallas anchas (tablet / escritorio, desde 48rem = 768px) ---------- */
@media (min-width: 48rem) {
  /* Se oculta la barra inferior y vuelve la navegación de arriba. */
  .nav-inferior {
    display: none;
  }

  .barra__nav--principal {
    display: flex;
  }

  /* El menú ☰ se oculta y vuelve el bloque de usuario + "Cerrar sesión". */
  .menu-movil {
    display: none;
  }

  .barra__nav--sesion {
    display: flex;
  }

  /* Sin barra inferior, el espacio de abajo vuelve a ser el normal. */
  .con-barra-inferior .contenido {
    padding-bottom: 3rem;
  }

  :root:has(body.con-barra-inferior) {
    scroll-padding-bottom: 0;
    scroll-padding-top: 0;
  }

  /* En pantallas anchas el banner vuelve a moverse con la página, como
     antes (relative: sigue siendo la referencia de su contenido). */
  .barra {
    position: relative;
  }

  /* Con espacio de sobra, los chips bajan de línea en vez de hacer scroll. */
  .chips__lista {
    flex-wrap: wrap;
    margin: 0;
    padding: 0.375rem 0;
    overflow-x: visible;
  }

  .destacada {
    padding: 2rem;
  }

  .destacada__monto {
    font-size: 2.75rem;
  }

  .total__monto {
    font-size: 1.375rem;
  }
}

/* Al imprimir no tiene sentido la barra fija. */
@media print {
  .nav-inferior {
    display: none;
  }

  .con-barra-inferior .contenido {
    padding-bottom: 0;
  }
}

/* =====================================================================
   Transferencias entre cuentas.
   Una transferencia no es ingreso ni gasto: se ve como una fila "neutra"
   (ni verde ni roja), con el color índigo solo en el monto, el ícono y la
   flecha "Banco → Tarjeta". El significado no depende solo del color: el
   texto dice "Transferencia" y el monto va sin signo.
   Reglas: todo color con var(--...), tamaños de letra en rem.
   ===================================================================== */

/* Monto sin signo, en índigo (ver includes/monto_transaccion.html). */
.monto--transferencia {
  color: var(--color-transferencia);
}

/* Ícono de flechas en "Movimientos" del inicio: mismo círculo que el de
   ingresos y gastos, pero en índigo. */
.movimiento__icono--transferencia {
  color: var(--color-transferencia);
  background: var(--color-transferencia-fondo);
}

/* "Banco → Tarjeta" en el inicio: con nombres largos, si se recortara en
   una sola línea ("Cuenta corriente Banco Esta...") se perdería la cuenta
   de destino. Por eso aquí se permiten hasta 2 líneas antes del "...". */
.movimiento__detalle--transferencia {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Flecha decorativa entre la cuenta de origen y la de destino. El lector
   de pantalla no la lee (aria-hidden); en su lugar oye "de X a Y". */
.flecha-transferencia {
  color: var(--color-transferencia);
  font-weight: 700;
}

/* Fila de transferencia en la lista: fondo normal (neutra). La celda
   "Banco → Tarjeta" puede ser larga: se parte en líneas en vez de
   ensanchar la tabla. */
.tabla__fila--transferencia td.tabla__cuentas {
  overflow-wrap: anywhere;
}

/* Nota fija del formulario: "Una transferencia no cuenta como gasto ni
   como ingreso." Usa el mismo formato que las demás alertas, en índigo. */
.alerta--transferencia {
  border-color: var(--color-transferencia);
  background: var(--color-transferencia-fondo);
  color: var(--color-texto);
}

/* "Desde" y "Hacia" van agrupados (fieldset) con una flecha hacia abajo
   entre los dos, para que se lea como un recorrido: de esta cuenta a esta. */
.ruta-transferencia {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  min-width: 0;                /* evita que el fieldset ensanche la página en el celular */
}

.ruta-transferencia .campo {
  margin-bottom: 0;
}

.ruta-transferencia__flecha {
  display: flex;
  justify-content: center;
  padding: 0.35rem 0;
  color: var(--color-transferencia);
}

.ruta-transferencia__flecha span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-transferencia-fondo);
}

/* Cabecera de la lista con dos botones (Nueva transacción / Nueva
   transferencia). En el celular cada botón ocupa el ancho disponible y,
   si no caben lado a lado, el segundo baja de línea; en pantallas anchas
   quedan juntos a la derecha del título. */
.cabecera__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.cabecera__acciones .boton {
  flex: 1 1 auto;
  min-height: var(--objetivo-tactil);
}

@media (min-width: 40rem) {
  .cabecera__acciones {
    width: auto;
  }

  .cabecera__acciones .boton {
    flex: 0 0 auto;
  }
}

/* =====================================================================
   Pantalla "Nuevo movimiento" (botón "+"): elegir Gasto, Ingreso o
   Transferencia. Tres tarjetas grandes; toda la tarjeta es el enlace.
   - Celular: una columna, tarjetas horizontales (ícono a la izquierda)
     para que las tres quepan sin hacer scroll.
   - Pantallas anchas: tres columnas, ícono arriba.
   Cada tarjeta toma su color de --opcion-color / --opcion-fondo, que se
   definen con las variables de tipo (ingreso, gasto, transferencia).
   Reglas: todo color con var(--...), tamaños de letra en rem.
   ===================================================================== */

/* Enlace de texto con área táctil de al menos 44px de alto (Volver,
   Cancelar, Cambiar tipo). inline-flex permite alinear un ícono al lado. */
.enlace-tactil {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--objetivo-tactil);
  font-weight: 600;
}

.elegir-movimiento {
  max-width: 56rem;
  margin: 0 auto;
}

.elegir-movimiento__pregunta {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  color: var(--color-texto-suave);
}

.elegir-movimiento__sin-cuentas {
  margin: 0;
}

.elegir-movimiento__nota {
  margin-top: 1.25rem;
}

.elegir-movimiento__cancelar {
  margin: 0.5rem 0 0;
  text-align: center;
}

.opciones-movimiento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.opcion-movimiento {
  /* Color de la tarjeta: lo cambia cada variante de abajo. */
  --opcion-color: var(--color-primario);
  --opcion-fondo: var(--color-fondo);

  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;                       /* en 3 columnas, todas del mismo alto */
  min-height: 5rem;                   /* muy por encima de los 44px mínimos */
  padding: 1rem 1.25rem;
  color: var(--color-texto);
  text-decoration: none;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-left: 0.375rem solid var(--opcion-color);  /* franja de color del tipo */
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.opcion-movimiento:hover {
  color: var(--color-texto);
  background: var(--opcion-fondo);
  border-color: var(--opcion-color);
}

/* Foco con teclado: contorno grueso del color del tipo, separado del borde. */
.opcion-movimiento:focus-visible {
  outline: 3px solid var(--opcion-color);
  outline-offset: 3px;
  background: var(--opcion-fondo);
}

.opcion-movimiento--gasto {
  --opcion-color: var(--color-gasto);
  --opcion-fondo: var(--color-gasto-fondo);
}

.opcion-movimiento--ingreso {
  --opcion-color: var(--color-ingreso);
  --opcion-fondo: var(--color-ingreso-fondo);
}

.opcion-movimiento--transferencia {
  --opcion-color: var(--color-transferencia);
  --opcion-fondo: var(--color-transferencia-fondo);
}

/* Círculo con el ícono, igual al de "Movimientos" en el inicio pero más grande. */
.opcion-movimiento__icono {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: var(--opcion-color);
  background: var(--opcion-fondo);
}

/* En hover el fondo de la tarjeta ya es el claro: el círculo pasa a blanco
   para no perderse. */
.opcion-movimiento:hover .opcion-movimiento__icono,
.opcion-movimiento:focus-visible .opcion-movimiento__icono {
  background: var(--color-superficie);
}

.opcion-movimiento__texto {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;                       /* permite partir textos largos sin ensanchar */
}

.opcion-movimiento__titulo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--opcion-color);
}

.opcion-movimiento__descripcion {
  font-size: 0.9rem;
  color: var(--color-texto-suave);
}

/* "Necesitas al menos 2 cuentas": discreto, en ámbar de aviso. */
.opcion-movimiento__aviso {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-aviso);
}

/* Pantallas anchas: tres columnas y tarjetas verticales (ícono arriba). */
@media (min-width: 48rem) {
  .opciones-movimiento {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .opcion-movimiento {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    border-left: 1px solid var(--color-borde);
    border-top: 0.375rem solid var(--opcion-color);  /* la franja pasa arriba */
  }

  .opcion-movimiento:hover {
    border-color: var(--opcion-color);
  }
}

/* Formulario de gasto/ingreso con tipo ya elegido: "¿No era un gasto?
   Cambiar tipo". */
.cambiar-tipo {
  margin: 0 0 0.75rem;
}

/* =====================================================================
   Lista de movimientos (transaccion_lista.html): tabla en pantallas
   anchas, tarjetas en el celular. Es el MISMO HTML: solo cambia el CSS.
   Reglas: todo color con var(--...), tamaños de letra en rem.
   ===================================================================== */

/* .tabla--tarjetas = "esta tabla tiene variante de tarjetas en el celular".
   Todo <table> de las plantillas la lleva (lo verifica un test). Aquí van las
   reglas genéricas; cada tabla (.tabla--movimientos, .tabla--cuentas,
   .tabla--categorias) solo define su propia grilla.

   Sin scroll interno: el menú "⋮" se muestra encima de lo que está debajo.
   Con overflow: auto (lo normal en .tabla-contenedor) el menú de la última
   fila quedaría recortado dentro del contenedor. Y en el celular, un scroll
   horizontal interno hace que el navegador agrande la pantalla de layout y la
   barra inferior fija quede fuera de la vista: por eso aquí no hay scroll
   interno y en el celular no hay tabla (son tarjetas). */
.tabla-contenedor:has(> .tabla--tarjetas) {
  overflow: visible;
}

/* La última fila abre su menú "⋮" hacia ARRIBA: hacia abajo lo taparía la
   barra inferior fija del celular (z-index 20). */
.tabla--tarjetas tbody tr:last-child .menu-acciones__panel {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/* ---------- Menú "⋮" con <details>/<summary> (sin JavaScript) ---------- */
/* position: relative: el panel se ubica respecto de este botón. */
.menu-acciones {
  position: relative;
}

/* El botón: un círculo de 44x44px (área táctil mínima cómoda). */
.menu-acciones__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  color: var(--color-texto-suave);
  border-radius: 50%;
  list-style: none;            /* quita el triángulo por defecto (Chrome, Firefox) */
  cursor: pointer;
}

/* Quita el triángulo por defecto en Safari. */
.menu-acciones__boton::-webkit-details-marker {
  display: none;
}

.menu-acciones__boton:hover,
.menu-acciones[open] > .menu-acciones__boton {
  color: var(--color-texto);
  background: var(--color-fondo);
}

/* El panel flota debajo del botón, alineado a su borde derecho (así no se
   sale de la pantalla por la derecha). z-index 10: encima de las filas
   siguientes, pero debajo de la barra inferior fija (z-index 20). */
.menu-acciones__panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  margin-top: 0.25rem;
  padding: 0.25rem 0;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-menu);
}

/* Cada opción mide al menos 44px de alto: fácil de tocar con el dedo. */
.menu-acciones__opcion {
  display: flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  padding: 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-texto);
  text-decoration: none;
  white-space: nowrap;
}

.menu-acciones__opcion:hover {
  color: var(--color-texto);
  background: var(--color-fondo);
  text-decoration: underline;
}

/* Contorno de foco hacia adentro, para que no lo tape el borde del panel. */
.menu-acciones__opcion:focus-visible {
  outline-offset: -3px;
}

.menu-acciones__opcion--peligro,
.menu-acciones__opcion--peligro:hover {
  color: var(--color-error);
}

.menu-acciones__opcion--peligro:hover {
  color: var(--color-peligro-hover);
}

/* overflow-wrap: break-word parte una palabra SOLO si no cabe sola en la
   línea (nombres larguísimos sin espacios); si cabe, baja de línea en los
   espacios. Reemplaza al "anywhere" de .tabla, que además deja que el
   navegador achique la columna al mínimo y corte palabras normales
   ("Transfer-encia"). Sirve en la tabla y en las tarjetas. */
.tabla--movimientos .movimiento-fila__titulo,
.tabla--movimientos .movimiento-fila__cuenta,
.tabla--movimientos .tabla__fila--transferencia .movimiento-fila__cuenta {
  overflow-wrap: break-word;
}

/* ---------- Pantallas anchas: tabla ---------- */
@media (min-width: 48rem) {
  /* "separate" con espacio 0 se ve igual que "collapse", pero permite
     redondear las esquinas de la cabecera (con "collapse" el navegador
     ignora border-radius en las celdas). Hace falta porque el contenedor
     ya no recorta lo que sobresale (overflow: visible). */
  .tabla--tarjetas {
    border-collapse: separate;
    border-spacing: 0;
  }

  .tabla--tarjetas thead th:first-child {
    border-top-left-radius: var(--radio);
  }

  .tabla--tarjetas thead th:last-child {
    border-top-right-radius: var(--radio);
  }

  /* Columna del "⋮" (cuentas y categorías): ancha lo justo para el botón. */
  .tabla--tarjetas .cuentas__col--acciones,
  .tabla--tarjetas .categorias__col--acciones,
  .tabla--tarjetas .cuenta-fila__acciones,
  .tabla--tarjetas .categoria-fila__acciones {
    width: 3.75rem;
  }

  .tabla--tarjetas td.cuenta-fila__acciones,
  .tabla--tarjetas td.categoria-fila__acciones {
    padding: 0.25rem 0.5rem;
  }

  /* "Inicial " solo existe en la tarjeta del celular. */
  .cuenta-fila__prefijo {
    display: none;
  }

  /* table-layout: fixed = el ancho de cada columna lo decide la
     cabecera, no el contenido. Fecha, Tipo, Monto y "⋮" tienen ancho fijo
     (en rem, crecen si el usuario agranda la letra); Categoría y Cuenta se
     reparten el resto en partes iguales. Así un nombre largo baja de línea
     dentro de su columna en vez de achicar las otras y partir palabras
     cortas ("Supermerc-ado"), que es lo que hacía el reparto automático. */
  .tabla--movimientos {
    table-layout: fixed;
  }

  .tabla--movimientos .movimientos__col--fecha {
    width: 8rem;
  }

  .tabla--movimientos .movimientos__col--tipo {
    width: 6.5rem;
  }

  .tabla--movimientos .movimientos__col--monto {
    width: 9rem;
  }

  .tabla--movimientos .movimientos__col--acciones {
    width: 3.75rem;            /* botón de 44px + el relleno de la celda */
  }

  .tabla--movimientos .movimiento-fila__tipo {
    white-space: nowrap;
  }

  .tabla--movimientos td.movimiento-fila__acciones {
    padding: 0.25rem 0.5rem;
  }
}

/* ---------- Celular: cada fila es una tarjeta ---------- */
@media (max-width: 47.99rem) {
  /* Sin caja blanca alrededor: cada tarjeta tiene la suya. */
  .tabla-contenedor:has(> .tabla--tarjetas) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .tabla--tarjetas {
    display: block;
  }

  /* Los títulos de columna no se ven (la tarjeta se entiende sola), pero
     siguen ahí para los lectores de pantalla (igual que .solo-lectores). */
  .tabla--tarjetas thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .tabla--tarjetas tbody {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* La tarjeta (común a todas las tablas): cada fila es una grilla y cada
     tabla define sus columnas y áreas más abajo. El relleno derecho es
     chico porque el botón "⋮" de 44px ya trae su propio aire. */
  .tabla--tarjetas tbody tr {
    display: grid;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    padding: 0.75rem 0.25rem 0.75rem 1rem;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
  }

  /* min-width: 0 en cada celda: sin esto una palabra muy larga obligaría
     a la celda a medir lo que mide la palabra y la tarjeta se desbordaría.
     overflow-wrap: break-word parte una palabra SOLO si no cabe sola en la
     línea (nunca "Efectiv/o"). ".tabla.tabla--tarjetas" sube la especificidad
     para ganarle a ".tabla td.tabla__numero" (alineado a la derecha). */
  .tabla.tabla--tarjetas tbody tr > th,
  .tabla.tabla--tarjetas tbody tr > td {
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
    overflow-wrap: break-word;
  }

  /* La tarjeta de Movimientos: una grilla de 4 columnas y 2 filas.
       columnas: fecha (lo que mida) | cuenta (el resto) | monto/tipo | ⋮
       fila 1:   título (ocupa fecha + cuenta)           | monto      | ⋮
       fila 2:   fecha · cuenta                           | tipo       | ⋮
     minmax(0, 1fr): la columna de la cuenta puede achicarse y su texto
     baja de línea, en vez de empujar la tarjeta fuera de la pantalla. */
  .movimiento-fila {
    grid-template-columns: auto minmax(0, 1fr) auto var(--objetivo-tactil);
    grid-template-areas:
      "titulo titulo monto acciones"
      "fecha  cuenta tipo  acciones";
  }

  /* La tarjeta de Cuentas:
       fila 1:   nombre (en negrita) ......... saldo actual | ⋮
       fila 2:   tipo ........................ "Inicial $X" | ⋮
     La columna del saldo mide lo que mida el monto (auto) y el nombre usa el
     resto con minmax(0, 1fr): si es largo baja de línea en los espacios. */
  .cuenta-fila {
    grid-template-columns: minmax(0, 1fr) auto var(--objetivo-tactil);
    grid-template-areas:
      "nombre saldo   acciones"
      "tipo   inicial acciones";
  }

  .cuenta-fila__nombre {
    grid-area: nombre;
    font-weight: 600;
  }

  .cuenta-fila__tipo,
  .cuenta-fila__inicial {
    font-size: 0.875rem;
    color: var(--color-texto-suave);
  }

  .cuenta-fila__tipo {
    grid-area: tipo;
  }

  .cuenta-fila__inicial {
    grid-area: inicial;
    justify-self: end;
  }

  .cuenta-fila__prefijo {
    display: inline;
  }

  .cuenta-fila__actual {
    grid-area: saldo;
    justify-self: end;
    font-weight: 700;
  }

  .cuenta-fila__acciones {
    grid-area: acciones;
    align-self: center;
    justify-self: end;
  }

  /* La tarjeta de Categorías: nombre ... etiqueta de tipo ... ⋮
     En "Categorías del sistema" no hay menú: la tercera columna es la
     etiqueta "Predefinida" (que ocupa su propio ancho). */
  .tabla--categorias .categoria-fila {
    grid-template-columns: minmax(0, 1fr) auto var(--objetivo-tactil);
    grid-template-areas: "nombre tipo acciones";
    align-items: center;        /* centrado (y no baseline) para alinear con el botón "⋮" */
  }

  .categoria-fila__nombre {
    grid-area: nombre;
    font-weight: 600;
  }

  .categoria-fila__tipo {
    grid-area: tipo;
  }

  .categoria-fila__acciones {
    grid-area: acciones;
    justify-self: end;
  }

  .tabla--categorias-sistema .categoria-fila {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "nombre tipo origen";
    padding-right: 1rem;       /* sin botón "⋮": el aire normal a la derecha */
  }

  .categoria-fila__origen {
    grid-area: origen;
  }

  .tabla--movimientos .movimiento-fila__titulo {
    grid-area: titulo;
    font-weight: 600;
  }

  .tabla--movimientos .movimiento-fila__titulo .tabla__nota {
    font-size: 0.8125rem;
  }

  .tabla--movimientos .movimiento-fila__monto {
    grid-area: monto;
    justify-self: end;
    font-weight: 600;
  }

  .tabla--movimientos .movimiento-fila__fecha,
  .tabla--movimientos .movimiento-fila__cuenta {
    font-size: 0.875rem;
    color: var(--color-texto-suave);
  }

  .tabla--movimientos .movimiento-fila__fecha {
    grid-area: fecha;
  }

  /* El punto que separa "04 oct 2026 · Banco". Es decorativo: el texto
     después de "/" (vacío) es lo que leen los lectores de pantalla. */
  .tabla--movimientos .movimiento-fila__fecha::after {
    content: "·";
    content: "·" / "";
    margin-left: 0.5rem;
  }

  .tabla--movimientos .movimiento-fila__cuenta {
    grid-area: cuenta;
  }

  .tabla--movimientos .movimiento-fila__tipo {
    grid-area: tipo;
    justify-self: end;
  }

  /* Transferencias: no hay etiqueta de tipo (el título ya dice
     "Transferencia"), así que "Banco → Tarjeta" usa también ese espacio. */
  .tabla--movimientos .tabla__fila--transferencia .movimiento-fila__tipo {
    display: none;
  }

  .tabla--movimientos .tabla__fila--transferencia .movimiento-fila__cuenta {
    grid-column: 2 / 4;
  }

  /* El "⋮" ocupa las dos filas, centrado a la derecha de la tarjeta. */
  .tabla--movimientos .movimiento-fila__acciones {
    grid-area: acciones;
    align-self: center;
    justify-self: end;
  }
}

/* =====================================================================
   Gastos fijos (gasto_fijo_lista.html, gasto_fijo_form.html,
   gasto_fijo_terminar.html y gasto_fijo_confirmar_eliminar.html).
   - Celular: una columna (resumen, botón "Nuevo gasto fijo" y tarjetas).
   - Pantallas anchas (desde 48rem = 768px): tarjetas en 2 columnas.
   Reutiliza .destacada (resumen oscuro), .bienvenida (estado vacío) y
   .menu-acciones (menú "⋮" sin JavaScript) de las otras pantallas.
   Reglas: todo color con var(--...), tamaños de letra en rem.
   ===================================================================== */

.gastos-fijos {
  max-width: 40rem;
  margin: 0 auto;
}

/* Separación vertical entre los bloques de la pantalla. */
.gastos-fijos > * + * {
  margin-top: 1.25rem;
}

.gastos-fijos__titulo {
  margin: 0;
  font-size: 1.5rem;
}

/* "Nuevo gasto fijo": ancho completo en el celular, con el ícono "+". */
.gastos-fijos__nuevo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

/* Lista de tarjetas: grid de 1 columna (2 en pantallas anchas, más abajo).
   minmax(0, 1fr): la columna puede achicarse y los textos largos bajan
   de línea, en vez de ensanchar la página. */
.gastos-fijos__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Título chico y suave de una sección ("Pausados · no cuentan en el mes"). */
.gastos-fijos__subtitulo {
  margin: 0 0 0.5rem;
  padding: 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-texto-suave);
}

.gastos-fijos__sin-activos {
  margin: 0;
  color: var(--color-texto-suave);
}

/* ---------- Una tarjeta de gasto fijo ---------- */
/* Textos a la izquierda (crecen) y el menú "⋮" (o "Reanudar") a la derecha. */
.gasto-fijo {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.875rem 0.5rem 0.875rem 1rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

/* min-width: 0 deja que los nombres largos bajen de línea en vez de
   empujar el "⋮" fuera de la tarjeta. */
.gasto-fijo__info {
  flex: 1;
  min-width: 0;
}

.gasto-fijo__nombre {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: break-word;
}

/* "Día 5 · Servicios · Cuenta RUT" */
.gasto-fijo__detalle {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-texto-suave);
  overflow-wrap: break-word;
}

/* Monto + insignias en una fila; si no caben, las insignias bajan. */
.gasto-fijo__monto-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0.375rem 0 0;
}

.gasto-fijo__monto {
  font-size: 1.0625rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Monto variable ("≈ $45.000"): más suave, porque es un estimado. */
.gasto-fijo__monto--variable {
  color: var(--color-texto-suave);
}

/* "Desde noviembre" / "Hasta marzo de 2027" */
.gasto-fijo__vigencia {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-texto-suave);
}

/* Insignias tipo píldora. Dicen lo que significan con TEXTO (no solo color). */
.gasto-fijo__insignia {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
}

.gasto-fijo__insignia--cobro {
  color: var(--color-insignia-cobro-texto);
  background: var(--color-insignia-cobro-fondo);
}

/* El fondo gris casi no se distingue del blanco: lleva un borde suave. */
.gasto-fijo__insignia--variable {
  color: var(--color-insignia-variable-texto);
  background: var(--color-insignia-variable-fondo);
  border-color: var(--color-insignia-variable-borde);
}

/* El "⋮" sube un poco para quedar alineado con el nombre. */
.gasto-fijo > .menu-acciones {
  flex: 0 0 auto;
  margin-top: -0.375rem;
}

/* La última tarjeta de cada lista abre su menú hacia ARRIBA: hacia abajo lo
   taparía la barra inferior fija del celular. */
.gastos-fijos__lista > .gasto-fijo:last-child .menu-acciones__panel {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/* Pausados y terminados: tarjeta "apagada" (sin sombra, fondo gris). */
.gasto-fijo--apagado {
  align-items: center;
  background: var(--color-gasto-fijo-apagado-fondo);
  box-shadow: none;
}

.gasto-fijo--apagado .gasto-fijo__nombre {
  color: var(--color-gasto-fijo-apagado-texto);
}

.gasto-fijo--apagado > .menu-acciones {
  margin-top: 0;
}

/* Botón visible "Reanudar" / "Reactivar" (un formulario POST). */
.gasto-fijo__accion {
  flex: 0 0 auto;
  margin: 0;
}

.gasto-fijo__boton {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  padding: 0 0.875rem;
  font-size: 0.875rem;
}

/* ---------- Opción del menú "⋮" que es un botón (Pausar, por POST) ---------- */
/* Se ve igual que los links del menú (.menu-acciones__opcion): sin el
   borde ni el fondo gris que el navegador le pone a un <button>. */
.menu-acciones__form {
  margin: 0;
}

button.menu-acciones__opcion {
  width: 100%;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---------- "Terminados (N)": sección plegada con <details> ---------- */
/* Toda la fila se puede tocar; la flecha queda pegada al texto. */
.gastos-fijos__terminados > summary {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--objetivo-tactil);
  padding: 0 0.25rem;
  color: var(--color-texto-suave);
  list-style: none;            /* quita el triángulo por defecto (Chrome, Firefox) */
  cursor: pointer;
}

.gastos-fijos__terminados > summary::-webkit-details-marker {
  display: none;               /* quita el triángulo por defecto (Safari) */
}

.gastos-fijos__terminados > summary:hover {
  color: var(--color-texto);
}

/* El h2 va dentro del summary: se ve igual que el título de "Pausados". */
.gastos-fijos__terminados .gastos-fijos__subtitulo {
  margin: 0;
  padding: 0;
  color: inherit;
}

/* Flecha que gira cuando la sección está abierta ([open]). */
.gastos-fijos__terminados[open] > summary .gastos-fijos__flecha {
  transform: rotate(180deg);
}

.gastos-fijos__terminados .gastos-fijos__lista {
  margin-top: 0.5rem;
}

/* ---------- Formulario de gasto fijo ---------- */
/* Casilla (checkbox) con su texto: TODO el label se puede tocar y mide al
   menos 44px de alto. Sobrescribe las reglas generales de .campo (que
   ponen el label en negrita y el input al 100% de ancho). */
.campo .campo-casilla {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--objetivo-tactil);
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.campo-casilla input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  padding: 0;
  accent-color: var(--color-casilla);  /* color de la casilla marcada */
}

/* "El monto cambia cada mes" va pegada al campo Monto: es parte de él. */
.gasto-fijo-form__monto > .campo:first-child {
  margin-bottom: 0.125rem;
}

/* Bloque destacado del interruptor "Se cobra solo (débito automático)". */
.gasto-fijo-form__cobro {
  padding: 0.5rem 0.875rem 0.75rem;
  color: var(--color-cobro-bloque-texto);
  background: var(--color-cobro-bloque-fondo);
  border: 1px solid var(--color-cobro-bloque-borde);
  border-radius: var(--radio);
}

.gasto-fijo-form__cobro .campo-casilla {
  font-weight: 700;
}

.gasto-fijo-form__cobro .campo__ayuda {
  margin-top: 0.125rem;
  color: var(--color-cobro-bloque-texto);
}

/* Nota "Cambiar el monto no cambia los pagos anteriores" (solo al editar). */
.gasto-fijo-form__nota {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

/* "Cancelar" centrado bajo el botón, con área táctil de 44px. */
.gasto-fijo-form__cancelar {
  margin: 0.5rem 0 0;
  text-align: center;
}

/* Botones de las páginas Terminar / Eliminar, uno bajo el otro. */
.gasto-fijo-confirmar__acciones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.gasto-fijo-confirmar__acciones .boton--ancho {
  margin-top: 0;
}

/* Link "Administra tus gastos fijos" al final de Presupuestos. */
.presupuestos__gastos-fijos {
  margin-bottom: 0;
  text-align: center;
  font-size: 0.9375rem;
}

/* ---------- Pantallas anchas: tarjetas en 2 columnas ---------- */
@media (min-width: 48rem) {
  .gastos-fijos {
    max-width: 56rem;
  }

  .gastos-fijos__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  /* El botón ya no necesita todo el ancho: mide lo que su texto. */
  .gastos-fijos__nuevo {
    width: fit-content;
  }
}

/* =====================================================================
   Bloque "Gastos fijos del mes" (inicio.html), pantalla de pago e
   insignia "Fijo" de Movimientos. Sin tablas: lista de filas que en el
   celular dejan el nombre/estado a la izquierda y el botón a la derecha.
   Reglas: todo color con var(--...), tamaños de letra en rem.
   ===================================================================== */

.gf__resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.125rem 1rem;
  margin: 0.25rem 0 0.75rem;
}

.gf__faltan {
  font-size: 1.25rem;
  font-weight: 700;
}

.gf__total {
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.gf__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gf__al-dia,
.gf__vacio {
  margin: 0.5rem 0 0;
  color: var(--color-texto-suave);
}

.gf__al-dia {
  color: var(--color-gf-pagado);
  font-weight: 600;
}

/* Un gasto fijo: textos a la izquierda (crecen), botón a la derecha. */
.gf-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--color-borde);
}

.gf-item:first-child {
  border-top: 0;
}

/* min-width: 0: los nombres largos bajan de línea en vez de ensanchar la página. */
.gf-item__info {
  flex: 1;
  min-width: 0;
}

.gf-item__info > p {
  margin: 0;
  overflow-wrap: break-word;
}

.gf-item__nombre {
  font-weight: 700;
}

.gf-item__estado {
  font-size: 0.875rem;
  color: var(--color-gf-neutro-texto);
}

.gf-item__monto {
  font-size: 0.9375rem;
  font-weight: 600;
}

.gf-item__monto--variable {
  color: var(--color-texto-suave);
}

/* Atrasado: ámbar (no rojo): hay que atenderlo, pero no es una alarma. */
.gf-item--atrasado .gf-item__estado {
  display: inline-block;
  padding: 0 0.5rem;
  font-weight: 700;
  color: var(--color-gf-atrasado-texto);
  background: var(--color-gf-atrasado-fondo);
  border-radius: 999px;
}

/* Pagado: verde con el ✓ (el texto "Pagado" también lo dice). */
.gf-item--pagado .gf-item__estado {
  color: var(--color-gf-pagado);
  font-weight: 600;
}

/* Omitido y "No registrado": tono apagado, sin alarma. */
.gf-item--omitido .gf-item__nombre,
.gf-item--no_registrado .gf-item__nombre {
  color: var(--color-texto-suave);
}

.gf-item__accion {
  flex: 0 0 auto;
  margin: 0;
}

.gf-item__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--objetivo-tactil);
  min-height: var(--objetivo-tactil);
  padding: 0 0.875rem;
  font-size: 0.875rem;
}

/* Cobro automático que aún no llega: texto en lugar de botón. */
.gf-item__espera {
  flex: 0 0 auto;
  max-width: 7rem;
  font-size: 0.8125rem;
  text-align: right;
  color: var(--color-texto-suave);
}

/* Botones masivos: uno bajo el otro, ancho completo. */
.gf__masivos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.gf__masivos form {
  margin: 0;
}

/* "Ver pagados (N)": plegado, mismo gesto que "Terminados" en Gastos fijos. */
.gf-resueltos {
  margin-top: 0.5rem;
}

.gf-resueltos > summary {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--objetivo-tactil);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  list-style: none;
  cursor: pointer;
}

.gf-resueltos > summary::-webkit-details-marker {
  display: none;
}

.gf-resueltos > summary:hover {
  color: var(--color-texto);
}

.gf-resueltos[open] > summary .gf-resueltos__flecha {
  transform: rotate(180deg);
}

/* Ayuda "El mes pasado: $X" de la pantalla de pago. */
.gasto-fijo-pagar__ayuda {
  margin: 0 0 1rem;
  font-weight: 600;
}

/* Insignia "Fijo" junto a la categoría en Movimientos (también dice
   "Fijo" con texto: el color solo refuerza). */
.insignia {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
}

.insignia--fijo {
  color: var(--color-insignia-fijo-texto);
  background: var(--color-insignia-fijo-fondo);
}

@media (min-width: 48rem) {
  .gf__masivos {
    flex-direction: row;
  }

  .gf__masivos form {
    flex: 1;
  }
}

/* =====================================================================
   Fase 3b: menú "⋮" de cada gasto fijo del inicio y pantallas
   "No se cobró" / "Ya lo registré". Todo color con var(--...).
   ===================================================================== */

/* El menú "⋮" queda pegado al borde derecho de la fila. El bloque no tiene
   overflow, así que el panel no se recorta; sale alineado a la derecha (no
   se corta por ese borde). */
.gf-item__menu {
  flex: 0 0 auto;
  margin-right: -0.5rem;
}

/* Textos largos ("Desvincular (no borra el gasto)") bajan de línea en vez de
   ensanchar el panel; el tope evita que pase del borde izquierdo a 360px. */
.gf-item__menu .menu-acciones__panel {
  width: 14rem;
  max-width: calc(100vw - 3rem);
}

.gf-item__menu .menu-acciones__opcion {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  white-space: normal;
}

/* La última fila abre hacia ARRIBA: hacia abajo la taparía la barra inferior fija. */
.gf__lista > .gf-item:last-child .menu-acciones__panel {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/* Pantalla "No se cobró": cada opción es una tarjeta con su botón grande. */
.gf-opcion {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
}

.gf-opcion__titulo {
  margin: 0;
  font-size: 1.125rem;
}

.gf-opcion__detalle {
  margin: 0.25rem 0 0.75rem;
  color: var(--color-texto-suave);
}

.gf-opcion form {
  margin: 0;
}

/* "Venció el N": ámbar, igual que en el inicio. */
.gf-opcion__aviso {
  display: inline-block;
  padding: 0 0.5rem;
  font-weight: 700;
  color: var(--color-gf-atrasado-texto);
  background: var(--color-gf-atrasado-fondo);
  border-radius: 999px;
}

/* Pantalla "Ya lo registré": candidatos como tarjetas, una columna. */
.gf-candidatos {
  display: grid;
  gap: 0.625rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.gf-candidato {
  padding: 0.875rem 1rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
}

.gf-candidato p {
  margin: 0;
  overflow-wrap: anywhere;
}

.gf-candidato__linea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1rem;
  font-weight: 700;
}

.gf-candidato__detalle {
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.gf-candidato form {
  margin: 0.625rem 0 0;
}

/* =====================================================================
   Comparar meses (fase 7).
   Reglas: todo color con var(--...), tamaños de letra en rem. Dentro del
   SVG, rem/px son "unidades del dibujo": escalan junto con el viewBox.
   ===================================================================== */
:root {
  /* Colores del gráfico. Ingreso (verde azulado) y gasto (naranjo oscuro)
     se distinguen incluso con daltonismo; además la leyenda dice el nombre.
     "-claro" = relleno suave del mes en curso (con borde punteado). */
  --color-grafico-ingreso: #0d9488;
  --color-grafico-ingreso-claro: #b7e4df;
  --color-grafico-gasto: #c2410c;
  --color-grafico-gasto-claro: #f6d2bf;
  --color-grafico-excedida: var(--color-peligro-hover);     /* barra que pasó su límite */
  --color-grafico-base: var(--color-borde);
  --color-grafico-limite: var(--color-texto);
  --color-grafico-etiqueta: var(--color-texto);
  --color-grafico-etiqueta-dentro: #ffffff;  /* sobre #c2410c: 5.2:1 */

  /* Diferencias: reutilizan verde/rojo del sitio, solo como refuerzo. */
  --color-diferencia-favorable: var(--color-exito);
  --color-diferencia-desfavorable: var(--color-error);

  /* Pestañas 3 / 6 / 12 meses. */
  --color-segmentado-fondo: var(--color-fondo);
  --color-segmentado-activo-fondo: var(--color-destacado);
  --color-segmentado-activo-texto: var(--color-texto-sobre-destacado);
}

.comparar {
  max-width: 40rem;
  margin: 0 auto;
}

.comparar > * + * {
  margin-top: 1.25rem;
}

/* Tarjetas con ancla (#grafico, #comparacion, #categorias): al volver a una
   de ellas tras usar sus controles, su título queda a la vista y no debajo
   del banner fijo del celular. El alto del banner (--alto-banner) ya lo
   reserva el scroll-padding-top de :root (más arriba), y el navegador SUMA
   los dos: aquí va solo el margen extra (con --alto-banner quedaría el doble). */
.comparar__tarjeta {
  scroll-margin-top: 0.75rem;
}

.comparar > .selector-mes__volver {
  margin: 0.25rem 0 0;
  text-align: center;
  font-size: 0.875rem;
}

.comparar__titulo {
  margin: 0;
  font-size: 1.5rem;
}

.inicio > .inicio__comparar {
  margin-top: 0.25rem;
}

/* ---------- Pestañas 3 / 6 / 12 meses ---------- */
.segmentado__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  margin: 0.75rem 0 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--color-segmentado-fondo);
  border: 1px solid var(--color-borde);
  border-radius: 999px;
}

.segmentado__opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--objetivo-tactil);
  padding: 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-texto);
  text-decoration: none;
  border-radius: 999px;
}

.segmentado__opcion[aria-current="page"] {
  color: var(--color-segmentado-activo-texto);
  background: var(--color-segmentado-activo-fondo);
}

/* ---------- Leyenda ---------- */
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.leyenda__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.leyenda__muestra {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 3px;
}

.leyenda__muestra--ingreso {
  background: var(--color-grafico-ingreso);
}

.leyenda__muestra--gasto {
  background: var(--color-grafico-gasto);
}

.leyenda__muestra--en-curso {
  background: var(--color-grafico-gasto-claro);
  border: 2px dashed var(--color-grafico-gasto);
}

.leyenda__muestra--limite {
  height: 0;
  width: 1.25rem;
  border-radius: 0;
  border-top: 2px dashed var(--color-grafico-limite);
}

/* ---------- Gráfico de barras (SVG) ---------- */
.grafico {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.75rem;
}

.grafico__base {
  stroke: var(--color-grafico-base);
  stroke-width: 1;
}

.grafico__limite {
  stroke: var(--color-grafico-limite);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.grafico__mes {
  font-size: 0.625rem;
  fill: var(--color-texto-suave);
}

.grafico__etiqueta {
  font-size: 0.5625rem;
  font-weight: 700;
  fill: var(--color-grafico-etiqueta);
}

.grafico__etiqueta--dentro {
  fill: var(--color-grafico-etiqueta-dentro);
}

.barra--ingreso {
  fill: var(--color-grafico-ingreso);
}

.barra--gasto {
  fill: var(--color-grafico-gasto);
}

/* Mes en curso (incompleto): relleno claro y borde punteado. */
.barra--en-curso {
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
}

.barra--ingreso.barra--en-curso {
  fill: var(--color-grafico-ingreso-claro);
  stroke: var(--color-grafico-ingreso);
}

.barra--gasto.barra--en-curso {
  fill: var(--color-grafico-gasto-claro);
  stroke: var(--color-grafico-gasto);
}

.barra--gasto.barra--excedida {
  fill: var(--color-grafico-excedida);
}

/* Mes en curso que ya pasó el límite: conserva el aspecto "en curso"
   (relleno claro + borde punteado) con el borde del color de excedida. */
.barra--gasto.barra--excedida.barra--en-curso {
  fill: var(--color-grafico-gasto-claro);
  stroke: var(--color-grafico-excedida);
}

/* Etiqueta dentro de una barra clara (mes en curso): texto oscuro. */
.barra--en-curso + .grafico__etiqueta--dentro {
  fill: var(--color-grafico-etiqueta);
}

/* ---------- "Ver los números" y "Mes a mes" ---------- */
.numeros {
  margin-top: 0.75rem;
}

.numeros__resumen {
  display: flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  font-weight: 600;
  color: var(--color-primario);
  cursor: pointer;
}

.numeros__lista {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.numeros__item {
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-borde);
}

.numeros__mes {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.numeros__aviso {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-texto-suave);
}

.numeros__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
}

.numeros__dato {
  display: flex;
  gap: 0.5rem;
}

.numeros__dato dt {
  color: var(--color-texto-suave);
}

.numeros__dato dd {
  margin: 0;
  font-weight: 600;
}

.numeros__exceso {
  margin: 0.25rem 0 0;
}

/* ---------- Diferencias (flecha + palabras; el color solo refuerza) ---------- */
.dif {
  font-weight: 700;
}

.dif--favorable {
  color: var(--color-diferencia-favorable);
}

.dif--desfavorable {
  color: var(--color-diferencia-desfavorable);
}

.dif--igual {
  color: var(--color-texto-suave);
}

/* ---------- Formulario "Comparar con" ---------- */
.comparar__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.comparar__campo {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.comparar__campo label {
  font-size: 0.875rem;
  font-weight: 600;
}

.comparar__select {
  width: 100%;
  min-height: var(--objetivo-tactil);
  padding: 0 0.5rem;
  font: inherit;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

.comparar__boton {
  min-height: var(--objetivo-tactil);
  min-width: 5rem;
}

.comparar__rango,
.comparar__sin-anterior {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.metricas {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.metrica {
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-borde);
}

.metrica__titulo {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.metrica__valores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
}

.metrica__valor {
  display: flex;
  gap: 0.5rem;
}

.metrica__valor dt {
  color: var(--color-texto-suave);
}

.metrica__valor dd {
  margin: 0;
  font-weight: 600;
}

.metrica__dif {
  margin: 0.25rem 0 0;
}

/* ---------- Por categoría ---------- */
.cat-lista {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.cat-fila {
  border-top: 1px solid var(--color-borde);
}

.cat-fila__contenido {
  display: block;
  min-height: var(--objetivo-tactil);
  padding: 0.75rem 0;
  color: var(--color-texto);
  text-decoration: none;
}

.cat-fila__contenido--enlace:hover .cat-fila__nombre {
  color: var(--color-primario);
}

.cat-fila__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cat-fila__nombre {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cat-fila__cantidad {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-texto-suave);
}

.cat-fila__flecha {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-texto-suave);
}

.cat-fila__montos {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-top: 0.125rem;
  font-size: 0.9375rem;
}

.cat-fila__dif {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.9375rem;
}

/* ---------- Detalle de categoría ---------- */
.comparar__dato {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
}

.comparar__dato-valor {
  font-size: 1.25rem;
  font-weight: 700;
}

.comparar__dato-valor--suave {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-texto-suave);
}

.comparar__frase {
  margin: 0.75rem 0 0;
}

/* =====================================================================
   Fase 8: registro rápido (hoja), botón "+" teal, aviso "Guardado /
   Deshacer", pantallas "Más" e "Instalar".
   Reglas: todo color con var(--...) definida aquí en :root; letras en rem.
   Pensado para 360px y 390px de ancho (sin scroll horizontal) con todo
   control táctil de al menos 44px (--objetivo-tactil).
   ===================================================================== */
:root {
  /* Acción rápida: el "+" central, el botón Guardar y los chips elegidos.
     Es el mismo verde azulado de los presupuestos (#0f766e); blanco sobre
     él contrasta 5.5:1. "-oscuro" es para hover/activo (7.6:1). */
  --color-accion-rapida: var(--color-primario);
  --color-accion-rapida-oscuro: var(--color-primario-hover);
  --color-accion-rapida-fondo: var(--color-primario-fondo);
  --color-texto-sobre-accion-rapida: var(--color-texto-sobre-primario);
  --sombra-accion-rapida: var(--sombra-flotante);

  /* Hoja del registro rápido: fondo oscuro detrás, tarjeta blanca delante. */
  --color-hoja-fondo: var(--color-destacado);
  --color-hoja-texto: var(--color-texto-sobre-destacado);
  --color-hoja-superficie: var(--color-superficie);
  --color-hoja-manija: var(--color-borde);
  --color-hoja-cerrar-fondo: rgba(255, 255, 255, 0.16);
  --color-hoja-cerrar-hover: rgba(255, 255, 255, 0.28);
  --radio-hoja: 1.5rem;
  --radio-pildora: 999px;

  /* Control segmentado Gasto | Ingreso | Traspaso. */
  --color-control-fondo: #e5e7eb;
  --color-control-activo-fondo: var(--color-superficie);
  --color-control-activo-texto: var(--color-texto);
  --color-control-texto: var(--color-texto-suave);
  --sombra-control-activo: 0 1px 3px rgba(0, 0, 0, 0.25);

  /* Monto grande y chips de categoría. */
  --color-monto-simbolo: var(--color-texto-suave);
  --color-chip-categoria-borde: var(--color-borde);
  --color-chip-categoria-texto: var(--color-texto);

  /* Aviso "Gasto guardado": tarjeta oscura con el botón Deshacer en acento.
     Texto blanco 17:1 y acento #5eead4 11:1 sobre #111827. */
  --color-aviso-registro-fondo: var(--color-destacado);
  --color-aviso-registro-texto: var(--color-texto-sobre-destacado);
  --color-aviso-registro-accion: #5eead4;
  --sombra-aviso-registro: 0 6px 18px rgba(0, 0, 0, 0.3);

  /* Páginas "Más" e "Instalar". */
  --color-lista-enlace-flecha: var(--color-texto-suave);
  --color-dibujo-fondo: var(--color-fondo);
  --color-dibujo-trazo: var(--color-texto-suave);

  --margen-aviso: 1.5rem;                /* el "+" sobresale ~1rem de la barra: el aviso queda por encima */
  --alto-aviso: 5rem;                    /* espacio que se reserva al final de la página mientras hay aviso */
}

/* ---------- Barra inferior: "Más" y el "+" teal ---------- */
.nav-inferior__nuevo {
  width: 3.75rem;
  height: 3.75rem;
  color: var(--color-texto-sobre-accion-rapida);
  background: var(--color-accion-rapida);
  box-shadow: var(--sombra-accion-rapida);
}

.nav-inferior__nuevo:hover,
.nav-inferior__nuevo[aria-current="page"] {
  color: var(--color-texto-sobre-accion-rapida);
  background: var(--color-accion-rapida-oscuro);
}

.nav-inferior__nuevo:focus-visible {
  outline-offset: 2px;
}

/* ---------- Aviso "Gasto guardado · Deshacer" ---------- */
/* Fijo sobre la barra inferior (alto de la barra + zona segura + margen).
   z-index 25: encima de la barra (20), debajo del banner (30). */
.aviso-registro {
  position: fixed;
  right: 0;
  bottom: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom, 0px) + var(--margen-aviso));
  left: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: calc(100% - 1.5rem);
  max-width: 36rem;
  margin: 0 auto;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  color: var(--color-aviso-registro-texto);
  background: var(--color-aviso-registro-fondo);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-aviso-registro);
}

.aviso-registro__texto {
  flex: 1 1 auto;
  min-width: 0;                /* sin esto el texto largo ensancha la tarjeta */
  margin: 0;
  /* El texto pasa a una segunda (o tercera) línea en vez de cortarse en una:
     a 360px una sola línea cortaba justo el monto, que es lo que más importa
     confirmar. Más de 3 líneas (nombres larguísimos) sí se cortan con "…".
     overflow-wrap: anywhere parte una palabra sin espacios para que nunca
     ensanche la pantalla. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.aviso-registro__form {
  flex: 0 0 auto;
  margin: 0;
}

.aviso-registro__deshacer {
  min-width: var(--objetivo-tactil);
  min-height: var(--objetivo-tactil);
  padding: 0 0.875rem;
  font: inherit;
  font-weight: 700;
  color: var(--color-aviso-registro-accion);
  background: transparent;
  border: 0;
  border-radius: var(--radio);
  cursor: pointer;
}

.aviso-registro__deshacer:focus-visible {
  outline: 2px solid var(--color-aviso-registro-accion);
  outline-offset: 0;
}

/* Mientras hay aviso, espacio extra al final: no tapa el último contenido. */
.contenido:has(.aviso-registro) {
  padding-bottom: calc(var(--espacio-inferior) + var(--alto-aviso));
}

/* ---------- Registro rápido: aspecto de hoja ---------- */
/* La barra inferior se oculta en esta pantalla: es una hoja que se cierra
   con "Cerrar" (arriba) y así nada tapa el botón Guardar. */
body.pagina-hoja {
  background: var(--color-hoja-fondo);
}

.pagina-hoja .nav-inferior {
  display: none;
}

body.pagina-hoja .contenido {
  max-width: 40rem;
  padding: 0.75rem env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}

:root:has(body.pagina-hoja) {
  scroll-padding-bottom: 0;
}

.pagina-hoja .mensajes {
  margin: 0 1rem 0.75rem;
}

/* Sin barra inferior: el aviso baja y solo respeta la zona segura. */
.pagina-hoja .aviso-registro {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
}

.registro-rapido__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 1rem 0.75rem;
}

.registro-rapido__titulo {
  margin: 0;
  font-size: 1.25rem;
  color: var(--color-hoja-texto);
}

.registro-rapido__cerrar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  color: var(--color-hoja-texto);
  background: var(--color-hoja-cerrar-fondo);
  border-radius: 50%;
}

.registro-rapido__cerrar:hover {
  color: var(--color-hoja-texto);
  background: var(--color-hoja-cerrar-hover);
}

.registro-rapido__cerrar:focus-visible {
  outline: 2px solid var(--color-hoja-texto);
  outline-offset: 2px;
}

/* La hoja: tarjeta blanca de casi todo el alto, esquinas superiores grandes. */
.registro-rapido__hoja {
  position: relative;
  min-height: calc(100vh - var(--alto-banner) - 4rem);
  min-height: calc(100dvh - var(--alto-banner) - 4rem);
  padding: 1.5rem max(1rem, env(safe-area-inset-left, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px));
  background: var(--color-hoja-superficie);
  border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
}

/* Manija decorativa (la rayita de arriba). */
.registro-rapido__hoja::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 50%;
  width: 2.5rem;
  height: 0.25rem;
  background: var(--color-hoja-manija);
  border-radius: var(--radio-pildora);
  transform: translateX(-50%);
}

.pagina-hoja .contenido:has(.aviso-registro) .registro-rapido__hoja {
  padding-bottom: calc(var(--alto-aviso) + env(safe-area-inset-bottom, 0px));
}

/* Selector Gasto | Ingreso | Traspaso (tres enlaces). */
.registro-rapido__tipos-lista {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  padding: 0.25rem;
  list-style: none;
  background: var(--color-control-fondo);
  border-radius: var(--radio-grande);
}

.registro-rapido__tipos-lista li {
  flex: 1 1 0;
  min-width: 0;
}

.registro-rapido__tipo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--objetivo-tactil);
  padding: 0 0.5rem;
  font-weight: 600;
  color: var(--color-control-texto);
  text-align: center;
  text-decoration: none;
  border-radius: var(--radio-grande);
}

.registro-rapido__tipo[aria-current="page"] {
  font-weight: 700;
  color: var(--color-control-activo-texto);
  background: var(--color-control-activo-fondo);
  box-shadow: var(--sombra-control-activo);
}

.registro-rapido__tipo:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
}

/* Monto: grande, con "$" gris y subrayado de color en vez de caja. */
.registro-rapido__monto-etiqueta {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-texto-suave);
}

.registro-rapido__monto-caja {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  border-bottom: 3px solid var(--color-accion-rapida);
}

.registro-rapido__monto-caja:focus-within {
  outline: 2px solid var(--color-accion-rapida);
  outline-offset: 3px;
  border-radius: 2px;
}

.registro-rapido__moneda {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-monto-simbolo);
}

.registro-rapido__monto-caja input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0;
  font: inherit;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-texto);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;               /* el foco se ve en .registro-rapido__monto-caja:focus-within */
}

.registro-rapido__monto-caja input::placeholder {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-texto-suave);
}

.registro-rapido__monto-errores {
  margin-top: 0.5rem;
}

/* Categoría: chips (radio escondido DENTRO de su label, accesible). */
.registro-rapido__categorias {
  min-width: 0;                /* un fieldset no se encoge por defecto */
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
}

.registro-rapido__leyenda {
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.registro-rapido__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.registro-rapido__chips li {
  min-width: 0;
  max-width: 100%;
}

.registro-rapido__chips--mas {
  margin-top: 0.5rem;
}

.registro-rapido__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--objetivo-tactil);
  padding: 0.5rem 1rem;
  color: var(--color-chip-categoria-texto);
  background: var(--color-hoja-superficie);
  border: 1px solid var(--color-chip-categoria-borde);
  border-radius: var(--radio-pildora);
  cursor: pointer;
  overflow-wrap: anywhere;
}

/* El radio cubre todo el chip, transparente: sigue siendo el control real
   (teclado, lector de pantalla, toque), pero no se ve. */
.registro-rapido__chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.registro-rapido__chip:has(input:checked) {
  font-weight: 600;
  background: var(--color-accion-rapida-fondo);
  border-color: var(--color-accion-rapida);
  box-shadow: inset 0 0 0 1px var(--color-accion-rapida);
}

.registro-rapido__chip:has(input:checked) span::before {
  content: "\2713\00a0";
  content: "\2713\00a0" / "";  /* la marca es decorativa: sin texto alternativo */
  color: var(--color-accion-rapida);
}

.registro-rapido__chip:has(input:focus-visible) {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
}

/* "Más…": un chip con borde punteado que abre el resto. */
.registro-rapido__mas {
  margin-top: 0.5rem;
}

.registro-rapido__mas-boton {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  padding: 0.5rem 1rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  border: 1px dashed var(--color-chip-categoria-borde);
  border-radius: var(--radio-pildora);
  list-style: none;
  cursor: pointer;
}

.registro-rapido__mas-boton::-webkit-details-marker {
  display: none;
}

.registro-rapido__mas[open] > .registro-rapido__mas-boton {
  color: var(--color-texto);
}

.registro-rapido__mas-boton:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
}

.registro-rapido__ayuda {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-texto-suave);
}

/* Cuenta y fecha: dos columnas desde 360px; debajo, una tras otra. */
.registro-rapido__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 0.75rem;
  margin-top: 1.5rem;
}

@media (min-width: 22.5rem) {
  .registro-rapido__fila {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.registro-rapido__form .campo input,
.registro-rapido__form .campo select {
  min-width: 0;
  max-width: 100%;
  min-height: var(--alto-campo);  /* 48px, igual que la fecha de al lado */
}

.registro-rapido__fila .campo {
  min-width: 0;                /* que la columna no crezca por el ancho propio del campo de fecha en Safari iOS */
  margin-bottom: 0.5rem;
}

.registro-rapido__ayuda-cuenta {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--color-texto-suave);
}

/* Botones: Guardar (acción rápida) y "Guardar y anotar otro" (tipo enlace). */
.registro-rapido__botones {
  margin-top: 1.5rem;
}

.registro-rapido__guardar {
  min-height: 3.25rem;
  margin: 0;
  font-size: 1.0625rem;
  color: var(--color-texto-sobre-accion-rapida);
  background: var(--color-accion-rapida);
  border-color: var(--color-accion-rapida);
}

.registro-rapido__guardar:hover {
  color: var(--color-texto-sobre-accion-rapida);
  background: var(--color-accion-rapida-oscuro);
  border-color: var(--color-accion-rapida-oscuro);
}

.registro-rapido__otro {
  min-height: var(--objetivo-tactil);
  margin: 0.5rem 0 0;
  color: var(--color-accion-rapida-oscuro);
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
}

.registro-rapido__otro:hover {
  color: var(--color-accion-rapida-oscuro);
  background: var(--color-accion-rapida-fondo);
  border-color: transparent;
}

.registro-rapido__guardar:focus-visible,
.registro-rapido__otro:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
}

.registro-rapido__sin-cuentas {
  margin-top: 1rem;
}

/* ---------- Pantalla "Más" ---------- */
.mas {
  max-width: 36rem;
  margin: 0 auto;
}

.mas__lista {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.mas__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-decoration: none;
}

.mas__enlace::after {
  content: "\203A";
  font-size: 1.5rem;
  color: var(--color-lista-enlace-flecha);
}

.mas__enlace:hover {
  background: var(--color-primario-fondo);
}

.mas__salir {
  width: 100%;
  min-height: 3.5rem;
}

/* ---------- Pantalla "Instalar" ---------- */
.instalar {
  max-width: 36rem;
  margin: 0 auto;
}

.instalar__cabecera {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.instalar__titulo {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.25;
}

.instalar__pasos {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.instalar__paso {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  padding: 1rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.instalar__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-weight: 700;
  color: var(--color-texto-sobre-accion-rapida);
  background: var(--color-accion-rapida);
  border-radius: 50%;
}

.instalar__paso-titulo {
  margin: 0;
  min-height: 0;
  font-size: 1.0625rem;
  line-height: 2.25rem;
}

.instalar__paso-texto,
.instalar__dibujo {
  grid-column: 2;
  margin: 0;
}

.instalar__paso-texto {
  color: var(--color-texto-suave);
}

.instalar__dibujo {
  margin-top: 0.5rem;
}

.dibujo-safari {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
}

.dibujo-safari__fondo {
  fill: var(--color-dibujo-fondo);
  stroke: var(--color-borde);
  stroke-width: 1;
}

.dibujo-safari__trazo {
  fill: none;
  stroke: var(--color-dibujo-trazo);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dibujo-safari__resalte {
  fill: var(--color-accion-rapida-fondo);
  stroke: var(--color-accion-rapida);
  stroke-width: 2;
}

.dibujo-safari__trazo--activo {
  stroke: var(--color-accion-rapida-oscuro);
}

.dibujo-menu {
  max-width: 20rem;
  overflow: hidden;
  background: var(--color-dibujo-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

.dibujo-menu__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--objetivo-tactil);
  padding: 0.5rem 0.75rem;
  color: var(--color-texto);
  font-size: 0.9375rem;
}

.dibujo-menu__fila + .dibujo-menu__fila {
  border-top: 1px solid var(--color-borde);
}

.dibujo-menu__fila--resaltada {
  font-weight: 700;
  background: var(--color-accion-rapida-fondo);
  box-shadow: inset 0 0 0 2px var(--color-accion-rapida);
}

.dibujo-menu__signo {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-accion-rapida);
}

.instalar__nota {
  margin: 0 0 1rem;
  padding: 1rem;
  color: var(--color-texto);
  background: var(--color-accion-rapida-fondo);
  border: 1px solid var(--color-accion-rapida);
  border-radius: var(--radio-grande);
}

.instalar__android {
  margin: 0;
  color: var(--color-texto-suave);
}

@media (min-width: 48rem) {
  /* Sin barra inferior: el aviso baja y solo deja un margen. */
  .aviso-registro {
    bottom: 1.5rem;
  }

  .contenido:has(.aviso-registro) {
    padding-bottom: calc(3rem + var(--alto-aviso));
  }
}

@media print {
  .aviso-registro {
    display: none;
  }
}

/* ---------- Flecha de los desplegables (<details>) ---------- */
.desplegable__flecha {
  display: inline-block;
  transition: transform var(--duracion-corta) var(--curva-suave);
}

/* gira 180 grados al abrir el bloque (la transición ya está arriba) */
details[open] > summary .desplegable__flecha {
  transform: rotate(180deg);
}

/* ---------- Inicio: "Tu plata" (siempre visible) ---------- */
.plata {
  padding: 1rem 1.25rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.plata__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.plata__etiqueta {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-texto-suave);
}

.plata__saldo {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.plata__detalle {
  margin: 0.25rem 0 1rem;
  font-size: 0.8125rem;
  color: var(--color-texto-suave);
  overflow-wrap: anywhere;
}

.plata__detalle--nota {
  margin-top: -0.75rem;
}

.plata__linea {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-texto-suave);
}

.plata__linea strong {
  color: var(--color-texto);
}

.plata__linea strong.saldo__valor--deuda {
  color: var(--color-gasto);
}

/* Las mini-tarjetas de ingresos/gastos dentro de "Tu plata" van sin sombra. */
.plata .total {
  background: var(--color-fondo);
  box-shadow: none;
}

/* ---------- Inicio: bloques desplegables (<details>) ---------- */
.desplegable {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.desplegable__resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  cursor: pointer;
  list-style: none;                       /* quita el triángulo nativo */
  border-radius: var(--radio-grande);
}

.desplegable__resumen::-webkit-details-marker {
  display: none;                          /* idem en Safari/Chrome */
}

.desplegable__resumen:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
}

.desplegable__texto {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.desplegable__etiqueta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-texto-suave);
}

.desplegable__dato {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-texto);
  overflow-wrap: anywhere;
}

/* Aviso de vencidos: el TEXTO informa; ícono y color solo refuerzan. */
.desplegable__alerta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-aviso);
}

.desplegable__area {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-texto-suave);
}

.desplegable__contenido {
  padding: 0.25rem 1.25rem 1rem;
  border-top: 1px solid var(--color-borde);
}

.desplegable__contenido > * + * {
  margin-top: 0.75rem;
}

.desplegable__texto-suave {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.desplegable__pie {
  margin: 0.5rem 0 0;
}

.proyeccion__titulo {
  margin: 0;
  font-size: 1rem;
}

/* ---------- Enlace Volver ----------
   "‹ Volver a <pantalla>" de las pantallas secundarias (etiqueta {% volver %}).
   Va en el flujo normal del contenido, arriba del título: no es fijo, así que
   el banner pegajoso (52px en horizontal) nunca lo tapa. */
.volver-contenedor {
  margin: 0.25rem 0 0.5rem;
}

/* Hueco entre el banner y el "‹ Volver".
   .contenido deja 1.5rem (celular) o 2.5rem (desde 640px) de relleno arriba,
   pensado para páginas que empiezan con un título. Cuando la página EMPIEZA
   con el volver, ese relleno dejaba ~44px vacíos bajo el banner (sobre todo
   en horizontal, donde el banner mide solo 52px). Regla: si el primer hijo
   de .contenido es el volver (o un contenedor cuyo primer hijo es el volver,
   como .comparar y .gastos-fijos), el relleno de arriba baja a 0.25rem. Con
   el min-height de 44px del enlace, el texto queda ~0.9rem bajo el banner
   en todas las orientaciones.
   Casos que NO se tocan: el Inicio (no tiene volver) y las páginas con
   mensajes (ul.mensajes va antes, el volver ya no es el primer hijo y
   conserva su espacio normal). El selector usa :has, igual que otras reglas
   de este archivo; un navegador sin :has solo muestra el hueco grande de
   antes. Específico (0,3,0): gana a los .contenido de 640px y de horizontal
   sin importar el orden. El banner es sticky y ocupa su propio espacio en
   el flujo, así que el enlace nunca queda debajo de él; scroll-padding-top
   (--alto-banner, también en horizontal) solo afecta a saltos y foco. */
.contenido:has(> .volver-contenedor:first-child),
.contenido:has(> :first-child > .volver-contenedor:first-child) {
  padding-top: 0.25rem;
}

.contenido > .volver-contenedor:first-child,
.contenido > :first-child > .volver-contenedor:first-child {
  margin-top: 0;
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.75rem;               /* 44px */
  /* El margen negativo compensa el relleno: el texto queda alineado con el
     contenido, pero el área tocable es más ancha. */
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  color: var(--color-primario);
  font-weight: 600;
  text-decoration: none;
}

.volver:hover,
.volver:focus-visible {
  color: var(--color-primario-hover);
  text-decoration: underline;
}

.volver:focus-visible {
  border-radius: 0.25rem;
}

/* ---------- Teléfono en horizontal (se trata como móvil) ----------
   Un iPhone girado mide 844-932px de ancho y 375-430px de alto: pasa los 48rem
   y recibía el menú de escritorio (varias líneas), un banner que no queda fijo
   y sin barra inferior. Aquí se reconoce por ser apaisado + bajo (500px) +
   puntero táctil (pointer: coarse). Un computador con la ventana ancha y baja
   usa mouse (pointer: fine) y NO entra: sigue como escritorio.
   Por qué este bloque va aparte y al final, y NO como "@media (min-width:
   48rem) and (not (...))" en las queries de escritorio: "not" dentro de una
   media query no lo entienden los navegadores antiguos, y una query que el
   navegador no entiende se ignora por completo (se perdería TODO el
   escritorio). Así el escritorio queda intacto y este bloque lo corrige por
   orden: mismo peso de selector, gana el que va después. */
@media (orientation: landscape) and (max-height: 31.25rem) and (pointer: coarse) {
  :root {
    /* Banner delgado: ☰ de 44px + 0.25rem arriba y abajo = 52px (+ zona
       segura). --alto-banner se recalcula solo con este relleno. */
    --relleno-banner: 0.25rem;
    /* Alto del banner SIN la zona segura: lo usa el "+" reubicado. */
    --alto-banner-sin-zona: calc(var(--objetivo-tactil) + 2 * var(--relleno-banner));
    /* No hay barra inferior: en 0 se corrigen de una vez el espacio al final
       de la página (--espacio-inferior = zona segura + 2rem) y el alto
       máximo del panel del ☰ (todo el alto bajo el banner). */
    --alto-barra-inferior: 0px;
  }

  /* Anula el bloque de 48rem (que pone relative): el banner queda fijo al
     bajar, igual que en vertical. */
  .barra {
    position: sticky;
  }

  /* Anula el "0" del bloque de 48rem: sin esto los saltos a #grafico,
     #comparacion y el foco con Tab quedarían tapados por el banner fijo
     (las anclas suman su scroll-margin-top propio, que no cambia). */
  :root:has(body.con-barra-inferior) {
    scroll-padding-top: var(--alto-banner);
    scroll-padding-bottom: 0;
  }

  /* Navegación de escritorio fuera; vuelve el ☰ (el usuario y "Cerrar
     sesión" ya están dentro de su panel). */
  .barra__nav--principal,
  .barra__nav--sesion {
    display: none;
  }

  .menu-movil {
    display: block;
  }

  /* El ☰ abre el mismo menú completo; aquí aparece además "Más". */
  .menu-movil__item--horizontal {
    display: list-item;
  }

  /* Sin barra inferior no se reserva su espacio al final del contenido.
     (El bloque de 48rem pone 3rem; se restablece lo del celular, que con
     --alto-barra-inferior en 0 es zona segura + 2rem.) */
  .con-barra-inferior .contenido {
    padding-bottom: var(--espacio-inferior);
  }

  .contenido:has(.aviso-registro) {
    padding-bottom: calc(var(--espacio-inferior) + var(--alto-aviso));
  }

  /* El aviso "Gasto guardado · Deshacer" va pegado abajo: ya no hay barra
     sobre la que flotar. (En la hoja de registro rápido, la regla
     .pagina-hoja .aviso-registro, más específica, sigue mandando.) */
  .aviso-registro {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
  }

  /* La barra inferior ya no es una barra: se reubica arriba a la derecha,
     junto al ☰, y solo deja visible el "+". Se reutiliza el MISMO enlace
     (no se duplica en el HTML). z-index 31: encima del banner (30). Los
     bordes y márgenes laterales respetan la zona segura del notch. */
  .nav-inferior {
    top: env(safe-area-inset-top, 0px);
    bottom: auto;
    left: auto;
    right: calc(max(1rem, env(safe-area-inset-right, 0px)) + var(--objetivo-tactil) + 0.5rem);
    z-index: 31;
    display: flex;
    align-items: center;
    height: var(--alto-banner-sin-zona);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .nav-inferior__lista {
    display: flex;
    height: auto;
    max-width: none;
    margin: 0;
  }

  /* Se ocultan los 4 links de texto; queda solo el item que contiene el "+"
     (el 3.º). Se usa :has para no depender del orden del HTML. */
  .nav-inferior__lista li:not(:has(.nav-inferior__nuevo)) {
    display: none;
  }

  /* El "+" del banner: 44x44, sin anillo ni salto hacia arriba. */
  .nav-inferior__nuevo {
    width: var(--objetivo-tactil);
    height: var(--objetivo-tactil);
    border: 0;
    box-shadow: none;
    transform: none;
  }

  /* Con el menú abierto, el botón "Cerrar" se ensancha y chocaría con el
     "+": se esconde mientras el panel está abierto. */
  body:has(.menu-movil[open]) .nav-inferior {
    visibility: hidden;
  }
}

/* ---------- Movimiento reducido ----------
   Quien pide menos animación en su sistema no ve transiciones ni animaciones. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .desplegable__flecha {
    transition: none;
  }
}

/* =====================================================================
   AVISOS (fase 11)
   Contador del menú, tarjeta "Avisos" del inicio, pantalla Avisos,
   recordatorios y Ajustes. Solo variables de color del tema y letra en rem.
   ===================================================================== */

/* ---------- Contador numérico (menú ☰, barra superior y "Más") ---------- */
.contador {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.125rem 0.4rem;
  margin-left: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--color-contador-texto);
  background: var(--color-contador-fondo);
  border-radius: 999px;
}

/* Barra superior oscura: pastilla clara, para que contraste con el fondo. */
.barra__nav .contador {
  margin-left: 0.25rem;
  color: var(--color-contador-barra-texto);
  background: var(--color-contador-barra-fondo);
}

/* Dentro del menú ☰ el número queda pegado al texto; en "Más" se empuja a
   la derecha, antes de la flecha. */
.menu-movil__enlace--avisos .contador {
  margin-left: 0.625rem;
}

.mas__enlace .contador {
  margin-left: auto;
}

/* ---------- Aviso (fila con texto + acciones), común a inicio y Avisos ---------- */
.aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--color-aviso-fila-borde);
}

.aviso:first-child {
  border-top: 0;
}

.aviso--urgente {
  padding-left: 0.625rem;
  border-left: 0.25rem solid var(--color-aviso-urgente-borde);
}

.aviso__texto {
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;      /* títulos largos sin espacios cortan línea */
}

/* "Urgente" va con texto: el color solo refuerza. */
.aviso__etiqueta {
  display: inline-block;
  padding: 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-aviso-urgente-etiqueta-texto);
  background: var(--color-aviso-urgente-etiqueta-fondo);
  border-radius: var(--radio);
}

.aviso__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.aviso__form {
  margin: 0;
}

.aviso__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--objetivo-tactil);
  padding: 0 0.875rem;
  font-size: 0.875rem;
}

.aviso__corte {
  overflow-wrap: anywhere;
}

/* ---------- Tarjeta "Avisos" del inicio ---------- */
.avisos-tarjeta {
  padding: 0.25rem 1.25rem 0.5rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.avisos-tarjeta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.avisos-tarjeta__titulo {
  margin: 0;
  font-size: 1.125rem;
}

.avisos-tarjeta__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Pantalla Avisos ---------- */
.avisos {
  max-width: 40rem;
  margin: 0 auto;
}

.avisos__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.avisos__titulo {
  margin: 0;
  font-size: 1.5rem;
}

.avisos__nuevo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--objetivo-tactil);
}

.avisos__vacio {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  color: var(--color-texto-suave);
  background: var(--color-superficie);
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-grande);
}

.avisos__grupo {
  margin-bottom: 1.25rem;
  padding: 0.5rem 1.25rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.avisos__grupo-titulo {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.125rem;
}

.avisos__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.avisos__pie {
  margin: 0;
  text-align: center;
}

/* ---------- Recordatorio (grupo Personalizados) ---------- */
.recordatorio {
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-aviso-fila-borde);
}

.recordatorio:first-child {
  border-top: 0;
}

.recordatorio__titulo {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.recordatorio__meta {
  margin: 0.125rem 0 0.5rem;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.recordatorio__estado {
  display: inline-block;
  padding: 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radio);
}

.recordatorio__estado--atrasado {
  color: var(--color-recordatorio-atrasado-texto);
  background: var(--color-recordatorio-atrasado-fondo);
}

.recordatorio__estado--hoy {
  color: var(--color-recordatorio-hoy-texto);
  background: var(--color-recordatorio-hoy-fondo);
}

.recordatorio__resumen {
  display: flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primario);
  cursor: pointer;
}

.recordatorio__resumen:focus-visible {
  outline-offset: 2px;
}

.recordatorio__fecha-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}

.recordatorio__fecha-label {
  flex: 1 1 100%;
  font-size: 0.875rem;
  font-weight: 600;
}

.recordatorio__fecha-form .campo-fecha {
  flex: 1 1 10rem;
  padding: 0 0.75rem;
  font: inherit;
  font-size: 1rem;              /* 16px: iOS no hace zoom al tocar */
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

.recordatorio__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.recordatorio__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  font-size: 0.9375rem;
  font-weight: 600;
}

.recordatorio__enlace--peligro {
  color: var(--color-error);
}

/* ---------- Formularios de avisos y Ajustes ---------- */
.formulario__nota {
  margin: 0 0 0.75rem;
}

.ajustes__subtitulo {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
}

/* Un grupo = una casilla + su número. Sin el borde nativo del <fieldset>. */
.ajustes__grupo {
  min-width: 0;
  margin: 0 0 1rem;
  padding: 0 0 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--color-aviso-fila-borde);
}

.ajustes__grupo .campo:last-child {
  margin-bottom: 0.25rem;
}

.ajustes__ayuda-numero {
  margin: -0.5rem 0 0.75rem;
}

/* ---------- Avisos: fila compacta de la tarjeta del inicio ---------- */
.avisos-tarjeta__cabecera {
  min-height: 2.5rem;
}

.avisos-tarjeta .bloque__enlace {
  min-height: var(--objetivo-tactil);
}

.aviso-compacto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid var(--color-aviso-fila-borde);
}

.aviso-compacto--urgente {
  padding-left: 0.5rem;
  border-left: 0.25rem solid var(--color-aviso-urgente-borde);
}

.aviso-compacto__enlace,
.aviso-compacto__texto {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.aviso-compacto__enlace {
  display: block;
  padding: 0.5rem 0;
  min-height: var(--objetivo-tactil);   /* zona de toque de 44px */
  color: var(--color-texto);
  text-decoration: none;
}

.aviso-compacto__accion {
  font-weight: 600;
  color: var(--color-primario);
  white-space: nowrap;
}

.aviso-compacto__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  padding: 0;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-texto-suave);
  background: transparent;
  border: 0;
  border-radius: var(--radio);
  cursor: pointer;
}

.aviso-compacto__cerrar:hover {
  background: var(--color-fondo);
}