/* ===========================================================================
   Hoja de estilos de la aplicación.
   Ningún hexadecimal vive aquí: todo el color sale de tokens.css.
   =========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--hs-ahorros-fuente);
  font-size: var(--hs-ahorros-t-md);
  color: var(--hs-ahorros-tinta);
  background: var(--hs-ahorros-plano);
  /* Halo lavanda arriba, para que la página no arranque en un plano liso.
     Sin `background-attachment: fixed`: obliga al navegador a repintar el fondo
     entero en cada fotograma de scroll, y en pantallas largas se nota. */
  background-image:
    radial-gradient(1100px 460px at 22% -18%, var(--hs-ahorros-primario-suave), transparent 70%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--hs-ahorros-primario);
  outline-offset: 2px;
  border-radius: var(--hs-ahorros-r-xs);
}

/* Respeta a quien pide menos movimiento: sin excepciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.hs-ahorros-visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===========================================================================
   Estructura general
   =========================================================================== */

.hs-ahorros-app {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.hs-ahorros-lateral {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--hs-ahorros-e-5) var(--hs-ahorros-e-3);
  background: var(--hs-ahorros-superficie);
  border-right: 1px solid var(--hs-ahorros-borde);
  overflow-y: auto;
}
/* Empuja al pie lo que venga después: la tarjeta de instalación. */
.hs-ahorros-lateral__hueco { flex: 1; min-height: var(--hs-ahorros-e-4); }

.hs-ahorros-marca {
  display: flex; align-items: center; gap: var(--hs-ahorros-e-3);
  padding: 0 var(--hs-ahorros-e-3) var(--hs-ahorros-e-5);
}
.hs-ahorros-marca__logo {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--hs-ahorros-r-md);
  background: linear-gradient(145deg, var(--hs-ahorros-primario), var(--hs-ahorros-primario-fuerte));
  box-shadow: var(--hs-ahorros-sombra-primario);
  color: var(--hs-ahorros-primario-tinta);
}
.hs-ahorros-marca__texto { font-weight: 800; font-size: var(--hs-ahorros-t-lg); letter-spacing: -.02em; }
.hs-ahorros-marca__sub { font-size: var(--hs-ahorros-t-xs); color: var(--hs-ahorros-tinta-suave); font-weight: 600; }

.hs-ahorros-nav__item {
  display: flex; align-items: center; gap: var(--hs-ahorros-e-3);
  position: relative;
  width: 100%; padding: 11px var(--hs-ahorros-e-3);
  border: 0; border-radius: var(--hs-ahorros-r-full);
  background: transparent; color: var(--hs-ahorros-tinta-2);
  font-weight: 700; font-size: var(--hs-ahorros-t-md);
  text-align: left; cursor: pointer;
  transition: background var(--hs-ahorros-trans), color var(--hs-ahorros-trans);
}
.hs-ahorros-nav__item:hover { background: var(--hs-ahorros-superficie-hover); color: var(--hs-ahorros-tinta); }
.hs-ahorros-nav__item[aria-current="page"] {
  background: var(--hs-ahorros-primario-suave); color: var(--hs-ahorros-primario);
}
/* Barrita a la izquierda de la página activa: el color por sí solo no basta
   para señalar dónde estás, y en modo oscuro se pierde. */
.hs-ahorros-nav__item[aria-current="page"]::before {
  content: ''; position: absolute; left: 4px; top: 50%;
  width: 3px; height: 18px; margin-top: -9px;
  border-radius: var(--hs-ahorros-r-full);
  background: var(--hs-ahorros-primario);
}
.hs-ahorros-nav__item svg { flex: none; }

/* Tarjeta de instalación, al pie de la barra lateral. Solo aparece cuando el
   navegador confirma que la aplicación se puede instalar de verdad. */
.hs-ahorros-instalar {
  display: grid; gap: var(--hs-ahorros-e-2);
  padding: var(--hs-ahorros-e-3);
  border-radius: var(--hs-ahorros-r-md);
  background: var(--hs-ahorros-primario-suave);
}
.hs-ahorros-instalar__titulo {
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: var(--hs-ahorros-t-sm); color: var(--hs-ahorros-primario);
}
.hs-ahorros-instalar__texto {
  font-size: var(--hs-ahorros-t-xs); font-weight: 600; color: var(--hs-ahorros-tinta-2);
}

.hs-ahorros-nav__separador {
  margin: var(--hs-ahorros-e-3) var(--hs-ahorros-e-3) var(--hs-ahorros-e-2);
  font-size: var(--hs-ahorros-t-xs); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hs-ahorros-tinta-suave);
}

.hs-ahorros-principal {
  min-width: 0;
  padding: var(--hs-ahorros-e-6) var(--hs-ahorros-e-6) var(--hs-ahorros-e-7);
}

.hs-ahorros-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--hs-ahorros-e-4); flex-wrap: wrap;
  margin-bottom: var(--hs-ahorros-e-5);
}
.hs-ahorros-cabecera__titulo { font-size: var(--hs-ahorros-t-2xl); }
.hs-ahorros-cabecera__sub { margin-top: 2px; color: var(--hs-ahorros-tinta-2); font-weight: 600; }
.hs-ahorros-cabecera__acciones { display: flex; gap: var(--hs-ahorros-e-2); flex-wrap: wrap; align-items: center; }

/* ===========================================================================
   Tarjetas
   =========================================================================== */

.hs-ahorros-tarjeta {
  background: var(--hs-ahorros-superficie);
  border: 1px solid var(--hs-ahorros-borde);
  border-radius: var(--hs-ahorros-r-lg);
  box-shadow: var(--hs-ahorros-sombra-1);
  padding: var(--hs-ahorros-e-5);
}
.hs-ahorros-tarjeta--plana { box-shadow: none; }
.hs-ahorros-tarjeta--ajustada { padding: var(--hs-ahorros-e-4); }
.hs-ahorros-tarjeta--sin-relleno { padding: 0; overflow: hidden; }

