/* ==========================================================================
   Abastito · theme.css — Sistema de diseño Frutiger Aero
   --------------------------------------------------------------------------
   Cargado DESPUÉS de app.css. Solo define tokens (--aa-*) y componentes
   (.aa-*) inerte hasta que las plantillas los usen. No debe contener las
   reglas de htmx (viven en app.css y están congeladas por los tests).
   Contraste mínimo objetivo: WCAG 2.2 AA (texto normal >= 4.5:1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* — Paleta de marca Frutiger Aero — */
  --aa-sky-700: #0a6cd6;   /* marca / enlaces        → 5.09:1 sobre blanco */
  --aa-sky-600: #0e7de8;   /* hover de marca */
  --aa-aqua-500: #00aeef;  /* aqua, glows, orbes */
  --aa-celeste-200: #b3e5fc;
  --aa-sky-50: #e3f6ff;
  --aa-grass-500: #7ed957;
  --aa-green-700: #2e9e3f; /* superficie; NO texto fino blanco (3.45:1) */
  --aa-green-ink: #16632a; /* superficie verde con texto blanco → 7.4:1 */
  --aa-orange-500: #ff8a1f;/* acento cálido; texto con tinta oscura 5.4:1 */
  --aa-yellow-400: #ffd84d;/* acento; texto con tinta oscura 9.2:1 */
  --aa-white: #ffffff;

  /* — Tinta / texto — */
  --aa-ink: #0f2e44;        /* → 14.0:1 sobre blanco */
  --aa-ink-muted: #3e5a6e;  /* → 7.2:1 sobre blanco */
  --aa-ink-invert: #ffffff;

  /* — Datos (ronda 2: sin choques con marca/éxito/alerta/error) — */
  --aa-data-main: #0a6cd6;
  --aa-data-compare: #8aa8c2;
  --aa-super-selectos: #0e7490;
  --aa-super-walmart: #7c3aed;
  --aa-super-pricesmart: #db2777;
  --aa-super-don-juan: #65a30d;

  /* — Bordes — */
  --aa-border: #9cc4e0;
  --aa-border-strong: #4f86b3;

  /* — Gradientes — */
  --aa-grad-sky: linear-gradient(180deg, #0a6cd6 0%, #4fc3f7 55%, #e3f6ff 100%);
  --aa-grad-hero: linear-gradient(180deg, #0a6cd6 0%, #4fc3f7 40%, #e3f6ff 62%, #7ed957 84%, #2e9e3f 100%);
  --aa-grad-orb: radial-gradient(circle at 30% 25%, #ffffff 0%, #b3e5fc 32%, #00aeef 62%, #0a6cd6 100%);
  --aa-grad-btn: linear-gradient(180deg, #1a73cf 0%, #0a6cd6 55%, #0757ac 100%);
  --aa-grad-cta: linear-gradient(180deg, #ffb04d 0%, #ff8a1f 60%, #e9760f 100%);
  --aa-grad-ok: linear-gradient(180deg, #1f7a31 0%, #16632a 100%);
  --aa-grad-panel-sky: linear-gradient(180deg, #0d5fb0 0%, #0a6cd6 100%);

  /* — Vidrio / blur / brillos — */
  --aa-glass-bg: rgb(255 255 255 / 62%);
  --aa-glass-bg-strong: rgb(255 255 255 / 84%);
  --aa-glass-solid: rgb(242 250 255 / 88%); /* fallback translúcido suave */
  --aa-glass-blur: 14px;
  --aa-glass-saturate: 140%;
  --aa-glass-edge: rgb(255 255 255 / 72%); /* borde superior brillante */
  --aa-glass-outer: rgb(10 108 214 / 18%);
  --aa-gloss-top: linear-gradient(180deg, rgb(255 255 255 / 65%) 0%, rgb(255 255 255 / 0%) 48%);

  /* — Sombras — */
  --aa-shadow-1: 0 1px 2px rgb(10 60 110 / 8%), 0 6px 18px rgb(10 60 110 / 8%);
  --aa-shadow-2: 0 10px 30px rgb(10 60 110 / 12%);
  --aa-shadow-glow: inset 0 0 0 1px rgb(255 255 255 / 55%), 0 6px 16px rgb(0 174 239 / 28%);

  /* — Radios — */
  --aa-radius-md: 0.75rem;
  --aa-radius-lg: 1rem;
  --aa-radius-xl: 1.25rem;
  --aa-radius-pill: 999px;

  /* — Tipografía — */
  --aa-font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --aa-fs-xs: 0.75rem;
  --aa-fs-sm: 0.875rem;
  --aa-fs-base: 1rem;
  --aa-fs-lg: 1.125rem;
  --aa-fs-xl: 1.375rem;
  --aa-fs-2xl: 1.75rem;
  --aa-fs-3xl: 2.25rem;
  --aa-lh-tight: 1.15;
  --aa-lh-normal: 1.5;
  --aa-fw-semibold: 600;
  --aa-fw-medium: 500;
  --aa-fw-bold: 700;
  --aa-fw-black: 800;

  /* — Espaciado / tamaños — */
  --aa-space-1: 0.25rem;
  --aa-space-2: 0.5rem;
  --aa-space-3: 0.75rem;
  --aa-space-4: 1rem;
  --aa-space-5: 1.5rem;
  --aa-space-6: 2rem;
  --aa-control-h: 2.75rem;    /* 44px */
  --aa-control-h-lg: 3rem;
  --aa-container: 64rem;
  --aa-product-image-h: 9rem;

  /* — Motion — */
  --aa-motion-fast: 160ms;
  --aa-motion-medium: 240ms;
  --aa-duration-float: 14s;
  --aa-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* — Capas — */
  --aa-z-decor: 0;
  --aa-z-nav: 30;
  --aa-z-modal: 60;
  --aa-z-toast: 70;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--aa-font-sans);
}

.aa-container {
  width: 100%;
  max-width: var(--aa-container);
  margin-inline: auto;
  padding-inline: var(--aa-space-4);
}

.aa-page-heading { display: grid; gap: var(--aa-space-2); }
.aa-page-heading__description { color: var(--aa-ink-muted); }

.aa-footer {
  border-top: 1px solid var(--aa-glass-outer);
  background-color: var(--aa-glass-solid);
  color: var(--aa-ink-muted);
}
.aa-footer__inner {
  display: flex;
  min-height: var(--aa-control-h);
  align-items: center;
  justify-content: space-between;
  gap: var(--aa-space-3) var(--aa-space-5);
  padding-block: var(--aa-space-2);
}
.aa-footer__brand { color: var(--aa-ink); font-weight: var(--aa-fw-semibold); text-decoration: none; }
.aa-footer__links { display: flex; flex-wrap: wrap; gap: var(--aa-space-1) var(--aa-space-2); }
.aa-footer__links a,
.aa-footer__login {
  display: inline-flex;
  min-height: var(--aa-control-h);
  align-items: center;
  padding-inline: var(--aa-space-2);
  border-radius: var(--aa-radius-pill);
  color: var(--aa-sky-700);
  font-size: var(--aa-fs-sm);
  text-decoration: none;
}
.aa-footer__links a:hover,
.aa-footer__login:hover { background-color: var(--aa-sky-50); }

@media (max-width: 40rem) {
  .aa-footer__inner { align-items: flex-start; flex-direction: column; gap: var(--aa-space-2); padding-block: var(--aa-space-4); }
}

/* Enlace de salto: oculto hasta recibir foco de teclado. */
.aa-skip-link {
  position: absolute;
  left: var(--aa-space-2);
  top: -3.5rem;
  z-index: 100;
  padding: 0.5rem 0.875rem;
  border-radius: var(--aa-radius-md);
  background-color: var(--aa-sky-700);
  color: var(--aa-ink-invert);
  font-weight: var(--aa-fw-semibold);
  text-decoration: none;
  transition: top var(--aa-motion-fast) var(--aa-ease-standard);
}
.aa-skip-link:focus { top: var(--aa-space-2); }

.aa-title-1 { font-size: var(--aa-fs-3xl); font-weight: var(--aa-fw-bold); line-height: var(--aa-lh-tight); }
.aa-title-2 { font-size: var(--aa-fs-2xl); font-weight: var(--aa-fw-bold); line-height: var(--aa-lh-tight); }
.aa-muted { color: var(--aa-ink-muted); }

/* --------------------------------------------------------------------------
   3. Superficies: vidrio
   -------------------------------------------------------------------------- */
.aa-glass {
  position: relative;
  border: 1px solid var(--aa-glass-outer);
  border-radius: var(--aa-radius-xl);
  background-color: var(--aa-glass-bg); /* translúcido ligero, sin blur: barato */
  box-shadow: var(--aa-shadow-1);
}

/* Brillo en el borde superior (se degrada con elegancia y no afecta al texto). */
.aa-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--aa-gloss-top);
  opacity: 0.7;
  pointer-events: none;
}

/* Vidrio "real" con blur: reservado a nav, hero y modal por coste de rendimiento.
   Si el navegador no lo soporta, se conserva el fondo translúcido de arriba. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .aa-glass--blur {
    background-color: var(--aa-glass-bg);
    -webkit-backdrop-filter: saturate(var(--aa-glass-saturate)) blur(var(--aa-glass-blur));
    backdrop-filter: saturate(var(--aa-glass-saturate)) blur(var(--aa-glass-blur));
  }
}

.aa-glass--strong { background-color: var(--aa-glass-bg-strong); }

.aa-card {
  padding: var(--aa-space-5);
}

/* Panel destacado (totales, marca, CTA de bloque) */
.aa-panel {
  position: relative;
  overflow: hidden;
  padding: var(--aa-space-5);
  border-radius: var(--aa-radius-xl);
  color: var(--aa-ink-invert);
  box-shadow: var(--aa-shadow-2);
}
.aa-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--aa-gloss-top);
  pointer-events: none;
}
.aa-panel--success { background-image: var(--aa-grad-ok); }

/* --------------------------------------------------------------------------
   4. Botones glossy
   -------------------------------------------------------------------------- */
.aa-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aa-space-2);
  min-height: var(--aa-control-h);
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--aa-radius-pill);
  font: inherit;
  font-weight: var(--aa-fw-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  color: var(--aa-ink);
  background-color: var(--aa-glass-solid);
  transition: transform var(--aa-motion-fast) var(--aa-ease-standard),
    box-shadow var(--aa-motion-fast) var(--aa-ease-standard),
    filter var(--aa-motion-fast) var(--aa-ease-standard);
}

.aa-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--aa-gloss-top);
  opacity: 0.55;
  pointer-events: none;
}

.aa-btn:hover { transform: translateY(-1px); filter: saturate(1.05) brightness(1.03); }
.aa-btn:active { transform: translateY(0); filter: brightness(0.97); }

.aa-btn:disabled,
.aa-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.aa-btn--primary { background-image: var(--aa-grad-btn); color: var(--aa-ink-invert); box-shadow: var(--aa-shadow-glow); }
.aa-btn--cta { background-image: var(--aa-grad-cta); color: var(--aa-ink); box-shadow: var(--aa-shadow-glow); }
.aa-btn--success { background-image: var(--aa-grad-ok); color: var(--aa-ink-invert); box-shadow: var(--aa-shadow-glow); }
.aa-btn--ghost {
  background-color: transparent;
  border-color: var(--aa-border-strong);
  color: var(--aa-sky-700);
}
.aa-btn--danger { background-color: #fdecec; border-color: #e3a3a3; color: #8a1f1f; }
.aa-btn--primary, .aa-btn--cta, .aa-btn--success, .aa-btn--ghost, .aa-btn--danger {
  border-width: 1px;
  border-style: solid;
  background-clip: padding-box;
  -webkit-backdrop-filter: saturate(145%) blur(8px);
  backdrop-filter: saturate(145%) blur(8px);
}
.aa-btn--primary { border-color: rgb(4 91 180 / 72%); background-image: linear-gradient(135deg, rgb(29 144 230 / 82%), rgb(9 91 190 / 88%)); }
.aa-btn--cta { border-color: rgb(19 116 123 / 62%); background-image: linear-gradient(135deg, rgb(125 232 221 / 72%), rgb(48 178 187 / 78%)); }
.aa-btn--success { border-color: rgb(22 99 42 / 65%); background-image: linear-gradient(135deg, rgb(100 205 117 / 76%), rgb(45 153 67 / 82%)); }
.aa-btn--ghost { background-color: rgb(255 255 255 / 42%); }
.aa-btn--danger { background-color: rgb(253 236 236 / 68%); }
.aa-btn--sm { min-height: 2.25rem; padding: 0.25rem 0.75rem; font-size: var(--aa-fs-sm); }
.aa-btn--lg { min-height: var(--aa-control-h-lg); padding: 0.625rem 1.5rem; font-size: var(--aa-fs-lg); }
.aa-btn--block { width: 100%; }

.aa-btn--loading { color: transparent; cursor: progress; }
.aa-btn--loading::before { content: ""; }
.aa-btn--loading > * { visibility: hidden; }

/* --------------------------------------------------------------------------
   5. Campos
   -------------------------------------------------------------------------- */
.aa-label {
  display: block;
  margin-bottom: var(--aa-space-1);
  font-size: var(--aa-fs-sm);
  font-weight: var(--aa-fw-semibold);
  color: var(--aa-ink);
}

.aa-field {
  width: 100%;
  min-height: var(--aa-control-h);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--aa-border);
  border-radius: var(--aa-radius-md);
  background-color: var(--aa-glass-solid);
  color: var(--aa-ink);
  font: inherit;
}
.aa-field:is(select) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-color: rgb(255 255 255 / 68%);
  background-image: linear-gradient(45deg, transparent 50%, var(--aa-sky-700) 50%), linear-gradient(135deg, var(--aa-sky-700) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%;
  background-size: .38rem .38rem, .38rem .38rem;
  background-repeat: no-repeat;
}
.aa-field:is(select):hover { background-color: rgb(227 246 255 / 82%); }

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .aa-field {
    background-color: var(--aa-glass-bg-strong);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

.aa-field::placeholder { color: var(--aa-ink-muted); opacity: 1; }
.aa-field:hover { border-color: var(--aa-border-strong); }
.aa-field--invalid { border-color: #b3261e; }
.aa-field-inline { display: inline-flex; align-items: center; gap: var(--aa-space-2); }
.aa-field-inline .aa-label { margin-bottom: 0; white-space: nowrap; }
.aa-field-inline .aa-field { width: auto; }

/* --------------------------------------------------------------------------
   6. Badges
   -------------------------------------------------------------------------- */
.aa-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--aa-radius-pill);
  font-size: var(--aa-fs-xs);
  font-weight: var(--aa-fw-bold);
  line-height: 1.4;
  white-space: nowrap;
}
.aa-badge--market { background-color: var(--aa-sky-50); color: var(--aa-sky-700); }
.aa-badge--offer { background-image: var(--aa-grad-cta); color: var(--aa-ink); }
.aa-badge--active { background-color: #e3f6e6; color: var(--aa-green-ink); }
.aa-badge--off { background-color: #e6eef4; color: var(--aa-ink-muted); }

/* --------------------------------------------------------------------------
   7. Orbes y avatares
   -------------------------------------------------------------------------- */
.aa-orb {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background-image: var(--aa-grad-orb);
  box-shadow: var(--aa-shadow-glow), inset 0 -6px 12px rgb(0 60 120 / 18%);
  color: var(--aa-ink);
}
.aa-orb::before {
  content: "";
  position: absolute;
  inset: 6% 10% auto 10%;
  height: 46%;
  border-radius: 50%;
  background: rgb(255 255 255 / 55%);
  filter: blur(1px);
  pointer-events: none;
}
.aa-orb--sm { width: 2rem; height: 2rem; font-size: var(--aa-fs-sm); }
.aa-orb--lg { width: 3.5rem; height: 3.5rem; font-size: var(--aa-fs-lg); }

.aa-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border-radius: 50%;
  background-image: radial-gradient(circle at 34% 26%, #ffffff 0%, #b3e5fc 40%, #00aeef 72%, #0873b8 100%);
  box-shadow: inset 0 -5px 10px rgb(0 70 130 / 30%), var(--aa-shadow-glow);
  color: var(--aa-ink);
  font-weight: var(--aa-fw-bold);
}
.aa-avatar::before {
  content: "";
  position: absolute;
  inset: 4% 12% auto 12%;
  height: 42%;
  border-radius: 50%;
  background: rgb(255 255 255 / 60%);
  filter: blur(1px);
  pointer-events: none;
}

/* Navegación: fila clara en escritorio y marca/cuenta + menú completo en móvil. */
.aa-nav__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--aa-space-2) var(--aa-space-4);
}
.aa-nav__links {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aa-space-1);
}
.aa-nav__links--desktop { justify-content: center; }
.aa-nav__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--aa-space-2);
  margin-left: auto;
}
.aa-nav__guest-login { margin-left: auto; }