.hs-ahorros-tarjeta__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hs-ahorros-e-3); margin-bottom: var(--hs-ahorros-e-4);
}

/*
   La tarjeta sin relleno recorta por el borde redondeado (`overflow: hidden`),
   y su cabecera arranca en la esquina 0,0: la curva se comia la primera letra
   del titulo - el «4» de «4 movimientos», la «P» de «Presupuesto de...». La
   cabecera lleva su propio relleno para salir de la curva; el contenido de
   debajo sigue pegado a los bordes, que es para lo que existe la variante.
*/
.hs-ahorros-tarjeta--sin-relleno > .hs-ahorros-tarjeta__cabecera {
  padding: var(--hs-ahorros-e-5) var(--hs-ahorros-e-5) 0;
  margin-bottom: var(--hs-ahorros-e-3);
}
.hs-ahorros-tarjeta__titulo { font-size: var(--hs-ahorros-t-md); font-weight: 800; }
.hs-ahorros-tarjeta__nota { font-size: var(--hs-ahorros-t-sm); color: var(--hs-ahorros-tinta-suave); font-weight: 600; }

.hs-ahorros-rejilla { display: grid; gap: var(--hs-ahorros-e-4); }
.hs-ahorros-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hs-ahorros-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hs-ahorros-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hs-ahorros-rejilla--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.hs-ahorros-rejilla--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* ===========================================================================
   Panel: columna principal y carril derecho
   ---------------------------------------------------------------------------
   El carril solo se separa cuando sobra ancho de verdad. Por debajo de 1400 px
   sus tarjetas caen debajo, en una columna: existe para aprovechar el ancho que
   hoy se queda en blanco en un monitor grande, no para estrechar el panel en un
   portatil. No es sticky a proposito - en cuanto el carril crece mas que la
   ventana, un elemento pegajoso se queda con el pie cortado y sin forma de
   llegar a el.
   =========================================================================== */

.hs-ahorros-panel { display: grid; gap: var(--hs-ahorros-e-4); align-items: start; }
.hs-ahorros-panel__principal,
.hs-ahorros-panel__carril {
  display: grid; gap: var(--hs-ahorros-e-4);
  align-content: start; min-width: 0;
}

@media (min-width: 1400px) {
  .hs-ahorros-panel { grid-template-columns: minmax(0, 1fr) 340px; }
}

.hs-ahorros-resumen__delta {
  margin-top: 2px;
  font-size: var(--hs-ahorros-t-sm); font-weight: 800;
}

/* Columnas de los ultimos meses. El mes actual va en el color de serie y el
   resto en la rampa secuencial: la diferencia es de magnitud, no de categoria. */
/* El tope de ancho es para cuando el carril cae debajo y ocupa toda la fila:
   seis barras de 150 px no dicen mas que seis de 60, solo pesan mas. */
.hs-ahorros-minibarras {
  display: flex; align-items: flex-end; gap: var(--hs-ahorros-e-2);
  max-width: 420px;
}
.hs-ahorros-minibarras__col {
  flex: 1; min-width: 0;
  display: grid; gap: 6px; justify-items: center;
}
.hs-ahorros-minibarras__pista {
  width: 100%; height: 76px;
  display: flex; align-items: flex-end;
  border-radius: var(--hs-ahorros-r-xs);
  background: var(--hs-ahorros-rejilla);
  overflow: hidden;
}
.hs-ahorros-minibarras__barra {
  width: 100%;
  border-radius: var(--hs-ahorros-r-xs);
  background: var(--hs-ahorros-sec-200);
  transition: height 320ms cubic-bezier(.2, .8, .3, 1);
}
.hs-ahorros-minibarras__col--hoy .hs-ahorros-minibarras__barra { background: var(--hs-ahorros-serie-1); }
.hs-ahorros-minibarras__pie {
  font-size: var(--hs-ahorros-t-xs); font-weight: 700;
  color: var(--hs-ahorros-tinta-suave); white-space: nowrap;
}
.hs-ahorros-minibarras__col--hoy .hs-ahorros-minibarras__pie { color: var(--hs-ahorros-tinta-2); }

/* Fila de categoria: punto de color, nombre que se recorta e importe fijo. */
.hs-ahorros-medidor__nombre--punteado {
  display: flex; align-items: center; gap: var(--hs-ahorros-e-2);
}
.hs-ahorros-punto {
  width: 9px; height: 9px; flex: none;
  border-radius: var(--hs-ahorros-r-full);
}
.hs-ahorros-elipsis {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===========================================================================
   Chips de icono pastel - el sello visual de la referencia
   =========================================================================== */

.hs-ahorros-chip {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--hs-ahorros-r-md);
  background: var(--hs-ahorros-chip-gris-bg);
  color: var(--hs-ahorros-chip-gris-fg);
}
.hs-ahorros-chip--sm { width: 34px; height: 34px; border-radius: var(--hs-ahorros-r-sm); }
.hs-ahorros-chip--lg { width: 56px; height: 56px; border-radius: var(--hs-ahorros-r-lg); }

.hs-ahorros-chip--morado   { background: var(--hs-ahorros-chip-morado-bg);  color: var(--hs-ahorros-chip-morado-fg); }
.hs-ahorros-chip--verde    { background: var(--hs-ahorros-chip-verde-bg);   color: var(--hs-ahorros-chip-verde-fg); }
.hs-ahorros-chip--ambar    { background: var(--hs-ahorros-chip-ambar-bg);   color: var(--hs-ahorros-chip-ambar-fg); }
.hs-ahorros-chip--rosa     { background: var(--hs-ahorros-chip-rosa-bg);    color: var(--hs-ahorros-chip-rosa-fg); }
.hs-ahorros-chip--azul     { background: var(--hs-ahorros-chip-azul-bg);    color: var(--hs-ahorros-chip-azul-fg); }

/* ===========================================================================
   Cifra héroe
   ---------------------------------------------------------------------------
   En escritorio va a dos columnas: la cifra manda a la izquierda y la mascota
   ocupa la derecha. Centrarlo todo, como en el móvil, deja un pasillo vacío a
   los lados en cuanto la ventana pasa de 1000 px.
   =========================================================================== */

.hs-ahorros-heroe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: center;
  gap: var(--hs-ahorros-e-5);
  padding: var(--hs-ahorros-e-4) var(--hs-ahorros-e-2);
}
.hs-ahorros-heroe__texto { display: grid; gap: var(--hs-ahorros-e-2); justify-items: start; }
.hs-ahorros-heroe__saludo {
  display: flex; align-items: center; gap: var(--hs-ahorros-e-2);
  font-size: var(--hs-ahorros-t-xl); font-weight: 800; letter-spacing: -.02em;
}
.hs-ahorros-heroe__pregunta { color: var(--hs-ahorros-tinta-2); font-weight: 600; }
.hs-ahorros-heroe__cifra {
  margin: var(--hs-ahorros-e-1) 0;
  font-size: var(--hs-ahorros-t-heroe); font-weight: 800; letter-spacing: -.035em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.hs-ahorros-heroe__pie { color: var(--hs-ahorros-tinta-2); font-weight: 600; font-size: var(--hs-ahorros-t-sm); }
/* La cifra en dinero y el selector de moneda son una sola unidad de lectura:
   van juntos y envuelven juntos. */
.hs-ahorros-heroe__unidad {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--hs-ahorros-e-2);
}

/* La escena de la mascota: ilustración a sangre con el botón de registrar
   colgado de la esquina, como en la referencia. */
.hs-ahorros-heroe__escena {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 190px;
}
.hs-ahorros-heroe__mascota { display: flex; justify-content: center; }
.hs-ahorros-heroe__mas {
  position: absolute; right: 4px; bottom: 26px;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--hs-ahorros-r-full);
  background: var(--hs-ahorros-superficie); color: var(--hs-ahorros-primario);
  box-shadow: var(--hs-ahorros-sombra-2);
  cursor: pointer;
  transition: transform var(--hs-ahorros-trans), box-shadow var(--hs-ahorros-trans);
}
.hs-ahorros-heroe__mas:hover { transform: scale(1.06); box-shadow: var(--hs-ahorros-sombra-3); }
.hs-ahorros-heroe__mas:active { transform: scale(.97); }

/* Pastilla de moneda bajo la cifra: es el selector de moneda de vista, puesto
   donde la referencia lo pone, junto al número al que afecta. */
.hs-ahorros-pastilla {
  display: inline-flex; align-items: center;
  padding: 5px 30px 5px 14px; min-height: 34px; width: auto;
  border: 1px solid var(--hs-ahorros-borde);
  border-radius: var(--hs-ahorros-r-full);
  background: var(--hs-ahorros-superficie-2); color: var(--hs-ahorros-tinta-2);
  font-size: var(--hs-ahorros-t-sm); font-weight: 800;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: background-color var(--hs-ahorros-trans);
}
.hs-ahorros-pastilla:hover { background-color: var(--hs-ahorros-superficie-hover); }

/* Tarjeta de consejo: chip a la izquierda, dos renglones a la derecha. El
   estado va en el fondo Y en el icono Y en el texto, nunca solo en el color. */
.hs-ahorros-consejo {
  display: flex; align-items: center; gap: var(--hs-ahorros-e-3);
  padding: var(--hs-ahorros-e-3) var(--hs-ahorros-e-4);
  border-radius: var(--hs-ahorros-r-md);
  background: var(--hs-ahorros-superficie-2);
  border: 1px solid var(--hs-ahorros-borde);
}
.hs-ahorros-consejo__titulo { font-weight: 800; }
.hs-ahorros-consejo__texto { font-size: var(--hs-ahorros-t-sm); color: var(--hs-ahorros-tinta-2); font-weight: 600; }
.hs-ahorros-consejo--bien    { background: var(--hs-ahorros-bien-bg);    border-color: transparent; }
.hs-ahorros-consejo--aviso   { background: var(--hs-ahorros-aviso-bg);   border-color: transparent; }
.hs-ahorros-consejo--grave   { background: var(--hs-ahorros-grave-bg);   border-color: transparent; }
.hs-ahorros-consejo--critico { background: var(--hs-ahorros-critico-bg); border-color: transparent; }
.hs-ahorros-consejo--bien .hs-ahorros-consejo__titulo    { color: var(--hs-ahorros-bien); }
.hs-ahorros-consejo--aviso .hs-ahorros-consejo__titulo   { color: var(--hs-ahorros-aviso); }
.hs-ahorros-consejo--grave .hs-ahorros-consejo__titulo   { color: var(--hs-ahorros-grave); }
.hs-ahorros-consejo--critico .hs-ahorros-consejo__titulo { color: var(--hs-ahorros-critico); }

/* ===========================================================================
   Azulejos de acción rápida - la fila de atajos de la referencia
   =========================================================================== */