/* Submenú de usuario Frutiger Aero (um-*). */
.um-account { position: relative; }
.um-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--aa-control-h);
  height: var(--aa-control-h);
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 120%, #7be3ff 0, #2aa0e6 45%, #1673c4 100%);
  box-shadow: 0 0 0 1px #3b92cf, 0 6px 16px rgb(30 120 200 / 45%), inset 0 -6px 12px rgb(120 230 255 / 70%);
  color: #fff;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s;
}
.um-orb::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 6%;
  height: 44%;
  border-radius: 50%;
  background: linear-gradient(rgb(255 255 255 / 90%), rgb(255 255 255 / 8%));
  pointer-events: none;
}
.um-orb svg { position: relative; width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgb(10 60 120 / 60%)); }
.um-orb:hover { transform: scale(1.07); box-shadow: 0 0 0 1px #3b92cf, 0 0 20px #6fd6ff, inset 0 -6px 12px rgb(120 230 255 / 70%); }
.um-orb:active { transform: scale(.95); }
.um-orb:focus-visible { outline: 3px solid #0b6fd0; outline-offset: 3px; }
.um-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 60;
  width: 280px;
  max-width: calc(100vw - 24px);
  padding: 14px;
  display: grid;
  gap: 4px;
  border: 1.5px solid #fff;
  border-radius: 26px;
  background: linear-gradient(165deg, rgb(255 255 255 / 78%), rgb(214 240 255 / 72%) 55%, rgb(218 248 232 / 74%));
  box-shadow: 0 18px 40px rgb(30 100 170 / 35%), 0 0 0 1px rgb(120 190 230 / 55%), inset 0 0 26px rgb(255 255 255 / 70%);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  transform-origin: calc(100% - 22px) 0;
  transition: transform .2s cubic-bezier(.3,1.4,.5,1), opacity .2s;
}
.um-panel::before {
  content: "";
  position: absolute;
  inset: 0 6% 55%;
  border-radius: inherit;
  background: linear-gradient(rgb(255 255 255 / 60%), transparent);
  pointer-events: none;
}
.um-panel::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 15px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: rgb(240 248 255 / 95%);
  border-left: 1.5px solid #fff;
  border-top: 1.5px solid #fff;
  pointer-events: none;
}
.um-panel.um-off { transform: scale(.92) translateY(-6px); opacity: 0; pointer-events: none; }
.um-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -14px -14px 6px;
  padding: 14px;
  border-bottom: 1px solid rgb(120 170 210 / 35%);
  border-radius: 26px 26px 0 0;
  background: #e3f8e9;
}
.um-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 120%, #7be3ff 0, #2aa0e6 45%, #1673c4 100%);
  box-shadow: 0 0 0 1px #3b92cf, inset 0 -4px 8px rgb(120 230 255 / 70%);
  color: #fff;
}
.um-avatar svg { width: 24px; height: 24px; }
.um-who { display: grid; gap: 2px; min-width: 0; }
.um-who strong { color: #0b3a66; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.um-who small { color: #4a6378; font-size: 13px; }
.um-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: #073e7d;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.um-item svg { flex: none; width: 22px; height: 22px; }
.um-item:hover { background: linear-gradient(#e4f3ff, #cfe8fb); border-color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 2px 8px rgb(30 120 200 / 12%); }
.um-item:focus-visible { outline: 3px solid #0b6fd0; outline-offset: 2px; }
.um-item[aria-current="page"] { background: linear-gradient(#dcefff, #c2e2fa); border-color: #fff; }
.um-sep { display: block; height: 1px; margin: 8px 4px; background: rgb(120 170 210 / 35%); }
.um-danger { color: #7a1226; }
.um-danger:hover { background: #ffe4ea; border-color: #f0a2b4; box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%); }
.um-panel form { margin: 0; }
@media (max-width: 39.999rem) {
  .um-panel { width: min(280px, calc(100vw - 24px)); }
  .um-item { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .um-orb, .um-panel, .um-item { transition: none; }
}

/* En escritorio se muestran todos los enlaces; el disclosure se reserva al layout móvil. */
.aa-nav__mobile-menu { display: none; }
.aa-nav__mobile-menu > summary { list-style: none; }
.aa-nav__mobile-menu > summary::-webkit-details-marker { display: none; }
.aa-nav__menu-trigger {
  display: grid;
  width: var(--aa-control-h);
  height: var(--aa-control-h);
  place-items: center;
  border: 1px solid var(--aa-border);
  border-radius: var(--aa-radius-pill);
  background-color: var(--aa-glass-solid);
  color: var(--aa-ink);
  cursor: pointer;
}
.aa-nav__menu-icon { display: grid; width: 1.125rem; gap: 0.25rem; }
.aa-nav__menu-icon span { height: 2px; border-radius: var(--aa-radius-pill); background-color: currentColor; transition: transform var(--aa-motion-fast) var(--aa-ease-standard), opacity var(--aa-motion-fast) var(--aa-ease-standard); }
.aa-nav__mobile-menu[open] .aa-nav__menu-icon span:first-child { transform: translateY(0.375rem) rotate(45deg); }
.aa-nav__mobile-menu[open] .aa-nav__menu-icon span:nth-child(2) { opacity: 0; }
.aa-nav__mobile-menu[open] .aa-nav__menu-icon span:last-child { transform: translateY(-0.375rem) rotate(-45deg); }
.aa-nav__mobile-panel {
  position: absolute;
  top: calc(100% + var(--aa-space-2));
  right: 0;
  z-index: calc(var(--aa-z-nav) + 1);
  width: min(20rem, calc(100vw - 2rem));
  padding: var(--aa-space-2);
  border: 1px solid var(--aa-glass-outer);
  border-radius: var(--aa-radius-lg);
  background-color: var(--aa-glass-solid);
  box-shadow: var(--aa-shadow-2);
}
.aa-nav__links--mobile { display: grid; gap: var(--aa-space-1); }
.aa-nav__links--mobile .aa-nav__link { width: 100%; justify-content: flex-start; }

@media (max-width: 48rem) {
  .aa-nav__row {
    display: grid;
    grid-template-areas: "brand actions";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--aa-space-2) var(--aa-space-3);
  }
  .aa-nav__brand { grid-area: brand; }
  .aa-nav__links--desktop { display: none; }
  .aa-nav__actions { grid-area: actions; }
  .aa-nav__mobile-menu { display: block; }
  .aa-nav__guest-login { grid-area: actions; }
}

/* --------------------------------------------------------------------------
   7b. Alertas inline (errores de datos, avisos)
   -------------------------------------------------------------------------- */
.aa-alert {
  padding: var(--aa-space-4);
  border: 1px solid var(--aa-border);
  border-radius: var(--aa-radius-lg);
  background-color: var(--aa-glass-solid);
  color: var(--aa-ink);
}
.aa-alert--warning { border-color: #e0a800; background-color: #fff8e6; color: #6b4700; }
.aa-alert--error { border-color: #b3261e; background-color: #fdecec; color: #7c1d17; }

/* --------------------------------------------------------------------------
   8. Navegación (se aplica en Fase 1)
   -------------------------------------------------------------------------- */
.aa-nav {
  position: sticky;
  top: 0;
  z-index: var(--aa-z-nav);
  border-bottom: 1px solid var(--aa-glass-outer);
  background-color: var(--aa-glass-solid);
  box-shadow: none;
  transition: box-shadow var(--aa-motion-medium) var(--aa-ease-standard);
}
.aa-nav.is-scrolled { box-shadow: var(--aa-shadow-1); }
.aa-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--aa-control-h);
  padding-inline: 0.75rem;
  border-radius: var(--aa-radius-pill);
  color: var(--aa-sky-700);
  font-weight: var(--aa-fw-semibold);
  text-decoration: none;
  transition: background-color var(--aa-motion-fast) var(--aa-ease-standard),
    color var(--aa-motion-fast) var(--aa-ease-standard);
}
.aa-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--aa-space-2);
  min-height: var(--aa-control-h);
  color: var(--aa-sky-700);
  font-weight: var(--aa-fw-bold);
  text-decoration: none;
}
.aa-nav__link:hover { background-color: var(--aa-sky-50); color: var(--aa-sky-600); }
.aa-nav__link[aria-current="page"] {
  background-color: var(--aa-white);
  color: var(--aa-sky-700);
  box-shadow: var(--aa-shadow-glow);
}

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .aa-nav {
    background-color: var(--aa-glass-bg-strong);
    -webkit-backdrop-filter: saturate(var(--aa-glass-saturate)) blur(var(--aa-glass-blur));
    backdrop-filter: saturate(var(--aa-glass-saturate)) blur(var(--aa-glass-blur));
  }
}

/* El header móvil usa superficie sólida para evitar blur continuo en scroll. */
@media (max-width: 48rem) {
  .aa-nav {
    background-color: var(--aa-glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* --------------------------------------------------------------------------
   9. Loader (burbujas) y estados vacíos
   -------------------------------------------------------------------------- */
.aa-loader {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.375rem;
}
.aa-loader__bubble {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-image: var(--aa-grad-orb);
  animation: aa-bubble-rise 1.05s var(--aa-ease-standard) infinite;
}
.aa-loader__bubble:nth-child(2) { animation-delay: 0.15s; }
.aa-loader__bubble:nth-child(3) { animation-delay: 0.3s; }

.aa-empty {
  padding: var(--aa-space-6) var(--aa-space-5);
  text-align: center;
}
.aa-empty__art {
  display: block;
  width: 6rem;
  height: 6rem;
  margin: 0 auto var(--aa-space-4);
}
.aa-empty__title { font-size: var(--aa-fs-lg); font-weight: var(--aa-fw-bold); }
.aa-empty__text { margin-top: var(--aa-space-1); color: var(--aa-ink-muted); }

/* --------------------------------------------------------------------------
   10. Toast y modal
   -------------------------------------------------------------------------- */
.aa-toasts {
  position: fixed;
  inset-inline: 0;
  bottom: var(--aa-space-4);
  z-index: var(--aa-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aa-space-2);
  padding-inline: var(--aa-space-4);
  pointer-events: none;
}
.aa-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--aa-space-2);
  max-width: 32rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--aa-glass-outer);
  border-radius: var(--aa-radius-pill);
  background-color: var(--aa-glass-bg-strong);
  box-shadow: var(--aa-shadow-2);
  color: var(--aa-ink);
  font-size: var(--aa-fs-sm);
  font-weight: var(--aa-fw-semibold);
}
.aa-toast--success { border-color: var(--aa-green-700); }
.aa-toast--error { border-color: #b3261e; color: #7c1d17; }

.aa-modal { position: fixed; inset: 0; z-index: var(--aa-z-modal); display: grid; place-items: center; padding: var(--aa-space-4); }
.aa-modal[hidden] { display: none; }
.aa-modal__backdrop { position: absolute; inset: 0; background-color: rgb(8 40 70 / 45%); }
.aa-modal__dialog {
  position: relative;
  width: min(100%, 32rem);
  padding: var(--aa-space-5);
  border: 1px solid var(--aa-glass-outer);
  border-radius: var(--aa-radius-xl);
  background-color: var(--aa-glass-bg-strong);
  box-shadow: var(--aa-shadow-2);
}

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .aa-modal__backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

/* Encabezado de tabla sobre token de superficie. */
.aa-thead { background-color: var(--aa-sky-50); color: var(--aa-ink); }

/* --------------------------------------------------------------------------
   11. Kit decorativo (SVG/CSS ligero). Uso restringido: hero, login,
       estados vacíos, 404 y zonas de marca. Nunca tras datos.
   -------------------------------------------------------------------------- */
.aa-decor {
  position: absolute;
  inset: 0;
  z-index: var(--aa-z-decor);
  overflow: hidden;
  pointer-events: none;
}

.aa-bubble {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 60%);
  background-image: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 95%), rgb(255 255 255 / 35%) 34%, rgb(0 174 239 / 25%) 70%, rgb(10 108 214 / 12%) 100%);
  box-shadow: inset 0 -4px 10px rgb(0 90 160 / 18%);
  animation: aa-float 7s var(--aa-ease-standard) infinite;
}

.aa-cloud {
  position: absolute;
  width: 7rem;
  height: 2.6rem;
  border-radius: 999px;
  background-color: rgb(255 255 255 / 78%);
  filter: blur(2px);
  animation: aa-drift 18s var(--aa-ease-standard) infinite alternate;
}
.aa-cloud::before,
.aa-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: inherit;
}
.aa-cloud::before { width: 4rem; height: 4rem; top: -1.6rem; left: 1rem; }
.aa-cloud::after { width: 5rem; height: 5rem; top: -2.2rem; left: 3.2rem; }

.aa-hero {
  position: relative;
  overflow: hidden;
  background-image: var(--aa-grad-hero);
}

.aa-hero__content { position: relative; z-index: 1; }

.aa-home-hero {
  display: grid;
  min-height: clamp(27rem, 48vw, 38rem);
  align-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.aa-home-hero__layout {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.8fr);
  align-items: center;
  gap: clamp(var(--aa-space-4), 4vw, var(--aa-space-6));
}
.aa-home-hero__copy { width: 100%; max-width: 39rem; }
.aa-home-hero__title {
  color: var(--aa-ink);
  font-size: clamp(var(--aa-fs-2xl), 4vw, var(--aa-fs-3xl));
  font-weight: var(--aa-fw-bold);
  line-height: var(--aa-lh-tight);
}
.aa-home-hero__description {
  max-width: 34rem;
  margin-top: var(--aa-space-3);
  color: var(--aa-ink-muted);
  font-size: var(--aa-fs-lg);
  line-height: var(--aa-lh-normal);
}
.aa-home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--aa-space-3); margin-top: var(--aa-space-5); }
.aa-home-hero__visual { position: relative; display: grid; min-height: 19rem; place-items: center; }
.aa-home-hero__orb { position: relative; }
.aa-home-hero__orb--large {
  width: clamp(10rem, 24vw, 17rem);
  height: clamp(10rem, 24vw, 17rem);
  animation: aa-float var(--aa-duration-float) var(--aa-ease-standard) infinite;
}
.aa-home-hero__orb--small {
  position: absolute;
  top: 12%;
  right: 12%;
  width: clamp(4rem, 8vw, 6rem);
  height: clamp(4rem, 8vw, 6rem);
  animation: aa-float var(--aa-duration-float) var(--aa-ease-standard) infinite;
}
.aa-home-hero__orb--offset { top: auto; right: auto; bottom: 10%; left: 12%; width: 4.5rem; height: 4.5rem; animation-delay: -5s; }