.hs-ahorros-acciones {
  display: grid; gap: var(--hs-ahorros-e-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hs-ahorros-accion {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--hs-ahorros-e-3);
  padding: var(--hs-ahorros-e-4);
  border: 1px solid var(--hs-ahorros-borde);
  border-radius: var(--hs-ahorros-r-lg);
  background: var(--hs-ahorros-superficie);
  box-shadow: var(--hs-ahorros-sombra-1);
  font-weight: 800; text-align: left; cursor: pointer;
  transition: transform var(--hs-ahorros-trans), box-shadow var(--hs-ahorros-trans),
              border-color var(--hs-ahorros-trans);
}
.hs-ahorros-accion:hover {
  transform: translateY(-2px);
  box-shadow: var(--hs-ahorros-sombra-2);
  border-color: var(--hs-ahorros-borde-fuerte);
}
.hs-ahorros-accion:active { transform: translateY(0); }
.hs-ahorros-accion__nota {
  font-size: var(--hs-ahorros-t-xs); font-weight: 600; color: var(--hs-ahorros-tinta-suave);
}

/* ===========================================================================
   Azulejos de exportación (Ajustes)
   =========================================================================== */

.hs-ahorros-exporta { display: grid; gap: var(--hs-ahorros-e-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hs-ahorros-exporta__it {
  display: flex; flex-direction: column; align-items: center; gap: var(--hs-ahorros-e-2);
  padding: var(--hs-ahorros-e-4) var(--hs-ahorros-e-3);
  border: 1px solid var(--hs-ahorros-borde);
  border-radius: var(--hs-ahorros-r-md);
  background: var(--hs-ahorros-superficie);
  font-size: var(--hs-ahorros-t-sm); font-weight: 800; cursor: pointer;
  transition: transform var(--hs-ahorros-trans), box-shadow var(--hs-ahorros-trans);
}
.hs-ahorros-exporta__it:hover { transform: translateY(-2px); box-shadow: var(--hs-ahorros-sombra-2); }

/* ===========================================================================
   Tarjetas de indicador
   =========================================================================== */

/* Las fichas de una fila deben leerse como una sola línea de cifras: por eso
   la etiqueta reserva sitio para dos renglones y el cuerpo empuja el añadido
   (chispa o medidor) al pie. Si no, una etiqueta larga desalinea la fila. */
.hs-ahorros-indicador { display: flex; flex-direction: column; gap: var(--hs-ahorros-e-3); height: 100%; }
.hs-ahorros-indicador__cuerpo { flex: 1; }
.hs-ahorros-indicador__fila {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hs-ahorros-e-3);
  min-height: 38px;
}
.hs-ahorros-indicador__etiqueta { font-size: var(--hs-ahorros-t-sm); font-weight: 700; color: var(--hs-ahorros-tinta-2); }
.hs-ahorros-indicador__valor {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1;
}
.hs-ahorros-indicador__valor--sm { font-size: var(--hs-ahorros-t-xl); }
.hs-ahorros-indicador__pie { font-size: var(--hs-ahorros-t-xs); color: var(--hs-ahorros-tinta-suave); font-weight: 600; }

/* ===========================================================================
   Insignias de estado - color + icono + texto, nunca color solo
   =========================================================================== */

.hs-ahorros-insignia {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--hs-ahorros-r-full);
  font-size: var(--hs-ahorros-t-xs); font-weight: 800;
  background: var(--hs-ahorros-chip-gris-bg); color: var(--hs-ahorros-chip-gris-fg);
  white-space: nowrap;
}
.hs-ahorros-insignia--bien    { background: var(--hs-ahorros-bien-bg);    color: var(--hs-ahorros-bien); }
.hs-ahorros-insignia--aviso   { background: var(--hs-ahorros-aviso-bg);   color: var(--hs-ahorros-aviso); }
.hs-ahorros-insignia--grave   { background: var(--hs-ahorros-grave-bg);   color: var(--hs-ahorros-grave); }
.hs-ahorros-insignia--critico { background: var(--hs-ahorros-critico-bg); color: var(--hs-ahorros-critico); }
.hs-ahorros-insignia svg { flex: none; }

/* ===========================================================================
   Botones
   =========================================================================== */

.hs-ahorros-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hs-ahorros-e-2);
  padding: 10px var(--hs-ahorros-e-4); min-height: 42px;
  border: 1px solid transparent; border-radius: var(--hs-ahorros-r-sm);
  background: var(--hs-ahorros-superficie-2); color: var(--hs-ahorros-tinta);
  font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background var(--hs-ahorros-trans), transform var(--hs-ahorros-trans), box-shadow var(--hs-ahorros-trans);
}
.hs-ahorros-btn:hover { background: var(--hs-ahorros-superficie-hover); }
.hs-ahorros-btn:active { transform: translateY(1px); }
.hs-ahorros-btn[disabled] { opacity: .5; cursor: not-allowed; }

.hs-ahorros-btn--primario {
  background: var(--hs-ahorros-primario); color: var(--hs-ahorros-primario-tinta);
  box-shadow: var(--hs-ahorros-sombra-primario);
}
.hs-ahorros-btn--hs-ahorros-primario:hover { background: var(--hs-ahorros-primario-fuerte); }

.hs-ahorros-btn--contorno { background: transparent; border-color: var(--hs-ahorros-borde-fuerte); }
.hs-ahorros-btn--contorno:hover { background: var(--hs-ahorros-superficie-hover); }

.hs-ahorros-btn--fantasma { background: transparent; color: var(--hs-ahorros-tinta-2); }
.hs-ahorros-btn--fantasma:hover { background: var(--hs-ahorros-superficie-hover); color: var(--hs-ahorros-tinta); }

.hs-ahorros-btn--peligro { background: var(--hs-ahorros-critico-bg); color: var(--hs-ahorros-critico); }

.hs-ahorros-btn--sm { min-height: 34px; padding: 6px var(--hs-ahorros-e-3); font-size: var(--hs-ahorros-t-sm); }
.hs-ahorros-btn--icono { padding: 0; width: 42px; min-height: 42px; }
.hs-ahorros-btn--icono.hs-ahorros-btn--sm { width: 34px; }

/* Botón flotante: solo en móvil, donde la referencia lo pone */
.hs-ahorros-fab {
  position: fixed; right: var(--hs-ahorros-e-4); bottom: calc(72px + var(--hs-ahorros-e-4));
  width: 58px; height: 58px; z-index: 40;
  display: none; place-items: center;
  border: 0; border-radius: var(--hs-ahorros-r-full);
  background: var(--hs-ahorros-primario); color: var(--hs-ahorros-primario-tinta);
  box-shadow: var(--hs-ahorros-sombra-primario);
  cursor: pointer;
}

/* ===========================================================================
   Control segmentado (las píldoras de filtro)
   =========================================================================== */

.hs-ahorros-segmentado {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--hs-ahorros-superficie-2);
  border: 1px solid var(--hs-ahorros-borde);
  border-radius: var(--hs-ahorros-r-full);
}
.hs-ahorros-segmentado__op {
  padding: 6px var(--hs-ahorros-e-4);
  border: 0; border-radius: var(--hs-ahorros-r-full);
  background: transparent; color: var(--hs-ahorros-tinta-2);
  font-size: var(--hs-ahorros-t-sm); font-weight: 700; cursor: pointer;
  transition: background var(--hs-ahorros-trans), color var(--hs-ahorros-trans);
}
.hs-ahorros-segmentado__op[aria-pressed="true"] {
  background: var(--hs-ahorros-primario); color: var(--hs-ahorros-primario-tinta);
}
.hs-ahorros-segmentado__op:not([aria-pressed="true"]):hover { color: var(--hs-ahorros-tinta); }

/* ===========================================================================
   Formularios
   =========================================================================== */

.hs-ahorros-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hs-ahorros-campo__etiqueta { font-size: var(--hs-ahorros-t-sm); font-weight: 700; color: var(--hs-ahorros-tinta-2); }
.hs-ahorros-campo__ayuda { font-size: var(--hs-ahorros-t-xs); color: var(--hs-ahorros-tinta-suave); font-weight: 600; }
.hs-ahorros-campo__error { font-size: var(--hs-ahorros-t-xs); color: var(--hs-ahorros-critico); font-weight: 700; }

.hs-ahorros-entrada, .hs-ahorros-selector, .hs-ahorros-area {
  width: 100%; padding: 11px var(--hs-ahorros-e-3); min-height: 44px;
  border: 1px solid var(--hs-ahorros-borde-fuerte); border-radius: var(--hs-ahorros-r-sm);
  background: var(--hs-ahorros-superficie); color: var(--hs-ahorros-tinta);
  font-weight: 600;
  transition: border-color var(--hs-ahorros-trans), box-shadow var(--hs-ahorros-trans);
}
.hs-ahorros-entrada:focus, .hs-ahorros-selector:focus, .hs-ahorros-area:focus {
  outline: 0; border-color: var(--hs-ahorros-primario);
  box-shadow: 0 0 0 3px var(--hs-ahorros-primario-suave);
}
.hs-ahorros-entrada[aria-invalid="true"] { border-color: var(--hs-ahorros-critico); }
.hs-ahorros-area { min-height: 80px; resize: vertical; }