@media (max-width: 40rem) {
  .aa-home-hero { min-height: 0; padding: var(--aa-space-3); }
  .aa-home-hero__layout { grid-template-columns: minmax(0, 1fr); gap: var(--aa-space-2); }
  .aa-home-hero__copy { padding: var(--aa-space-4); background-color: var(--aa-glass-solid); }
  .aa-home-hero__visual { min-height: 11rem; }
  .aa-home-hero__orb--large { width: 9rem; height: 9rem; animation: none; }
  .aa-home-hero__orb--small { width: 4rem; height: 4rem; animation: none; }
  .aa-home-hero__orb--offset { width: 3.5rem; height: 3.5rem; }
}

/* Acceso: composición dividida con vidrio, brillo y color de agua. */
.aa-login {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 34rem;
  place-items: center;
  overflow: hidden;
  padding: clamp(1rem, 4vw, 3rem);
  border: 1px solid var(--aa-glass-outer);
  border-radius: var(--aa-radius-xl);
  background-image: var(--aa-grad-hero);
}
.aa-login__layout {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-width: 58rem;
  min-height: 29rem;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--aa-glass-edge);
  border-radius: var(--aa-radius-xl);
  background-color: rgb(255 255 255 / 38%);
  -webkit-backdrop-filter: saturate(145%) blur(12px);
  backdrop-filter: saturate(145%) blur(12px);
  box-shadow: var(--aa-shadow-2);
}
.aa-login__welcome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background-image: linear-gradient(145deg, rgb(13 95 176 / 90%), rgb(10 108 214 / 72%) 58%, rgb(79 195 247 / 62%));
  color: var(--aa-ink-invert);
}
.aa-login__welcome .aa-orb { margin-bottom: var(--aa-space-5); }
.aa-login__brand { font-size: var(--aa-fs-3xl); font-weight: var(--aa-fw-black); line-height: var(--aa-lh-tight); }
.aa-login__tagline { max-width: 20rem; margin-top: var(--aa-space-3); color: #ffffff; font-size: var(--aa-fs-lg); line-height: var(--aa-lh-normal); }
.aa-login__form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-left: 1px solid rgb(255 255 255 / 62%);
  background-color: rgb(242 250 255 / 72%);
  -webkit-backdrop-filter: saturate(130%) blur(14px);
  backdrop-filter: saturate(130%) blur(14px);
}
.aa-login__eyebrow {
  margin-bottom: var(--aa-space-2);
  color: var(--aa-sky-700);
  font-size: var(--aa-fs-xs);
  font-weight: var(--aa-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.aa-login__form-fields { display: grid; gap: var(--aa-space-4); margin-top: var(--aa-space-5); }

@media (max-width: 40rem) {
  .aa-login { min-height: 0; padding: var(--aa-space-3); }
  .aa-login__layout { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .aa-login__welcome { padding: var(--aa-space-5); }
  .aa-login__welcome .aa-orb { width: 2.75rem; height: 2.75rem; margin-bottom: var(--aa-space-3); }
  .aa-login__brand { font-size: var(--aa-fs-2xl); }
  .aa-login__tagline { margin-top: var(--aa-space-2); font-size: var(--aa-fs-base); }
  .aa-login__form-panel { padding: var(--aa-space-5); }
}

/* Gráficos CSS: los importes y etiquetas siguen visibles aunque no se perciba el color. */
.aa-chart { display: grid; gap: var(--aa-space-4); margin-top: var(--aa-space-4); padding: 0; list-style: none; }
.aa-chart__row {
  display: grid;
  grid-template-columns: minmax(4.25rem, max-content) minmax(2.5rem, 1fr) max-content;
  align-items: center;
  gap: var(--aa-space-2);
  font-size: var(--aa-fs-sm);
}
.aa-chart__label { min-width: 0; overflow-wrap: anywhere; color: var(--aa-ink); }
.aa-chart__value { color: var(--aa-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aa-chart__track {
  display: block;
  min-width: 2.5rem;
  height: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--aa-border);
  border-radius: var(--aa-radius-pill);
  background-color: var(--aa-sky-50);
}
.aa-chart__bar {
  display: block;
  width: var(--aa-chart-size, 0%);
  height: 100%;
  border-radius: inherit;
  background-image: var(--aa-grad-btn);
}
.aa-chart__bar--green { background-image: var(--aa-grad-ok); }
.aa-chart__caption { margin-top: var(--aa-space-4); color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
.aa-chart--products { gap: 0; margin-top: 0; }
.aa-chart__product { display: grid; gap: var(--aa-space-2); }
.aa-chart__product-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--aa-space-3); }
.aa-chart__product .aa-chart__track { height: 0.625rem; }

@media (max-width: 24.375rem) {
  .aa-chart__row { grid-template-columns: minmax(3.5rem, max-content) minmax(2rem, 1fr) max-content; gap: var(--aa-space-1); font-size: var(--aa-fs-xs); }
  .aa-chart__value { font-size: var(--aa-fs-xs); }
  .aa-chart__product-heading { align-items: flex-start; flex-direction: column; gap: var(--aa-space-1); }
}

/* --------------------------------------------------------------------------
   12. Animaciones (desactivadas por app.css bajo prefers-reduced-motion)
   -------------------------------------------------------------------------- */
@keyframes aa-bubble-rise {
  0% { transform: translateY(0) scale(0.85); opacity: 0.6; }
  50% { transform: translateY(-6px) scale(1); opacity: 1; }
  100% { transform: translateY(0) scale(0.85); opacity: 0.6; }
}

@keyframes aa-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes aa-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(2rem); }
}

/* --------------------------------------------------------------------------
   12b. Filtros de búsqueda (refuerzo de tokens sobre app.css)
   -------------------------------------------------------------------------- */
.search-filters {
  border-color: var(--aa-glass-outer);
  background-color: var(--aa-glass-solid);
}

.search-filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aa-space-3);
}
.search-filters__title {
  color: var(--aa-ink);
  font-size: var(--aa-fs-lg);
  font-weight: var(--aa-fw-bold);
  line-height: var(--aa-lh-tight);
}
.search-filters__hint { margin-top: var(--aa-space-1); color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
.search-filters__active {
  flex: 0 0 auto;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--aa-border);
  border-radius: var(--aa-radius-pill);
  background-color: var(--aa-sky-50);
  color: var(--aa-ink);
  font-size: var(--aa-fs-xs);
  font-weight: var(--aa-fw-semibold);
}

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .search-filters {
    background-color: var(--aa-glass-bg);
    -webkit-backdrop-filter: saturate(var(--aa-glass-saturate)) blur(var(--aa-glass-blur));
    backdrop-filter: saturate(var(--aa-glass-saturate)) blur(var(--aa-glass-blur));
  }
}

.search-filter {
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: var(--aa-radius-lg);
  background: linear-gradient(145deg, rgb(255 255 255 / 70%), rgb(226 247 255 / 48%));
  box-shadow: 0 5px 15px rgb(10 90 150 / 8%), inset 0 1px 0 rgb(255 255 255 / 72%);
  overflow: visible;
}
.search-filter__summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--aa-control-h); padding: 0 var(--aa-space-3); border-radius: inherit; color: var(--aa-sky-700); font-weight: var(--aa-fw-semibold); }
.search-filter__summary:hover, .search-filter__summary:focus-visible { background: rgb(227 246 255 / 72%); color: var(--aa-ink); }
.search-filter[open] .search-filter__summary { border-bottom: 1px solid rgb(10 108 214 / 14%); border-radius: var(--aa-radius-lg) var(--aa-radius-lg) 0 0; }
.search-filter__option { color: var(--aa-ink); }
.search-filter__option:hover,
.search-filter__option[aria-current="true"] {
  background-color: var(--aa-sky-50);
  color: var(--aa-sky-700);
}
.search-filter[open] .search-filter__summary { color: var(--aa-ink); }
.search-filter__option.is-selected { font-weight: var(--aa-fw-bold); }
.search-filter__options { display: grid; gap: 6px; padding: var(--aa-space-2); }
.search-filter__option { display: flex; align-items: center; min-height: 42px; padding: 0 var(--aa-space-3); border: 1px solid transparent; border-radius: var(--aa-radius-md); transition: background var(--aa-motion-fast) var(--aa-ease-standard), transform var(--aa-motion-fast) var(--aa-ease-standard); }
.search-filter__option:hover, .search-filter__option:focus-visible { transform: translateX(2px); }
.search-filter__offer { color: var(--aa-sky-700); border-color: var(--aa-border); }
.search-filter__offer.is-selected {
  border-color: transparent;
  background-image: var(--aa-grad-cta);
  color: var(--aa-ink);
}
.search-filter__clear { color: var(--aa-sky-700); }
.search-results__empty {
  border-color: var(--aa-glass-outer);
  background-color: var(--aa-glass-solid);
}

/* Product cards: mantener la oferta escaneable, con imagen y precio como anclas visuales. */
.aa-product-card {
  overflow: hidden;
  border-radius: var(--aa-radius-xl);
  transition: box-shadow var(--aa-motion-fast) var(--aa-ease-standard), transform var(--aa-motion-fast) var(--aa-ease-standard);
}
.aa-product-card__visual {
  position: relative;
  display: grid;
  min-height: var(--aa-product-image-h);
  place-items: center;
  overflow: hidden;
  padding: var(--aa-space-3);
  border-bottom: 1px solid var(--aa-glass-outer);
  background-image: linear-gradient(145deg, var(--aa-white), var(--aa-sky-50));
}
.aa-product-card__visual::before {
  content: "";
  position: absolute;
  width: min(72%, 8rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: radial-gradient(circle, var(--aa-celeste-200), transparent 72%);
}
.aa-product-card__image,
.aa-product-card__fallback {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(var(--aa-product-image-h) - var(--aa-space-2));
  object-fit: contain;
}
.aa-product-card__fallback {
  display: grid;
  place-items: center;
  border-radius: var(--aa-radius-md);
  background-color: var(--aa-sky-50);
  color: var(--aa-ink-muted);
  font-size: var(--aa-fs-2xl);
  font-weight: var(--aa-fw-bold);
}
.aa-product-card__fallback[hidden] { display: none; }
.aa-product-card__offer { position: absolute; top: var(--aa-space-2); left: var(--aa-space-2); z-index: 2; }
.aa-product-card__content {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--aa-space-2);
  padding: var(--aa-space-3);
}
.aa-product-card__market { max-width: 100%; overflow: hidden; align-self: flex-start; text-overflow: ellipsis; }
.aa-product-card__name {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--aa-ink);
  font-size: var(--aa-fs-sm);
  font-weight: var(--aa-fw-semibold);
  line-height: var(--aa-lh-normal);
  overflow-wrap: anywhere;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.aa-product-card__name:hover { color: var(--aa-sky-700); text-decoration: underline; text-underline-offset: 0.15em; }
.aa-product-card__details {
  display: grid;
  min-height: 2.5rem;
  align-content: start;
  color: var(--aa-ink-muted);
  font-size: var(--aa-fs-xs);
  line-height: var(--aa-lh-normal);
}
.aa-product-card__details span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-product-card__purchase { margin-top: auto; padding-top: var(--aa-space-2); border-top: 1px solid var(--aa-glass-outer); }
.aa-product-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--aa-space-2); color: var(--aa-ink); }
.aa-product-card__price > span { font-size: var(--aa-fs-xl); font-weight: var(--aa-fw-black); }
.aa-product-card__price s { color: var(--aa-ink-muted); font-size: var(--aa-fs-xs); }
.aa-product-card__updated { margin-top: var(--aa-space-1); color: var(--aa-ink-muted); font-size: var(--aa-fs-xs); }
.aa-product-card__actions { display: grid; gap: var(--aa-space-1); margin-top: var(--aa-space-3); }
.aa-product-card__original {
  display: inline-flex;
  min-height: var(--aa-control-h);
  align-items: center;
  justify-content: center;
  gap: var(--aa-space-1);
  border-radius: var(--aa-radius-md);
  color: var(--aa-sky-700);
  font-size: var(--aa-fs-xs);
  font-weight: var(--aa-fw-semibold);
  text-align: center;
  text-decoration: none;
}
.aa-product-card__original:hover { background-color: var(--aa-sky-50); text-decoration: underline; text-underline-offset: 0.15em; }
.aa-product-card__add { width: 100%; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .aa-product-card:hover { transform: translateY(-2px); box-shadow: var(--aa-shadow-2); }
}

@media (max-width: 24.375rem) {
  .search-filters__header { align-items: flex-start; }
  .search-filters__active { max-width: 8rem; white-space: normal; text-align: center; }
  .aa-product-card__visual { min-height: calc(var(--aa-product-image-h) - var(--aa-space-2)); padding: var(--aa-space-2); }
  .aa-product-card__image, .aa-product-card__fallback { height: calc(var(--aa-product-image-h) - var(--aa-space-4)); }
  .aa-product-card__content { padding: var(--aa-space-2); }
  .aa-product-card__price > span { font-size: var(--aa-fs-lg); }
}

/* El indicador de búsqueda tiene su clase congelada por los tests; se estiliza por id. */
#search-spinner { display: flex; align-items: center; gap: var(--aa-space-2); }

/* Lista de compras: filtro de supermercados y grupos nativos contraíbles. */
.aa-list-filter {
  min-width: 0;
  padding: var(--aa-space-4);
  border: 1px solid var(--aa-glass-outer);
  border-radius: var(--aa-radius-lg);
  background-color: var(--aa-glass-solid);
}
.aa-list-filter__legend {
  padding-inline: var(--aa-space-2);
  color: var(--aa-ink);
  font-weight: var(--aa-fw-bold);
}
.aa-list-filter__choices { display: flex; flex-wrap: wrap; gap: var(--aa-space-2); }
.aa-list-filter__choice {
  min-height: var(--aa-control-h);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--aa-border);
  border-radius: var(--aa-radius-pill);
  background-color: var(--aa-glass-bg-strong);
  color: var(--aa-sky-700);
  font: inherit;
  font-weight: var(--aa-fw-semibold);
  cursor: pointer;
  transition: background-color var(--aa-motion-fast) var(--aa-ease-standard), color var(--aa-motion-fast) var(--aa-ease-standard);
}
.aa-list-filter__choice:hover { background-color: var(--aa-sky-50); }
.aa-list-filter__choice[aria-pressed="true"] {
  border-color: transparent;
  background-image: var(--aa-grad-btn);
  color: var(--aa-ink-invert);
}
.aa-list-filter__status { margin-top: var(--aa-space-3); color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
.aa-list-filter__note { margin-top: var(--aa-space-1); color: var(--aa-ink-muted); font-size: var(--aa-fs-xs); }
.aa-list-price-form {
  display: grid;
  width: min(100%, 22rem);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--aa-space-2);
  padding: var(--aa-space-2);
  border: 1px solid var(--aa-glass-outer);
  border-radius: var(--aa-radius-md);
  background-color: var(--aa-glass-solid);
}
.aa-list-price-form__field { min-width: 0; }
.aa-list-price-form__field .aa-label { line-height: var(--aa-lh-normal); }
.aa-list-price-form__field .aa-field { width: 100%; font-variant-numeric: tabular-nums; }
.aa-list-price-form__hint { grid-column: 1 / -1; color: var(--aa-ink-muted); font-size: var(--aa-fs-xs); }
.aa-list-quantity-form { display: flex; align-items: flex-end; gap: var(--aa-space-2); }
.aa-list-autosave-indicator { display: none; min-width: 2rem; min-height: var(--aa-control-h); align-items: center; justify-content: center; }
.aa-list-autosave-indicator.htmx-request { display: inline-flex; }

@media (max-width: 24.375rem) {
  .aa-list-filter { padding: var(--aa-space-3); }
  .aa-list-market__disclosure > summary { padding: var(--aa-space-3); }
  .aa-list-market__actions { padding: var(--aa-space-3); }
}

@media (max-width: 40rem) {
  .aa-list-price-form { width: 100%; grid-template-columns: minmax(0, 1fr) auto; }
}

/* Franja de agua Frutiger Aero al pie: olas, peces, plantas y burbujas en CSS puro. */
.aa-aqua-strip {
  position: relative;
  height: 7rem;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgb(227 246 255 / 0%) 0%, rgb(227 246 255 / 45%) 28%, #4fc3f7 55%, #0a6cd6 85%, #0757ac 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 18%);
  mask-image: linear-gradient(180deg, transparent 0%, black 18%);
  pointer-events: none;
}
.aa-aqua-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 25%) 60%, rgb(255 255 255 / 0%) 100%);
  opacity: 0.5;
}
.aa-aqua-strip__wave {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 3.5rem;
  border-radius: 45%;
  background-color: rgb(255 255 255 / 22%);
}
.aa-aqua-strip__wave--back { top: -2rem; animation: aa-aqua-sway 9s var(--aa-ease-standard) infinite alternate; }
.aa-aqua-strip__wave--front { top: -1.2rem; background-color: rgb(255 255 255 / 35%); animation: aa-aqua-sway 7s var(--aa-ease-standard) infinite alternate-reverse; }
.aa-aqua-strip__fish { position: absolute; top: 52%; animation: aa-aqua-swim 42s linear infinite, aa-aqua-bob 3.2s ease-in-out infinite alternate; }
.aa-aqua-strip__fish > span {
  position: relative;
  display: block;
  width: 1.9rem;
  height: 1rem;
  border-radius: 50% 60% 60% 50% / 55% 55% 55% 55%;
  background-image: linear-gradient(180deg, #ffe9a8 0%, #ffb04d 38%, #ff8a1f 62%, #d96a0b 100%);
  box-shadow: inset 0 2px 2px rgb(255 255 255 / 65%), inset 0 -3px 5px rgb(0 60 120 / 30%);
  animation: aa-aqua-wiggle 1.1s ease-in-out infinite alternate;
  transform-origin: 70% 50%;
}
.aa-aqua-strip__fish > span::before {
  content: "";
  position: absolute;
  top: 22%;
  right: 22%;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background-image: radial-gradient(circle at 35% 35%, #ffffff 0 28%, #0f2e44 32%);
}
.aa-aqua-strip__fish > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.55rem;
  transform: translateY(-50%);
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
  border-right: 0.6rem solid #ff8a1f;
}
.aa-aqua-strip__fish--one { animation-delay: 0s, 0s; }
.aa-aqua-strip__fish--two { top: 66%; animation-delay: -14s, -1s; }
.aa-aqua-strip__fish--two > span { width: 1.4rem; height: 0.8rem; background-image: linear-gradient(180deg, #ffffff 0%, #d8f3ff 38%, #4fc3f7 62%, #0a6cd6 100%); }
.aa-aqua-strip__fish--two > span::after { border-right-color: #0a6cd6; }
.aa-aqua-strip__fish--three { top: 44%; animation-delay: -28s, -2s; }
.aa-aqua-strip__fish--three > span { width: 1.2rem; height: 0.7rem; background-image: linear-gradient(180deg, #c9f2b4 0%, #7ed957 38%, #2e9e3f 62%, #16632a 100%); }
.aa-aqua-strip__fish--three > span::after { border-right-color: #16632a; }
.aa-aqua-strip__weed {
  position: absolute;
  bottom: -0.4rem;
  width: 0.9rem;
  height: 3.4rem;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background-image: linear-gradient(180deg, #7ed957 0%, #16632a 100%);
  transform-origin: bottom center;
  animation: aa-aqua-weed 5s var(--aa-ease-standard) infinite alternate;
}
.aa-aqua-strip__weed--one { left: 8%; }
.aa-aqua-strip__weed--two { left: 22%; height: 2.6rem; animation-delay: -2s; }
.aa-aqua-strip__weed--three { right: 10%; height: 3rem; animation-delay: -3.5s; }
.aa-aqua-strip__weed--tall {
  left: 46%;
  width: 0.5rem;
  height: 4.4rem;
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  background-image: linear-gradient(180deg, #a8e6a1 0%, #2e9e3f 70%, #16632a 100%);
  animation-delay: -1s;
}
.aa-aqua-strip__weed--bush {
  left: 64%;
  width: 2.2rem;
  height: 2rem;
  border-radius: 50% 50% 46% 46% / 68% 68% 32% 32%;
  background-image: radial-gradient(circle at 35% 30%, #c9f2b4 0%, #7ed957 45%, #16632a 100%);
  box-shadow: inset -4px -6px 10px rgb(0 60 30 / 35%);
  animation-delay: -4s;
}
.aa-aqua-strip__weed--fern {
  right: 26%;
  width: 1.6rem;
  height: 2.8rem;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background-image: linear-gradient(180deg, #d8f3ff 0%, #4fc3f7 55%, #0873b8 100%);
  opacity: 0.9;
  animation-delay: -2.8s;
}
.aa-aqua-strip__bubble {
  position: absolute;
  bottom: 0.5rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 70%);
  background-image: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 95%), rgb(255 255 255 / 30%) 40%, rgb(0 174 239 / 30%) 100%);
  animation: aa-aqua-rise 6s var(--aa-ease-standard) infinite;
}
@keyframes aa-aqua-sway {
  0% { transform: translateX(-2.5rem); }
  100% { transform: translateX(2.5rem); }
}
@keyframes aa-aqua-swim {
  0% { left: -8%; }
  100% { left: 104%; }
}
@keyframes aa-aqua-bob {
  0% { margin-top: -0.3rem; }
  100% { margin-top: 0.3rem; }
}
@keyframes aa-aqua-wiggle {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}
@keyframes aa-aqua-weed {
  0% { transform: rotate(-6deg); }
  100% { transform: rotate(6deg); }
}
@keyframes aa-aqua-rise {
  0% { transform: translateY(0) scale(0.7); opacity: 0.4; }
  70% { opacity: 0.9; }
  100% { transform: translateY(-5.5rem) scale(1); opacity: 0; }
}

/* --------------------------------------------------------------------------
   13. Preferencias del usuario
   -------------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .aa-glass,
  .aa-glass--blur,
  .aa-nav,
  .aa-field,
  .aa-toast,
  .aa-modal__dialog {
    background-color: var(--aa-glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .aa-modal__backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgb(8 40 70 / 70%);
  }
}

@media (prefers-contrast: more) {
  :root {
    --aa-ink: #0a2233;
    --aa-ink-muted: #24435a;
    --aa-sky-700: #04509f;
    --aa-sky-600: #044a92;
    --aa-border: #35688f;
    --aa-border-strong: #244f6f;
    --aa-glass-bg: #ffffff;
    --aa-glass-bg-strong: #ffffff;
    --aa-glass-solid: #ffffff;
  }
  .aa-glass,
  .aa-glass--blur,
  .aa-nav,
  .aa-field,
  .aa-toast,
  .aa-modal__dialog {
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .aa-field { border-color: var(--aa-border); }
}

@media (forced-colors: active) {
  .aa-btn,
  .aa-field,
  .aa-glass,
  .aa-panel {
    border: 1px solid CanvasText;
  }
  .aa-chart__track { border-color: CanvasText; background: Canvas; }
  .aa-chart__bar { background: Highlight; }
}

/* --------------------------------------------------------------------------
   15. Componentes base compartidos (Fase a — lista de compras)
   -------------------------------------------------------------------------- */
/* Chips: control segmentado / filtro en una línea. */
.aa-chips { display: flex; flex-wrap: wrap; gap: var(--aa-space-2); }
.aa-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--aa-space-1);
  min-height: var(--aa-control-h);
  padding: 0.375rem 1rem;
  border: 1px solid var(--aa-glass-outer);
  border-radius: var(--aa-radius-pill);
  background-color: var(--aa-glass-bg-strong);
  color: var(--aa-ink);
  font-size: var(--aa-fs-sm);
  font-weight: var(--aa-fw-semibold);
  cursor: pointer;
}
.aa-chip:hover { border-color: var(--aa-sky-600); }
.aa-chip:active { transform: scale(0.97); }
.aa-chip[aria-pressed="true"],
.aa-chip[aria-checked="true"] {
  background-color: var(--aa-sky-600);
  border-color: var(--aa-sky-600);
  color: #fff;
}
.aa-chip:disabled,
.aa-chip[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Botón solo-icono (papelera): área táctil 44px. */
.aa-icon-button {
  display: inline-grid;
  place-items: center;
  width: var(--aa-control-h);
  height: var(--aa-control-h);
  border: 1px solid transparent;
  border-radius: var(--aa-radius-pill);
  background: transparent;
  color: var(--aa-ink-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.aa-icon-button:hover { background-color: rgb(8 40 70 / 8%); color: var(--aa-ink); }
.aa-icon-button:active { transform: scale(0.94); }
.aa-icon-button--danger { color: #8a1f1f; }
.aa-icon-button--danger:hover { background-color: #fdecec; color: #8a1f1f; }
.aa-icon-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Texto solo para lector de pantalla (etiquetas de botones solo-icono). */
.aa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Stepper: − valor + con botones táctiles. */
.aa-stepper { display: inline-flex; align-items: stretch; gap: var(--aa-space-1); }
.aa-stepper__button {
  display: inline-grid;
  place-items: center;
  min-width: var(--aa-control-h);
  min-height: var(--aa-control-h);
  border: 1px solid var(--aa-glass-outer);
  border-radius: var(--aa-radius-pill);
  background-color: var(--aa-glass-bg-strong);
  color: var(--aa-ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.aa-stepper__button:hover { border-color: var(--aa-sky-600); }
.aa-stepper__button:active { transform: scale(0.94); }
.aa-stepper__button:disabled { opacity: 0.5; cursor: not-allowed; }
.aa-stepper__value {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--aa-fw-bold);
}


/* Estados por campo: guardando / guardado / error. */
.aa-saving { color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
.aa-saved { color: var(--aa-green-ink); font-size: var(--aa-fs-sm); font-weight: var(--aa-fw-semibold); }
.aa-field-error { color: #8a1f1f; font-size: var(--aa-fs-sm); font-weight: var(--aa-fw-semibold); }

/* Acción dentro del toast (p. ej. Deshacer). */
.aa-toast__action {
  margin-inline-start: var(--aa-space-1);
  padding: 0.25rem 0.75rem;
  min-height: 2rem;
  border: 1px solid var(--aa-sky-600);
  border-radius: var(--aa-radius-pill);
  background: transparent;
  color: var(--aa-sky-600);
  font-size: var(--aa-fs-sm);
  font-weight: var(--aa-fw-bold);
  cursor: pointer;
  white-space: nowrap;
}
.aa-toast__action:hover { background-color: var(--aa-sky-600); color: #fff; }

/* --------------------------------------------------------------------------
   18. Filtro compacto y acciones discretas (Fase d — lista de compras)
   -------------------------------------------------------------------------- */
.aa-list-filterbar { display: grid; gap: var(--aa-space-1); }
.aa-list-filterbar[hidden] { display: none; }
.aa-list-filterbar__status { color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
.aa-list-filterbar__note { color: var(--aa-ink-muted); font-size: var(--aa-fs-xs); }
/* Botón de texto discreto (44 px) para acciones secundarias. */
.aa-text-button {
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--aa-glass-outer);
  border-radius: var(--aa-radius-pill);
  background-color: var(--aa-glass-bg-strong);
  color: var(--aa-ink);
  font-size: var(--aa-fs-sm);
  font-weight: var(--aa-fw-semibold);
  cursor: pointer;
}
.aa-text-button:hover { border-color: var(--aa-sky-600); }
.aa-text-button:disabled { opacity: 0.5; cursor: not-allowed; }
.aa-text-button--danger {
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--aa-radius-pill);
  background: transparent;
  color: #8a1f1f;
  font-size: var(--aa-fs-sm);
  font-weight: var(--aa-fw-semibold);
  cursor: pointer;
}
.aa-text-button--danger:hover { color: #5f1515; background-color: #fdecec; }
.aa-text-button--danger:disabled { opacity: 0.5; cursor: not-allowed; }
.aa-list-clear { display: flex; justify-content: flex-end; }

/* --------------------------------------------------------------------------
   19. Estados vacío/error (Fase e — lista de compras)
   -------------------------------------------------------------------------- */
.aa-empty__bubbles { display: flex; align-items: flex-end; justify-content: center; gap: 0.625rem; }
.aa-empty__bubbles > span {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-image: var(--aa-grad-orb);
}
.aa-empty__bubbles > span:nth-child(2) { width: 1.5rem; height: 1.5rem; }
.aa-empty__bubbles > span:nth-child(3) { width: 0.75rem; height: 0.75rem; }
.aa-empty__cta { margin-top: var(--aa-space-4); }
.htmx-action-error .aa-btn { margin-inline-start: var(--aa-space-2); }

/* --------------------------------------------------------------------------
   20. Fila de producto y lista (Ronda 2 — reescritura responsive)
   -------------------------------------------------------------------------- */
#shopping-list-content { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (max-width: 47.999rem) {
  #shopping-list-content { display: flex; flex-direction: column; }
  #shopping-list-content > .aa-summary-bar { order: 10; margin-top: var(--aa-space-5); }
  #shopping-list-content > .aa-list-market { order: 1; }
  #shopping-list-content > .aa-list-clear { order: 11; }
  #shopping-list-content > .aa-list-filterbar { order: 0; }
}
.aa-list-items { margin: 0; padding: 0; list-style: none; }
.aa-list-items > li + li { border-top: 1px solid var(--aa-glass-outer); }
.aa-product-row {
  display: grid;
  grid-template-columns: 44px 56px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
  padding: 12px var(--aa-card-pad);
}
.aa-product-row__check { grid-column: 1; grid-row: 1; display: grid; place-items: center; }
.aa-product-row__image, .aa-product-row__thumb { grid-column: 2; grid-row: 1; display: block; }
.aa-product-row__thumb { width: 56px; height: 56px; overflow: hidden; border-radius: var(--aa-radius-md); background-color: var(--aa-sky-50); }
.aa-product-row__img { width: 100%; height: 100%; object-fit: contain; }
.aa-product-row__imgfallback { width: 100%; height: 100%; place-items: center; color: var(--aa-ink-muted); font-size: var(--aa-fs-lg); font-weight: 600; }
.aa-product-row__info { grid-column: 3; grid-row: 1; min-width: 0; display: grid; gap: 2px; }
.aa-product-row__name {
  min-width: 0; margin: 0; color: var(--aa-ink); font-size: var(--aa-fs-base); font-weight: 600;

  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.aa-product-row__brand { color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
.aa-product-row__unit { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.125rem; margin-top: 2px; color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aa-product-row__controls {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 8px;
}
.aa-product-row__subtotal { min-width: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--aa-ink); font-weight: 600; }
.aa-product-row__trash { display: grid; place-items: center; }
@media (min-width: 40rem) {
  .aa-product-row {
    grid-template-columns: 44px 56px minmax(0, 1fr) auto auto 44px;
    column-gap: var(--aa-space-3);
    row-gap: 0;
    align-items: center;
  }
  .aa-product-row__check { grid-column: 1; grid-row: 1; }
  .aa-product-row__image, .aa-product-row__thumb { grid-column: 2; grid-row: 1; }
  .aa-product-row__info { grid-column: 3; grid-row: 1; }
  .aa-product-row__controls { display: contents; }
  .aa-stepper { grid-column: 4; grid-row: 1; }
  .aa-product-row__subtotal { grid-column: 5; grid-row: 1; }
  .aa-product-row__trash { grid-column: 6; grid-row: 1; }
}
/* Tablet horizontal: columnas estables para que el subtotal nunca invada
   el botón + del stepper y todas las filas compartan las mismas coordenadas. */
@media (min-width: 40rem) and (max-width: 57.3125rem) {
  .aa-invoice-edit__item { grid-template-columns: minmax(0, 1fr) 160px minmax(250px, 1fr); justify-items: start; }
  .aa-invoice-edit__description { grid-column: 1; width: 100%; }
  .aa-invoice-edit__fields { display: grid; grid-column: 2 / 4; grid-template-columns: 160px 130px 120px; justify-content: start; gap: 12px; width: 100%; }
  .aa-invoice-edit__fields > .aa-invoice-edit__field:nth-child(1) { grid-column: 1; }
  .aa-invoice-edit__fields > .aa-invoice-edit__field:nth-child(2) { grid-column: 2; }
  .aa-invoice-edit__fields > .aa-invoice-edit__subtotal { grid-column: 3; width: 120px; }
  .aa-invoice-edit__field:nth-child(2) .aa-stepper { width: 130px; justify-content: flex-start; }
}
/* Si el ancho real no alcanza para las tres columnas, se apilan antes de
   permitir cualquier compresión o solapamiento. */
@media (min-width: 40rem) and (max-width: 57.3125rem) {
  .aa-invoice-edit__item { grid-template-columns: minmax(0, 1fr); }
  .aa-invoice-edit__description { grid-column: 1; }
  .aa-invoice-edit__fields { grid-column: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .aa-invoice-edit__fields > .aa-invoice-edit__field:nth-child(1),
  .aa-invoice-edit__fields > .aa-invoice-edit__field:nth-child(2) { grid-column: auto; }
  .aa-invoice-edit__fields > .aa-invoice-edit__subtotal { grid-column: 1 / -1; width: auto; text-align: left; }
  .aa-invoice-edit__field:nth-child(2) .aa-stepper { width: 100%; justify-content: flex-start; }
}
/* Check circular 24 px visibles con área táctil 44x44. */
.aa-check {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.aa-check__dot {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border: 2px solid var(--aa-ink-muted);
  border-radius: 50%;
  color: transparent;
  font-size: 0.8rem; line-height: 1; font-weight: 700;
}
.aa-check:hover .aa-check__dot { border-color: var(--aa-sky-600); }
.aa-check--on .aa-check__dot { border-color: var(--aa-green-ink); background-color: var(--aa-green-ink); color: #fff; }
.aa-check[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Lápiz 44 px + campo inline compacto. */
.aa-price-edit { display: flex; flex: 0 0 auto; }
.aa-price-edit__toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-block: -6px; border-radius: var(--aa-radius-pill); color: var(--aa-sky-600); cursor: pointer; list-style: none; }
.aa-price-edit__toggle::-webkit-details-marker { display: none; }
.aa-price-edit__toggle:hover { background-color: var(--aa-sky-50); }
.aa-price-edit__form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--aa-space-2); margin-top: var(--aa-space-2); }
.aa-price-edit__field .aa-field { width: 6.5rem; }
.aa-price-edit__input { display: inline-flex; align-items: center; gap: 0.25rem; }
.aa-price-edit__saving { color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
/* Encabezado de grupo: progreso a todo el ancho debajo del título. */
.aa-list-market__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  grid-template-areas: "top subtotal chevron" "progress progress progress";
  align-items: center;
  gap: 2px var(--aa-space-2);
  min-height: 44px;
  padding: var(--aa-card-pad);
  cursor: pointer;
  list-style: none;
}
.aa-list-market__summary::-webkit-details-marker { display: none; }
.aa-list-market { border-color: rgb(255 255 255 / 76%); background: linear-gradient(145deg, rgb(255 255 255 / 70%), rgb(224 248 255 / 48%)); box-shadow: 0 8px 22px rgb(10 90 150 / 10%), inset 0 1px 0 rgb(255 255 255 / 78%); }
.aa-list-market__summary { border-radius: inherit; transition: background-color var(--aa-motion-fast) var(--aa-ease-standard), transform var(--aa-motion-fast) var(--aa-ease-standard); }
.aa-list-market__summary:hover { background-color: var(--aa-sky-50); transform: translateY(-1px); }
.aa-list-market__top { grid-area: top; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; min-width: 0; }
.aa-list-market__name { color: var(--aa-ink); font-size: var(--aa-fs-lg); font-weight: 700; }
.aa-list-market__count { color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); font-variant-numeric: tabular-nums; }
.aa-list-market__progress { grid-area: progress; display: block; height: 0.25rem; margin-top: 0.375rem; border-radius: var(--aa-radius-pill); background-color: rgb(8 40 70 / 12%); overflow: hidden; }
.aa-list-market__progress > span { display: block; height: 100%; border-radius: inherit; background-image: var(--aa-grad-btn); }
.aa-list-market__subtotal { grid-area: subtotal; color: var(--aa-ink); font-size: var(--aa-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.aa-list-market__chevron { grid-area: chevron; justify-self: end; width: 0.65rem; height: 0.65rem; transform: rotate(45deg); border-right: 2px solid var(--aa-sky-700); border-bottom: 2px solid var(--aa-sky-700); transition: transform var(--aa-motion-fast) var(--aa-ease-standard); }
.aa-list-market__disclosure[open] .aa-list-market__chevron { transform: rotate(225deg); }
.aa-list-market__body { display: grid; grid-template-rows: 1fr; }
.aa-list-market__body > ul { overflow: hidden; }
.aa-list-market__actions { display: flex; justify-content: flex-end; padding: var(--aa-space-3) var(--aa-card-pad); border-top: 1px solid var(--aa-glass-outer); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .aa-list-market__body { transition: grid-template-rows var(--aa-motion-medium) var(--aa-ease-standard); }
  .aa-list-market__disclosure:not([open]) .aa-list-market__body { grid-template-rows: 0fr; }
}
/* Barra total: compacta y fija abajo en móvil; estática en escritorio. */
.aa-summary-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--aa-space-2) var(--aa-space-4);
  padding: var(--aa-space-3) var(--aa-card-pad);
  border: 1px solid var(--aa-glass-outer);
  border-radius: var(--aa-radius-xl);
  background-color: var(--aa-glass-solid);
  box-shadow: var(--aa-shadow-2);
}
@media (max-width: 47.999rem) {
  .aa-summary-bar--sticky {
    position: sticky; bottom: 0; z-index: var(--aa-z-nav);
    margin-inline: calc(-1 * var(--aa-space-4));
    border-radius: 0;
    padding-bottom: calc(var(--aa-space-3) + env(safe-area-inset-bottom));
  }
}
.aa-summary-bar__totals { display: grid; gap: 0.125rem; min-width: 0; }
.aa-summary-bar__total { font-size: var(--aa-fs-lg); color: var(--aa-ink); font-variant-numeric: tabular-nums; }
.aa-summary-bar__cur { color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); font-weight: 500; }
.aa-summary-bar__meta { color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); font-variant-numeric: tabular-nums; }
.aa-summary-bar__stores { display: flex; flex-wrap: wrap; gap: 0.25rem var(--aa-space-3); margin: 0; padding: 0; list-style: none; color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); font-variant-numeric: tabular-nums; }
.aa-list-clear { display: flex; justify-content: flex-end; }
/* --------------------------------------------------------------------------
   21. Filtros colapsables (cambios varios — búsqueda)
   -------------------------------------------------------------------------- */
.search-filters__collapse { margin-bottom: var(--aa-space-3); padding: var(--aa-space-3); border: 1px solid var(--aa-glass-outer); border-radius: var(--aa-radius-xl); background: var(--aa-glass-bg); box-shadow: var(--aa-shadow-1); }
.search-filters { margin-top: calc(-1 * var(--aa-space-3)); }
.search-filters__collapse-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aa-space-2);
  min-height: var(--aa-control-h);
  width: 100%;
  padding: 0 var(--aa-space-3);
  border: 1px solid var(--aa-border);
  border-radius: var(--aa-radius-md);
  background: var(--aa-glass-solid);
  cursor: pointer;
  color: var(--aa-sky-700);
  font-size: var(--aa-fs-sm);
  font-weight: var(--aa-fw-semibold);
}
.search-filters__collapse-summary:hover,
.search-filters__collapse-summary:focus-visible { color: var(--aa-ink); background: var(--aa-sky-50); }
.search-filters__collapse[open] .search-filters__collapse-summary { margin-bottom: var(--aa-space-3); }
/* El disparador de filtros debe leerse como acción primaria, sin salir del
   lenguaje de cristal del tema. */
.search-filters__collapse-summary { border-color: var(--aa-green-700); background: rgb(227 246 230 / 78%); color: var(--aa-green-ink); box-shadow: 0 3px 10px rgb(22 99 42 / 12%); }
.search-filters__collapse-summary:hover,
.search-filters__collapse-summary:focus-visible { background: rgb(205 239 211 / 92%); color: var(--aa-green-ink); }
.search-filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aa-space-3); margin-top: var(--aa-space-4); padding-top: var(--aa-space-3); border-top: 1px solid var(--aa-glass-outer); }
.search-filter__offer { display: inline-flex; align-items: center; justify-content: center; min-height: var(--aa-control-h); padding: 0 var(--aa-space-3); border: 1px solid var(--aa-border); border-radius: var(--aa-radius-md); background: var(--aa-glass-solid); color: var(--aa-sky-700); font-weight: var(--aa-fw-semibold); text-decoration: none; }
.search-filter__offer:hover, .search-filter__offer:focus-visible { background: var(--aa-sky-50); color: var(--aa-ink); }
.search-filter__clear { display: inline-flex; align-items: center; min-height: var(--aa-control-h); padding: 0 var(--aa-space-2); }
@media (max-width: 39.999rem) { .search-filters__actions { align-items: stretch; flex-direction: column; } .search-filter__offer, .search-filter__clear { width: 100%; } }

/* --------------------------------------------------------------------------
   22. Componentes compartidos dashboard (Fase b — KpiCard, ChartCard,
   TrendBadge, PeriodPicker, RankedList, Skeleton, EmptyState, Tooltip)
   -------------------------------------------------------------------------- */
.aa-kpi { display: grid; gap: var(--aa-space-1); padding: var(--aa-space-4); }
.aa-kpi__label { color: var(--aa-ink); font-size: var(--aa-fs-sm); font-weight: 600; }
.aa-kpi__value { color: var(--aa-ink); font-size: 2rem; font-weight: var(--aa-fw-bold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.aa-kpi__caption { color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
.aa-kpi__extra { margin-top: var(--aa-space-1); }
.aa-chart-card__header { padding: var(--aa-card-pad) var(--aa-card-pad) var(--aa-space-3); }
.aa-chart-card__subtitle { color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
.aa-chart-card__table { margin-top: var(--aa-space-3); }
.aa-chart-card__table > summary { min-height: var(--aa-control-h); display: inline-flex; align-items: center; cursor: pointer; color: var(--aa-sky-600); font-size: var(--aa-fs-sm); font-weight: var(--aa-fw-semibold); }
/* Tendencia: flecha + color + texto (nunca solo color). */
.aa-trend { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.6rem; border-radius: var(--aa-radius-pill); font-size: var(--aa-fs-xs); font-weight: var(--aa-fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aa-trend--up { background-color: #e3f6e6; color: var(--aa-green-ink); }
.aa-trend--down { background-color: #fdecec; color: #8a1f1f; }
.aa-trend--flat { background-color: #e6eef4; color: var(--aa-ink-muted); }
.aa-trend--na { background-color: #e6eef4; color: var(--aa-ink-muted); }
/* Selector de periodo: chips + navegador en una línea. */
.aa-period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--aa-space-2) var(--aa-space-4); }
.aa-period__nav { display: inline-flex; align-items: center; gap: var(--aa-space-1); }
.aa-period__label { min-width: 9rem; text-align: center; color: var(--aa-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.aa-period__half { max-width: 22rem; margin-inline: auto; }
.aa-period__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--aa-space-3); min-width: 0; }
.aa-period__status { justify-self: center; align-self: center; }
@media (min-width: 48rem) {
  .aa-period { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .aa-period__right { grid-column: 3; grid-row: 1; justify-self: end; min-height: calc(var(--aa-control-h) * 2 + var(--aa-space-2)); align-items: center; }
  .aa-period__right--mes { justify-content: flex-end; }
  .aa-period__right--quincena { flex-direction: row; }
  .aa-period__half { margin-inline: 0; }
  .aa-period__status { margin: 0; min-height: var(--aa-control-h); }
  .aa-period__row { grid-column: 2; grid-row: 1; justify-self: center; }
}
/* Ranking ordenado con posición visible. */
.aa-ranked { margin: 0; padding: 0; list-style: decimal inside; display: grid; }
.aa-ranked__row { display: list-item; padding: var(--aa-space-2) 0; border-top: 1px solid var(--aa-glass-outer); }
.aa-ranked__row:first-child { border-top: 0; }
/* Skeleton con la forma del contenido. */
.aa-skeleton { display: grid; gap: var(--aa-space-2); }
.aa-skeleton__line, .aa-skeleton__chart { border-radius: var(--aa-radius-md); background-color: rgb(8 40 70 / 10%); }
.aa-skeleton__line { height: 1rem; }
.aa-skeleton__line:nth-child(2) { width: 82%; }
.aa-skeleton__line:nth-child(3) { width: 64%; }
.aa-skeleton__chart { height: 6rem; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .aa-skeleton__line, .aa-skeleton__chart { animation: aa-skeleton-pulse 1.4s var(--aa-ease-standard) infinite; }
}
@keyframes aa-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* Tooltip accesible por hover y foco. */
.aa-tip { position: relative; display: inline-flex; }
.aa-tip__trigger {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--aa-glass-outer); border-radius: var(--aa-radius-pill);
  background-color: var(--aa-glass-bg-strong); color: var(--aa-ink-muted);
  font-size: var(--aa-fs-xs); font-weight: var(--aa-fw-bold); cursor: help;
}
.aa-tip__bubble {
  position: absolute; bottom: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 16rem; padding: var(--aa-space-2) var(--aa-space-3);
  border: 1px solid var(--aa-glass-outer); border-radius: var(--aa-radius-md);
  background-color: var(--aa-glass-bg-strong); box-shadow: var(--aa-shadow-2);
  color: var(--aa-ink); font-size: var(--aa-fs-xs); font-weight: normal; white-space: normal;
  opacity: 0; visibility: hidden;
}
.aa-tip__trigger:hover + .aa-tip__bubble, .aa-tip__trigger:focus-visible + .aa-tip__bubble { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   23. Gráficos SVG + donut (Fase d — dashboard)
   -------------------------------------------------------------------------- */
.aa-svgchart { display: block; width: 100%; height: auto; }
.aa-svgchart circle[tabindex], .aa-svgchart rect[tabindex] { outline-offset: 2px; }
.aa-chart__legend { display: flex; flex-wrap: wrap; gap: var(--aa-space-2) var(--aa-space-4); margin-top: var(--aa-space-3); color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
.aa-legend-dot { display: inline-block; width: 0.75rem; height: 0.75rem; margin-inline-end: 0.375rem; border-radius: 50%; vertical-align: baseline; }
.aa-donut { display: grid; gap: var(--aa-space-3); align-items: center; grid-template-columns: minmax(0, 1fr); }
.aa-donut__svg { width: min(100%, 11rem); margin-inline: auto; }
.aa-donut__center { fill: var(--aa-ink); font-size: 1.1rem; font-weight: var(--aa-fw-bold); font-variant-numeric: tabular-nums; }
.aa-donut__sub { fill: var(--aa-ink-muted); font-size: 0.7rem; }
.aa-donut__legend { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--aa-space-2); font-size: var(--aa-fs-sm); color: var(--aa-ink); font-variant-numeric: tabular-nums; }
@media (forced-colors: active) {
  .aa-donut__svg circle { stroke: CanvasText; }
}

/* --------------------------------------------------------------------------
   24. Ranking, insights y facturas (Fase e — dashboard)
   -------------------------------------------------------------------------- */
.aa-ranked__row { display: flex; align-items: center; justify-content: space-between; gap: var(--aa-space-3); }
.aa-ranked__row::marker { color: var(--aa-ink-muted); font-weight: var(--aa-fw-bold); }
.aa-ranked__main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; min-width: 0; }
.aa-ranked__name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aa-ink); font-weight: 600; }
.aa-ranked__value { flex: 0 0 auto; color: var(--aa-ink); font-variant-numeric: tabular-nums; }
.aa-insights { margin: var(--aa-space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--aa-space-2); color: var(--aa-ink); font-size: var(--aa-fs-sm); }
.aa-insights > li { padding-inline-start: var(--aa-space-3); border-inline-start: 3px solid var(--aa-data-main); }
.aa-bills { margin: var(--aa-space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--aa-space-2); font-size: var(--aa-fs-sm); color: var(--aa-ink); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   25. Bento dashboard (Fase f — sin overflow en móvil)
   -------------------------------------------------------------------------- */
.aa-bento > * { min-width: 0; }
.aa-svgchart { max-width: 100%; }

/* --------------------------------------------------------------------------
   26. Ronda 2 dashboard (padding único, bento, badges, ranking, bills)
   -------------------------------------------------------------------------- */
.aa-chart-card__body { padding: 0 var(--aa-card-pad) var(--aa-card-pad); }
.aa-kpi { height: 100%; align-content: start; }
/* Segmented único con radiogroup. */
.aa-seg { display: inline-flex; border: 1px solid var(--aa-glass-outer); border-radius: var(--aa-radius-pill); background-color: var(--aa-glass-bg-strong); padding: 0.25rem; gap: 0.25rem; }
.aa-seg [role="radio"] { display: inline-flex; align-items: center; min-height: var(--aa-control-h); padding: 0.375rem 1rem; border-radius: var(--aa-radius-pill); color: var(--aa-ink); font-size: var(--aa-fs-sm); font-weight: var(--aa-fw-semibold); text-decoration: none; }
.aa-seg { border-color: rgb(255 255 255 / 75%); background: rgb(255 255 255 / 42%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 78%), 0 5px 14px rgb(10 90 150 / 10%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.aa-seg [role="radio"] { transition: transform var(--aa-motion-fast) var(--aa-ease-standard), background var(--aa-motion-fast) var(--aa-ease-standard), box-shadow var(--aa-motion-fast) var(--aa-ease-standard); }
.aa-seg [role="radio"][aria-checked="true"] { background: linear-gradient(135deg, rgb(79 195 247 / 92%), rgb(10 108 214 / 88%)); color: #fff; box-shadow: 0 4px 10px rgb(10 108 214 / 24%), inset 0 1px 0 rgb(255 255 255 / 58%); }
.aa-seg [role="radio"]:hover, .aa-seg [role="radio"]:focus-visible { transform: translateY(-1px); }
.aa-seg [role="radio"][aria-checked="true"] { animation: aa-period-choice-in .32s ease-out both; }
.aa-seg--quincena [role="radio"][aria-checked="true"] { background: linear-gradient(135deg, rgb(126 211 139 / 94%), rgb(46 158 63 / 90%)); box-shadow: 0 4px 10px rgb(46 158 63 / 25%), inset 0 1px 0 rgb(255 255 255 / 58%); }
@keyframes aa-period-choice-in { from { transform: scale(.88); opacity: .55; } to { transform: scale(1); opacity: 1; } }
/* Progreso fino compartido. */
.aa-progress { display: block; height: 0.25rem; margin-top: 0.25rem; border-radius: var(--aa-radius-pill); background-color: rgb(8 40 70 / 12%); overflow: hidden; }
.aa-progress > span { display: block; height: 100%; border-radius: inherit; background-image: var(--aa-grad-btn); }
/* Badge de tienda: punto + inicial + nombre. */
.aa-mkt { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); font-weight: var(--aa-fw-semibold); white-space: nowrap; }
.aa-mkt__dot { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: #fff; font-size: 0.65rem; font-weight: var(--aa-fw-bold); }
/* Fila clicable completa. */
.aa-rowlink { display: flex; align-items: center; gap: var(--aa-space-3); padding: var(--aa-space-2) var(--aa-space-1); border-radius: var(--aa-radius-md); color: var(--aa-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.aa-rowlink:hover { background-color: var(--aa-sky-50); }
.aa-rowlink__arrow { margin-inline-start: auto; color: var(--aa-sky-600); font-weight: var(--aa-fw-bold); opacity: 0; }
.aa-rowlink:hover .aa-rowlink__arrow, .aa-rowlink:focus-visible .aa-rowlink__arrow { opacity: 1; }
/* Posición del ranking. */
.aa-ranked__pos { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background-color: var(--aa-sky-50); color: var(--aa-sky-700); font-size: var(--aa-fs-xs); font-weight: var(--aa-fw-bold); font-variant-numeric: tabular-nums; }
/* Donut: leyenda en columnas + resaltado cruzado. */
.aa-donut__legend { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 0.5rem; align-items: center; }
.aa-donut__legend li { display: contents; }
.aa-donut__legend .aa-mkt { grid-column: 1; }
.aa-donut__legend strong { grid-column: 2; text-align: right; }
.aa-donut__legend .aa-donut__pct { grid-column: 3; text-align: right; color: var(--aa-ink-muted); }
.aa-donut:has(.aa-donut__legend li:nth-child(1):hover) .aa-donut__svg circle:nth-of-type(1),
.aa-donut:has(.aa-donut__legend li:nth-child(2):hover) .aa-donut__svg circle:nth-of-type(2),
.aa-donut:has(.aa-donut__legend li:nth-child(3):hover) .aa-donut__svg circle:nth-of-type(3),
.aa-donut:has(.aa-donut__legend li:nth-child(4):hover) .aa-donut__svg circle:nth-of-type(4),
.aa-donut:has(.aa-donut__legend li:nth-child(5):hover) .aa-donut__svg circle:nth-of-type(5) { stroke-width: 27; }
/* Ejes del gráfico acumulado. */
.aa-axis { fill: var(--aa-ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.aa-gridline { stroke: var(--aa-border); stroke-width: 1; opacity: 0.45; }
.aa-hoy { stroke: var(--aa-sky-600); stroke-width: 1.5; stroke-dasharray: 4 3; }
/* Bento ≥900px (bajo xl de Tailwind). Las reglas con padre viven abajo con más especificidad. */
.aa-icon-button[aria-disabled="true"], .aa-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   27. Tokens de grilla y escala (Ronda 3 fase b — un solo gap, una escala)
   -------------------------------------------------------------------------- */
:root {
  --aa-grid-gap: 1.25rem; /* 20px: único gap de grillas dashboard */
  --aa-card-pad: 1.5rem; /* 24px escritorio */
  --aa-fs-card-title: 1.0625rem; /* 17px, 600 */
  --aa-fs-kpi: 2rem; /* 32px, 700 */
}
.aa-bento, .aa-kpi-grid { gap: var(--aa-grid-gap); }
.aa-kpi-grid > * { min-width: 0; }
.aa-kpi__value { font-size: var(--aa-fs-kpi); }
.aa-chart-card__title { color: var(--aa-ink); font-size: var(--aa-fs-card-title); font-weight: 600; }
.aa-kpi, .aa-chart-card {
  border: 1px solid rgb(255 255 255 / 72%);
  background: linear-gradient(145deg, rgb(255 255 255 / 78%), rgb(226 247 255 / 58%));
  box-shadow: 0 8px 22px rgb(10 90 150 / 10%), inset 0 1px 0 rgb(255 255 255 / 78%);
  -webkit-backdrop-filter: saturate(135%) blur(10px);
  backdrop-filter: saturate(135%) blur(10px);
}
.aa-kpi { position: relative; overflow: hidden; }
.aa-kpi::after, .aa-chart-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(120deg, rgb(255 255 255 / 38%), transparent 42%); }
.aa-kpi__label, .aa-chart-card__title { position: relative; z-index: 1; }
@media (max-width: 47.999rem) {
  :root { --aa-card-pad: 1rem; }
}
.aa-stack { gap: var(--aa-grid-gap); }

/* --------------------------------------------------------------------------
   28. Toolbar segmentada, KPIs iguales y tooltip en línea (Ronda 3 fase c)
   -------------------------------------------------------------------------- */
.aa-kpi-grid { grid-auto-rows: 1fr; }
.aa-seg--full { display: flex; width: 100%; }
.aa-seg--full [role="radio"] { flex: 1; justify-content: center; }
.aa-period { flex-direction: column; align-items: stretch; }
.aa-period__status { display: flex; }
.aa-tip { vertical-align: middle; }
.aa-tip__trigger { width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.aa-tip__i { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--aa-sky-600); border-radius: 50%; color: var(--aa-sky-600); font-size: 0.75rem; font-weight: var(--aa-fw-bold); font-style: normal; }
.aa-tip__trigger:hover .aa-tip__i { background-color: var(--aa-sky-600); color: #fff; }
.aa-period__row { display: inline-flex; align-items: center; gap: var(--aa-space-1); }

/* --------------------------------------------------------------------------
   29. Ejes, Hoy y barras quincena (Ronda 3 fase d)
   -------------------------------------------------------------------------- */
.aa-hoy-pill { fill: var(--aa-sky-600); }
.aa-hoy-label { fill: #fff; font-size: 10px; font-weight: 700; }
.aa-svgchart--bars { min-height: 180px; }
.aa-chart__legend { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.375rem 0.5rem; }
.aa-chart__legend .aa-legend-dot { width: 0.625rem; height: 0.625rem; align-self: baseline; }

/* --------------------------------------------------------------------------
   30. Ronda 4: aislamiento vidrio, filas, bills, superbar, toolbar (dashboard)
   -------------------------------------------------------------------------- */
.aa-glass { isolation: isolate; }
.aa-glass::before { z-index: -1; }
/* Fila ranking: [pos 28][cuerpo 1fr][monto] + meta + track. */
.aa-ranked__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 10px 0; }
.aa-ranked__body { min-width: 0; display: grid; gap: 4px; }
.aa-ranked__name { text-align: left; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aa-ranked__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aa-ranked__track { display: block; height: 0.25rem; border-radius: var(--aa-radius-pill); background-color: rgb(8 40 70 / 12%); overflow: hidden; }
.aa-ranked__track > span { display: block; height: 100%; border-radius: inherit; background-image: var(--aa-grad-btn); }
.aa-ranked__value { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Facturas: enlace completo 48px, 2 líneas, chevron siempre visible. */
.aa-bills .aa-rowlink { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 12px; align-items: center; min-height: 48px; }
.aa-rowlink__text { display: grid; min-width: 0; }
.aa-rowlink__text > strong { color: var(--aa-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-rowlink__amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aa-rowlink .aa-rowlink__arrow { opacity: 1; }
.aa-chart__more { margin-top: var(--aa-space-3); }
/* Barra única cuando hay una sola tienda. */
.aa-superbar { display: flex; align-items: center; gap: var(--aa-space-3); }
.aa-superbar__track { flex: 1; display: block; height: 0.75rem; border-radius: var(--aa-radius-pill); background-color: var(--aa-sky-50); overflow: hidden; }
.aa-superbar__track > span { display: block; height: 100%; background-image: var(--aa-grad-btn); }
/* Cabecera dashboard en fila (título + controles). */
.aa-dash-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--aa-space-3) var(--aa-space-5); }
/* Contexto KPI bajo la grilla. */
.aa-kpi-context { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
/* Ronda 4: toolbar en fila en escritorio + cabecera dashboard. */
.aa-dash-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--aa-space-3) var(--aa-space-5); }
@media (min-width: 56.25rem) {
  .aa-period { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 56.25rem) {
  .fz-card .fz-row { grid-template-columns: 56px minmax(0, 1fr); row-gap: 12px; }
  .fz-card .fz-row > .fz-thumb { grid-column: 1; grid-row: 1; width: 56px; }
  .fz-card .fz-row > .fz-description { grid-column: 2; grid-row: 1; }
  .fz-card .fz-row > .fz-price { grid-column: 1; grid-row: 2; }
  .fz-card .fz-row > .fz-qtyf { grid-column: 2; grid-row: 2; }
  .fz-card .fz-row > .fz-sub { grid-column: 1 / -1; grid-row: 3; }
}

/* Ronda 4: spans bento con especificidad mayor que las utilidades Tailwind. */
.aa-bento > .aa-bento-7, .aa-bento > .aa-bento-5 { min-width: 0; }
@media (min-width: 56.25rem) {
  .aa-bento > .aa-bento-7 { grid-column: span 7 / span 7; }
  .aa-bento > .aa-bento-5 { grid-column: span 5 / span 5; }
}

/* Ronda ajustes: hueco antes del botón Vaciar + variante discretas. */
.aa-list-clear { display: flex; justify-content: flex-end; margin-top: var(--aa-space-5); }
.aa-btn--danger-outline { border-color: #e3a3a3; color: #8a1f1f; gap: 0.5rem; }
.aa-btn--danger-outline:hover { background-color: #fdecec; border-color: #c77; color: #5f1515; }

/* Ronda ajustes: bento simétrico y leyenda del donut sin solapes. */
.aa-bento > div { display: flex; flex-direction: column; min-width: 0; }
.aa-bento > div > .aa-chart-card { flex: 1; }
.aa-bento-stack { display: grid; grid-template-rows: auto 1fr; gap: var(--aa-grid-gap); }
@media (min-width: 56.25rem) {
  .aa-bento > .aa-bento-8 { grid-column: span 8 / span 8; }
  .aa-bento > .aa-bento-4 { grid-column: span 4 / span 4; }
}
.aa-donut__legend > li { min-width: 0; }
.aa-donut__legend .aa-mkt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-donut__svg { max-width: 100%; }

/* Lista: fecha de compra y botón juntos a la derecha, alineados por la base. */
.aa-summary-bar__confirm { display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--aa-space-4); margin-left: auto; }
.aa-summary-bar__date { display: grid; gap: var(--aa-space-1); min-width: 12rem; }
.aa-summary-bar__date .aa-label { margin: 0; }
.aa-summary-bar__date .aa-field { width: 100%; }
.aa-summary-bar__confirm-action { display: grid; gap: var(--aa-space-2); }
.aa-summary-bar__empty-message { margin: 0; color: #8a1f1f; font-size: var(--aa-fs-sm); }
.aa-summary-bar__empty-message[hidden] { display: none; }
@media (max-width: 47.999rem) {
  .aa-summary-bar__confirm { width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; gap: var(--aa-space-3); }
  .aa-summary-bar__date { width: 100%; min-width: 0; }
  .aa-summary-bar__confirm-action > .aa-btn { width: 100%; min-height: var(--aa-control-h); }
}

/* Historial: acciones hermanas del enlace de detalle, visibles sin hover. */
.aa-history-list { display: grid; gap: var(--aa-space-3); margin: 0; padding: 0; list-style: none; }
.aa-history-row { display: flex; align-items: center; gap: var(--aa-space-3); padding: var(--aa-card-pad); }
.aa-history-row { border-color: rgb(255 255 255 / 74%); background: linear-gradient(135deg, rgb(255 255 255 / 76%), rgb(226 247 255 / 48%)); box-shadow: 0 6px 18px rgb(10 90 150 / 9%), inset 0 1px 0 rgb(255 255 255 / 78%); transition: transform var(--aa-motion-fast) var(--aa-ease-standard), box-shadow var(--aa-motion-fast) var(--aa-ease-standard); }
.aa-history-row:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(10 90 150 / 14%), inset 0 1px 0 rgb(255 255 255 / 86%); }
.aa-history-row__detail { display: flex; flex: 1 1 auto; min-width: 0; min-height: var(--aa-control-h); align-items: center; justify-content: space-between; gap: var(--aa-space-3); color: inherit; text-decoration: none; }
.aa-history-row__detail:hover .aa-history-row__main > strong { color: var(--aa-sky-700); }
.aa-history-row__main { display: grid; min-width: 0; gap: var(--aa-space-1); }
.aa-history-row__total { flex: 0 0 auto; white-space: nowrap; }
.aa-history-row__actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--aa-space-2); }
.aa-history-row__actions form { margin: 0; }
.aa-history-row__delete { color: var(--aa-ink-muted); }
.aa-history-row__delete:hover, .aa-history-row__delete:focus-visible { border-color: #e3a3a3; background-color: #fdecec; color: #8a1f1f; }
@media (max-width: 39.999rem) {
  .aa-history-row { flex-wrap: wrap; }
  .aa-history-row__detail { flex-basis: 100%; }
  .aa-history-row__actions { justify-content: flex-end; width: 100%; }
}

/* Detalle de factura: lectura sencilla y centrada; edición explícita desde Historial. */
.aa-history-detail { width: 100%; max-width: 56rem; margin-inline: auto; }
.aa-history-detail__content { min-width: 0; }
.aa-invoice-lines { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.aa-invoice-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--aa-space-3); padding: var(--aa-card-pad); border-bottom: 1px solid var(--aa-glass-outer); }
.aa-invoice-line:last-child { border-bottom: 0; }
.aa-invoice-line__description { min-width: 0; }
.aa-invoice-line__name { overflow-wrap: anywhere; font-weight: var(--aa-fw-semibold); }
.aa-invoice-line__subtotal { flex: 0 0 auto; white-space: nowrap; }
.aa-invoice-total { padding: var(--aa-card-pad); }
.aa-invoice-total__label { color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); font-weight: var(--aa-fw-semibold); }
.aa-invoice-total__value { margin-top: var(--aa-space-2); color: var(--aa-ink); font-size: var(--aa-fs-3xl); font-weight: var(--aa-fw-bold); font-variant-numeric: tabular-nums; }
.aa-invoice-total__value span { color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); font-weight: var(--aa-fw-medium); }
.aa-invoice-audit { display: grid; gap: var(--aa-space-2); margin: var(--aa-space-3) 0 0; padding-left: 1.25rem; font-size: var(--aa-fs-sm); overflow-wrap: anywhere; }
.aa-invoice-edit { overflow: visible; max-width: 100%; box-sizing: border-box; }
.aa-invoice-edit__items { margin: 0; padding: 0; list-style: none; }
.aa-invoice-edit__item { display: grid; grid-template-columns: 56px minmax(180px, 1fr) 160px 150px 96px; column-gap: 24px; align-items: center; padding: 16px var(--aa-card-pad); border-bottom: 1px solid var(--aa-glass-outer); }
.aa-invoice-edit__item > * { min-width: 0; }
.aa-invoice-edit__description { grid-column: 1 / 3; min-width: 0; }
.aa-invoice-edit__description-text { min-width: 0; overflow: hidden; }
.aa-invoice-edit__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-weight: var(--aa-fw-semibold); }
.aa-invoice-edit__fields { display: contents; }
.aa-invoice-edit__field { display: grid; min-width: 0; gap: var(--aa-space-1); }
.aa-invoice-edit__fields > .aa-invoice-edit__field:nth-child(1) { grid-column: 3; }
.aa-invoice-edit__fields > .aa-invoice-edit__field:nth-child(2) { grid-column: 4; }
.aa-invoice-edit__fields > .aa-invoice-edit__subtotal { grid-column: 5; }
.aa-money-input { position: relative; display: block; min-width: 0; }
.aa-money-input__prefix { position: absolute; left: 12px; top: 50%; z-index: 1; transform: translateY(-50%); pointer-events: none; color: var(--aa-ink-muted); font-weight: var(--aa-fw-semibold); }
.aa-money-input input { width: 100%; min-width: 0; box-sizing: border-box; height: 44px; padding: 0 12px 0 28px; border: 1px solid var(--aa-border); border-radius: 12px; background: #fff; font-variant-numeric: tabular-nums; }
.aa-stepper { display: inline-flex; align-items: center; min-width: 0; }
.aa-stepper__input { width: 44px; min-width: 44px; border: 0; background: transparent; color: inherit; text-align: center; font: inherit; appearance: textfield; }
.aa-stepper__input::-webkit-inner-spin-button, .aa-stepper__input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.aa-invoice-edit__subtotal { align-self: center; margin: 0; color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); white-space: nowrap; }
.aa-invoice-edit__subtotal strong { display: block; color: var(--aa-ink); font-size: var(--aa-fs-lg); }
.aa-invoice-edit__error { min-height: 1em; color: #8a1f1f; font-size: var(--aa-fs-xs); overflow-wrap: anywhere; }
.aa-invoice-edit__status { min-height: 1.25em; margin: 0; color: var(--aa-ink-muted); font-size: var(--aa-fs-sm); }
.aa-invoice-edit__actions { display: grid; gap: var(--aa-space-3); padding: var(--aa-card-pad); border-top: 1px solid var(--aa-glass-outer); }
.aa-invoice-edit__buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--aa-space-3); }
@media (max-width: 39.999rem) {
  .aa-invoice-edit__item { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; row-gap: 12px; padding: 12px var(--aa-card-pad); }
  .aa-invoice-edit__description { grid-column: 1 / -1; }
  .aa-invoice-edit__fields { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
  .aa-invoice-edit__fields > .aa-invoice-edit__field:nth-child(1),
  .aa-invoice-edit__fields > .aa-invoice-edit__field:nth-child(2),
  .aa-invoice-edit__fields > .aa-invoice-edit__subtotal { grid-column: auto; }
  .aa-invoice-edit__subtotal { grid-column: 1 / -1; text-align: right; }
  .aa-money-input input { width: 100%; }
  .aa-stepper { width: 100%; justify-content: space-between; }
  .aa-invoice-edit__buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .aa-invoice-edit__buttons > .aa-btn { min-height: var(--aa-control-h); }
}
@media (min-width: 40rem) and (max-width: 64rem) {
  .aa-invoice-edit__item { grid-template-columns: 56px minmax(140px, 1fr) 140px 132px 88px; column-gap: 12px; }
}
@media (max-width: 22.4375rem) { .aa-invoice-edit__fields { grid-template-columns: minmax(0, 1fr); } }
/* En teléfonos estrechos, cada control ocupa su propia fila para evitar
   solapamientos: la prioridad es legibilidad, no conservar dos columnas. */
@media (max-width: 36.25rem) {
  .aa-invoice-edit__fields { grid-template-columns: minmax(0, 1fr); }
  .aa-invoice-edit__field,
  .aa-invoice-edit__subtotal { grid-column: 1 / -1; }
  .aa-invoice-edit__subtotal { text-align: left; }
  .aa-invoice-edit__buttons { grid-template-columns: 1fr; }
}
/* El editor no fuerza cinco columnas cuando el espacio disponible cambia.
   Desde tablet en adelante la descripción ocupa su fila y los controles una
   segunda fila compartida; así nunca se montan sobre el texto. */
@media (min-width: 40rem) {
  .aa-invoice-edit__item { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 12px; }
  .aa-invoice-edit__description { grid-column: 1 / -1; }
  .aa-invoice-edit__fields { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: end; }
  .aa-invoice-edit__fields > .aa-invoice-edit__field:nth-child(1),
  .aa-invoice-edit__fields > .aa-invoice-edit__field:nth-child(2),
  .aa-invoice-edit__fields > .aa-invoice-edit__subtotal { grid-column: auto; }
  .aa-invoice-edit__subtotal { text-align: right; }
}
@media (max-width: 28.875rem) {
  .aa-invoice-edit__description { display: grid; grid-template-columns: 56px minmax(0, 1fr); }
  .aa-invoice-edit__fields { gap: 8px; }
}
/* Edición inline de precio: el formulario ocupa la fila completa y sus
   controles mantienen tamaños táctiles sin cubrir el nombre ni el subtotal. */
.aa-price-edit__input { min-width: 0; }
.aa-price-edit__input input { width: 100%; min-width: 0; box-sizing: border-box; padding-left: 28px; }
.aa-price-edit__cancel { min-width: var(--aa-control-h); min-height: var(--aa-control-h); font-size: 1.4rem; line-height: 1; }
.aa-price-edit__edit-grid { display: grid; grid-template-columns: minmax(160px, 1fr) auto; gap: 8px; align-items: end; min-width: 0; width: 100%; }
.aa-price-edit__edit-actions { display: grid; grid-template-columns: auto auto; gap: 8px; align-items: end; }
.aa-price-edit__edit-grid .aa-price-edit__saving { grid-column: 1 / -1; }
@media (max-width: 39.999rem) {
  .aa-product-row__unit { align-items: center; }
  .aa-price-edit[open] { grid-column: 1 / -1; width: 100%; }
  .aa-price-edit[open] .aa-price-edit__form { display: block; width: 100%; }
  .aa-price-edit[open] .aa-price-edit__edit-grid { grid-template-columns: minmax(0, 1fr); }
  .aa-price-edit[open] .aa-price-edit__edit-actions { grid-template-columns: auto auto; justify-content: start; }
  .aa-price-edit[open] .aa-price-edit__field { min-width: 0; }
  .aa-price-edit[open] .aa-price-edit__field .aa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .aa-price-edit[open] .aa-price-edit__form .aa-btn { min-height: var(--aa-control-h); }
  .aa-price-edit__saving { grid-column: 1 / -1; }
}

/* Iconos dentro de botones táctiles: sin hueco de línea base ni recorte óptico. */
.aa-icon-button > svg { display: block; flex-shrink: 0; }
.aa-icon-button > svg[hidden] { display: none; }

/* Miniatura de producto en el detalle de factura (misma presencia que en Lista). */
.aa-invoice-thumb { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: var(--aa-radius-md); background-color: var(--aa-sky-50); align-self: center; }
.aa-invoice-thumb__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.aa-invoice-thumb__fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--aa-ink-muted); font-size: var(--aa-fs-lg); font-weight: var(--aa-fw-semibold); }
.aa-invoice-line__description { flex: 1 1 auto; min-width: 0; }
.aa-invoice-line__description-text { min-width: 0; }
.aa-invoice-edit__description { display: flex; align-items: center; gap: var(--aa-space-3); }

/* Lista: el formulario de precio nunca desborda la tarjeta. */
.aa-product-row__info, .aa-product-row__unit { min-width: 0; }
.aa-price-edit { min-width: 0; max-width: 100%; }
.aa-price-edit__form { min-width: 0; }
.aa-price-edit__form .aa-field { min-width: 0; width: 100%; max-width: 9rem; }
@media (max-width: 39.999rem) {
  .aa-product-row__unit { flex-wrap: wrap; }
  .aa-price-edit[open] { display: block; flex: 1 1 100%; min-width: 0; }
  .aa-price-edit[open] > .aa-price-edit__toggle { margin-bottom: var(--aa-space-2); }
  .aa-price-edit__form { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .aa-price-edit__form .aa-field { max-width: none; }
}
@media (max-width: 39.999rem) {
  .aa-price-edit[open] .aa-price-edit__form { display: block; }
  .aa-price-edit[open] .aa-price-edit__edit-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* Panel de cuenta: acciones separadas y táctiles. */
/* Factura: implementación fz aislada, con cuatro hijos directos por fila. */
.fz-card { min-width: 0; max-width: 100%; }
.fz-card .fz-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 150px 110px; grid-template-rows: auto; column-gap: 16px; align-items: center; width: 100%; padding: 20px 24px; box-sizing: border-box; position: static; }
.fz-card .fz-row + .fz-row { border-top: 1px solid rgb(120 170 210 / 35%); }
.fz-card .fz-row > * { min-width: 0; margin: 0; position: static; transform: none; float: none; grid-row: 1; }
.fz-card .fz-row > :nth-child(1) { grid-column: 1; }
.fz-card .fz-row > :nth-child(2) { grid-column: 2; }
.fz-card .fz-row > :nth-child(3) { grid-column: 3; }
.fz-card .fz-row > :nth-child(4) { grid-column: 4; }
.fz-product { display: flex; align-items: center; gap: 16px; min-width: 0; }
.fz-product .aa-invoice-thumb { width: 64px; height: 64px; flex: none; }
.fz-name { min-width: 0; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; display: block; overflow: visible; }
.fz-name h2 { margin: 0; font: inherit; }
.fz-store { display: block; font-weight: 400; opacity: .75; }
.fz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fz-label { font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.fz-price input { width: 100%; min-width: 0; height: 48px; box-sizing: border-box; }
.fz-field .aa-stepper { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.fz-field .aa-stepper__button { flex: none; width: 44px; height: 44px; }
.fz-field .aa-stepper__input { flex: 1; min-width: 28px; text-align: center; }
.fz-sub { align-items: flex-end; text-align: right; }
.fz-sub strong { font-size: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Compatibilidad móvil: conserva el apilado que ya tenía la factura. */
@media (max-width: 45rem) {
  .fz-card .fz-row { grid-template-columns: 56px minmax(0, 1fr); }
  .fz-card .fz-row > .fz-thumb { grid-column: 1; grid-row: 1; width: 56px; }
  .fz-card .fz-row > .fz-description { grid-column: 2; grid-row: 1; }
  .fz-card .fz-row > .fz-price { grid-column: 1; grid-row: 2; }
  .fz-card .fz-row > .fz-qtyf { grid-column: 2; grid-row: 2; }
  .fz-card .fz-row > .fz-sub { grid-column: 1 / -1; grid-row: 3; }
}
/* Factura fz mobile-first: apilado sin desbordamiento. */
.fz-card { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
.fz-card .fz-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; min-width: 0; padding: 12px var(--aa-card-pad); box-sizing: border-box; overflow: visible; }
.fz-card .fz-row > * { min-width: 0; max-width: 100%; margin: 0; position: static; transform: none; float: none; }
.fz-product, .fz-price, .fz-qtyf, .fz-sub, .fz-thumb, .fz-description { grid-column: 1; grid-row: auto; min-width: 0; width: 100%; }
.fz-thumb { display: grid; place-items: center; }
.fz-description { min-width: 0; }
.fz-product { display: flex; align-items: center; gap: 12px; }
.fz-product .aa-invoice-thumb { width: 56px; height: 56px; flex: 0 0 56px; }
.fz-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; display: block; overflow: visible; }
.fz-price input { width: 100%; min-width: 0; box-sizing: border-box; }
.fz-qtyf .aa-stepper { width: 100%; min-width: 0; justify-content: space-between; }
.fz-sub { align-items: flex-start; text-align: left; }
.fz-sub strong { white-space: nowrap; }
.fz-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px var(--aa-card-pad) 16px; }
@media (min-width: 56.25rem) {
  .fz-card .fz-row { grid-template-columns: 56px minmax(0, 1fr) 140px 150px 110px; column-gap: 16px; row-gap: 0; align-items: center; padding: 20px 24px; }
  .fz-thumb { grid-column: 1; grid-row: 1; justify-self: stretch; width: 56px; }
  .fz-description { grid-column: 2; grid-row: 1; justify-self: stretch; width: 100%; }
  .fz-name { width: 100%; }
  .fz-card .fz-row { grid-template-columns: 56px minmax(0, 1fr) 140px 150px 110px; }
  .fz-price { grid-column: 3; grid-row: 1; }
  .fz-qtyf { grid-column: 4; grid-row: 1; }
  .fz-price, .fz-qtyf, .fz-sub { width: 100%; justify-self: stretch; align-items: center; text-align: center; }
  .fz-price input, .fz-qtyf .aa-stepper { width: 100%; }
  .fz-sub { grid-column: 5; grid-row: 1; }
  .fz-actions { display: flex; justify-content: flex-end; padding: 16px 24px 20px; }
}
/* Factura: columnas estables en escritorio, sin variar por el contenido. */
@media (min-width: 51.3125rem) {
  .aa-invoice-edit__item { display: grid; grid-template-columns: minmax(0, 1fr) 150px 170px 110px; gap: 20px; padding: 20px 24px; align-items: center; overflow: hidden; box-sizing: border-box; }
  .aa-invoice-edit__item > * { min-width: 0; }
  .aa-invoice-edit__description { grid-column: 1; }
  .aa-invoice-edit__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; min-width: 0; }
  .aa-invoice-edit__fields { display: contents; }
  .aa-invoice-edit__fields > .aa-invoice-edit__field { grid-column: auto; min-width: 0; }
  .aa-invoice-edit__metrics { display: contents; }
  .aa-invoice-edit__subtotal { grid-column: 4; min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; }
  .aa-invoice-edit__actions { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px 20px; }
}
/* Factura: layout fx aislado de utilidades de Tailwind. */
.fx-card { min-width: 0; max-width: 100%; }
.fx-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 150px 100px; column-gap: 16px; align-items: center; width: 100%; padding: 20px 24px; box-sizing: border-box; border-bottom: 1px solid rgb(120 170 210 / 35%); }
.fx-row > * { min-width: 0; }
.fx-product { display: flex; align-items: center; gap: 16px; min-width: 0; grid-column: 1; }
.fx-product .aa-invoice-thumb { flex: none; }
.fx-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-weight: 700; }
.fx-store { display: block; font-weight: 400; opacity: .75; }
.fx-fields { display: contents; }
.fx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.fx-label { font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.fx-fields > .fx-field:first-child { grid-column: 2; }
.fx-metrics { display: contents; }
.fx-metrics > .fx-field:first-child { grid-column: 3; }
.fx-sub { grid-column: 4; align-items: flex-end; text-align: right; }
.fx-sub strong { display: block; max-width: 100%; font-size: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid rgb(120 170 210 / 35%); }
@media (max-width: 45rem) {
  .fx-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .fx-product { grid-column: 1 / -1; }
  .fx-fields { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .fx-fields > .fx-field:first-child, .fx-metrics > .fx-field:first-child { grid-column: auto; }
  .fx-metrics { display: contents; }
  .fx-sub { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; text-align: right; }
}
.aa-history-delete-button { display: inline-flex; align-items: center; gap: var(--aa-space-2); }
.aa-history-delete-button svg { display: block; }
.aa-history-delete-button:hover, .aa-history-delete-button:focus-visible { color: #7a1226; background: rgb(255 225 231 / 82%); border-color: #e58aa0; }
.aa-invoice-detail-item { background: linear-gradient(135deg, rgb(255 255 255 / 72%), rgb(226 247 255 / 48%)); transition: background-color var(--aa-motion-fast) var(--aa-ease-standard), transform var(--aa-motion-fast) var(--aa-ease-standard); }
.aa-invoice-detail-item:hover { background: linear-gradient(135deg, rgb(255 255 255 / 84%), rgb(224 248 255 / 66%)); transform: translateY(-1px); }
.aa-invoice-detail-meta { display: flex; flex-wrap: wrap; gap: var(--aa-space-2); margin-top: var(--aa-space-2); }
.aa-invoice-detail-meta > span { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 1px solid rgb(10 108 214 / 18%); border-radius: var(--aa-radius-pill); background: rgb(255 255 255 / 52%); color: var(--aa-ink-muted); font-size: var(--aa-fs-xs); }
.aa-invoice-detail-meta small { font-weight: var(--aa-fw-semibold); }
.aa-invoice-detail-meta strong { color: var(--aa-ink); font-size: var(--aa-fs-sm); font-variant-numeric: tabular-nums; }
.hs-total { position: relative; overflow: visible; padding: 22px 24px; border: 1.5px solid rgb(255 255 255 / 78%); border-radius: 28px; background: linear-gradient(180deg, #2e9e55, #14692f); color: #fff; box-shadow: 0 10px 24px rgb(20 105 47 / 22%), inset 0 1px 0 rgb(255 255 255 / 48%); }
.hs-total::before { content: ""; position: absolute; inset: 0 8% 52%; border-radius: inherit; background: linear-gradient(rgb(255 255 255 / 32%), transparent); pointer-events: none; }
.hs-total h2, .hs-total p { position: relative; z-index: 1; }
.hs-total h2 { font-size: var(--aa-fs-sm); font-weight: 700; }
.hs-total p { margin: 6px 0 0; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hs-total p span { font-size: var(--aa-fs-sm); font-weight: 600; }
.hs-item { min-width: 0; list-style: none; }
.hs-link { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 220px 120px 24px; gap: 16px; align-items: center; min-width: 0; padding: 18px 20px; border: 1.5px solid rgb(255 255 255 / 82%); border-radius: 24px; background: rgb(255 255 255 / 70%); color: var(--aa-ink); text-decoration: none; box-shadow: 0 8px 20px rgb(10 90 150 / 10%), inset 0 1px 0 rgb(255 255 255 / 82%); backdrop-filter: blur(10px); transition: transform var(--aa-motion-fast) var(--aa-ease-standard), box-shadow var(--aa-motion-fast) var(--aa-ease-standard); }
.hs-link::before { content: ""; position: absolute; inset: 0 5% 54%; border-radius: inherit; background: linear-gradient(rgb(255 255 255 / 55%), transparent); pointer-events: none; }
.hs-link:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgb(79 195 247 / 24%), 0 0 14px rgb(111 214 255 / 28%); }
.hs-link:focus-visible { outline: 3px solid #0b6fd0; outline-offset: 3px; }
.hs-main, .hs-date, .hs-amount, .hs-chevron { position: relative; z-index: 1; min-width: 0; }
.hs-main { display: grid; gap: 3px; }
.hs-main strong { font-weight: 700; }
.hs-main span, .hs-date { color: #4a6378; font-size: var(--aa-fs-sm); }
.hs-date { white-space: nowrap; }
.hs-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hs-chevron { color: var(--aa-sky-700); font-size: 1.8rem; line-height: 1; text-align: right; }
.hs-pagination { display: flex; align-items: center; justify-content: center; gap: var(--aa-space-3); flex-wrap: wrap; margin-top: var(--aa-space-4); color: #4a6378; font-size: var(--aa-fs-sm); }
.pf-profile { display: grid; gap: 20px; width: min(640px, 100%); margin: 24px auto 0; min-width: 0; }
.pf-section { position: relative; padding: 24px; border: 1.5px solid rgb(255 255 255 / 82%); border-radius: 24px; background: rgb(255 255 255 / 70%); box-shadow: 0 10px 26px rgb(10 90 150 / 12%), inset 0 1px 0 rgb(255 255 255 / 86%); backdrop-filter: blur(12px); }
.pf-section::before { content: ""; position: absolute; inset: 0 8% 72%; border-radius: inherit; background: linear-gradient(rgb(255 255 255 / 50%), transparent); pointer-events: none; }
.pf-section h2 { position: relative; font-size: 20px; font-weight: 700; }
.pf-section p { color: #4a6378; }
.pf-section .aa-label { display: block; margin-bottom: 6px; color: #294b68; font-size: 14px; font-weight: 600; }
.pf-section .aa-field { min-height: 48px; border: 1px solid #8bb6dc; border-radius: 16px; background: rgb(255 255 255 / 88%); box-shadow: inset 0 2px 5px rgb(10 90 150 / 8%); }
.pf-section .aa-field:focus-visible { border-color: #0b6fd0; outline: 0; box-shadow: 0 0 0 4px rgb(63 143 201 / 30%), inset 0 2px 5px rgb(10 90 150 / 8%); }
.pf-section label > .flex { position: relative; display: block; }
.pf-section label > .flex .aa-field { width: 100%; padding-right: 52px; }
.pf-section label > .flex .aa-icon-button { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border-radius: 14px; }
.pf-section .aa-btn { min-height: 48px; border-radius: 999px; }
.pf-section .aa-btn--primary { position: relative; overflow: hidden; border-color: rgb(255 255 255 / 70%); background: linear-gradient(180deg, rgb(124 196 247 / 92%), rgb(42 123 208 / 94%)); color: #fff; text-shadow: 0 1px 2px rgb(10 60 120 / 60%); box-shadow: 0 6px 14px rgb(42 123 208 / 24%); }
.pf-section .aa-btn--primary:hover { box-shadow: 0 8px 20px rgb(79 195 247 / 38%); }
.pf-section .aa-btn--primary:active { transform: scale(.97); }
@media (max-width: 40rem) { .pf-profile { margin-top: 12px; } .pf-section { padding: 18px; } .pf-section .aa-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pf-section .aa-btn { transition: none; } }
@media (max-width: 56.25rem) { .hs-link { grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; padding: 16px; } .hs-main { grid-column: 1; grid-row: 1; } .hs-amount { grid-column: 2; grid-row: 1; } .hs-date { grid-column: 1 / -1; grid-row: 2; } .hs-chevron { grid-column: 2; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .hs-link { transition: none; } }
.dv-card { min-width: 0; max-width: 100%; margin: 0; padding: 0; list-style: none; border: 1px solid var(--aa-glass-outer); border-radius: var(--aa-radius-xl); background: var(--aa-glass-bg); }
.dv-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 110px 90px 130px; gap: 16px; align-items: center; min-width: 0; padding: 18px 24px; border-bottom: 1px solid rgb(120 170 210 / 25%); box-sizing: border-box; }
.dv-row > * { min-width: 0; }
.dv-product { display: contents; }
.dv-product .aa-invoice-thumb { grid-column: 1; width: 64px; height: 64px; border: 1px solid var(--aa-glass-outer); border-radius: var(--aa-radius-md); background: #fff; }
.dv-name-wrap { grid-column: 2; min-width: 0; }
.dv-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; color: var(--aa-ink); font-weight: 700; line-height: 1.3; }
.dv-field, .dv-subtotal { display: grid; gap: 4px; min-width: 0; }
.dv-field span, .dv-subtotal span { color: var(--aa-ink-muted); font-size: var(--aa-fs-xs); font-weight: 600; }
.dv-field strong, .dv-subtotal strong { color: var(--aa-ink); font-size: var(--aa-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.dv-subtotal { grid-column: 5; text-align: right; }
.dv-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-radius: var(--aa-radius-xl); background: linear-gradient(180deg, #2e9e55, #14692f); color: #fff; box-shadow: 0 8px 20px rgb(20 105 47 / 22%), inset 0 1px 0 rgb(255 255 255 / 45%); }
.dv-total h2 { font-size: var(--aa-fs-lg); font-weight: 700; }
.dv-total p { margin: 0; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dv-total p span { font-size: var(--aa-fs-sm); font-weight: 600; opacity: .9; }
@media (max-width: 56.25rem) {
  .dv-row { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .dv-product .aa-invoice-thumb { grid-column: 1; }
  .dv-name-wrap { grid-column: 2; }
  .dv-field { grid-column: auto; }
  .dv-price { grid-column: 1; }
  .dv-qty { grid-column: 2; }
  .dv-subtotal { grid-column: 1 / -1; padding-top: 10px; border-top: 1px dashed rgb(120 170 210 / 45%); text-align: right; }
  .dv-total { padding: 16px; }
}
.aa-pagination { display: flex; align-items: center; justify-content: center; gap: var(--aa-space-3); flex-wrap: wrap; }
.aa-invoice-edit__metrics { display: grid; grid-template-columns: minmax(130px, 1fr) 120px; gap: 12px; align-items: end; min-width: 0; padding: 8px 0; box-sizing: border-box; }
.aa-invoice-edit__fields > .aa-invoice-edit__field { padding: 0 8px; box-sizing: border-box; }
.aa-invoice-edit__metrics > * { min-width: 0; padding: 0 8px; box-sizing: border-box; }
@media (min-width: 40rem) {
  .aa-invoice-edit__item { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); column-gap: 16px; row-gap: 12px; align-items: start; }
  .aa-invoice-edit__description { grid-column: auto; width: auto; }
  .aa-invoice-edit__fields { display: contents; }
  .aa-invoice-edit__fields > .aa-invoice-edit__field,
  .aa-invoice-edit__metrics { grid-column: auto; }
}
@media (max-width: 46.6875rem) and (min-width: 40rem) {
  .aa-invoice-edit__item { grid-template-columns: minmax(0, 1fr); }
  .aa-invoice-edit__description,
  .aa-invoice-edit__fields > .aa-invoice-edit__field,
  .aa-invoice-edit__metrics { grid-column: 1; }
}
@media (max-width: 36.25rem) {
  .aa-invoice-edit__metrics { grid-template-columns: minmax(0, 1fr); }
  .aa-invoice-edit__subtotal { text-align: left; }
}
@media (max-width: 28.875rem) {
  .aa-invoice-edit__description { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; }
}
@media (min-width: 40rem) and (max-width: 57.3125rem) {
  .aa-invoice-edit__fields { width: 100%; min-width: 0; box-sizing: border-box; }
  .aa-invoice-edit__metrics { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .aa-invoice-edit__subtotal { text-align: left; }
}