.hs-ahorros-selector {
  appearance: none;
  padding-right: var(--hs-ahorros-e-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Importe + moneda como un solo control, igual que en la referencia */
.hs-ahorros-importe { display: grid; grid-template-columns: 1fr 116px; gap: var(--hs-ahorros-e-2); }
.hs-ahorros-importe .hs-ahorros-entrada { font-size: var(--hs-ahorros-t-lg); font-weight: 800; text-align: right; }

.hs-ahorros-fila-campos { display: grid; gap: var(--hs-ahorros-e-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===========================================================================
   Tablas
   =========================================================================== */

.hs-ahorros-tabla-envoltorio { overflow-x: auto; }

.hs-ahorros-tabla { width: 100%; border-collapse: collapse; font-size: var(--hs-ahorros-t-sm); }
.hs-ahorros-tabla th, .hs-ahorros-tabla td { padding: 11px var(--hs-ahorros-e-3); text-align: left; }
.hs-ahorros-tabla th {
  font-size: var(--hs-ahorros-t-xs); font-weight: 800; color: var(--hs-ahorros-tinta-suave);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--hs-ahorros-borde);
  position: sticky; top: 0; background: var(--hs-ahorros-superficie); z-index: 1;
  white-space: nowrap;
}
.hs-ahorros-tabla td { border-bottom: 1px solid var(--hs-ahorros-rejilla); font-weight: 600; }
.hs-ahorros-tabla tbody tr:last-child td { border-bottom: 0; }
.hs-ahorros-tabla tbody tr:hover td { background: var(--hs-ahorros-superficie-2); }
.hs-ahorros-tabla .hs-ahorros-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-ahorros-tabla .hs-ahorros-num--fuerte { font-weight: 800; }

.hs-ahorros-positivo { color: var(--hs-ahorros-bien); }
.hs-ahorros-negativo { color: var(--hs-ahorros-critico); }

/* ===========================================================================
   Filas de lista (movimientos, suscripciones, recordatorios)
   =========================================================================== */

.hs-ahorros-lista { display: flex; flex-direction: column; }
.hs-ahorros-lista__fila {
  display: flex; align-items: center; gap: var(--hs-ahorros-e-3);
  padding: var(--hs-ahorros-e-3);
  border-radius: var(--hs-ahorros-r-md);
  transition: background var(--hs-ahorros-trans);
}
.hs-ahorros-lista__fila:hover { background: var(--hs-ahorros-superficie-2); }
.hs-ahorros-lista__cuerpo { flex: 1; min-width: 0; }
.hs-ahorros-lista__titulo {
  font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-ahorros-lista__meta { font-size: var(--hs-ahorros-t-xs); color: var(--hs-ahorros-tinta-suave); font-weight: 600; }
.hs-ahorros-lista__importe {
  font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.hs-ahorros-lista__moneda { font-size: var(--hs-ahorros-t-xs); color: var(--hs-ahorros-tinta-suave); font-weight: 700; }

/* ===========================================================================
   Medidores y barras de progreso
   =========================================================================== */

.hs-ahorros-medidor { display: flex; flex-direction: column; gap: 6px; }
.hs-ahorros-medidor__cabecera {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--hs-ahorros-e-3);
  font-size: var(--hs-ahorros-t-sm);
}
.hs-ahorros-medidor__nombre { font-weight: 700; min-width: 0; }
/* La cifra nunca se parte: "49 %" en dos renglones se lee como un error. */
.hs-ahorros-medidor__cifras {
  font-variant-numeric: tabular-nums; color: var(--hs-ahorros-tinta-2); font-weight: 700;
  white-space: nowrap; flex: none;
}
.hs-ahorros-medidor__pista {
  height: 9px; border-radius: var(--hs-ahorros-r-full);
  background: var(--hs-ahorros-rejilla); overflow: hidden;
}
.hs-ahorros-medidor__relleno {
  height: 100%; border-radius: var(--hs-ahorros-r-full);
  background: var(--hs-ahorros-serie-1);
  transition: width 320ms cubic-bezier(.2, .8, .3, 1);
}
.hs-ahorros-medidor__relleno--bien    { background: var(--hs-ahorros-bien); }
.hs-ahorros-medidor__relleno--aviso   { background: var(--hs-ahorros-aviso); }
.hs-ahorros-medidor__relleno--critico { background: var(--hs-ahorros-critico); }

/* ===========================================================================
   Gráficos
   =========================================================================== */

.hs-ahorros-gr { width: 100%; display: block; overflow: visible; }
.hs-ahorros-gr text { font-family: var(--hs-ahorros-fuente); fill: var(--hs-ahorros-tinta-suave); font-size: 11px; font-weight: 700; }
.hs-ahorros-gr .hs-ahorros-gr-rejilla { stroke: var(--hs-ahorros-rejilla); stroke-width: 1; }
.hs-ahorros-gr .hs-ahorros-gr-eje { stroke: var(--hs-ahorros-borde-fuerte); stroke-width: 1; }
.hs-ahorros-gr .hs-ahorros-gr-etiqueta-valor { fill: var(--hs-ahorros-tinta-2); font-weight: 800; }
.hs-ahorros-gr .hs-ahorros-gr-referencia { stroke: var(--hs-ahorros-tinta-suave); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .7; }

.hs-ahorros-gr-leyenda {
  display: flex; flex-wrap: wrap; gap: var(--hs-ahorros-e-2) var(--hs-ahorros-e-4);
  margin-top: var(--hs-ahorros-e-3);
  font-size: var(--hs-ahorros-t-xs); font-weight: 700; color: var(--hs-ahorros-tinta-2);
}
.hs-ahorros-gr-leyenda__it { display: inline-flex; align-items: center; gap: 6px; }
.hs-ahorros-gr-leyenda__marca { width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* La cifra va en tinta, nunca en el color de la serie: la marca de al lado
   ya carga la identidad, y así el contraste no depende del color del dato. */
.hs-ahorros-gr-leyenda__valor { color: var(--hs-ahorros-tinta); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Capa de interacción */
.hs-ahorros-gr-lienzo { position: relative; }
.hs-ahorros-gr-globo {
  position: absolute; z-index: 20; pointer-events: none;
  padding: var(--hs-ahorros-e-2) var(--hs-ahorros-e-3);
  border-radius: var(--hs-ahorros-r-sm);
  background: var(--hs-ahorros-superficie);
  border: 1px solid var(--hs-ahorros-borde-fuerte);
  box-shadow: var(--hs-ahorros-sombra-2);
  font-size: var(--hs-ahorros-t-xs); font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
  opacity: 0; transition: opacity 120ms;
}
.hs-ahorros-gr-globo[data-hs-ahorros-visible="true"] { opacity: 1; }
.hs-ahorros-gr-globo__titulo { font-weight: 800; margin-bottom: 3px; }
.hs-ahorros-gr-globo__fila { display: flex; align-items: center; gap: 6px; color: var(--hs-ahorros-tinta-2); }
.hs-ahorros-gr-globo__valor { font-variant-numeric: tabular-nums; color: var(--hs-ahorros-tinta); }

/* ===========================================================================
   Estados vacíos y avisos
   =========================================================================== */

.hs-ahorros-vacio {
  display: flex; flex-direction: column; align-items: center; gap: var(--hs-ahorros-e-3);
  padding: var(--hs-ahorros-e-7) var(--hs-ahorros-e-4); text-align: center;
}
.hs-ahorros-vacio__titulo { font-weight: 800; font-size: var(--hs-ahorros-t-lg); }
.hs-ahorros-vacio__texto { color: var(--hs-ahorros-tinta-2); font-weight: 600; max-width: 42ch; }

.hs-ahorros-aviso {
  display: flex; align-items: flex-start; gap: var(--hs-ahorros-e-3);
  padding: var(--hs-ahorros-e-3) var(--hs-ahorros-e-4);
  border-radius: var(--hs-ahorros-r-md);
  background: var(--hs-ahorros-aviso-bg); color: var(--hs-ahorros-aviso);
  font-size: var(--hs-ahorros-t-sm); font-weight: 700;
}
.hs-ahorros-aviso--critico { background: var(--hs-ahorros-critico-bg); color: var(--hs-ahorros-critico); }
.hs-ahorros-aviso--info    { background: var(--hs-ahorros-chip-azul-bg); color: var(--hs-ahorros-chip-azul-fg); }
.hs-ahorros-aviso svg { flex: none; margin-top: 1px; }
.hs-ahorros-aviso a { color: inherit; }

/* ===========================================================================
   Diálogo modal / hoja inferior en móvil
   =========================================================================== */

.hs-ahorros-modal {
  border: 0; padding: 0; max-height: 90dvh;
  width: min(560px, calc(100vw - 32px));
  border-radius: var(--hs-ahorros-r-xl);
  background: var(--hs-ahorros-superficie); color: var(--hs-ahorros-tinta);
  box-shadow: var(--hs-ahorros-sombra-3);
  overflow: hidden;
}
/*
   Columna flexible, y solo cuando esta abierto: escribir `display` sin el
   `[open]` gana a la regla del navegador que oculta los dialogos cerrados.
   Asi el cuerpo crece hasta donde le deja el dialogo en vez de cortarse en una
   altura fija, que dejaba los botones del formulario partidos por la mitad.
*/
.hs-ahorros-modal[open] { display: flex; flex-direction: column; }
.hs-ahorros-modal::backdrop { background: rgba(15, 12, 30, .48); backdrop-filter: blur(3px); }
.hs-ahorros-modal__cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hs-ahorros-e-3);
  padding: var(--hs-ahorros-e-5) var(--hs-ahorros-e-5) var(--hs-ahorros-e-3);
}
.hs-ahorros-modal__titulo { font-size: var(--hs-ahorros-t-lg); }
.hs-ahorros-modal__cabecera { flex: none; }
.hs-ahorros-modal__cuerpo {
  padding: 0 var(--hs-ahorros-e-5) var(--hs-ahorros-e-5);
  overflow-y: auto; flex: 1 1 auto; min-height: 0;
}
.hs-ahorros-modal__pie {
  flex: none;
  display: flex; justify-content: flex-end; gap: var(--hs-ahorros-e-2);
  padding: 0 var(--hs-ahorros-e-5) var(--hs-ahorros-e-5);
}

/* ===========================================================================
   Avisos flotantes
   =========================================================================== */

.hs-ahorros-brindis {
  position: fixed; left: 50%; bottom: var(--hs-ahorros-e-5); z-index: 90;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--hs-ahorros-e-2);
  width: min(420px, calc(100vw - 32px));
}
.hs-ahorros-brindis__it {
  display: flex; align-items: center; gap: var(--hs-ahorros-e-3);
  padding: var(--hs-ahorros-e-3) var(--hs-ahorros-e-4);
  border-radius: var(--hs-ahorros-r-md);
  background: var(--hs-ahorros-superficie);
  border: 1px solid var(--hs-ahorros-borde-fuerte);
  box-shadow: var(--hs-ahorros-sombra-3);
  font-weight: 700; font-size: var(--hs-ahorros-t-sm);
  animation: brindis-entra 220ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes brindis-entra { from { opacity: 0; transform: translateY(10px); } }

/* ===========================================================================
   Barra de estado del tipo de cambio
   =========================================================================== */

.hs-ahorros-fx {
  display: inline-flex; align-items: center; gap: var(--hs-ahorros-e-2);
  padding: 5px var(--hs-ahorros-e-3);
  border-radius: var(--hs-ahorros-r-full);
  background: var(--hs-ahorros-superficie-2);
  border: 1px solid var(--hs-ahorros-borde);
  font-size: var(--hs-ahorros-t-xs); font-weight: 700; color: var(--hs-ahorros-tinta-2);
}
.hs-ahorros-fx__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--hs-ahorros-bien); flex: none; }
.hs-ahorros-fx__punto--viejo { background: var(--hs-ahorros-aviso); }
.hs-ahorros-fx__punto--sin { background: var(--hs-ahorros-tinta-suave); }

/* ===========================================================================
   Navegación inferior (solo móvil)
   =========================================================================== */

.hs-ahorros-nav-inf {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none;
  padding: var(--hs-ahorros-e-2) var(--hs-ahorros-e-2) calc(var(--hs-ahorros-e-2) + env(safe-area-inset-bottom));
  background: var(--hs-ahorros-superficie);
  border-top: 1px solid var(--hs-ahorros-borde);
}
.hs-ahorros-nav-inf__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; border: 0; background: transparent;
  color: var(--hs-ahorros-tinta-suave); font-size: 10px; font-weight: 800; cursor: pointer;
  border-radius: var(--hs-ahorros-r-sm);
}
.hs-ahorros-nav-inf__item[aria-current="page"] { color: var(--hs-ahorros-primario); }

/* ===========================================================================
   Mascotas: toda su animación vive aquí
   ---------------------------------------------------------------------------
   El SVG que genera `js/mascota.js` es estático; el movimiento se declara en
   este bloque. Tenerlo junto tiene dos ventajas concretas: `prefers-reduced-
   motion` lo apaga entero desde la regla global de arriba, y las duraciones se
   pueden comparar de un vistazo en vez de estar repartidas por el JavaScript.

   Todas las transformaciones usan `transform-box: view-box`, que hace que el
   origen se mida en las coordenadas del viewBox (0-200) y no en la caja de
   relleno de cada forma. Sin eso, escalar los ojos los manda fuera de la cara.
   =========================================================================== */

.hs-ahorros-mascota__cuerpo,
.hs-ahorros-mascota__ojos,
.hs-ahorros-mascota__brazo,
.hs-ahorros-mascota__sombra,
.hs-ahorros-mascota__nube,
.hs-ahorros-mascota__confeti rect { transform-box: view-box; }

/* Flotar y respirar a la vez en un solo grupo: dos animaciones sobre la misma
   propiedad se pisan, así que van en un keyframe único que hace las dos cosas.
   La escala es asimétrica (ancho y alto en sentidos opuestos) porque eso es lo
   que lee el ojo como materia blanda; escalar los dos ejes igual parece un
   globo hinchándose. */
.hs-ahorros-mascota__cuerpo {
  transform-origin: 100px 171px;
  animation: hs-ahorros-respirar 4.2s ease-in-out infinite;
}
@keyframes hs-ahorros-respirar {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-7px) scale(.985, 1.02); }
}

/* La sombra se encoge cuando el cuerpo sube. Es el detalle que convierte un
   deslizamiento en altura real, y cuesta dos líneas. */
.hs-ahorros-mascota__sombra {
  transform-origin: 100px 176px;
  animation: hs-ahorros-sombra-flota 4.2s ease-in-out infinite;
}
@keyframes hs-ahorros-sombra-flota {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.88); opacity: .72; }
}

/* Parpadeo. El ciclo es largo y el cierre ocupa una fracción mínima de él:
   así el ojo del usuario lo pilla de refilón, que es como parpadea la gente.
   Un parpadeo cada dos segundos se convierte en un tic nervioso. */
.hs-ahorros-mascota__ojos {
  transform-origin: 100px 116px;
  animation: hs-ahorros-parpadeo 6.4s infinite;
}
@keyframes hs-ahorros-parpadeo {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.08); }
  98%           { transform: scaleY(1); }
}
/* Los ojos ya dibujados cerrados (guiño, entornados) no parpadean: escalar una
   línea plana la hace desaparecer. */
.hs-ahorros-mascota[data-hs-ahorros-animo="celebra"] .hs-ahorros-mascota__ojos,
.hs-ahorros-mascota[data-hs-ahorros-animo="pensativo"] .hs-ahorros-mascota__ojos {
  animation: none;
}

/* Saludo: tres vaivenes seguidos y una pausa larga. Un brazo que no para de
   moverse deja de ser un saludo y pasa a ser ruido en la esquina de la pantalla. */
.hs-ahorros-mascota__brazo {
  transform-origin: 155px 140px;
  animation: hs-ahorros-saludar 5s ease-in-out infinite;
}
@keyframes hs-ahorros-saludar {
  0%, 60%, 100%   { transform: rotate(0deg); }
  8%, 24%, 40%    { transform: rotate(15deg); }
  16%, 32%, 48%   { transform: rotate(-9deg); }
}

/* Confeti: sube, gira y se apaga. Cada trozo lleva su retardo en una variable
   propia para que la ráfaga se escalone. */
.hs-ahorros-mascota__confeti rect {
  transform-origin: center;
  animation: hs-ahorros-confeti 2.6s ease-out infinite;
  animation-delay: var(--hs-ahorros-retardo, 0s);
}
@keyframes hs-ahorros-confeti {
  0%   { transform: translateY(14px) rotate(var(--hs-ahorros-giro, 0deg)); opacity: 0; }
  18%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(-26px) rotate(calc(var(--hs-ahorros-giro, 0deg) + 150deg)); opacity: 0; }
}

/* Con menos movimiento, la regla global de arriba deja las animaciones en su
   estado de reposo. Para el confeti eso significa quieto y visible, que es lo
   correcto: la celebracion se sigue leyendo, solo que no se mueve. */
@media (prefers-reduced-motion: reduce) {
  .hs-ahorros-mascota__confeti rect { opacity: 1; }
}

/* El blanco puro desaparece sobre una tarjeta blanca. Estas nubes son lo único
   de la mascota que toma color del sistema, justamente porque su trabajo es
   separarse del fondo de la tarjeta, y ese fondo cambia con el tema. */
.hs-ahorros-mascota__nube { fill: var(--hs-ahorros-primario-suave); }

/* Las nubes van a otro ritmo que el cuerpo a propósito: sincronizadas, la
   escena entera se lee como una sola pieza rígida moviéndose. */
.hs-ahorros-mascota__nubes .hs-ahorros-mascota__nube {
  animation: hs-ahorros-nube 7.5s ease-in-out infinite;
}
.hs-ahorros-mascota__nubes .hs-ahorros-mascota__nube:nth-child(2) { animation-duration: 9.5s; animation-delay: -3s; }
.hs-ahorros-mascota__nubes .hs-ahorros-mascota__nube:nth-child(3) { animation-duration: 8.4s; animation-delay: -6s; }
@keyframes hs-ahorros-nube {
  0%, 100% { opacity: .55; }
  50%      { opacity: .9; }
}

/* Fuera del héroe (estados vacíos) la mascota es un apoyo, no el motivo:
   respira, pero sin flotar tanto. */
.hs-ahorros-vacio .hs-ahorros-mascota__cuerpo { animation-duration: 5.4s; }

/* ===========================================================================
   Adaptación a pantallas pequeñas
   =========================================================================== */

/* Portátiles estrechos: la barra lateral sigue, pero el héroe deja de tener
   sitio para dos columnas cómodas. */
@media (max-width: 1180px) {
  .hs-ahorros-heroe { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); }
}

@media (max-width: 900px) {
  .hs-ahorros-rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-ahorros-rejilla--3, .hs-ahorros-rejilla--2-1, .hs-ahorros-rejilla--1-2 { grid-template-columns: minmax(0, 1fr); }
  .hs-ahorros-lateral { display: none; }
  .hs-ahorros-app { grid-template-columns: 1fr; }
  .hs-ahorros-principal { padding: var(--hs-ahorros-e-4) var(--hs-ahorros-e-4) calc(96px + env(safe-area-inset-bottom)); }
  .hs-ahorros-nav-inf { display: flex; }
  .hs-ahorros-fab { display: grid; }
  .hs-ahorros-cabecera__titulo { font-size: var(--hs-ahorros-t-xl); }

  /* En móvil el héroe vuelve a la disposición de la referencia: todo centrado,
     con la mascota bajo la cifra. El botón flotante ya está en la esquina, así
     que el de la escena sobra. */
  .hs-ahorros-heroe {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'texto' 'escena';
    text-align: center;
  }
  .hs-ahorros-heroe__texto { grid-area: texto; justify-items: center; }
  .hs-ahorros-heroe__saludo { justify-content: center; }
  .hs-ahorros-heroe__escena { grid-area: escena; }
  .hs-ahorros-heroe__unidad { justify-content: center; }
  .hs-ahorros-heroe__mas { display: none; }
  .hs-ahorros-acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .hs-ahorros-rejilla--2, .hs-ahorros-rejilla--4 { grid-template-columns: minmax(0, 1fr); }
  .hs-ahorros-fila-campos { grid-template-columns: minmax(0, 1fr); }
  .hs-ahorros-tarjeta { padding: var(--hs-ahorros-e-4); border-radius: var(--hs-ahorros-r-md); }
  /* La regla de arriba tiene la misma especificidad y va despues: sin esto, en
     movil las listas a sangre recuperaban el relleno que la variante quita. */
  .hs-ahorros-tarjeta--sin-relleno { padding: 0; }
  .hs-ahorros-tarjeta--sin-relleno > .hs-ahorros-tarjeta__cabecera {
    padding: var(--hs-ahorros-e-4) var(--hs-ahorros-e-4) 0;
  }
  .hs-ahorros-exporta { grid-template-columns: minmax(0, 1fr); }
  .hs-ahorros-modal {
    width: 100vw; max-width: 100vw;
    margin: auto auto 0;
    border-radius: var(--hs-ahorros-r-xl) var(--hs-ahorros-r-xl) 0 0;
  }
}

@media print {
  .hs-ahorros-lateral, .hs-ahorros-nav-inf, .hs-ahorros-fab, .hs-ahorros-cabecera__acciones { display: none !important; }
  .hs-ahorros-app { grid-template-columns: 1fr; }
  .hs-ahorros-tarjeta { box-shadow: none; break-inside: avoid; }
}