/* TuTrend v2 — soft-tech vibrant aesthetic.
   En migración desde "DROPI · RADAR — Industrial Ops Terminal" (legacy).

   Estrategia: tokens v2 nuevos (--ink, --coral, --shadow-1, --font-display,
   etc.) coexisten con los legacy (--bg, --text, --accent, --display, --body).
   La migración por fases reemplaza progresivamente uso de tokens legacy por
   los v2. Por ahora ambos viven en paralelo — la UI sigue rendereando con los
   legacy hasta que cada componente se migra al shell + skin v2.

   Plan: ver `/Users/jeffersonardila/.claude/plans/hola-me-gustaria-que-bright-petal.md`
*/

:root {
  /* ─── Tokens v2 — paleta alineada con la landing (modo claro default, rediseño 2026-06-01) ─── */

  /* Surfaces & lines (light theme — papel crema, navy ink) */
  --bg-soft: #f4eee2;
  --line: rgba(10,12,20,.08);
  --line-2: rgba(10,12,20,.14);

  /* Ink (text colors, near-black sobre gris neutro).
     Cambio 2026-06-01: paleta alineada con landing (neutral/Inter).
     Valores previos eran navy-on-cream (Paper palette). */
  --ink: #0A0A0B;
  --ink-2: #2a2f3a;
  --ink-3: #565b66;
  --ink-4: #6e727d;
  --ink-5: #9a9ea8;

  /* Accent — azul de la landing (#2E7DF6 family) */
  --accent-2: #6BA8FF;
  --accent-ink: #ffffff;

  /* Coral (secundario warm) */
  --coral: oklch(0.72 0.18 25);
  --coral-soft: oklch(0.94 0.06 25);

  /* Semánticos v2 (separados de los legacy --warn/--info/--gold/--magenta) */
  --lime: oklch(0.78 0.18 145);
  --lime-soft: oklch(0.94 0.08 145);
  --amber: oklch(0.78 0.16 75);
  --amber-soft: oklch(0.95 0.07 75);
  --blue: oklch(0.58 0.16 245);
  --blue-soft: oklch(0.94 0.04 245);
  --rust: oklch(0.62 0.20 28);
  --rust-soft: oklch(0.95 0.05 28);
  /* --magenta v2: convive con el legacy --magenta. Para uso v2 usar --v2-magenta */
  --v2-magenta: oklch(0.62 0.24 340);
  --v2-magenta-soft: oklch(0.94 0.06 340);

  /* Tokens "ink" para texto sobre los `*-soft` backgrounds. Los `--lime/-amber/
     -blue` originales son brillantes (luminosity 0.58-0.78) → buen contraste
     en LED dots / íconos sobre superficies oscuras, pero bajo contraste cuando
     se usan como texto sobre los `-soft` claros (0.94-0.95). Estos tokens son
     versiones MÁS OSCURAS pensadas EXCLUSIVAMENTE para texto en pills/badges.
     En dark mode (abajo) hacen passthrough al brillante (el bg `-soft` ahí es
     oscuro y el texto necesita ser claro). */
  --lime-ink: oklch(0.42 0.18 145);
  --amber-ink: oklch(0.46 0.16 75);
  --blue-ink: oklch(0.42 0.18 245);
  --rust-ink: oklch(0.46 0.20 28);
  --v2-magenta-ink: oklch(0.46 0.22 340);

  /* Shadows v2 */
  --shadow-1: 0 1px 2px #11111110, 0 4px 12px #1111110a;
  --shadow-2: 0 2px 6px #11111114, 0 12px 36px #11111110;
  --shadow-pop: 0 8px 32px #1111111c, 0 32px 80px #11111122;
  /* Glow contenido (no se desborda). Antes 8px 28px que se proyectaba
     hacia afuera del canvas y se veía a través del skeleton overlay
     al cambiar de sección. */
  --shadow-glow: 0 2px 10px color-mix(in oklab, #2E7DF6 25%, transparent);

  /* Radii v2 */
  --radius-card: 16px;
  --radius-card-lg: 20px;
  --radius-chip: 8px;
  --radius-btn: 12px;
  --radius-pill: 999px;

  /* Easings v2 */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Fonts v2 */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-serif: 'Inter', system-ui, sans-serif;

  /* Layout v2 */
  --topbar-h: 64px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 76px;

  /* ─── Tokens LEGACY remapeados a valores v2 (modo claro default) ─── */
  /* Phase 1: estos nombres legacy ahora apuntan a colores v2. Cualquier
     componente legacy que use `var(--bg)`, `var(--surface)`, `var(--accent)`,
     etc. va a renderear con la nueva paleta soft-tech. La forma (radius,
     shadows, layout) sigue siendo legacy hasta Phase 2. */

  --bg: #F6F6F7;
  --bg-overlay: rgba(46,125,246,0.04);
  --surface: #ffffff;
  --surface-2: rgba(10,12,20,.04);
  --surface-3: rgba(10,12,20,.07);
  --border: var(--line);
  --border-bright: var(--line-2);
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-faint: var(--ink-4);

  /* Glass (sidebar/topbar) + orb de fondo */
  --glass: rgba(255,255,255,.72);
  --glass-brd: rgba(10,12,20,.08);
  --orb-op: .05;
  /* Fondo SÓLIDO elevado para popovers/tooltips/dropdowns — opaco y distinto del
     `--bg` de la página (los `--surface` son translúcidos y no separan del fondo). */
  --popover-bg: #ffffff;

  --accent: #2E7DF6;
  --accent-glow: rgba(46,125,246,.30);
  --accent-soft: color-mix(in srgb, #2E7DF6 12%, transparent);
  --accent-press: #1B5FD0;

  /* Semánticos legacy → ahora apuntan a v2 semánticos */
  --warn: var(--rust);
  --warn-soft: var(--rust-soft);
  --info: var(--blue);
  --info-soft: var(--blue-soft);
  --gold: var(--amber);
  --gold-soft: var(--amber-soft);
  --magenta: var(--v2-magenta);
  --magenta-soft: var(--v2-magenta-soft);

  /* Legacy fonts (alias a los v2 para heredar Inter) */
  --display: var(--font-display);
  --body: var(--font-sans);
}

/* ─── Modo oscuro v2 — paleta alineada con la landing (casi-negro, rediseño 2026-06-01) ─── */
[data-theme="dark"] {
  /* Surfaces & lines (dark theme — pizarra azulada profesional) */
  --bg-soft: #101626;
  --line: rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.16);

  /* Ink invertido para dark theme — tono frío, descansado.
     Cambio 2026-05-10: bumpeo de ink-3/4/5 hacia más claros para
     que los textos secundarios (hints, labels muted, captions, fórmulas
     entre paréntesis) tengan contraste legible sobre el bg casi-negro #0A0A0B.
     Valores previos quedaban casi invisibles. */
  --ink: #F4F5F7;
  --ink-2: rgba(244,245,247,.86);
  --ink-3: rgba(244,245,247,.62);
  --ink-4: rgba(244,245,247,.50);
  --ink-5: rgba(244,245,247,.34);

  /* Accent — mismo azul #2E7DF6 que en claro (coherente con la landing) */
  --accent-2: #6BA8FF;

  /* Coral intensificado */
  --coral: oklch(0.78 0.18 25);
  --coral-soft: oklch(0.32 0.08 25);

  /* Semánticos dark */
  --lime: oklch(0.85 0.20 145);
  --lime-soft: oklch(0.32 0.10 145);
  --amber: oklch(0.82 0.18 75);
  --amber-soft: oklch(0.32 0.08 75);
  --blue: oklch(0.74 0.18 245);
  --blue-soft: oklch(0.30 0.08 245);
  --rust: oklch(0.74 0.20 28);
  --rust-soft: oklch(0.32 0.10 28);
  --v2-magenta: oklch(0.74 0.24 340);
  --v2-magenta-soft: oklch(0.32 0.10 340);

  /* En dark mode los `-soft` son oscuros (0.30-0.32) y el texto necesita ser
     brillante para contraste — pass-through al token brillante. */
  --lime-ink: var(--lime);
  --amber-ink: var(--amber);
  --blue-ink: var(--blue);
  --rust-ink: var(--rust);
  --v2-magenta-ink: var(--v2-magenta);

  /* Shadows dark */
  --shadow-1: 0 1px 2px #00000060;
  --shadow-2: 0 4px 16px #00000080;
  --shadow-pop: 0 16px 48px #000000aa, 0 0 0 1px var(--line-2);
  /* Glow contenido en dark: 12px blur en lugar de 36px que se desbordaba
     del canvas y atravesaba el skeleton durante transiciones de sección. */
  --shadow-glow: 0 2px 12px color-mix(in oklab, #2E7DF6 35%, transparent);

  /* Remap legacy tokens a la paleta oscura casi-negra de la landing */
  --bg: #0A0A0B;
  --bg-overlay: rgba(46,125,246,0.06);
  --surface: rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.07);
  --surface-3: rgba(255,255,255,.10);
  --border: var(--line);
  --border-bright: var(--line-2);
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-faint: var(--ink-4);

  --glass: rgba(16,17,21,.55);
  --glass-brd: rgba(255,255,255,.10);
  --orb-op: .14;
  /* Popover sólido elevado: gris-neutro opaco claramente por encima del bg casi-negro
     (#0A0A0B) para que el tooltip se separe del fondo y no parezca translúcido. */
  --popover-bg: #1b1d24;

  --accent: #2E7DF6;
  --accent-glow: rgba(46,125,246,.45);
  --accent-soft: color-mix(in srgb, #2E7DF6 16%, transparent);
  --accent-press: #1B5FD0;
  --accent-ink: #ffffff;
}

/* ──────────────────────────────────────────────────────────────────────
   v2 keyframes — animaciones del nuevo design system. Algunas conviven
   con las legacy (page-loader-*, login-in, etc.) hasta que las pantallas
   se migren al shell v2. NO renombrar ni borrar las legacy en esta fase.
   ────────────────────────────────────────────────────────────────────── */

/* Background blobs drift — radial gradients del body en light theme */
@keyframes blob-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.05); }
  66%  { transform: translate(-20px, 30px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Shine glossy — recorre brand mark, scanner-bar-fill, etc. */
@keyframes shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Pulse — LEDs, status dots */
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.7; }
}

/* Loader brand mark "respira" (escala + radius morph) */
@keyframes mark-breathe {
  0%, 100% { transform: scale(1)    rotate(0deg);    border-radius: 32px; }
  50%      { transform: scale(1.05) rotate(-3deg);   border-radius: 40px; }
}

/* Loader brand mark — sweep diagonal de brillo */
@keyframes mark-shine {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}

/* Halo orbital del loader — anillo dashed rotando */
@keyframes halo-spin {
  to { transform: rotate(360deg); }
}

/* Wordmark del loader — gradient animado recorriendo el texto */
@keyframes word-shine {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* Ping expansivo — radar icon (scanner card) */
@keyframes ping {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Sweep — línea giratoria del radar icon */
@keyframes sweep {
  to { transform: rotate(360deg); }
}

/* Borde inferior animado del scanner card (gradient violeta-coral en loop) */
@keyframes scanner-bottom {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* Línea de scan vertical — cruza el thumbnail del producto en evaluación */
@keyframes scan-line {
  0%   { top: 0%;   opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Entrada con resorte — cards al aparecer */
@keyframes rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Page-in transition — al llegar a una nueva sección */
@keyframes pageIn {
  from { transform: translateY(8px); opacity: 0; filter: blur(4px); }
  to   { transform: translateY(0);   opacity: 1; filter: blur(0); }
}

/* Skeleton shimmer — placeholder loading */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* Loadsweep — barra de progreso indeterminate */
@keyframes loadsweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Track-sweep — sheen sobre fill de barra de progreso */
@keyframes track-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

html {
  background: var(--bg);
  /* Reserva SIEMPRE el espacio de la scrollbar para que el lock del skeleton
     (overflow:hidden al navegar entre secciones) no genere un salto del sidebar/
     topbar cuando la scrollbar desaparece. En macOS (overlay scrollbars) es no-op. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  min-height: 100vh;
  background-color: var(--bg);
  /* v2: bg sólido warm off-white. Los blobs decorativos van como
     pseudo-elements del body (::before/::after) para drift animation. */
  background-attachment: fixed;
  letter-spacing: -0.01em;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
}

/* Background blobs removidos 2026-05-10 — Jefferson prefirió bg plano sin
   tintes ambientales para unificar look con el resto de la decisión "sin
   gradientes". Los pseudo-elementos quedan declarados pero invisibles para
   no romper si algún componente legacy hace `body::before` queries. */
body::before,
body::after {
  display: none;
}

/* Legacy `.scanline` — quitamos la animación porque el efecto v2 son los
   blobs. Mantenemos la clase para no romper templates que la incluyan;
   queda inert. */
.scanline {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
select,
input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* iOS Safari: quita el recuadro azul (tap-highlight) al tocar botones/links —
   se veía sobre todo en la × de los modales/sheets. Y el focus ring por tap o
   click se elimina con `:focus:not(:focus-visible)`, conservando el outline de
   teclado vía `:focus-visible` (accesibilidad intacta). Global → cubre todos los
   modales del app. (2026-06-05) */
button,
a,
label,
summary,
select,
input,
textarea,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}
:focus:not(:focus-visible) {
  outline: none;
}
/* iOS Safari matchea `:focus-visible` al TOCAR un botón → el reset de arriba no
   alcanza y el recuadro azul (focus ring del UA) persiste en la × de los
   modales/sheets. En dispositivos táctiles (sin teclado físico) lo quitamos
   también de `:focus-visible`; en desktop (pointer fino) el outline de teclado
   se conserva intacto. (2026-06-05) */
@media (hover: none) and (pointer: coarse) {
  button:focus,
  button:focus-visible,
  a:focus,
  a:focus-visible,
  label:focus,
  summary:focus,
  select:focus,
  [role="button"]:focus,
  [role="button"]:focus-visible {
    outline: none;
  }
}

code {
  font-family: var(--body);
  background: var(--surface-2);
  padding: 0.1em 0.4em;
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.92em;
}

/* ───────── LOGIN PANEL ───────── */
.login-panel {
  position: relative;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.4rem;
  align-items: center;
  padding: 1.4rem 1.6rem;
  overflow: hidden;
  animation: login-in 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes login-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-panel--idle { display: none; }

.login-panel--awaiting {
  border-color: rgba(212, 255, 66, 0.45);
  box-shadow: 0 0 0 1px rgba(212, 255, 66, 0.08), 0 0 30px rgba(212, 255, 66, 0.06);
  background:
    var(--surface);
}
.login-panel--validating {
  border-color: var(--info);
  background: var(--surface);
}
.login-panel--done {
  border-color: rgba(212, 255, 66, 0.55);
  background: var(--surface);
}
.login-panel--error {
  border-color: var(--warn);
  background: var(--surface);
}

.login-corner {
  position: absolute;
  width: 12px; height: 12px;
  pointer-events: none;
}
.login-corner--tl { top: 6px; left: 6px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.login-corner--tr { top: 6px; right: 6px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.login-corner--bl { bottom: 6px; left: 6px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.login-corner--br { bottom: 6px; right: 6px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

.login-icon {
  width: 80px; height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-bright);
  background: rgba(0, 0, 0, 0.3);
}
.login-icon-glyph {
  font-size: 2.4rem;
  line-height: 1;
}
.login-icon--preparing {
  position: relative;
  overflow: hidden;
}
.login-icon--preparing::after {
  /* Anillo de progreso visual durante el countdown */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212, 255, 66, 0.25);
  pointer-events: none;
}
.login-countdown {
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  /* Cada vez que el número cambia (clave morph), se re-renderiza el text node;
     idiomorph lo detecta y dispara la animación abajo. */
  animation: countdown-tick 1s ease-out;
}
@keyframes countdown-tick {
  0% { transform: scale(1.45); opacity: 0.55; text-shadow: 0 0 26px var(--accent-glow); }
  60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.login-countdown-inline {
  font-family: var(--display);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: normal;
  font-size: 1.05em;
  text-shadow: 0 0 8px var(--accent-glow);
}

.login-icon--awaiting .login-icon-glyph {
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow);
  animation: pulse-fast 1.4s ease-in-out infinite;
}
.login-icon--validating .login-icon-glyph {
  color: var(--info);
  text-shadow: 0 0 12px rgba(128, 221, 255, 0.4);
}
.login-icon-glyph--spin {
  display: inline-block;
  animation: spin 1.2s linear infinite;
}
.login-icon--done .login-icon-glyph {
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow);
}
.login-icon--error .login-icon-glyph {
  color: var(--warn);
  text-shadow: 0 0 12px rgba(255, 77, 44, 0.5);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.login-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.login-title {
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.login-msg {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.45;
}
.login-msg strong { color: var(--accent); font-weight: 600; }
.login-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.login-actions {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.btn-login-confirm {
  appearance: none;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  padding: 0.65rem 1.2rem;
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background 140ms ease, box-shadow 200ms ease;
  box-shadow: 0 0 14px var(--accent-glow);
}
.btn-login-confirm:hover {
  background: var(--accent-press);
  box-shadow: 0 0 22px var(--accent-glow);
}
.btn-login-cancel {
  appearance: none;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-bright);
  padding: 0.65rem 1.2rem;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: all 140ms ease;
}
.btn-login-cancel:hover {
  color: var(--warn);
  border-color: var(--warn);
  background: var(--warn-soft);
}

/* ───────── SCAN PANEL ───────── */
.scan-panel {
  position: relative;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.scan-panel--running {
  border-color: rgba(212, 255, 66, 0.4);
  box-shadow: 0 0 0 1px rgba(212, 255, 66, 0.08), 0 0 30px rgba(212, 255, 66, 0.05);
}
.scan-panel--error {
  border-color: rgba(255, 77, 44, 0.4);
}

.scan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--border);
}
.scan-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  min-width: 0;
  flex: 1;
  font-weight: 500;
}
.scan-headline {
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.scan-glyph {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
  font-size: 1em;
}
.scan-glyph--ok { color: var(--accent); }
.scan-glyph--err { color: var(--warn); text-shadow: 0 0 8px rgba(255, 77, 44, 0.5); }
.scan-cursor {
  color: var(--accent);
  animation: blink 1.05s steps(2) infinite;
  margin-left: 0.2rem;
}

.scan-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

/* Form: cantidad-input + botón "Iniciar búsqueda". El campo y el botón ya
   tienen su propio borde redondeado (bloque v2), así que NO va un borde exterior
   que los encierre (recuadro cuadrado) ni `gap:0` que los pegue. */
.scan-launch {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}
.scan-launch-field {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.95rem;
  background: var(--surface-2);
  cursor: pointer;
}
.scan-launch-field:focus-within {
  background: var(--accent-soft);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.scan-launch-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.scan-launch-input {
  appearance: none;
  -moz-appearance: textfield;
  background: transparent;
  border: 0;
  width: 56px;
  padding: 0.6rem 0.25rem;
  text-align: center;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px var(--accent-glow);
}
.scan-launch-input:focus { outline: none; }
.scan-launch-input::-webkit-outer-spin-button,
.scan-launch-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.scan-launch-suffix {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.btn-scan {
  appearance: none;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  padding: 0.7rem 1.4rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease;
  box-shadow: 0 0 18px var(--accent-glow);
  position: relative;
  overflow: hidden;
}
.btn-scan::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 700ms ease;
}
.btn-scan:hover {
  background: var(--accent-press);
  box-shadow: 0 0 28px var(--accent-glow);
}
.btn-scan:hover::before { transform: translateX(100%); }
.btn-scan:active { transform: translateY(1px); }

.btn-scan-secondary {
  appearance: none;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-bright);
  padding: 0.55rem 0.95rem;
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.btn-scan-secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.scan-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  border: 1px solid currentColor;
}
.scan-state-pill--running { color: var(--accent); }
.scan-state-pill--done { color: var(--accent); background: var(--accent-soft); }
.scan-state-pill--error { color: var(--warn); background: var(--warn-soft); }
.scan-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: pulse-fast 1s ease-in-out infinite;
}
@keyframes pulse-fast {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.7); }
}

/* ── Progress strip ── */
.scan-progress {
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--border);
  /* gradient lime tint removido */
}
.scan-progress-meta {
  display: flex;
  gap: 2rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}
.progress-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.progress-label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.progress-value {
  font-family: var(--body);
  font-size: 0.78rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.progress-value--big {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}
.progress-sep {
  color: var(--text-muted);
  margin: 0 0.15em;
  text-shadow: none;
}

.scan-progress-bar {
  position: relative;
  height: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border);
  overflow: hidden;
}
.scan-progress-fill {
  height: 100%;
  background: var(--accent);
  background-size: 200% 100%;
  box-shadow: 0 0 14px var(--accent-glow), inset 0 0 8px rgba(255, 255, 255, 0.2);
  animation: progress-shine 2.4s linear infinite;
  transition: width 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes progress-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.scan-progress-ticks {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  pointer-events: none;
}
.scan-progress-ticks span {
  border-right: 1px solid rgba(0, 0, 0, 0.35);
}

/* ── Live area: current + recent ── */
.scan-live {
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 380px;
}

/* current product (hero) */
.scan-current {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.1rem;
  padding: 1.2rem 1.3rem;
  border-right: 1px solid var(--border);
  /* gradient lime tint removido */
}
.current-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #050709;
  overflow: hidden;
  border: 1px solid var(--border);
  /* Sin animación de flash en cada poll. Con morph, los elementos persisten;
     el "feel de scanner activo" lo da la scanline barriendo en loop. */
}
.current-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.06) saturate(0.95);
}
.current-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}
.current-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* gradient lime tint removido */
  background-size: 100% 200%;
  mix-blend-mode: screen;
  animation: scanline-sweep 2.6s linear infinite;
}
@keyframes scanline-sweep {
  0% { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}
.current-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 2;
}
.current-corner--tl { top: 4px; left: 4px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.current-corner--tr { top: 4px; right: 4px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.current-corner--bl { bottom: 4px; left: 4px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.current-corner--br { bottom: 4px; right: 4px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

.current-info {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.2rem 0;
}
.current-step {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(212, 255, 66, 0.25);
}
.step-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse-fast 0.95s ease-in-out infinite;
}
.step-name::before { content: "▸ "; opacity: 0.6; }

.current-name {
  font-family: var(--body);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.current-supplier {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.current-supplier-arrow { color: var(--accent); }
.current-tags {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.current-tier {
  padding: 0.25rem 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  border: 1px solid currentColor;
}
.current-price {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.current-cats {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Sub-progreso de búsqueda — visible solo durante "Buscando competencia" */
.current-search {
  margin-top: auto;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.current-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search-counter {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.search-counter strong {
  font-family: var(--display);
  color: var(--accent);
  font-weight: normal;
  font-variant-numeric: tabular-nums;
  font-size: 1em;
  text-shadow: 0 0 6px var(--accent-glow);
}
.search-counter-sep {
  color: var(--text-faint);
  margin: 0 0.2em;
}
.search-remaining {
  color: var(--text-muted);
  margin-left: 0.4rem;
  font-size: 0.94em;
}
.current-search-query {
  font-family: var(--body);
  font-size: 0.85rem;
  color: var(--text);
  font-style: italic;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.current-search-counters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
}
.search-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.search-metric-label {
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
}
.search-metric-value {
  font-family: var(--display);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  text-shadow: 0 0 6px var(--accent-glow);
  transition: color 200ms ease;
}
.search-metric-sep { color: var(--text-faint); }

/* Historial de queries completadas */
.search-history-wrap {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border-bright);
}
.search-history-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.search-history-count {
  font-family: var(--display);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.search-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 180px;
  overflow-y: auto;
}
.search-history-item {
  display: grid;
  grid-template-columns: 26px 14px 1fr auto;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.7rem;
  color: var(--text-dim);
  padding: 0.18rem 0;
  animation: history-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes history-in {
  from { opacity: 0; transform: translateX(-4px); background: var(--accent-soft); }
  to { opacity: 1; transform: translateX(0); background: transparent; }
}
.search-history-num {
  font-family: var(--display);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}
.search-history-mark {
  color: var(--accent);
  font-size: 0.78rem;
}
.search-history-query {
  font-style: italic;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.search-history-stats {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  color: var(--text-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.search-history-num-val {
  font-family: var(--display);
  color: var(--text);
  font-size: 0.86rem;
}
.search-history-num-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.search-history-stats-sep { color: var(--text-faint); margin: 0 0.15em; }
.current-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 2.5rem 1rem;
}
.current-empty-glyph {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 600;
  animation: blink 1.6s steps(2) infinite;
}
.current-empty-msg {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* recent feed */
.scan-recent {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
}
.scan-recent-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.recent-glyph { color: var(--accent); }
.recent-title { color: var(--text); flex: 1; }

/* Acordeones del panel de scan (`[data-scan-accordion]`: "Evaluados" y "Búsquedas
   anteriores"). Cerrados por defecto en mobile (lo maneja el script de base.html,
   que sobrevive a los morphs del polling); en desktop quedan abiertos y
   no-colapsables (Evaluados = sidebar del feed; historial = detalle de la card). */
[data-scan-accordion] > summary {
  list-style: none;
  cursor: pointer;
}
[data-scan-accordion] > summary::-webkit-details-marker { display: none; }
.scan-acc-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  transition: transform 220ms var(--ease, ease);
}
[data-scan-accordion][open] .scan-acc-chevron { transform: rotate(180deg); }
@media (min-width: 521px) {
  /* Desktop: siempre visible, no togglable (el JS lo mantiene abierto). */
  [data-scan-accordion] > summary { cursor: default; pointer-events: none; }
  .scan-acc-chevron { display: none; }
}
.recent-count {
  font-family: var(--display);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 460px;
}
.recent-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.65rem;
  padding: 0.55rem 0.95rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
  animation: recent-in 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes recent-in {
  from { opacity: 0; transform: translateX(12px); background: var(--accent-soft); }
  to { opacity: 1; transform: translateX(0); background: transparent; }
}
.recent-item:hover { background: rgba(212, 255, 66, 0.04); }
.recent-thumb {
  width: 56px;
  height: 56px;
  background: #050709;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recent-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 1rem;
}
.recent-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.recent-name {
  font-size: 0.75rem;
  color: var(--text);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-outcome-row { line-height: 1; }
.recent-outcome {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--text-muted);
}
.recent-outcome--candidate { color: var(--accent); text-shadow: 0 0 4px var(--accent-glow); }
.recent-outcome--burned { color: var(--warn); }
.recent-outcome--skip { color: var(--text-muted); }
.recent-outcome--seen { color: var(--text-muted); }
.recent-outcome--err { color: var(--warn); }
.recent-empty {
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

/* highlight de la primera fila (más reciente) */
.recent-list .recent-item:first-child {
  /* gradient lime tint removido */
  border-left: 2px solid var(--accent);
  padding-left: calc(0.95rem - 2px);
}

/* ── Summary post-run ── */
.scan-summary-wrap {
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.scan-error {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 77, 44, 0.4);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.scan-error-body {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1;
  min-width: 0;
}
.scan-error-label {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.72rem;
  align-self: center;
}
.scan-error-msg {
  flex: 1;
  line-height: 1.4;
}
.btn-scan-relogin {
  appearance: none;
  background: var(--warn);
  color: var(--bg);
  border: 0;
  padding: 0.55rem 1rem;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background 140ms ease, transform 120ms ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.btn-scan-relogin:hover {
  background: #e63d1f;
}
.btn-scan-relogin:active { transform: translateY(1px); }
.scan-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Cada `.scan-stat` ya es una card con borde redondeado (bloque v2), así que
     el resumen NO usa la técnica vieja de `gap:1px` + fondo `--border` (slab
     gris con celdas pegadas): celdas separadas por un gap real sobre el fondo
     del panel. Aplica a tablet y desktop; mobile (≤520px) tiene su propio gap. */
  gap: 10px;
  background: transparent;
}
.scan-stat {
  background: var(--surface);
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.scan-stat--accent { background: var(--accent-soft); }
.scan-stat--err { background: var(--warn-soft); }
.scan-stat-label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.scan-stat-num {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.scan-stat--accent .scan-stat-num { color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); }
.scan-stat--err .scan-stat-num { color: var(--warn); }
.scan-finish-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.finish-label {
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
  margin-right: 0.4rem;
}

/* ───────── STATS / FILTER TABS ───────── */
.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  margin-bottom: 1.5rem;
  background: var(--border);
  border: 1px solid var(--border);
}
.stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1.05rem 1.1rem 1rem;
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  min-height: 5.5rem;
}
.stat:hover {
  background: var(--surface-2);
}
.stat--active {
  background: var(--surface-2);
}
.stat--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}
/* ───────── GRID ───────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

/* ───────── CARD ───────── */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  position: relative;
  transition: background 200ms ease, transform 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
  animation: cardIn 480ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.card:hover {
  background: var(--surface-2);
  z-index: 3;
}

/* Flash al volver desde el detalle vía /#card-{id} — destaca el card de origen */
.card:target {
  scroll-margin-top: 90px;
  animation: card-target-flash 1800ms ease-out;
  z-index: 4;
}
@keyframes card-target-flash {
  0% {
    box-shadow:
      inset 0 0 0 2px var(--accent),
      0 0 40px rgba(212, 255, 66, 0.5);
    background: rgba(212, 255, 66, 0.08);
  }
  100% {
    box-shadow:
      inset 0 0 0 0 transparent,
      0 0 0 transparent;
    background: var(--surface);
  }
}
.card:hover .card-scanline {
  opacity: 1;
}

/* status accent bar on left */
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  transition: height 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 4;
}
.card:hover::before {
  height: 100%;
}
.card--testing::before { background: var(--info); box-shadow: 0 0 14px var(--info-soft); height: 100%; }
.card--winner::before { background: var(--gold); box-shadow: 0 0 14px var(--gold-soft); height: 100%; }
/* Descartados: sin barra roja para no chocar visualmente con el outline del candidato adyacente.
   El estado se comunica vía la pill "SATURADO" / "OTRA CATEGORÍA" abajo + opacidad reducida. */
.card--discarded::before { display: none; }
.card--discarded { opacity: 0.62; }
.card--discarded:hover { opacity: 1; }

/* Candidato — destaque dinámico para distinguirlo en la vista TODOS.
   El borde lime se pinta con box-shadow inset (no outline) para evitar que el
   gap del grid lo recorte en los bordes que tocan otra card. */
.card--candidate {
  background: var(--surface);
  z-index: 2;
  animation:
    cardIn 480ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    candidate-pulse 2.6s ease-in-out infinite;
}
.card--candidate:hover {
  /* gradient lime tint removido */
}
.card--candidate::before {
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  height: 100%;
}
@keyframes candidate-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(212, 255, 66, 0.55),
      0 0 14px rgba(212, 255, 66, 0.10);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px var(--accent),
      0 0 28px rgba(212, 255, 66, 0.28);
  }
}

/* Marcador "CANDIDATO" en esquina inferior-izquierda de la imagen */
.card--candidate .card-image::after {
  content: "▸ CANDIDATO";
  position: absolute;
  bottom: 0.55rem;
  left: 0.55rem;
  z-index: 3;
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--bg);
  background: var(--accent);
  padding: 0.28rem 0.6rem;
  box-shadow: 0 0 12px var(--accent-glow);
  animation: candidate-badge-pulse 2.6s ease-in-out infinite;
}
@keyframes candidate-badge-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(212, 255, 66, 0.35); }
  50% { box-shadow: 0 0 18px rgba(212, 255, 66, 0.7); }
}

/* Esquinas L-shape del card candidato */
.card--candidate .card-image::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 4px var(--accent-glow));
}

@media (prefers-reduced-motion: reduce) {
  .card--candidate,
  .card--candidate .card-image::after {
    animation: none;
  }
  .card--candidate {
    box-shadow:
      inset 0 0 0 1px rgba(212, 255, 66, 0.55),
      0 0 18px rgba(212, 255, 66, 0.14);
  }
}

/* delete X button (visible on hover) */
.card-delete {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 5;
  width: 26px;
  height: 26px;
  padding: 0;
  background: rgba(6, 8, 13, 0.85);
  border: 1px solid var(--border-bright);
  color: var(--text-dim);
  font-family: var(--body);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease, color 140ms ease, border-color 140ms ease, background 140ms ease;
  backdrop-filter: blur(4px);
}
.card:hover .card-delete { opacity: 1; }
.card-delete:hover {
  color: var(--warn);
  border-color: var(--warn);
  background: rgba(255, 77, 44, 0.15);
}
.card-delete:focus {
  opacity: 1;
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* image area */
.card-image {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #050709;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.card-image:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) saturate(0.92);
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 700ms ease;
}
.card:hover .card-image img {
  transform: scale(1.045);
  filter: contrast(1.08) saturate(1);
}
.card-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
}
.card-image-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(6, 8, 13, 0.7) 100%);
  pointer-events: none;
}
.card-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(212, 255, 66, 0),
    rgba(212, 255, 66, 0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0;
  transition: opacity 200ms ease;
  mix-blend-mode: screen;
}

.card-id {
  position: absolute;
  bottom: 0.65rem;
  left: 0.7rem;
  z-index: 2;
  padding: 0.22rem 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  background: rgba(6, 8, 13, 0.7);
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
}
.card-id::before {
  content: "ID·";
  color: var(--text-muted);
  margin-right: 0.2em;
}

.card-tier {
  position: absolute;
  top: 0.65rem;
  left: 0.7rem;
  z-index: 2;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(6, 8, 13, 0.85);
  border: 1px solid currentColor;
  backdrop-filter: blur(4px);
}
.tier--verificado { color: var(--info); box-shadow: 0 0 10px var(--info-soft); }
.tier--premium { color: var(--gold); box-shadow: 0 0 10px var(--gold-soft); }
.tier--premium_exclusivo { color: var(--magenta); box-shadow: 0 0 10px var(--magenta-soft); }

/* body */
.card-body {
  padding: 1rem 1.1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}
.card-title {
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.32;
  color: var(--text);
  letter-spacing: -0.005em;
  /* clamp 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.card-supplier {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.supplier-arrow {
  color: var(--accent);
}
.supplier-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.8rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.card-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-left: 1px solid var(--border);
  padding-left: 0.65rem;
}
.card-stat-label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.card-stat-value {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.card-stat-value--mono {
  font-family: var(--body);
  font-weight: 500;
}
.card-stat-value--small {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.currency {
  color: var(--accent);
  font-size: 0.85em;
  margin-right: 0.05em;
}

.card-flag {
  display: inline-block;
  align-self: flex-start;
  padding: 0.22rem 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--warn-soft);
  border: 1px solid rgba(255, 77, 44, 0.32);
  color: var(--warn);
}

/* notes form (research log inline) */
.card-notes {
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border-bright);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.card-notes-label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.card-notes-input {
  appearance: none;
  background: rgba(6, 8, 13, 0.6);
  border: 1px solid var(--border);
  padding: 0.5rem 0.6rem;
  color: var(--text);
  font-family: var(--body);
  font-size: 0.74rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 2.7em;
  max-height: 9em;
  transition: border-color 140ms ease, background 140ms ease;
}
.card-notes-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}
.card-notes-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(212, 255, 66, 0.04);
}
.card-notes-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.card-notes-save {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-bright);
  padding: 0.32rem 0.7rem;
  color: var(--text-dim);
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
}
.card-notes-save:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.card-notes-saved {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: lowercase;
  opacity: 0.75;
}

/* actions */
.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.card-link--detail {
  border-right: 1px solid var(--border);
  color: var(--text-dim);
  justify-content: center;
}
.card-link--detail:hover {
  background: var(--surface-2);
  color: var(--accent);
}
.card-status-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0.7rem 2rem 0.7rem 0.85rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: color 140ms ease, background 140ms ease;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position:
    right 0.95rem top 50%,
    right 0.62rem top 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.card-status-select:hover {
  color: var(--accent);
  background-color: var(--accent-soft);
}
.card-status-select:focus {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
  color: var(--accent);
}
.card-status-select option {
  background: var(--surface-2);
  color: var(--text);
}

.card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.card-link:hover {
  background: var(--accent);
  color: var(--bg);
}
.card-link-arrow {
  transition: transform 200ms ease;
}
.card-link:hover .card-link-arrow {
  transform: translate(2px, -2px);
}

/* ───────── EMPTY STATE ───────── */
.empty {
  padding: 5rem 2rem;
  border: 1px dashed var(--border-bright);
  text-align: center;
  background: var(--surface);
}
.empty-glyph {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-glow);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
.empty-title {
  font-family: var(--body);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.85rem;
}
.empty-msg {
  color: var(--text-dim);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

/* ───────── DETAIL PAGE ───────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all 140ms ease;
}
.back-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 2rem;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  background:
    var(--surface);
  overflow: hidden;
}

.detail-hero-corner {
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
}
.detail-hero-corner--tl { top: 8px; left: 8px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.detail-hero-corner--tr { top: 8px; right: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.detail-hero-corner--bl { bottom: 8px; left: 8px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.detail-hero-corner--br { bottom: 8px; right: 8px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

.detail-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #050709;
  overflow: hidden;
  border: 1px solid var(--border);
}
.detail-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.detail-image-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.detail-tier {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(6, 8, 13, 0.85);
  border: 1px solid currentColor;
  backdrop-filter: blur(4px);
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.detail-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
}
.detail-status {
  margin-left: 0.5rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  border: 1px solid currentColor;
}
.detail-status--candidate { color: var(--accent); }
.detail-status--testing { color: var(--info); }
.detail-status--winner { color: var(--gold); }
.detail-status--discarded { color: var(--warn); }
.detail-status--pending { color: var(--text-muted); }

.detail-title {
  font-family: var(--body);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
.detail-supplier {
  font-size: 0.95rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.detail-supplier-arrow { color: var(--accent); margin-right: 0.3rem; }

.detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 0.5rem 0;
}
.detail-stat {
  background: var(--surface-2);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.detail-stat dt {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.detail-stat dd {
  font-family: var(--display);
  font-size: 1.45rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.detail-stat-text {
  font-family: var(--body) !important;
  font-size: 0.95rem !important;
  font-weight: 500;
  text-transform: lowercase;
}

.detail-dropi-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  border: 0;
  cursor: pointer;
  transition: background 140ms ease, box-shadow 200ms ease;
  box-shadow: 0 0 16px var(--accent-glow);
}
.detail-dropi-btn:hover {
  background: var(--accent-press);
  box-shadow: 0 0 24px var(--accent-glow);
}

.detail-flag {
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid rgba(255, 77, 44, 0.35);
  background: var(--warn-soft);
  color: var(--warn);
}
.detail-flag-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}
.detail-flag-msg {
  font-size: 0.86rem;
  color: var(--text);
}

.detail-notes {
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.detail-notes-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.detail-notes-content {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Sección genérica de la página de detalle */
.detail-section {
  margin-bottom: 2rem;
}
.detail-section-head {
  margin-bottom: 1rem;
}
.detail-section-title {
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: 0.3rem;
}
.detail-section-sub {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* Tabla de sinónimos */
.detail-runs-table {
  border: 1px solid var(--border);
  background: var(--surface);
}
.detail-runs-row {
  display: grid;
  grid-template-columns: 50px 1fr 140px 180px;
  gap: 1rem;
  padding: 0.75rem 1rem;
  align-items: center;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.detail-runs-row:last-child { border-bottom: 0; }
.detail-runs-row--head {
  background: var(--surface-2);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.run-col-num {
  font-family: var(--display);
  color: var(--text-faint);
}
.detail-runs-row:not(.detail-runs-row--head) .run-col-num {
  color: var(--accent);
}
.run-col-query {
  font-style: italic;
  color: var(--text);
}
.detail-runs-row--head .run-col-query { font-style: normal; }
.run-col-suppliers, .run-col-similar { text-align: right; }
.run-num {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px var(--accent-glow);
}

/* Bloques de productos similares por sinónimo */
.detail-run-block {
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.detail-run-header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.detail-run-num {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.detail-run-query {
  flex: 1;
  font-style: italic;
  color: var(--text);
  font-size: 0.94rem;
  min-width: 0;
}
.detail-run-stats {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.detail-run-stats strong {
  font-family: var(--display);
  font-weight: normal;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.detail-similar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.detail-similar-item a {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 1.1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background 140ms ease;
}
.detail-similar-item:last-child a { border-bottom: 0; }
.detail-similar-item a:hover {
  background: rgba(212, 255, 66, 0.04);
}
.detail-similar-thumb {
  width: 110px; height: 110px;
  background: #050709;
  border: 1px solid var(--border);
  overflow: hidden;
}
.detail-similar-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.detail-similar-thumb-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
}
.detail-similar-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.detail-similar-name {
  font-size: 0.86rem;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-similar-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.7rem;
}
.detail-similar-tier {
  padding: 0.12rem 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid currentColor;
}
.detail-similar-supplier {
  color: var(--text-dim);
}
.detail-similar-price {
  font-family: var(--display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
}
.detail-similar-arrow {
  color: var(--text-dim);
  font-size: 1.05rem;
  transition: color 120ms ease, transform 120ms ease;
}
.detail-similar-item a:hover .detail-similar-arrow {
  color: var(--accent);
  transform: translate(2px, -2px);
}
.detail-run-empty {
  padding: 1.2rem 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

.detail-empty {
  padding: 4rem 2rem;
  border: 1px dashed var(--border-bright);
  text-align: center;
  background: var(--surface);
}
.detail-empty-msg {
  color: var(--text-dim);
  font-size: 0.92rem;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.5;
}

@media (max-width: 880px) {
  .detail-hero { grid-template-columns: 1fr; }
  .detail-image { max-width: 360px; margin: 0 auto; }
  .detail-stats { grid-template-columns: repeat(2, 1fr); }
  .detail-runs-row { grid-template-columns: 30px 1fr 80px 100px; gap: 0.6rem; padding: 0.6rem 0.75rem; }
}
@media (max-width: 540px) {
  .detail-runs-row { grid-template-columns: 24px 1fr 60px 70px; font-size: 0.74rem; }
  .detail-similar-item a { grid-template-columns: 52px 1fr auto; }
}

/* ───────── ANIMATIONS ───────── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.grid > .card:nth-child(1) { animation-delay: 0ms; }
.grid > .card:nth-child(2) { animation-delay: 35ms; }
.grid > .card:nth-child(3) { animation-delay: 70ms; }
.grid > .card:nth-child(4) { animation-delay: 105ms; }
.grid > .card:nth-child(5) { animation-delay: 140ms; }
.grid > .card:nth-child(6) { animation-delay: 175ms; }
.grid > .card:nth-child(7) { animation-delay: 210ms; }
.grid > .card:nth-child(8) { animation-delay: 245ms; }
.grid > .card:nth-child(9) { animation-delay: 280ms; }
.grid > .card:nth-child(10) { animation-delay: 315ms; }
.grid > .card:nth-child(11) { animation-delay: 350ms; }
.grid > .card:nth-child(12) { animation-delay: 385ms; }
.grid > .card:nth-child(n+13) { animation-delay: 420ms; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.08); }
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* HTMX swap — subtle feedback while loading */
.htmx-request {
  opacity: 0.55;
  transition: opacity 140ms ease;
}
/* CAUSA REAL del "parpadeo" de las cajas de progreso (2026-06): las secciones que
   se auto-pollean (`hx-trigger="every Xms"` en la propia sección) reciben la clase
   `.htmx-request` en CADA poll → bajaban a opacity .55 y volvían = parpadeo de toda
   la caja cada ~1s. El dim es para acciones del USUARIO (click), no para polling de
   fondo. Las eximimos. Mismo patrón para cualquier sección self-poll nueva. */
.tiktok-organic-section.htmx-request,
.meta-ads-section.htmx-request,
.meta-ads-bulk-banner.htmx-request,
.copy-gen-section.htmx-request,
.landing-images-section.htmx-request,
.competitor-assets-section.htmx-request,
.competition-section.htmx-request,
.scan-panel.htmx-request,
.tracker-panel.htmx-request {
  opacity: 1;
}

/* ───────── SCROLLBAR ───────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ───────── RESPONSIVE ───────── */
@media (max-width: 980px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .system-status .sys-cell:nth-child(1) { display: none; }
  .scan-live { grid-template-columns: 1fr; }
  .scan-current { border-right: 0; border-bottom: 1px solid var(--border); }
  .scan-recent { max-height: 320px; }
  .recent-list { max-height: 270px; }
}

@media (max-width: 640px) {
  .container { padding: 1rem 0.85rem 3rem; }
  .topbar { padding: 0.65rem 0.85rem; flex-wrap: wrap; gap: 0.65rem; }
  .system-status { display: none; }
  .hero { padding: 2rem 1.25rem 1.75rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
  .card-stats { grid-template-columns: 1fr 1fr; }
  .scan-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .scan-controls { width: 100%; }
  .scan-progress-meta { gap: 1rem; }
  .scan-current { grid-template-columns: 1fr; padding: 1rem; }
  .current-image { max-width: 240px; margin: 0 auto; }
  .toolbar { flex-direction: column; }
  .toolbar-spacer { width: 100%; height: 1px; }
  .btn-export { padding: 0.7rem 1rem; justify-content: space-between; }
  .scan-summary { grid-template-columns: 1fr 1fr; }
}

/* ───────── MODAL DE CONFIRMACIÓN v2 ─────────
   Reemplazo del confirm() nativo del browser. Disparado vía htmx:confirm en base.html.
   Look v2: surface card + radius soft + shadow-pop + paleta accent/rust. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Scrim oscuro FIJO (no `var(--ink)`: en modo oscuro `--ink` es casi blanco →
     daba un velo claro que no oscurecía). Oscurece en ambos temas. */
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modal-fade-in 200ms var(--ease);
}
.modal-overlay[hidden] { display: none; }
.modal-open { overflow: hidden; }

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  /* Fondo OPACO en ambos temas: en modo oscuro `--surface` es vidrio
     (rgba blanco .045) y el modal flota sobre el scrim (no sobre el `--bg` de la
     página) → se transparentaba y el texto quedaba ilegible. Componemos el tinte
     glass sobre una base sólida `--bg` → opaco + elevación sutil. */
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "icon  body"
    ".     actions";
  column-gap: 18px;
  row-gap: 22px;
  box-shadow: var(--shadow-pop);
  animation: modal-pop 280ms var(--ease-spring);
}

@keyframes modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-icon {
  grid-area: icon;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  align-self: start;
}
.modal--destructive .modal-icon {
  background: var(--rust-soft);
  color: var(--rust);
}

.modal-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--accent);
}
.modal--destructive .modal-eyebrow { color: var(--rust); }

.modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ink);
  margin: 2px 0 0;
}
.modal-message {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}

.modal-actions {
  grid-area: actions;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.modal-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--ink);
  transition: all 200ms var(--ease-spring);
}
.modal-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.modal-btn--cancel {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink-3);
}
.modal-btn--cancel:hover {
  color: var(--ink);
  border-color: var(--ink-4);
  background: var(--surface-2);
}

.modal-btn--confirm {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-glow);
}
.modal-btn--confirm:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 36px color-mix(in oklab, var(--accent) 40%, transparent);
}
.modal-btn--confirm:active { transform: translateY(0) scale(0.98); }

.modal--destructive .modal-btn--confirm {
  background: var(--rust);
  color: #fff;
  box-shadow: 0 8px 28px color-mix(in oklab, var(--rust) 30%, transparent);
}
.modal--destructive .modal-btn--confirm:hover {
  box-shadow: 0 12px 36px color-mix(in oklab, var(--rust) 40%, transparent);
}
.modal--destructive .modal-btn--cancel:hover {
  border-color: var(--rust);
  color: var(--rust);
}

@media (max-width: 540px) {
  .modal {
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "body"
      "actions";
    padding: 1.8rem 1.4rem 1.2rem;
    row-gap: 1.1rem;
  }
  .modal-icon { width: 56px; height: 56px; }
  .modal-actions { justify-content: stretch; }
  .modal-btn { flex: 1; justify-content: center; }
}

/* ───────── FIELD TOAST (validación de inputs) ─────────
   Reemplaza el bubble nativo del browser. Se ancla debajo del input que
   disparó el evento `invalid`. */
.field-toast {
  position: absolute;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  background:
    var(--surface);
  border: 1px solid rgba(255, 77, 44, 0.55);
  color: var(--text);
  font-family: var(--body);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
  max-width: min(420px, calc(100vw - 2rem));
  box-shadow:
    0 0 0 1px rgba(255, 77, 44, 0.08),
    0 16px 36px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(255, 77, 44, 0.18);
  pointer-events: none;
  animation: field-toast-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.field-toast[hidden] { display: none; }
.field-toast::before {
  /* punta apuntando al input */
  content: "";
  position: absolute;
  top: -6px;
  left: 14px;
  width: 10px;
  height: 10px;
  background: var(--surface);
  border-top: 1px solid rgba(255, 77, 44, 0.55);
  border-left: 1px solid rgba(255, 77, 44, 0.55);
  transform: rotate(45deg);
}
.field-toast-glyph {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--warn);
  text-shadow: 0 0 8px rgba(255, 77, 44, 0.5);
  flex-shrink: 0;
}
.field-toast-text {
  color: var(--text-dim);
}
@keyframes field-toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN REQUIRED — pantalla de login full-screen cuando JWT expiró.
   ═══════════════════════════════════════════════════════════════════════════ */

.topbar--minimal {
  justify-content: space-between;
}
.sys-cell--locked .sys-value {
  color: var(--warn);
}
.sys-cell--locked .sys-value::before {
  content: "▲ ";
  font-size: 0.85em;
}

.login-required {
  position: relative;
  margin: 3rem auto;
  max-width: 720px;
  padding: 3.5rem 2.4rem;
  border: 1px solid var(--border-bright);
  background:
    var(--surface);
  overflow: hidden;
}
.login-required::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 80px,
    rgba(212, 255, 66, 0.04) 80px,
    rgba(212, 255, 66, 0.04) 81px
  );
}

.login-required-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 2;
}
.login-required-corner--tl { top: 8px; left: 8px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.login-required-corner--tr { top: 8px; right: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.login-required-corner--bl { bottom: 8px; left: 8px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.login-required-corner--br { bottom: 8px; right: 8px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

.login-required-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.login-required-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--warn);
  text-shadow: 0 0 10px rgba(255, 77, 44, 0.4);
  margin-bottom: 1.5rem;
}
.login-required-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: 1.2rem;
  text-shadow: 0 0 24px rgba(212, 255, 66, 0.06);
}
.login-required-msg {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0 auto 2rem;
}
.btn-login-required {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.85rem;
  font-family: var(--body);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 22px var(--accent-glow);
  transition: background 200ms ease, box-shadow 200ms ease;
  margin-bottom: 2rem;
}
.btn-login-required:hover {
  background: var(--accent-press);
  box-shadow: 0 0 32px var(--accent-glow);
}
.login-required-actions {
  display: inline-flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}
.login-required-actions .btn-login-required {
  margin-bottom: 0;
}
.btn-login-required--secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}
.btn-login-required--secondary:hover {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.login-required-hint code {
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
  background: var(--surface-2);
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--border);
  color: var(--accent);
}
.login-required-hint {
  font-size: 0.78rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  margin-top: 1.5rem;
}

/* El panel de login dentro de login_required no necesita margins propios */
.login-required #login-panel {
  margin: 1.5rem auto 0;
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACKER — panel de run en vivo (state machine + polling).
   ═══════════════════════════════════════════════════════════════════════════ */

.tracker-panel {
  position: relative;
  margin-bottom: 1.6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.tracker-panel--running {
  border-color: rgba(212, 255, 66, 0.4);
  box-shadow: 0 0 0 1px rgba(212, 255, 66, 0.08), 0 0 30px rgba(212, 255, 66, 0.05);
}
.tracker-panel--error { border-color: rgba(255, 77, 44, 0.4); }
.tracker-panel--done { border-color: rgba(212, 255, 66, 0.35); }

/* Banner de login expirado / faltante */
.tracker-panel-banner {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--border);
  background: var(--warn-soft);
}
.tracker-panel-banner-glyph {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--warn);
  text-shadow: 0 0 10px rgba(255, 77, 44, 0.5);
  text-align: center;
}
.tracker-panel-banner-title {
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.18rem;
}
.tracker-panel-banner-msg {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.45;
}

.tracker-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--border);
}
.tracker-panel-headline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}
.tracker-panel-glyph {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}
.tracker-panel-glyph--ok { color: var(--accent); }
.tracker-panel-glyph--err { color: var(--warn); text-shadow: 0 0 8px rgba(255, 77, 44, 0.5); }
.tracker-panel-cursor {
  color: var(--accent);
  animation: blink 1.05s steps(2) infinite;
  margin-left: 0.2rem;
}

.tracker-panel-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.tracker-panel-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.78rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  border: 1px solid currentColor;
}
.tracker-panel-pill--running { color: var(--accent); }
.tracker-panel-pill--done { color: var(--accent); background: var(--accent-soft); }
.tracker-panel-pill--error { color: var(--warn); background: var(--warn-soft); }
.tracker-panel-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: pulse-fast 1s ease-in-out infinite;
}

.btn-tracker {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.05rem;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  border: 1px solid var(--border-bright);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 200ms ease;
  text-decoration: none;
}
.btn-tracker--ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.btn-tracker--primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}
.btn-tracker--primary:hover {
  background: var(--accent-press);
  box-shadow: 0 0 22px var(--accent-glow);
}

/* Progress strip + métricas */
.tracker-panel-progress {
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--border);
  /* gradient lime tint removido */
}
.tracker-panel-progress-meta {
  display: flex;
  gap: 2rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

/* Live area: proveedor actual + recientes */
.tracker-panel-live {
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 220px;
}
.tracker-panel-current {
  padding: 1.1rem 1.3rem;
  border-right: 1px solid var(--border);
  /* gradient lime tint removido */
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.tracker-panel-current-label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}
.tracker-panel-current-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tracker-panel-current-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  background: rgba(212, 255, 66, 0.05);
  border-left: 2px solid var(--accent);
  flex-wrap: wrap;
  animation: tracker-current-pulse 2.4s ease-in-out infinite;
}
@keyframes tracker-current-pulse {
  0%, 100% { background: rgba(212, 255, 66, 0.04); }
  50% { background: rgba(212, 255, 66, 0.08); }
}
.tracker-panel-current-name {
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  flex: 1 1 auto;
  min-width: 0;
}
.tracker-panel-current-id {
  font-size: 0.7rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.tracker-panel-recent {
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 260px;
  overflow-y: auto;
}
.tracker-panel-recent-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.tracker-panel-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.tracker-panel-recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px dotted var(--border);
  font-size: 0.78rem;
}
.tracker-panel-recent-item:last-child { border-bottom: 0; }
.tracker-panel-recent-name {
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tracker-panel-recent-stats {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-shrink: 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
}
.tracker-panel-recent-pseudo { color: var(--gold); }
.tracker-panel-recent-time { color: var(--text-faint); }
.tracker-panel-recent-item--err .tracker-panel-recent-name {
  color: var(--warn);
}
.tracker-panel-recent-err {
  color: var(--warn);
  font-size: 0.72rem;
}

/* Resumen final */
.tracker-panel-summary {
  padding: 1.05rem 1.15rem 1.1rem;
}
.tracker-panel-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 0.7rem;
}
.tracker-panel-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
}
.tracker-panel-summary-cell--warn .progress-value { color: var(--warn); }
.tracker-panel-summary-time {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Error */
.tracker-panel-error {
  padding: 0.85rem 1.15rem;
  background: var(--warn-soft);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.85rem;
}
.tracker-panel-error-label {
  color: var(--warn);
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  flex-shrink: 0;
}
.tracker-panel-error-msg {
  color: var(--text-dim);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .tracker-panel-live { grid-template-columns: 1fr; }
  .tracker-panel-current { border-right: 0; border-bottom: 1px solid var(--border); }
  .tracker-panel-recent { max-height: 200px; }
  .tracker-panel-banner { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACKER — sección /tracker
   Reusa los tokens (--accent, --surface, etc.) y la aesthetic Industrial Ops.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Toolbar / window selector + filtros ─── */
.tracker-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.tracker-toolbar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.tracker-toolbar-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.tracker-window {
  display: inline-flex;
  border: 1px solid var(--border-bright);
}
.tracker-window-link {
  padding: 0.45rem 0.95rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  border-right: 1px solid var(--border-bright);
  transition: color 140ms ease, background 140ms ease;
}
.tracker-window-link:last-child { border-right: 0; }
.tracker-window-link:hover { color: var(--text); background: var(--surface-2); }
.tracker-window-link--active {
  color: var(--bg);
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Combobox de proveedor — input autocompletable + lista filtrable */
.tracker-combobox {
  position: relative;
  min-width: 240px;
}
.tracker-combobox-input {
  appearance: none;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-bright);
  padding: 0.45rem 2.4rem 0.45rem 0.85rem;
  font-family: var(--body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--text);
  transition: border-color 140ms ease;
}
.tracker-combobox-input::placeholder {
  color: var(--text-faint);
}
.tracker-combobox-input:hover { border-color: var(--text-muted); }
.tracker-combobox-input:focus {
  outline: none;
  color: var(--text);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.tracker-combobox-caret {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.78rem;
  pointer-events: none;
  transition: color 140ms ease;
}
/* Glyph de lupa cuando el combobox no está expandido (señaliza "buscar") */
.tracker-combobox-caret::before {
  content: "⌕";
}
.tracker-combobox-input[aria-expanded="true"] ~ .tracker-combobox-caret {
  color: var(--accent);
}
.tracker-combobox-input[aria-expanded="true"] ~ .tracker-combobox-caret::before {
  content: "▾";
}
.tracker-combobox-clear {
  position: absolute;
  right: 2.1rem;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 0.25rem;
  cursor: pointer;
  transition: color 140ms ease;
}
.tracker-combobox-clear:hover { color: var(--warn); }

.tracker-combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  /* Cap a 320px en pantallas grandes; en pantallas pequeñas no más del 50% del viewport */
  max-height: min(320px, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Fondo OPACO compuesto: `--surface-2` solo es translúcido en ambos temas
     (rgba) → el popover dejaba ver las cards de abajo y el texto quedaba
     ilegible. Base opaca `--bg` + tinte de superficie encima. */
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface-2), var(--surface-2));
  border: 1px solid var(--accent);
  box-shadow:
    0 0 0 1px var(--accent-soft),
    0 12px 32px rgba(0, 0, 0, 0.6);
}
.tracker-combobox-list[hidden] { display: none; }

.tracker-combobox-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
  white-space: nowrap;
  overflow: hidden;
}
/* `display: flex` arriba sobreescribe el `display: none` que el browser aplica
   por defecto al atributo `hidden`. Lo restauramos explícitamente para que el
   filtro JS oculte options que no coinciden con la búsqueda. */
.tracker-combobox-option[hidden] {
  display: none;
}
.tracker-combobox-option:hover,
.tracker-combobox-option--active {
  background: var(--accent-soft);
  color: var(--accent);
}
.tracker-combobox-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.tracker-combobox-option-tier {
  font-size: 0.62rem;
  padding: 0.1rem 0.4rem;
  flex-shrink: 0;
  letter-spacing: 0.14em;
}

/* Scrollbar discreto en el listbox */
.tracker-combobox-list::-webkit-scrollbar {
  width: 6px;
}
.tracker-combobox-list::-webkit-scrollbar-track {
  background: var(--bg);
}
.tracker-combobox-list::-webkit-scrollbar-thumb {
  background: var(--border-bright);
}
.tracker-combobox-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

/* ─── Sections ─── */
.tracker-section {
  margin-bottom: 2.5rem;
}
.tracker-section-head {
  margin-bottom: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.tracker-section-title {
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.tracker-section-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* ─── Top productos: grid de cards ─── */
.top-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.top-product {
  background: var(--surface);
  transition: background 200ms ease;
  position: relative;
}
.top-product:hover { background: var(--surface-2); z-index: 2; }

.top-product-link {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  padding: 0.95rem;
  text-decoration: none;
  color: inherit;
}
.top-product-image {
  position: relative;
  width: 110px;
  height: 110px;
  background: #050709;
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.top-product-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) saturate(0.95);
}
.top-product-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-family: var(--display);
  font-size: 1.5rem;
}
.top-product-rank {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.18rem 0.5rem;
  font-family: var(--body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-dim);
  background: rgba(6, 8, 13, 0.85);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.top-product-rank--podium {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.top-product-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.top-product-name {
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.top-product-supplier {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
}
.top-product-supplier-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Hero del card: número grande de ventas estimadas, dominante visualmente */
.top-product-hero {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
}
.top-product-hero-value {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-glow);
  font-variant-numeric: tabular-nums;
}
.top-product-hero-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

/* Meta inline: stock + precio en una sola línea compacta */
.top-product-meta {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 0;
  flex-wrap: wrap;
}
.top-product-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.top-product-meta-item dt {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.top-product-meta-item dd {
  margin: 0;
  font-family: var(--body);
  font-size: 0.85rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ─── Paginación del top productos ─── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.5rem 0 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--border-bright);
  background: var(--bg);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.pagination-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pagination-link--active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  cursor: default;
}
.pagination-link--active:hover {
  color: var(--bg);
  background: var(--accent);
}
.pagination-link--nav {
  letter-spacing: 0.18em;
  font-weight: 700;
}
.pagination-link--disabled {
  color: var(--text-faint);
  border-color: var(--border);
  background: transparent;
  cursor: not-allowed;
}
.pagination-link--disabled:hover {
  color: var(--text-faint);
  border-color: var(--border);
  background: transparent;
}
.pagination-ellipsis {
  color: var(--text-muted);
  padding: 0.5rem 0.4rem;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}

/* ─── Tier pills ─── */
.tier-pill {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  border: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
}
.tier-pill--verificado { color: var(--info); }
.tier-pill--premium { color: var(--gold); }
.tier-pill--premium_exclusivo { color: var(--magenta); }

/* ─── Tabla de proveedores ─── */
.suppliers-table-wrap {
  border: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
}
.suppliers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.suppliers-table thead th {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0.85rem 0.95rem;
  text-align: left;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.suppliers-table .col-num,
.suppliers-table .col-time,
.suppliers-table .col-arrow {
  text-align: right;
}
.suppliers-table tbody td {
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  vertical-align: middle;
}
.suppliers-table tbody tr:last-child td { border-bottom: 0; }
.suppliers-table tbody tr:hover { background: var(--surface-2); }
.suppliers-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-family: var(--body);
}
.suppliers-table .num--accent {
  color: var(--accent);
  font-family: var(--display);
  font-size: 1rem;
}
.suppliers-table .time {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: right;
}
.suppliers-table .col-arrow {
  width: 30px;
  color: var(--text-faint);
}
.suppliers-table .col-arrow a {
  color: inherit;
  text-decoration: none;
  font-size: 1rem;
}
.suppliers-table tr:hover .col-arrow a { color: var(--accent); }
.supplier-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color 140ms ease;
}
.supplier-link:hover { color: var(--accent); }
.supplier-row--paused td {
  opacity: 0.5;
}

/* ─── Movimientos: cambios de precio ─── */
.price-changes {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
}
.price-change-link {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
  transition: background 140ms ease;
}
.price-change:last-child .price-change-link { border-bottom: 0; }
.price-change-link:hover { background: var(--surface-2); }

.price-change-image {
  width: 56px;
  height: 56px;
  background: #050709;
  border: 1px solid var(--border);
  overflow: hidden;
}
.price-change-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.price-change-name {
  font-size: 0.86rem;
  color: var(--text);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.price-change-supplier {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.price-change-prices {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--body);
  font-size: 0.86rem;
}
.price-old {
  color: var(--text-faint);
  text-decoration: line-through;
}
.price-arrow {
  color: var(--text-muted);
  font-size: 0.9em;
}
.price-new {
  color: var(--text);
  font-weight: 600;
}
.price-delta {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 0.4rem;
  border: 1px solid currentColor;
}
.price-delta--up { color: var(--warn); }
.price-delta--down { color: var(--accent); }

/* ─── Empty states ─── */
.tracker-empty {
  padding: 3rem 1.5rem;
  border: 1px dashed var(--border-bright);
  text-align: center;
  background: var(--surface);
}
.tracker-empty-glyph {
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-glow);
  margin-bottom: 1rem;
}
.tracker-empty-msg {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 auto;
}
.tracker-empty-msg code {
  margin: 0 0.25em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tracker — Detalle de producto
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   Quick Actions modal — overlay flotante con barras de progreso para
   los análisis disparados desde el hero del producto. Coordina hasta 2
   tracks en paralelo (Meta+TikTok) o 1 (Competencia).
   ────────────────────────────────────────────────────────────────────── */
.qa-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Theme-aware backdrop usando --bg con alpha */
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  padding: 1.5rem;
  animation: qa-modal-fade-in 220ms ease-out;
}
.qa-modal[hidden] { display: none; }

@keyframes qa-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.qa-modal-card {
  position: relative;
  width: min(560px, 100%);
  /* Sólido (NO glass): --surface es translúcido en dark y el contenido del
     modal se transparentaba. Composite opaco = --bg debajo + --surface encima
     (mismo color del design, pero sin transparencia). */
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card-lg);
  padding: 1.8rem 2rem;
  box-shadow: var(--shadow-pop);
  animation: qa-modal-slide-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes qa-modal-slide-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.qa-modal-head {
  margin-bottom: 1.4rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 1rem;
}
.qa-modal-title {
  margin: 0 0 0.3rem;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}
.qa-modal-sub {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.qa-modal-tracks {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.qa-track {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.qa-track-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.qa-track-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}
.qa-track-pct {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.qa-track-bar {
  height: 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  overflow: hidden;
}
.qa-track-fill {
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width 320ms ease;
}
.qa-track-status {
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  /* Truncar si el query es muy largo */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa-track--done .qa-track-pct { color: var(--lime); }
.qa-track--done .qa-track-fill { background: var(--lime); box-shadow: 0 0 10px color-mix(in oklab, var(--lime) 40%, transparent); }
.qa-track--done .qa-track-status { color: var(--lime); }
.qa-track--error .qa-track-pct { color: var(--rust); }
.qa-track--error .qa-track-fill { background: var(--rust); }
.qa-track--error .qa-track-status { color: var(--rust); }

/* Nota persistente del track (ej. captcha de TikTok). Aparece cuando el
   track está corriendo y se oculta al terminar.
   Cambio 2026-05-10: text usa `--ink` (alto contraste con el bg) en lugar
   de `--amber` (texto amber sobre amber-soft daba contraste pobre,
   especialmente en dark donde amber-soft es slate-amber muy oscuro). El
   icon/border amber mantiene la señal de "warning" sin sacrificar
   legibilidad. */
.qa-track-note {
  margin: 0.35rem 0 0;
  padding: 0.55rem 0.8rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink);
  background: color-mix(in oklab, var(--amber) 12%, transparent);
  border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
  letter-spacing: 0.01em;
  white-space: normal;
}
.qa-track-note[hidden] { display: none; }

.qa-modal-foot {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.qa-modal-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.qa-modal-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 0.7rem 1.2rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all 200ms var(--ease-spring);
  box-shadow: var(--shadow-glow);
}
.qa-modal-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 36px color-mix(in oklab, var(--accent) 40%, transparent);
}

@media (max-width: 540px) {
  .qa-modal-card { padding: 1.4rem 1.2rem; }
  .qa-modal-title { font-size: 0.88rem; }
}

/* ──────────────────────────────────────────────────────────────────────
   Quick Actions sticky bar — vista minimizada del modal. Aparece al pie
   del viewport cuando el usuario cierra el modal mientras los análisis
   siguen corriendo. Click la reabre como modal. Polling continúa.
   ────────────────────────────────────────────────────────────────────── */
.qa-sticky {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: 0;
  width: min(540px, calc(100% - 2rem));
  /* Sólido (NO glass): --surface es translúcido en dark y el texto del toast
     ("Análisis en curso", %, tracks) se leía mal sobre el contenido detrás.
     Composite opaco = --bg debajo + --surface encima (mismo color, sin alpha). */
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface), var(--surface));
  background-clip: padding-box;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card);
  /* Shadows tight, sin glow exterior que se mezcle con elementos cercanos */
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  z-index: 9998;
  animation: qa-sticky-slide-up 280ms var(--ease-spring);
}
.qa-sticky[hidden] { display: none; }

/* Cuando el sticky está visible, el body añade padding-bottom para empujar
   el footer fuera del area del sticky. Evita superposiciones que se
   perciban como "transparencia". El JS toggle `body.qa-sticky-active`. */
body.qa-sticky-active {
  padding-bottom: 96px;
}

@keyframes qa-sticky-slide-up {
  from { transform: translate(-50%, 16px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

.qa-sticky-main {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
  color: var(--text);
  text-align: left;
  transition: background 140ms ease;
}
.qa-sticky-main:hover {
  background: var(--accent-soft);
}

/* Dot pulsante mientras corre — indica actividad */
.qa-sticky-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 14px var(--accent-glow);
  animation: qa-sticky-pulse 1.4s ease-in-out infinite;
}
.qa-sticky--done .qa-sticky-dot {
  animation: none;
  background: var(--lime);
  box-shadow: 0 0 8px color-mix(in oklab, var(--lime) 60%, transparent);
}

@keyframes qa-sticky-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.4); opacity: 0.55; }
}

.qa-sticky-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.qa-sticky-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa-sticky-detail {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa-sticky--done .qa-sticky-title { color: var(--success, #7be0a4); }

/* Mini-barra de progreso a la derecha */
.qa-sticky-bar {
  width: 110px;
  height: 4px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  overflow: hidden;
  align-self: center;
}
.qa-sticky-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width 320ms ease;
}
.qa-sticky--done .qa-sticky-fill {
  background: var(--lime);
  box-shadow: 0 0 8px color-mix(in oklab, var(--lime) 40%, transparent);
}

.qa-sticky-dismiss {
  width: 36px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--ink-3);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  transition: all 140ms ease;
}
.qa-sticky-dismiss:hover {
  color: var(--rust);
  background: var(--rust-soft);
}

@media (max-width: 540px) {
  .qa-sticky { bottom: 0.8rem; }
  .qa-sticky-bar { width: 60px; }
  .qa-sticky-detail { font-size: 0.65rem; }
}

/* ─── Charts ─── */
/* Wrapper de las cards de gráficas — contexto de posicionamiento del overlay
   glass (`.tt-cards-skel-overlay`, inset:0) que se activa al cambiar la ventana
   temporal. NO agrega estilo visual propio. */
.tp-charts-skel {
  position: relative;
}

.tp-chart-wrap {
  position: relative;
  margin-bottom: 2rem;
  padding: 1.4rem 1.4rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface);
}

/* Cursor vertical y punto resaltado al hover */
.tp-chart-cursor {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
  opacity: 0.65;
}
.tp-chart-cursor--secondary {
  stroke: var(--info);
}
.tp-chart-cursor--tertiary {
  stroke: var(--magenta);
}
.tp-chart-cursor-dot {
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px var(--accent-glow));
  pointer-events: none;
}
.tp-chart-cursor-dot--secondary {
  fill: var(--info);
  filter: drop-shadow(0 0 8px rgba(128, 221, 255, 0.6));
}
.tp-chart-cursor-dot--tertiary {
  fill: var(--magenta);
  filter: drop-shadow(0 0 8px rgba(255, 57, 197, 0.6));
}
.tp-chart-cursor[hidden],
.tp-chart-cursor-dot[hidden] {
  display: none;
}

/* Hover targets invisibles, más grandes que los puntos visibles */
.tp-chart-hover-target {
  fill: transparent;
  cursor: crosshair;
}

/* Tooltip HTML que aparece sobre el punto */
.tp-chart-tooltip {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.55rem 0.85rem;
  min-width: 110px;
  background: var(--popover-bg);
  border: 1px solid var(--accent);
  box-shadow:
    0 0 0 1px var(--accent-soft),
    0 8px 24px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  animation: tp-tooltip-in 120ms ease-out;
}
.tp-chart-tooltip[hidden] { display: none; }
.tp-chart-tooltip::after {
  /* punta apuntando al data point */
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--popover-bg);
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}
.tp-chart-tooltip-value {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tp-chart-tooltip-label {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.tp-chart-tooltip-meta {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 0.18rem;
}

/* Variante info para el tooltip del chart de precio */
.tp-chart--secondary ~ .tp-chart-tooltip,
.tp-chart-wrap[data-chart-tooltip]:has(.tp-chart--secondary) .tp-chart-tooltip {
  border-color: var(--info);
}
.tp-chart-wrap[data-chart-tooltip]:has(.tp-chart--secondary) .tp-chart-tooltip-value {
  color: var(--info);
  text-shadow: 0 0 8px rgba(128, 221, 255, 0.5);
}
.tp-chart-wrap[data-chart-tooltip]:has(.tp-chart--secondary) .tp-chart-tooltip::after {
  border-right-color: var(--info);
  border-bottom-color: var(--info);
}

.tp-chart-wrap[data-chart-tooltip]:has(.tp-chart--tertiary) .tp-chart-tooltip {
  border-color: var(--magenta);
}
.tp-chart-wrap[data-chart-tooltip]:has(.tp-chart--tertiary) .tp-chart-tooltip-value {
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(255, 57, 197, 0.5);
}
.tp-chart-wrap[data-chart-tooltip]:has(.tp-chart--tertiary) .tp-chart-tooltip::after {
  border-right-color: var(--magenta);
  border-bottom-color: var(--magenta);
}

@keyframes tp-tooltip-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% - 8px)); }
  to { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); }
}
.tp-chart-title {
  font-family: var(--body);
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.tp-chart-meta {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}
.tp-chart-meta strong {
  color: var(--text-dim);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.dot-sep { color: var(--text-faint); margin: 0 0.4em; }

.tp-chart {
  width: 100%;
  height: auto;
  display: block;
}
.tp-chart .tp-grid {
  stroke: var(--border);
  stroke-width: 0.5;
  stroke-dasharray: 2 4;
}
.tp-chart .tp-axis {
  stroke: var(--border-bright);
  stroke-width: 1;
}
.tp-chart .tp-axis-label {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  fill: var(--text-dim);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.tp-chart .tp-axis-label--y {
  text-anchor: end;
}
.tp-chart .tp-axis-label--x {
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  fill: var(--text-muted);
}
.tp-chart .tp-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.tp-chart .tp-line--secondary {
  stroke: var(--info);
  filter: drop-shadow(0 0 6px rgba(128, 221, 255, 0.5));
}
.tp-chart .tp-line--tertiary {
  stroke: var(--magenta);
  filter: drop-shadow(0 0 6px rgba(255, 57, 197, 0.5));
}
.tp-chart .tp-area {
  fill: rgba(212, 255, 66, 0.08);
  stroke: none;
}
.tp-chart .tp-area--tertiary {
  fill: rgba(255, 57, 197, 0.08);
}
.tp-chart .tp-dot {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.tp-chart .tp-dot--tertiary {
  stroke: var(--magenta);
}
.tp-chart .tp-dot--secondary {
  stroke: var(--info);
}

/* ─── Opción B (mobile): sparkline limpia para ventas + precio ───
   Stat destacado arriba + línea sin ejes/grid + rango de fechas debajo. En
   desktop NO se muestran (manda la gráfica detallada con ejes). El tap en la
   gráfica sigue mostrando el cursor + tooltip (lo maneja initChartTooltip). */
.tp-chart-stat,
.tp-chart-daterange { display: none; }
.tp-chart-stat-num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tp-chart-stat-sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
}
@media (max-width: 640px) {
  .tp-chart-wrap--spark .tp-grid,
  .tp-chart-wrap--spark .tp-axis,
  .tp-chart-wrap--spark .tp-axis-label--y,
  .tp-chart-wrap--spark .tp-axis-label--x,
  .tp-chart-wrap--spark .tp-chart-meta { display: none; }
  .tp-chart-wrap--spark .tp-line { stroke-width: 3; }
  .tp-chart-wrap--spark .tp-chart-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 2px 0 12px;
  }
  .tp-chart-wrap--spark .tp-chart-daterange {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 8px;
  }
}

.tp-history-table-wrap {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.tp-history-table-wrap summary {
  padding: 0.7rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}
.tp-history-table-wrap summary::before {
  content: "▸ ";
  color: var(--accent);
  margin-right: 0.4rem;
}
.tp-history-table-wrap[open] summary::before { content: "▼ "; }
.tp-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  border-top: 1px solid var(--border);
}
.tp-history-table th,
.tp-history-table td {
  padding: 0.55rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
.tp-history-table th {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
}
.tp-history-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tp-history-table tbody tr:last-child td { border-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Tracker — Detalle de proveedor
   ═══════════════════════════════════════════════════════════════════════════ */

.ts-hero {
  position: relative;
  padding: 2.2rem 2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--border);
  background:
    var(--surface);
  overflow: hidden;
}
.ts-hero-corner {
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
}
.ts-hero-corner--tl { top: 8px; left: 8px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.ts-hero-corner--tr { top: 8px; right: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.ts-hero-corner--bl { bottom: 8px; left: 8px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.ts-hero-corner--br { bottom: 8px; right: 8px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

.ts-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.85rem;
}
.ts-hero-title {
  font-family: var(--body);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 1.5rem;
}

.ts-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.ts-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
}
.ts-meta-cell dt {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.ts-meta-cell dd {
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* ─── Responsive ─── */
@media (max-width: 760px) {
  .tp-hero { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.4rem; }
  .tp-hero-image { width: 100%; max-width: 280px; margin: 0 auto; }
  .tracker-hero { padding: 2.2rem 1.4rem 1.8rem; }
  .top-product-link { grid-template-columns: 90px 1fr; }
  .top-product-image { width: 90px; height: 90px; }
  .top-product-hero-value { font-size: 1.4rem; }
  .price-change-link { grid-template-columns: 48px 1fr; }
  .price-change-prices { grid-column: 1 / -1; padding-top: 0.4rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPETITION SECTION — análisis de "qué otros proveedores venden el mismo
   producto" en el detalle del tracker.
   ═══════════════════════════════════════════════════════════════════════════ */

.competition-section {
  margin: 2.5rem 0 1.5rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  background:
    var(--surface);
}
.competition-head {
  margin-bottom: 1.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.competition-captured {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.competition-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.competition-loading {
  /* HTMX agrega la clase `htmx-request` al elemento referenciado por `hx-indicator`
     mientras la request está en vuelo. Solo entonces el spinner se muestra. */
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.competition-loading.htmx-request {
  display: inline-flex;
}
.competition-loading-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse-fast 1s ease-in-out infinite;
}

/* ── Estado: analizando (barra + meta + query actual) ── */
.competition-progress {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
.competition-progress-bar {
  position: relative;
  height: 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border);
  overflow: hidden;
}
.competition-progress-fill {
  height: 100%;
  background: var(--accent);
  background-size: 200% 100%;
  box-shadow: 0 0 14px var(--accent-glow), inset 0 0 8px rgba(255, 255, 255, 0.2);
  animation: progress-shine 2.4s linear infinite;
  transition: width 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.competition-progress-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.competition-progress-pct {
  font-family: var(--display);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
  min-width: 3.2em;
}
.competition-progress-sep {
  color: var(--text-muted);
}
.competition-progress-status {
  color: var(--text);
}
.competition-progress-query {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.1rem 0.55rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono, var(--body));
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* ── Estado: error ── */
.competition-error {
  padding: 1.4rem 1.1rem;
  background: rgba(255, 80, 80, 0.05);
  border: 1px dashed rgba(255, 120, 120, 0.55);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.competition-error-glyph {
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: #ff8a8a;
  text-shadow: 0 0 6px rgba(255, 120, 120, 0.45);
  margin: 0;
}
.competition-error-msg {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin: 0;
}

.competition-block {
  margin-top: 1.5rem;
}
.competition-block-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.7rem;
}
.competition-block-glyph {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}
.competition-block-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.15rem 0.5rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.competition-table-wrap {
  border: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
}
.competition-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.competition-table thead th {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0.75rem 0.95rem;
  text-align: left;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.competition-table .col-num {
  text-align: right;
}
.competition-table .col-flag {
  text-align: center;
  width: 110px;
}
.competition-table .col-link {
  text-align: center;
  width: 60px;
}
.competition-table tbody td {
  padding: 0.6rem 0.95rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  vertical-align: middle;
}
.competition-table tbody tr:last-child td { border-bottom: 0; }
.competition-table tbody tr:hover { background: var(--surface-2); }
.competition-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-family: var(--body);
}
.competition-table .num--accent {
  color: var(--accent);
  font-family: var(--display);
  font-size: 0.95rem;
  text-shadow: 0 0 6px var(--accent-glow);
}
.competition-table .col-link a {
  color: var(--text-faint);
  text-decoration: none;
  font-size: 1.05rem;
  transition: color 140ms ease;
}
.competition-table .col-link a:hover {
  color: var(--accent);
}
.competition-store-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color 140ms ease;
}
.competition-store-link:hover {
  color: var(--accent);
}

/* Celda Producto: thumbnail + nombre, clickable */
.competition-table .col-product {
  min-width: 280px;
  max-width: 380px;
}
.competition-product-cell {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  transition: color 140ms ease;
}
.competition-product-cell:hover {
  color: var(--accent);
}
.competition-product-thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: #050709;
  border: 1px solid var(--border);
  overflow: hidden;
  display: block;
}
.competition-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.competition-product-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 1rem;
}
.competition-product-name {
  font-size: 0.86rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Trackeados: subtle accent. No-trackeados: dim un poco para diferenciar visualmente. */
.competition-table--tracked thead th {
  border-bottom-color: var(--accent);
}
.competition-table--untracked tbody td {
  color: var(--text-muted);
}
.competition-table--untracked tbody tr:hover {
  background: var(--bg);
}

.competition-best-flag {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  white-space: nowrap;
}

/* "Sinónimos usados en la búsqueda" — MISMO diseño que la sección de Meta
   (`meta-ads-synf`): <details> colapsable con filas densas. Clases `comp-synf`/
   `comp-synr-*` espejan `meta-ads-synf`/`meta-ads-synr-*` (2026-06-09). Las clases
   viejas `.competition-queries*` quedaron sin uso (el template usa las nuevas);
   los overrides `!important` que aún las referencian más abajo son inertes. */
.competition-section .comp-synf {
  border: 1px solid var(--line); background: var(--surface); border-radius: 13px;
  margin-top: 1.5rem; overflow: hidden;
}
.competition-section .comp-synf > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.competition-section .comp-synf > summary::-webkit-details-marker { display: none; }
.competition-section .comp-synf-ico { color: var(--ink-4); flex: none; }
.competition-section .comp-synf-ttl { font-size: 13px; font-weight: 700; color: var(--ink); }
.competition-section .comp-synf-meta { font-size: 12px; color: var(--ink-4); }
.competition-section .comp-synf-car { margin-left: auto; font-size: 11px; color: var(--ink-4); transition: transform .2s; }
.competition-section .comp-synf[open] .comp-synf-car { transform: rotate(180deg); }
.competition-section .comp-synf-body { border-top: 1px solid var(--line); padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.competition-section .comp-synr-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 9px 12px; text-decoration: none; transition: .12s; }
.competition-section .comp-synr-row:hover { border-color: var(--accent); }
.competition-section .comp-synr-q { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.competition-section .comp-synr-q .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.competition-section .comp-synr-q svg { flex: none; color: var(--ink-5); }
.competition-section .comp-synr-go { color: var(--ink-4); font-size: 13px; }
@media (max-width: 760px) {
  .competition-section .comp-synr-q .nm { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
  .competition-section .comp-synr-row { align-items: start; }
  .competition-section .comp-synr-q { align-items: flex-start; }
  .competition-section .comp-synr-q svg { margin-top: 2px; }
}

/* ════════ Competencia v2: lista única (TÚ + mejor precio + con ventas) ════════ */

/* Subtítulo descriptivo del bloque "Destacados" (reemplaza el badge huérfano) */
.competition-block-sub {
  margin: -0.3rem 0 0.7rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.competition-block-sub .competition-price-tag {
  vertical-align: baseline;
}

/* Fila/celda de referencia: TU producto, primera de la tabla */
.competition-table tbody tr.competition-row--self {
  background: var(--accent-soft);
}
.competition-table tbody tr.competition-row--self td {
  border-bottom: 1px solid var(--accent);
  color: var(--text);
}
.competition-self-tag {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
  white-space: nowrap;
}
.competition-self-hint {
  color: var(--text-faint);
  font-weight: 400;
}

/* Fila destacada del mejor precio (aunque no tenga ventas) */
.competition-table tbody tr.competition-row--best td {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Chip de mejor precio inline (reemplaza la columna casi-vacía "★ Mejor precio") */
.competition-price {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: flex-end;
}
.competition-price--best {
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 6px var(--accent-glow);
}
.competition-price-tag {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 0.08rem 0.35rem;
  color: var(--bg);
  background: var(--accent);
  border-radius: 2px;
}

/* Nota de "sin ventas" arriba del grupo plegado */
.competition-zero-note {
  font-size: 0.72rem;
  color: var(--text-faint);
  padding: 0.5rem 0.95rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* ── Toggle ver/ocultar 100% CSS (checkbox hack) ── */
.competition-hidden-rows {
  display: none;
}
.competition-hidden-cards {
  display: none;
}
.competition-more-toggle:checked ~ .competition-list .competition-hidden-rows {
  display: table-row-group;
}
.competition-more-toggle:checked ~ .competition-list .competition-hidden-cards {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.7rem;
}
.competition-more-summary {
  display: block;
  text-align: center;
  cursor: pointer;
  margin-top: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-top: 1px dashed var(--border-bright);
  background: var(--bg);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 140ms ease;
}
.competition-more-summary:hover {
  background: var(--surface-2);
}
.competition-more-summary .muted {
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
.competition-more-summary .chev {
  display: inline-block;
  transition: transform 160ms ease;
}
.competition-more-summary .lbl-hide {
  display: none;
}
.competition-more-toggle:checked ~ .competition-list .competition-more-summary .lbl-show {
  display: none;
}
.competition-more-toggle:checked ~ .competition-list .competition-more-summary .lbl-hide {
  display: inline;
}
.competition-more-toggle:checked ~ .competition-list .competition-more-summary .chev {
  transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════════════
   Registros de competencia · tarjetas-fila estilo estándar (madl/cdense)
   Unifica desktop + mobile en tarjetas redondeadas (antes: tabla en desktop
   + cards en mobile). 4 métricas en columnas (precio/vend30d/vend7d/stock);
   `.comp-rec-mets` = display:contents en desktop → cada celda es columna del
   grid; flex-wrap en mobile. (2026-06-09) El CSS viejo `.competition-table*`
   y `.competition-card*` quedó sin uso (markup eliminado).
   ══════════════════════════════════════════════════════════════════════ */
.competition-section .competition-reclist { display: flex; flex-direction: column; gap: 8px; }
.competition-section .comp-rec {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 96px 60px 60px 66px 22px;
  gap: 11px; align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface);
  transition: border-color .12s;
}
.competition-section .comp-rec:hover { border-color: var(--line-2); }
.competition-section .comp-rec--best { border-color: var(--accent); }
.competition-section .comp-rec--self { background: var(--accent-soft); border-color: var(--accent); }
.competition-section .comp-rec-thumb {
  width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.competition-section .comp-rec-thumb img { width: 100%; height: 100%; object-fit: cover; }
.competition-section .comp-rec-thumb-empty { color: var(--ink-5); font-size: 1.05rem; }
.competition-section .comp-rec-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.competition-section .comp-rec-name {
  font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.competition-section a.comp-rec-name:hover { color: var(--accent); }
.competition-section .comp-rec-meta { display: flex; align-items: center; gap: 7px; min-width: 0; }
.competition-section .comp-rec-store {
  font-size: 11.5px; color: var(--ink-4); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.competition-section a.comp-rec-store:hover { color: var(--accent); }
/* métricas: display:contents en desktop → las 4 celdas son columnas del grid */
.competition-section .comp-rec-mets { display: contents; }
.competition-section .comp-rec-m { display: flex; flex-direction: column; gap: 1px; min-width: 0; align-items: flex-end; text-align: right; }
.competition-section .comp-rec-m-val { font: 700 12px/1.1 var(--font-mono); color: var(--ink); white-space: nowrap; }
.competition-section .comp-rec-m-val--accent { color: var(--accent); }
.competition-section .comp-rec-m--price .comp-rec-m-val { font-size: 13px; }
.competition-section .comp-rec-m-lbl {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-5); line-height: 1; white-space: nowrap;
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
}
.competition-section .comp-rec-go { color: var(--ink-4); font-size: 14px; text-decoration: none; justify-self: end; }
.competition-section a.comp-rec-go:hover { color: var(--accent); }
@media (max-width: 640px) {
  .competition-section .comp-rec {
    grid-template-columns: 46px 1fr auto;
    grid-template-areas:
      "thumb id   go"
      "thumb mets mets";
    gap: 6px 11px; align-items: start;
  }
  .competition-section .comp-rec-thumb { grid-area: thumb; }
  .competition-section .comp-rec-id { grid-area: id; align-self: center; }
  .competition-section .comp-rec-go { grid-area: go; }
  .competition-section .comp-rec-mets { grid-area: mets; display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 4px; }
  .competition-section .comp-rec-m { align-items: flex-start; text-align: left; }
  .competition-section .comp-rec-m-lbl { justify-content: flex-start; }
}

/* ── MOBILE: cards en vez de tabla ── */
.competition-cards {
  display: none;
}
.competition-card {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  grid-template-areas:
    "thumb name link"
    "thumb store link"
    "stats stats stats";
  gap: 0.3rem 0.7rem;
  align-items: center;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.competition-card--best {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.competition-card--self {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.competition-card-thumb {
  grid-area: thumb;
  width: 52px;
  height: 52px;
  align-self: start;
  background: #050709;
  border: 1px solid var(--border);
  overflow: hidden;
}
.competition-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.competition-card-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}
.competition-card-namewrap {
  grid-area: name;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}
.competition-card-name {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.competition-card-store {
  grid-area: store;
  color: var(--text-muted);
  font-size: 0.78rem;
}
.competition-card-link {
  grid-area: link;
  align-self: start;
  color: var(--text-faint);
  font-size: 1.15rem;
  text-decoration: none;
  padding: 0.1rem 0.2rem;
}
.competition-card-link:hover {
  color: var(--accent);
}
.competition-card-stats {
  grid-area: stats;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}
.competition-card-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.competition-card-stat-label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.competition-card-stat-val {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.competition-card-stat--price .competition-card-stat-val {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}
.competition-card--best .competition-card-stat--price .competition-card-stat-val {
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}
.competition-card-stat--sold .competition-card-stat-val {
  color: var(--accent);
  font-family: var(--display);
}
.competition-card .tier-pill {
  font-size: 0.6rem;
  padding: 0.12rem 0.4rem;
}

@media (max-width: 760px) {
  .competition-table thead th,
  .competition-table tbody td {
    padding: 0.5rem 0.6rem;
    font-size: 0.78rem;
  }
}

/* Bajo 640px: la tabla se reemplaza por cards (sin scroll horizontal) */
@media (max-width: 640px) {
  .competition-table-wrap {
    display: none;
  }
  .competition-cards {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
}


/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Product preview popup — aparece on-hover sobre cards en /scoring y /tracker
   ========================================================================== */

/* NO usamos `isolation: isolate` acá — eso encerraba el z-index del popup
   dentro del stacking context de la card, dejando que elementos de la página
   con z-index propio se rendericen por encima. */
.scoring-card,
.top-product {
  position: relative;
}

/* Wrapper que envuelve cada .prod-card (Tracker + Scoring) — sirve para que
   el slot del preview popup viva afuera del .prod-card y escape de su
   `overflow: hidden`. El wrapper es el grid item; el card adentro llena la
   altura para que cards de la misma fila queden iguales. */
.prod-card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.prod-card-wrap > .prod-card {
  flex: 1;
}

/* La .tt-card que envuelve "Top productos" del Tracker tiene overflow:hidden
   (default) que recortaría la parte superior del popup cuando éste se
   posiciona arriba del card hovereado. Para que el popup pueda escapar del
   card padre, override overflow para esa card específica (identificada por
   `data-cards-skeleton`, que ya usamos para el skeleton localizado).
   El skeleton overlay interno (inset:0 + border-radius propio) no sufre. */
.tt-card[data-cards-skeleton] {
  overflow: visible;
}

.product-preview-slot {
  /* `fixed` (no `absolute`): el JS `positionPreview` lo fija respecto al
     viewport (top/left clampeado) → para cards de la columna derecha no se sale
     del borde del browser, y en la izquierda queda EN FRENTE del sidebar
     (z-index alto; el sidebar es sticky con z auto) en vez de cortado. */
  position: fixed;
  top: 0;
  left: 0;
  width: 460px;
  max-width: 92vw;
  z-index: 9999;
  pointer-events: none;
  display: none;
}

/* Mostrar el popup al hover del wrapper (= hover del card o del propio popup,
   ambos descendientes del wrapper). Solo si HTMX ya cargó contenido. */
.prod-card-wrap:hover .product-preview-slot:not(:empty) {
  display: block;
  pointer-events: auto;
}

.product-preview {
  /* `position: relative` + `::before` con inset:0 garantiza una capa de
     fondo sólida incluso si por alguna razón el background-color directo
     no se aplica (compositing layer issues, blend modes, etc). */
  position: relative;
  /* Fondo SÓLIDO elevado (no `--surface-3`, que en dark es translúcido
     rgba(255,255,255,.10) → la card se veía transparente sobre la página). */
  background-color: var(--popover-bg);
  border: 1.5px solid var(--accent);
  padding: 1.25rem 1.45rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-mid);
  box-shadow:
    0 24px 60px -10px rgba(0, 0, 0, 0.95),
    0 0 0 4px rgba(0, 0, 0, 0.7),
    0 0 28px -2px var(--accent-glow);
}

.product-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--popover-bg);
  z-index: -1;
  pointer-events: none;
}

.product-preview-header {
  margin: 0 0 0.7rem 0;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}

.product-preview-title {
  margin: 0 0 0.3rem 0;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-preview-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
}

.product-preview-store {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-preview-section { margin-bottom: 0.95rem; }
.product-preview-section:last-child { margin-bottom: 0; }

.product-preview-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 0.55rem 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.product-preview-total {
  font-size: 1.18rem;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0;
}

.product-preview-chart-wrap {
  position: relative;
}

.product-preview-chart {
  display: block;
  width: 100%;
  height: 185px;
  overflow: visible;
}

.product-preview-chart-area {
  fill: var(--accent);
  fill-opacity: 0.18;
  stroke: none;
}

.product-preview-chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-preview-chart-dot {
  fill: var(--surface-3);
  stroke: var(--accent);
  stroke-width: 1.5;
}

/* Ejes y grid */
.product-preview-axis {
  stroke: var(--border-bright);
  stroke-width: 1;
}
.product-preview-grid {
  stroke: var(--border);
  stroke-width: 0.5;
  stroke-dasharray: 2 3;
}
.product-preview-axis-label {
  font-family: var(--body);
  font-size: 11px;
  fill: var(--text-muted);
  letter-spacing: 0.04em;
}
.product-preview-axis-label--y {
  text-anchor: end;
}
.product-preview-axis-label--x {
  text-anchor: middle;
  text-transform: uppercase;
}

/* Cursor + dot resaltado al hacer hover sobre un punto */
.product-preview-cursor {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  pointer-events: none;
}
.product-preview-cursor-dot {
  fill: var(--accent);
  stroke: var(--surface-3);
  stroke-width: 2;
  pointer-events: none;
}

/* Hover targets (área grande para captar mouse — invisible visualmente) */
.product-preview-chart-hover-target {
  fill: transparent;
  cursor: default;
}

/* Tooltip flotante (HTML, posicionado por JS sobre el punto) */
.product-preview-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--bg);
  border: 1px solid var(--accent);
  padding: 0.45rem 0.7rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.85);
}
.product-preview-tooltip[hidden] { display: none; }

.product-preview-tooltip-value {
  font-weight: 500;
  color: var(--accent);
  font-size: 0.95rem;
}
.product-preview-tooltip-label {
  margin-left: 0.4rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.product-preview-tooltip-meta {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.product-preview-empty {
  margin: 0;
  padding: 0.8rem 0;
  font-size: 0.75rem;
  color: var(--text-faint);
  text-align: center;
}

.product-preview-comp {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-dim);
}
.product-preview-comp strong { color: var(--text); font-weight: 500; }
.product-preview-comp--good { color: var(--accent); }
.product-preview-comp--proxy { color: var(--gold); }
.product-preview-comp--unknown { color: var(--text-faint); font-style: italic; }

.product-preview-comp-hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
}

/* En pantallas chicas (mobile) escondemos el popup — el click en la card lleva al detalle */
@media (max-width: 760px) {
  .product-preview-slot { display: none !important; }
}

/* ==========================================================================
   Scoring filters: toggles + banner de productos ocultos + badge "creciendo"
   ========================================================================== */

/* (Regla legacy `.scoring-filters { display: inline-flex }` eliminada 2026-06-04:
   era del diseño viejo de chips inline y encogía el card de filtros a su
   contenido. Hoy `.scoring-filters` es un `.tt-card` (block) → full-width, mismo
   ancho que KPIs/grid, igual que `.tracker-filters`.) */

.scoring-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-decoration: none;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  cursor: pointer;
}
.scoring-filter-toggle:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--border-bright);
}
.scoring-filter-toggle--active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}
.scoring-filter-toggle--active:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.scoring-filter-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.scoring-hidden-banner {
  margin: 0 0 1rem 0;
  padding: 0.6rem 1rem;
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.scoring-hidden-banner strong { color: var(--gold); font-weight: 600; }
.scoring-hidden-banner-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  margin-left: 0.2rem;
}
.scoring-hidden-banner-link:hover { text-decoration: underline; }

/* Badge "↑ CRECIENDO" sobre cards con aceleración fuerte de ventas */
.scoring-card-trend-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 0.22rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: var(--bg);
  text-transform: uppercase;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.7);
  font-variant-numeric: tabular-nums;
}

/* Variant para productos recién despegando (earlier_sales=0). Color magenta
   para diferenciar visualmente de los que tienen historia comparable. */
.scoring-card-trend-badge--new {
  background: var(--magenta);
  color: var(--bg);
}

/* ==========================================================================
   Meta Ad Library section (tracker_product detail) — análisis on-demand
   de anuncios activos en Meta CO. Estructura paralela a competition-section.
   ========================================================================== */

.meta-ads-section {
  /* Cambio 2026-05-10: el override del accent por "azul Meta" se removió
     para estandarizar las 3 secciones del detalle (Meta / TikTok / Descargar
     creativos) bajo el mismo accent del theme. El emoji 🇨🇴 del título + el
     icono ya dan contexto visual de qué sección es sin necesidad de cambiar
     toda la paleta. */
  margin: 2.5rem 0 1.5rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.meta-ads-head {
  margin-bottom: 1.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.meta-ads-captured {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.meta-ads-stale-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.5rem;
  background: rgba(255, 180, 80, 0.1);
  border: 1px solid rgba(255, 180, 80, 0.5);
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.meta-ads-mode-badge {
  display: inline-block;
  padding: 0.08rem 0.45rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.meta-ads-controls {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}

/* ── Tabs de países (Meta Ad Library multi-mercado) ── */
.meta-ads-country-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  /* margin-bottom: separa las cajas de países del texto de apoyo que sigue
     (idle "Busca en Meta Ad Library…", cache, etc.). En mobile los tabs van
     display:none (los reemplaza el dropdown), así que esto solo afecta desktop. */
  margin: 0.9rem 0 1rem;
}
.meta-ads-country-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.meta-ads-country-tab:hover {
  color: var(--accent);
  border-color: var(--accent);
}
/* Tab del país activo: filled con accent + glow. */
.meta-ads-country-tab--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 10px var(--accent-glow);
}
.meta-ads-country-tab--active:hover {
  color: var(--bg);
}
/* Tab de país que ya tiene análisis cacheado — fondo verde sutil + borde
   verde para señal visual fuerte de "completado". El tab activo sigue
   con accent azul (override más abajo) para que la selección actual
   siempre prime sobre el estado de "analizado". Running tiene su propio
   override (azul pulsante). */
.meta-ads-country-tab--analyzed:not(.meta-ads-country-tab--active):not(.meta-ads-country-tab--running) {
  background: rgba(120, 220, 140, 0.12);
  border-color: rgba(120, 220, 140, 0.55);
  color: var(--text);
}
.meta-ads-country-tab--analyzed:not(.meta-ads-country-tab--active):not(.meta-ads-country-tab--running):hover {
  background: rgba(120, 220, 140, 0.2);
  border-color: rgba(120, 220, 140, 0.85);
}
.meta-ads-country-tab-flag {
  font-size: 0.95rem;
  line-height: 1;
}
.meta-ads-country-tab-name {
  font-weight: 500;
}
.meta-ads-country-tab-check {
  font-size: 0.85rem;
  color: rgba(120, 220, 140, 0.95);
  font-weight: 700;
}
.meta-ads-country-tab--active .meta-ads-country-tab-check {
  color: var(--bg);
}

/* ── Estado: analizando ── */
.meta-ads-progress {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
.meta-ads-progress-bar {
  position: relative;
  height: 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border);
  overflow: hidden;
}
.meta-ads-progress-fill {
  height: 100%;
  background: var(--accent);
  background-size: 200% 100%;
  box-shadow: 0 0 14px var(--accent-glow), inset 0 0 8px rgba(255, 255, 255, 0.2);
  animation: progress-shine 2.4s linear infinite;
  transition: width 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.meta-ads-progress-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.meta-ads-progress-pct {
  font-family: var(--display);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
  min-width: 3.2em;
}
.meta-ads-progress-sep {
  color: var(--text-muted);
}
.meta-ads-progress-status {
  color: var(--text);
}
.meta-ads-progress-detail {
  margin-left: 0.4em;
  font-family: var(--mono, var(--body));
  font-size: 0.78rem;
  color: var(--text-muted);
}
.meta-ads-progress-query {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.1rem 0.55rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono, var(--body));
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* ── Estado: error ── */
.meta-ads-error {
  padding: 1.4rem 1.1rem;
  background: rgba(255, 80, 80, 0.05);
  border: 1px dashed rgba(255, 120, 120, 0.55);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.meta-ads-error-glyph {
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: #ff8a8a;
  text-shadow: 0 0 6px rgba(255, 120, 120, 0.45);
  margin: 0;
}
.meta-ads-error-msg {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin: 0;
}

/* ── KPIs hero — 3 números clave ── */
.meta-ads-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.meta-ads-kpi {
  padding: 1rem 1.2rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.meta-ads-kpi--accent {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}

/* Cards de canal de tráfico (cuántas tiendas cierran por WhatsApp vs landing).
   Van bajo el hero de KPIs. Colores espejan los tags por registro: WhatsApp =
   lima, Landing = accent. */
.meta-ads-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.meta-ads-channel-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}
.meta-ads-channel-card--whatsapp { background: var(--lime-soft); border-color: var(--lime-ink); }
.meta-ads-channel-card--landing { background: var(--accent-soft); border-color: var(--accent); }
.meta-ads-channel-ico { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.meta-ads-channel-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.meta-ads-channel-num { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.meta-ads-channel-card--whatsapp .meta-ads-channel-num { color: var(--lime-ink); }
.meta-ads-channel-card--landing .meta-ads-channel-num { color: var(--accent); }
.meta-ads-channel-label { font-size: 0.8rem; color: var(--ink-3); line-height: 1.25; }
@media (max-width: 520px) {
  .meta-ads-channels { grid-template-columns: 1fr; }
}

/* ─── Bloque de precios competitivos (A4.2) ─── */
/* Variantes por veredicto: el background-tint cambia según si la competencia
   está por debajo del mínimo rentable (rust), apretado (amber), cómodo (lime)
   o sin datos (neutro). */
.meta-ads-competitor-pricing {
  margin-bottom: 1.6rem;
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.meta-ads-competitor-pricing--quemado {
  background: var(--rust-soft);
  border-color: var(--rust);
}
.meta-ads-competitor-pricing--pronto {
  background: var(--amber-soft);
  border-color: var(--amber);
}
.meta-ads-competitor-pricing--entrar {
  background: var(--lime-soft);
  border-color: var(--lime);
}
.meta-ads-competitor-pricing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.meta-ads-competitor-pricing-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.meta-ads-competitor-pricing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.meta-ads-competitor-pricing-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-ads-competitor-pricing-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.meta-ads-competitor-pricing-value {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}
.meta-ads-competitor-pricing-value-small {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
}
.meta-ads-competitor-pricing-hint {
  font-size: 12px;
  color: var(--ink-3);
}
.meta-ads-competitor-pricing-hint a {
  color: inherit;
  text-decoration: underline;
}
.meta-ads-competitor-pricing-detail {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.meta-ads-competitor-pricing-detail-list {
  font-family: var(--font-sans);
  font-size: 13.5px;
}
.meta-ads-competitor-pricing-detail-list summary {
  cursor: pointer;
  color: var(--ink-3);
  user-select: none;
}
.meta-ads-competitor-pricing-detail-list ul {
  list-style: none;
  padding: 8px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-ads-competitor-pricing-detail-list li {
  list-style: none;
  border-bottom: 1px dashed var(--border);
}
.meta-ads-competitor-pricing-detail-list li:last-child {
  border-bottom: none;
}
/* La fila completa es ahora un flex container que contiene 2 hijos:
   1) la miniatura (botón) que abre el modal interno del ad
   2) el link a Meta Ad Library (resto de la fila) */
.meta-ads-competitor-pricing-detail-list li.meta-ads-competitor-pricing-detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.meta-ads-competitor-pricing-detail-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
a.meta-ads-competitor-pricing-detail-link:hover {
  opacity: 0.75;
}
.meta-ads-competitor-pricing-detail-summary-counter {
  margin-left: 6px;
  color: var(--ink-3);
  font-size: 12px;
}
.meta-ads-competitor-pricing-detail-advertiser {
  color: var(--ink-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta-ads-competitor-pricing-detail-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
  flex-shrink: 0;
}
.meta-ads-competitor-pricing-detail-arrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  flex-shrink: 0;
}
/* Chips de acción al final de cada fila del desglose: "Meta" siempre,
   "Tienda" solo cuando el precio vino del landing. Estilo compacto, hover
   discreto. Cada chip es un <a> independiente. */
.meta-ads-competitor-pricing-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.meta-ads-competitor-pricing-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.meta-ads-competitor-pricing-detail-chip:hover {
  background: var(--surface-3, var(--surface-2));
  border-color: var(--accent);
  color: var(--ink);
}
/* Chip "Tienda" un poco más prominente — es una pista útil cuando el
   precio vino de la landing y el user querrá ir a verla. */
.meta-ads-competitor-pricing-detail-chip--source {
  background: var(--lime-soft);
  color: var(--lime);
  border-color: var(--lime);
}
.meta-ads-competitor-pricing-detail-chip--source:hover {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}
/* Ícono de origen del precio: 📝 = ad_text (capa 1), 🌐 = landing (capa 2).
   Tamaño chico, sin background — solo es un hint visual del source. */
.meta-ads-competitor-pricing-detail-source {
  font-size: 12px;
  flex-shrink: 0;
  cursor: help;
  opacity: 0.7;
}
/* Miniatura del creative del ad — para verificar visualmente que el precio
   sí corresponde al producto del análisis. 44px cuadrado, redondeado.
   Cuando es <button>, click abre el modal interno (video o imagen). */
.meta-ads-competitor-pricing-detail-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
button.meta-ads-competitor-pricing-detail-thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px var(--accent);
}
.meta-ads-competitor-pricing-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.meta-ads-competitor-pricing-detail-thumb-empty,
.meta-ads-competitor-pricing-detail-thumb--placeholder {
  font-family: var(--font-mono);
  color: var(--ink-4);
  font-size: 16px;
}
.meta-ads-competitor-pricing-detail-thumb-play {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1;
}
/* Badge "dudoso" al lado del nombre del advertiser cuando el precio viene
   de un ad clasificado como `uncertain` por el LLM. Visual: amber suave
   para que destaque sin ser un error. */
.meta-ads-competitor-pricing-detail-uncertain {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: help;
}
.meta-ads-competitor-pricing-detail-row--uncertain {
  opacity: 0.85;
}
.meta-ads-kpi-label {
  font-family: var(--body);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}
.meta-ads-kpi-value {
  font-family: var(--display);
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}
.meta-ads-kpi--accent .meta-ads-kpi-value {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}
.meta-ads-kpi-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ── Breakdown por sinónimo ── */
.meta-ads-by-query {
  margin: 1.5rem 0;
}
.meta-ads-by-query-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
}
.meta-ads-by-query-glyph {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}
.meta-ads-by-query-hint {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted);
}
.meta-ads-by-query-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
}
.meta-ads-by-query-card {
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.meta-ads-by-query-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono, var(--body));
  font-size: 0.84rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 120ms, color 120ms;
}
.meta-ads-by-query-name:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.meta-ads-by-query-name-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta-ads-by-query-name-arrow {
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.85;
  margin-left: auto;
  transition: opacity 120ms, transform 120ms;
}
.meta-ads-by-query-name:hover .meta-ads-by-query-name-arrow {
  opacity: 1;
  transform: translate(1px, -1px);
}
.meta-ads-by-query-name-icon {
  flex-shrink: 0;
}
.meta-ads-by-query-total {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.meta-ads-by-query-total-num {
  font-family: var(--display);
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.meta-ads-by-query-total-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.meta-ads-by-query-pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.meta-ads-by-query-pill {
  padding: 0.12rem 0.5rem;
  font-family: var(--mono, var(--body));
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
}
.meta-ads-by-query-pill--match {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.meta-ads-by-query-pill--uncertain {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(220, 180, 60, 0.08);
}
.meta-ads-by-query-pill--unrelated {
  border-color: var(--border);
  color: var(--text-faint);
}

/* ── Buckets (match / uncertain) ── */
.meta-ads-bucket {
  margin-top: 1.2rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.meta-ads-bucket--match {
  border-left: 3px solid var(--accent);
}
.meta-ads-bucket--uncertain {
  border-left: 3px solid var(--gold);
}
.meta-ads-bucket-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  list-style: none;
}
.meta-ads-bucket-title::-webkit-details-marker { display: none; }
.meta-ads-bucket-glyph {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
  transition: transform 200ms;
}
.meta-ads-bucket--uncertain .meta-ads-bucket-glyph { color: var(--gold); text-shadow: 0 0 8px rgba(220, 180, 60, 0.45); }
.meta-ads-bucket[open] .meta-ads-bucket-glyph { transform: rotate(90deg); }
.meta-ads-bucket-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.15rem 0.5rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.meta-ads-bucket--uncertain .meta-ads-bucket-count {
  background: rgba(220, 180, 60, 0.1);
  border-color: var(--gold);
  color: var(--gold);
}
/* Nota al pie del bloque resumen — solo aparece cuando hay precios detectados,
   apuntando al user que el desglose vive en las cards de abajo. */
.meta-ads-competitor-pricing-footnote {
  margin: 0;
  padding-top: 4px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
}

/* ── Footer info ── */
.meta-ads-footer {
  margin-top: 1.5rem;
  padding-top: 0.95rem;
  border-top: 1px dashed var(--border);
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.meta-ads-search-link {
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.meta-ads-search-link:hover {
  text-decoration: underline;
}

/* btn-tracker--secondary — variant para "ANÁLISIS PROFUNDO" en meta-ads.
   Más sutil que --primary; mismo border color pero sin el fill. */
.btn-tracker--secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-tracker--secondary:hover {
  background: var(--accent-soft);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Línea de Meta ads en el popup hover de scoring/tracker.
   Color azul Meta hardcoded (el popup NO es hijo de meta-ads-section). */
.product-preview-comp--meta {
  color: var(--text-dim);
  margin-top: 0.4rem;
}
.product-preview-comp--meta strong {
  color: #5cb8ff;
}

/* ==========================================================================
   Meta Ads — modal de confirmación para "Análisis profundo"
   <dialog> nativo: heredamos focus trap + escape-to-close + backdrop click.
   ========================================================================== */
.meta-ads-modal {
  /* Modal usa el accent global del theme (estandarizado 2026-05-10) en
     lugar del azul Meta hardcodeado. */

  /* Centrado explícito. El default del browser para `<dialog>` con `showModal()`
     usa `inset: 0; margin: auto`, pero algún reset/global lo rompe. Re-aplicamos. */
  position: fixed;
  inset: 0;
  margin: auto;

  padding: 0;
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--text);
  max-width: 560px;
  width: calc(100vw - 2rem);
  max-height: calc(100vh - 4rem);
  height: fit-content;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 30px 60px rgba(0, 0, 0, 0.7),
    0 0 30px var(--accent-glow);
}
.meta-ads-modal::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}
.meta-ads-modal-content {
  padding: 1.6rem 1.7rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.meta-ads-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.meta-ads-modal-title {
  margin: 0;
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}
.meta-ads-modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.meta-ads-modal-close:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.meta-ads-modal-lede {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.meta-ads-modal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.meta-ads-modal-list li {
  display: flex;
  gap: 0.65rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.meta-ads-modal-list li strong {
  color: var(--text);
  font-weight: 600;
}
.meta-ads-modal-list-icon {
  flex-shrink: 0;
  color: var(--accent);
  font-family: var(--display);
  text-shadow: 0 0 6px var(--accent-glow);
  margin-top: 0.05em;
}
.meta-ads-modal-tip {
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.meta-ads-modal-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: flex-end;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

/* ── Modal del VIDEO del ad ── */
.meta-ads-video-modal {
  /* Accent global (estandarizado 2026-05-10). */
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--text);
  /* Más grande que el modal de confirmación — aprovechamos pantalla
     para que el video se vea bien. */
  width: min(880px, calc(100vw - 2rem));
  max-width: 880px;
  max-height: calc(100vh - 4rem);
  height: fit-content;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 30px 60px rgba(0, 0, 0, 0.7),
    0 0 30px var(--accent-glow);
}
.meta-ads-video-modal::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
}
/* Modal de imagen — mismo look del de video pero con <img> en lugar de <video>. */
.meta-ads-image-modal {
  /* Accent global (estandarizado 2026-05-10). */
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 1px solid var(--accent);
  /* Esquinas redondeadas (el `<dialog>` era cuadrado). `overflow:hidden` para
     que la imagen y la tira de miniaturas recorten a las esquinas. */
  border-radius: var(--radius-card);
  overflow: hidden;
  /* Panel SÓLIDO (ver `.meta-ads-modal`): `--surface` es glass en dark. */
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface-2), var(--surface-2));
  color: var(--text);
  width: min(880px, calc(100vw - 2rem));
  max-width: 880px;
  max-height: calc(100vh - 4rem);
  height: fit-content;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 30px 60px rgba(0, 0, 0, 0.7),
    0 0 30px var(--accent-glow);
}
.meta-ads-image-modal::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
}
.meta-ads-image-modal-content {
  display: flex;
  flex-direction: column;
}
.meta-ads-image-modal-viewer {
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 70vh;
}
.meta-ads-image-modal-viewer img {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
/* Navegación de la galería dentro del modal de zoom (flechas + contador).
   Se muestran solo cuando el modal se abre desde la galería del producto
   (varias fotos); el JS togglea el atributo `hidden`. */
.meta-ads-image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.18s var(--ease);
}
.meta-ads-image-nav:hover { background: rgba(0, 0, 0, 0.8); }
.meta-ads-image-nav[hidden] { display: none; }
.meta-ads-image-nav--prev { left: 12px; }
.meta-ads-image-nav--next { right: 12px; }
.meta-ads-image-count {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.meta-ads-image-count[hidden] { display: none; }
/* Tira de miniaturas (filmstrip) de la galería del producto dentro del modal.
   Solo se puebla para galerías con 2+ fotos. Tap salta a esa foto. */
.meta-ads-image-thumbs {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface-2), var(--surface-2));
}
.meta-ads-image-thumbs::-webkit-scrollbar { display: none; }
.meta-ads-image-thumbs[hidden] { display: none; }
.meta-ads-image-thumb {
  flex: 0 0 56px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.meta-ads-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meta-ads-image-thumb:hover { border-color: var(--accent); }
.meta-ads-image-thumb.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.meta-ads-video-modal-content {
  display: flex;
  flex-direction: column;
}
.meta-ads-video-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.meta-ads-video-modal-title {
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}
.meta-ads-video-modal-player {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Aspect ratio típico de creatives Meta: vertical 9:16 a square 1:1.
     Capamos a 70vh para que el modal nunca exceda viewport. */
  max-height: 70vh;
}
.meta-ads-video-modal-player video {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
.meta-ads-video-modal-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 1rem 1.1rem;
  align-items: center;
  border-top: 1px solid var(--border);
}
/* El primer botón (DESCARGAR) es el primary; los otros se empujan a la derecha */
.meta-ads-video-modal-actions > .btn-tracker:nth-child(1) { margin-right: auto; }
.meta-ads-video-modal-hint {
  margin: 0;
  padding: 0.7rem 1.1rem;
  background: rgba(255, 180, 80, 0.08);
  border-top: 1px solid rgba(255, 180, 80, 0.4);
  color: var(--gold);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ==========================================================================
   TikTok Organic search section (tracker_product detail) — discovery de
   creativos virales orgánicos para inspirar pauta en Meta. Estructura
   paralela a meta-ads-section pero con tema TikTok (pink) y card grid
   más simple (sin video modal — los videos abren en TikTok directo).
   ========================================================================== */

.tiktok-organic-section {
  /* Cambio 2026-05-10: removido el override del accent por "rosa TikTok"
     (#ff0050) para estandarizar las 3 secciones del detalle bajo el mismo
     accent del theme. Ver `.meta-ads-section` para racional completo. */
  margin: 2.5rem 0 1.5rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
}

.tiktok-organic-header {
  margin-bottom: 1.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.tiktok-organic-title {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin: 0;
}
.tiktok-organic-flag {
  font-size: 1rem;
}
.tiktok-organic-subtitle {
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ── Country tabs ── */
.tiktok-organic-country-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
}
.tiktok-organic-country-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.tiktok-organic-country-tab:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.tiktok-organic-country-tab--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 10px var(--accent-glow);
}
.tiktok-organic-country-tab--active:hover {
  color: var(--bg);
}
.tiktok-organic-country-tab--analyzed:not(.tiktok-organic-country-tab--active) {
  border-color: rgba(255, 0, 80, 0.45);
  color: var(--text);
}
.tiktok-organic-country-tab-check {
  font-size: 0.7rem;
  color: var(--accent);
}
.tiktok-organic-country-tab--active .tiktok-organic-country-tab-check {
  color: var(--bg);
}

/* ── Progress bar ── */
.tiktok-organic-progress {
  padding: 1.2rem 0;
}
.tiktok-organic-progress-bar {
  height: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 0.7rem;
}
.tiktok-organic-progress-fill {
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width 320ms ease-out;
}
.tiktok-organic-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.tiktok-organic-progress-percent {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
}
.tiktok-organic-progress-hint {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
}

/* ── Error state ── */
.tiktok-organic-error {
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255, 100, 100, 0.4);
  background: rgba(255, 100, 100, 0.06);
  margin-bottom: 1rem;
}
.tiktok-organic-error strong {
  display: block;
  margin-bottom: 0.4rem;
}
.tiktok-organic-error p {
  margin: 0 0 0.8rem;
  font-size: 0.88rem;
  color: var(--text-dim);
}

/* ── Actions row + buttons ── */
.tiktok-organic-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.tiktok-organic-captured {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: 0.82rem;
}
.tiktok-organic-stale-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.5rem;
  background: rgba(255, 180, 80, 0.1);
  border: 1px solid rgba(255, 180, 80, 0.5);
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tiktok-organic-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--body);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.tiktok-organic-btn:hover {
  background: var(--accent-soft);
}
.tiktok-organic-btn--primary {
  background: var(--accent);
  color: var(--bg);
}
.tiktok-organic-btn--primary:hover {
  background: var(--accent-press);
}

/* ── KPIs hero ── */
.tiktok-organic-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.tiktok-organic-kpi {
  padding: 1rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-align: center;
}
.tiktok-organic-kpi--match {
  border-color: rgba(255, 0, 80, 0.5);
  background: rgba(255, 0, 80, 0.06);
}
.tiktok-organic-kpi--likes {
  border-color: rgba(0, 242, 234, 0.4);
  background: rgba(0, 242, 234, 0.04);
}
.tiktok-organic-kpi-value {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tiktok-organic-kpi--match .tiktok-organic-kpi-value {
  color: var(--accent);
}
.tiktok-organic-kpi--likes .tiktok-organic-kpi-value {
  color: #00f2ea;
}
.tiktok-organic-kpi-label {
  margin-top: 0.4rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Sinónimos usados en la búsqueda · COLAPSABLE ──
   Estandarizado al patrón `synf` de Meta (espeja .meta-ads-synf/.meta-ads-synr-*):
   <details> cerrado por defecto + filas densas con conteos coloreados. Reemplaza
   la grilla vieja `.tiktok-organic-by-query`. (2026-06-09) */
.tiktok-organic-section .tiktok-organic-synf {
  border: 1px solid var(--line); background: var(--surface); border-radius: 13px;
  margin: 22px 0 18px; overflow: hidden;
}
.tiktok-organic-section .tiktok-organic-synf > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.tiktok-organic-section .tiktok-organic-synf > summary::-webkit-details-marker { display: none; }
.tiktok-organic-section .tiktok-organic-synf-ico { color: var(--ink-4); flex: none; }
.tiktok-organic-section .tiktok-organic-synf-ttl { font-size: 13px; font-weight: 700; }
.tiktok-organic-section .tiktok-organic-synf-meta { font-size: 12px; color: var(--ink-4); }
.tiktok-organic-section .tiktok-organic-synf-mini { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tiktok-organic-section .tiktok-organic-synf-mini .pill--match { font-size: 10.5px; font-weight: 700; color: var(--lime-ink); background: var(--lime-soft); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.tiktok-organic-section .tiktok-organic-synf-mini .car { font-size: 11px; color: var(--ink-4); transition: transform .2s; }
.tiktok-organic-section .tiktok-organic-synf[open] .tiktok-organic-synf-mini .car { transform: rotate(180deg); }
.tiktok-organic-section .tiktok-organic-synf-body { border-top: 1px solid var(--line); padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.tiktok-organic-section .tiktok-organic-synr-row {
  display: grid; grid-template-columns: 1fr 112px 92px 18px; gap: 12px; align-items: center;
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px;
  padding: 9px 12px; text-decoration: none; transition: .12s;
}
.tiktok-organic-section .tiktok-organic-synr-row:hover { border-color: var(--accent); }
.tiktok-organic-section .tiktok-organic-synr-row.is-zero { opacity: .5; }
.tiktok-organic-section .tiktok-organic-synr-q { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.tiktok-organic-section .tiktok-organic-synr-q .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiktok-organic-section .tiktok-organic-synr-q svg { flex: none; color: var(--ink-5); }
/* conteos: números coloreados (sin símbolos), alineados a la derecha → las 3
   columnas de color quedan rectas entre filas. Mismos colores que Meta. */
.tiktok-organic-section .tiktok-organic-synr-counts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font: 700 11.5px/1 var(--font-mono); }
.tiktok-organic-section .tiktok-organic-synr-counts .c-m,
.tiktok-organic-section .tiktok-organic-synr-counts .c-u,
.tiktok-organic-section .tiktok-organic-synr-counts .c-n { display: inline-block; min-width: 18px; text-align: right; }
.tiktok-organic-section .tiktok-organic-synr-counts .c-m { color: var(--lime-ink); }
.tiktok-organic-section .tiktok-organic-synr-counts .c-u { color: var(--amber-ink); }
.tiktok-organic-section .tiktok-organic-synr-counts .c-n { color: var(--ink-5); }
.tiktok-organic-section .tiktok-organic-synr-counts .sep { display: inline-block; min-width: 0; color: var(--ink-5); opacity: .6; }
.tiktok-organic-section .tiktok-organic-synr-tot { font: 700 12px/1 var(--font-mono); color: var(--ink-4); white-space: nowrap; text-align: right; }
.tiktok-organic-section .tiktok-organic-synr-go { color: var(--ink-4); font-size: 13px; text-align: right; }
@media (max-width: 760px) {
  .tiktok-organic-section .tiktok-organic-synr-row { grid-template-columns: 1fr auto auto; align-items: start; }
  .tiktok-organic-section .tiktok-organic-synr-tot { display: none; }
  .tiktok-organic-section .tiktok-organic-synf-meta { flex-basis: 100%; order: 3; }
  /* el sinónimo se ajusta a varias líneas en vez de cortarse con "…" */
  .tiktok-organic-section .tiktok-organic-synr-q { align-items: flex-start; }
  .tiktok-organic-section .tiktok-organic-synr-q svg { margin-top: 2px; }
  .tiktok-organic-section .tiktok-organic-synr-q .nm { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
}

/* ── Buckets + cards — alineados al patrón `.meta-ads-bucket` para que
   las 2 secciones (Meta + TikTok) tengan la misma jerarquía visual al
   mostrar resultados (estandarización 2026-05-10). ── */
.tiktok-organic-bucket {
  margin-top: 1.2rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-left: 3px solid var(--accent);
}
.tiktok-organic-bucket > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  list-style: none;
}
.tiktok-organic-bucket > summary::-webkit-details-marker { display: none; }
.tiktok-organic-bucket > summary::before {
  content: "▶";
  display: inline-block;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
  transition: transform 200ms;
}
.tiktok-organic-bucket[open] > summary::before {
  transform: rotate(90deg);
}
.tiktok-organic-bucket-hint {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* ── Empty + CTA states ── */
.tiktok-organic-empty {
  margin-top: 1rem;
  padding: 1.2rem;
  text-align: center;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px dashed var(--border);
}
.tiktok-organic-cta {
  text-align: center;
  padding: 2rem 1rem;
}
.tiktok-organic-cta-hint {
  margin: 1rem auto 0;
  max-width: 520px;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.55;
}


/* ==========================================================================
   Meta Ads · Bulk multi-país (selección múltiple + indicador running en tabs)
   Reusa --accent (#5cb8ff scoped a .meta-ads-section).
   ========================================================================== */

/* Indicador "●" de país siendo analizado AHORA en el tab. Pulsa con animación
   para que el usuario vea que algo está corriendo en ese país aunque no esté
   viendo ese tab. */
.meta-ads-country-tab--running {
  border-color: var(--accent);
  color: var(--text);
}
.meta-ads-country-tab-running {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 0.3rem;
  animation: meta-ads-pulse 1.4s ease-in-out infinite;
}
@keyframes meta-ads-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* Helpers row del modal (Marcar todos / Limpiar / Solo faltantes) */
.meta-ads-bulk-helpers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0 1rem;
}
.meta-ads-bulk-helper-btn {
  padding: 0.3rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--body);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.meta-ads-bulk-helper-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Grid de countries: 2 columnas en desktop, 1 en mobile */
.meta-ads-bulk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 0.8rem 0 1.2rem;
}
@media (max-width: 720px) {
  .meta-ads-bulk-grid { grid-template-columns: 1fr; }
}
.meta-ads-bulk-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.meta-ads-bulk-option:hover {
  border-color: var(--accent);
}
.meta-ads-bulk-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.meta-ads-bulk-option--analyzed {
  border-color: rgba(92, 184, 255, 0.35);
}
.meta-ads-bulk-option--running {
  border-color: var(--accent);
  cursor: not-allowed;
  opacity: 0.85;
}
.meta-ads-bulk-option input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
.meta-ads-bulk-option--running input[type="checkbox"] {
  cursor: not-allowed;
}
.meta-ads-bulk-option-flag {
  font-size: 1.1rem;
  line-height: 1;
}
.meta-ads-bulk-option-name {
  flex: 1;
  font-size: 0.86rem;
  color: var(--text);
}
.meta-ads-bulk-option-status {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.meta-ads-bulk-option--analyzed .meta-ads-bulk-option-status {
  color: var(--accent);
}
.meta-ads-bulk-option--running .meta-ads-bulk-option-status {
  color: var(--accent);
  animation: meta-ads-pulse 1.4s ease-in-out infinite;
}

/* Toggle de modo profundo dentro del modal bulk */
.meta-ads-bulk-full-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  font-size: 0.84rem;
  color: var(--text-dim);
  cursor: pointer;
}
.meta-ads-bulk-full-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}
.meta-ads-bulk-full-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* Mini progress bar al pie del tab cuando ese país está running.
   La anchura refleja el % específico del país (style inline). */
.meta-ads-country-tab {
  position: relative;
  overflow: hidden;
}
.meta-ads-country-tab-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
  transition: width 800ms ease-out;
  pointer-events: none;
}

/* Banner global de progreso bulk: aparece cuando hay ≥1 país corriendo.
   Da una vista rápida del avance agregado sin tener que abrir cada tab. */
.meta-ads-bulk-banner {
  margin: 0.9rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 14px var(--accent-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
/* El banner solo trae margen superior → el texto de apoyo que lo sigue
   ("Análisis en curso" mientras corre, o "Última captura …" cuando el país
   activo ya terminó pero el bulk sigue) quedaba pegado a la caja azul. Global
   (desktop + mobile). */
.meta-ads-bulk-banner + .tracker-section-sub {
  margin-top: 1rem;
}
.meta-ads-bulk-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
}
/* Body font para que el título sea legible (la display font ofusca textos
   largos). El acento se da con el color y el peso. */
.meta-ads-bulk-banner-label {
  font-family: var(--body);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--text);
  font-weight: 500;
}
.meta-ads-bulk-banner-label strong {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.meta-ads-bulk-banner-queued-note {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.84rem;
}
.meta-ads-bulk-banner-percent {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.meta-ads-bulk-banner-bar {
  height: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.meta-ads-bulk-banner-fill {
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width 800ms ease-out;
  /* Animación de "shimmer" para que se note que está en progreso aunque
     el % no avance entre polls. */
  background-size: 200% 100%;
  animation: meta-ads-bulk-shimmer 2.4s linear infinite;
}
@keyframes meta-ads-bulk-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}
.meta-ads-bulk-banner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.meta-ads-bulk-banner-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 12px;
  letter-spacing: 0.04em;
}

/* Chips de país en el banner bulk: layout flex para flag/code/phase/pct.
   La fase se diferencia por color del borde + opacidad para "queued". */
.meta-ads-bulk-banner-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.65rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.meta-ads-bulk-banner-chip-code {
  font-weight: 700;
  color: var(--text);
}
.meta-ads-bulk-banner-chip-phase {
  color: var(--text-dim);
  font-size: 0.74rem;
  text-transform: lowercase;
}
.meta-ads-bulk-banner-chip-pct {
  color: var(--accent);
  font-weight: 600;
}

/* Estados por fase del chip */
.meta-ads-bulk-banner-chip--queued {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  opacity: 0.7;
}
.meta-ads-bulk-banner-chip--queued .meta-ads-bulk-banner-chip-phase {
  color: var(--text-dim);
  font-style: italic;
}
.meta-ads-bulk-banner-chip--synonyms {
  background: var(--surface-2);
  border: 1px solid rgba(92, 184, 255, 0.4);
}
.meta-ads-bulk-banner-chip--scraping {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
.meta-ads-bulk-banner-chip--classifying {
  background: rgba(0, 242, 234, 0.08);
  border: 1px solid rgba(0, 242, 234, 0.5);
}
.meta-ads-bulk-banner-chip--classifying .meta-ads-bulk-banner-chip-pct {
  color: #00f2ea;
}

/* Modo "detail-only" del progress block del active country: cuando hay bulk
   activo y este país es parte del bulk, escondemos la barra individual (el
   banner global la cubre) y solo dejamos el status line con el detalle de
   la fase. */
.meta-ads-progress--detail-only {
  padding: 0.4rem 0;
}
.meta-ads-progress--detail-only .meta-ads-progress-meta {
  margin: 0;
}

/* Descripción del producto en la página de detalle del tracker.
   Lazy-fetch desde Dropi cuando el usuario abre la página (cache permanente). */
.tp-description {
  margin: 1.5rem 0;
  padding: 1.1rem 1.3rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
.tp-description-title {
  font-family: var(--display);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}
.tp-description-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}

/* ==========================================================================
   Global page loader — cyberpunk-style overlay para navegación a páginas
   con fetches lentos. Doble anillo rotatorio (accent + cyan), título en
   display font con glow, mensajes cíclicos. Controlado por JS en base.html.
   ========================================================================== */

.page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Backdrop más oscuro + más blur para hacer el loader el foco absoluto */
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 30, 40, 0.4), rgba(4, 6, 10, 0.92) 70%),
    rgba(4, 6, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  animation: page-loader-fade-in 220ms ease-out 80ms backwards;
}

.page-loader[hidden] {
  display: none;
}

@keyframes page-loader-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Card con borde animado tipo "scanning beam" — gradient que rota sobre el
   borde, dándole movimiento sutil sin saturar. */
.page-loader-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.2rem 2.8rem;
  background: var(--surface);
  /* Borde con gradient via background-clip — el truco es usar dos backgrounds:
     el outer (gradient) hace de "borde", el inner (--surface) lo recorta. */
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 30px rgba(199, 240, 75, 0.25),
    0 0 60px rgba(0, 200, 255, 0.12),
    0 20px 40px rgba(0, 0, 0, 0.6);
  /* Decoración: barra escáner sutil que cruza el borde superior */
  overflow: hidden;
}

.page-loader-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  animation: page-loader-scan 2.4s ease-in-out infinite;
}

@keyframes page-loader-scan {
  0% { transform: translateX(-100%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(350%); opacity: 0; }
}

/* ── Anillos rotatorios ── */
.page-loader-rings {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.page-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  /* Solo segmentos arc, no el círculo completo, para que se vea la rotación */
}

/* Anillo exterior — accent color, rotación lenta clockwise */
.page-loader-ring--outer {
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  box-shadow: 0 0 12px rgba(199, 240, 75, 0.45);
  animation: page-loader-spin-cw 1.4s linear infinite;
}

/* Anillo interior — cyan, rotación más rápida counter-clockwise */
.page-loader-ring--inner {
  inset: 10px;
  border-top-color: rgba(0, 220, 255, 0.85);
  border-left-color: rgba(0, 220, 255, 0.85);
  box-shadow: 0 0 10px rgba(0, 220, 255, 0.4);
  animation: page-loader-spin-ccw 0.9s linear infinite;
}

/* Punto central pulsante — ancla visual para los anillos */
.page-loader-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  margin-left: -4px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent);
  animation: page-loader-pulse 1.2s ease-in-out infinite;
}

@keyframes page-loader-spin-cw {
  to { transform: rotate(360deg); }
}

@keyframes page-loader-spin-ccw {
  to { transform: rotate(-360deg); }
}

@keyframes page-loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
}

/* ── Texto: título + mensaje cíclico ── */
.page-loader-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 240px;
}

.page-loader-title {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  text-shadow: 0 0 12px rgba(199, 240, 75, 0.25);
}

.page-loader-message {
  margin: 0;
  font-family: var(--body);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  /* Prefijo terminal-style para coherencia con la estética del resto de la app */
  position: relative;
  padding-left: 1rem;
  transition: opacity 200ms ease-out;
}

.page-loader-message::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--accent);
}

.page-loader-message--fading {
  opacity: 0;
}

@media (max-width: 540px) {
  .page-loader-card {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.6rem;
    gap: 1.2rem;
  }
  .page-loader-text {
    min-width: 0;
    align-items: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ▼ TUTREND v2 — Shell + UX nuevos (Phase 1)
   Sidebar 240px + topbar flotante + canvas + theme toggle + cmdk + skeleton + ProductLoader.
   Conviven con los estilos legacy (de arriba) hasta que Phase 2 migre cada página.
   ══════════════════════════════════════════════════════════════════════ */

/* Orb de fondo — acento radial muy tenue, fijo, detrás del contenido.
   Las tarjetas/paneles son opacos → los datos nunca pierden contraste. */
.app-orb {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60vw 48vw at 100% -8%, color-mix(in srgb, var(--accent) 100%, transparent), transparent 60%);
  opacity: var(--orb-op);
}
@media (prefers-reduced-motion: reduce) { .app-orb { opacity: calc(var(--orb-op) * .6); } }

/* ─── Layout shell: app grid (sidebar + main) ─── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: 16px;
  padding: 16px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  transition: grid-template-columns 360ms var(--ease);
}
.app[data-collapsed="true"] {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100vh - 32px);
}

.canvas {
  flex: 1;
  margin: 0 auto;
  width: 100%;
  max-width: 1500px;
  padding: 0 8px 80px;
  position: relative;  /* ancla del .tt-skeleton-screen overlay */
}

.page {
  /* Animation SIN `both` (fill-mode) — con `both` el to-state quedaba
     persistido (transform/filter), creando un containing block que
     atrapaba descendientes con position:fixed (ej. .qa-modal). Sin
     fill-mode, después de la animación las props vuelven al default
     (transform:none, filter:none) y los modales fixed cubren el
     viewport como corresponde. */
  animation: pageIn 0.6s var(--ease-out);
}

/* Cuando estamos restaurando scroll (= filter apply en la misma página),
   desactivamos las entry animations para evitar el parpadeo del fade+blur.
   El flag `data-restoring-scroll` lo setea el script del <head> antes del
   primer paint y se quita cuando el polling de scroll restore termina.
   Para navegaciones entre secciones (Tracker → Scoring) el flag no está y
   las animaciones corren normal (allá sí se siente bien la transición). */
[data-restoring-scroll] .page,
[data-restoring-scroll] .tt-skel-card,
[data-restoring-scroll] .prod-card-wrap,
[data-restoring-scroll] .prod-card {
  animation: none !important;
}

/* Anti-salto del scroll restore (filter apply): sin esto, la página recarga al
   top (se ve el header 1 frame) y el polling de `scrollTo` la baja a la posición
   guardada → un brinco visible <1s. Ocultamos el contenido mientras restauramos
   (la sidebar/topbar quedan visibles) y se revela YA posicionado cuando el
   script quita el flag (al converger el scroll, normalmente 1-3 frames).
   `visibility:hidden` conserva el layout (scrollHeight correcto para el polling),
   a diferencia de `display:none`. */
[data-restoring-scroll] .canvas {
  visibility: hidden;
}

/* ─── Sidebar ─── */
.sidebar {
  position: sticky;
  top: 16px;
  align-self: start;
  height: calc(100vh - 32px);
  background-color: var(--glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 360ms var(--ease);
}

.sb-toggle {
  /* `fixed` (no `absolute`): el sidebar es `position:sticky` y queda fijo al
     hacer scroll; con `absolute` relativo a .app (que NO es sticky) el botón
     se iba hacia arriba al scrollear. Fijo al viewport queda pegado al borde
     del sidebar. .app arranca en x=0 (full-width) → el cálculo de left coincide
     con el borde del sidebar. -14px centra el botón (28px) sobre el borde;
     sigue al ancho del sidebar al colapsar/expandir con la misma transición. */
  position: fixed;
  top: 28px;
  left: calc(16px + var(--sidebar-w) - 14px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* Fondo opaco (no glass): este botón flota sobre el orb/contenido. */
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface), var(--surface));
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-1);
  transition: left 360ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), transform 200ms var(--ease-spring);
  z-index: 5;
}
.sb-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.1);
}
.app[data-collapsed="true"] .sb-toggle {
  left: calc(16px + var(--sidebar-w-collapsed) - 14px);
}
.app[data-collapsed="true"] .sb-toggle svg {
  transform: rotate(180deg);
}

.sb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px;
  text-decoration: none;
  color: var(--ink);
}
.sb-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.04em;
  /* Sin box-shadow glow — antes se desbordaba hacia la canvas. */
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.sb-brand-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  animation: shine 3s linear infinite;
}
.sb-brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.sb-brand-name em {
  font-style: normal;
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: var(--accent);
  display: inline-block;
  padding-right: 0.06em;
}

.app[data-collapsed="true"] .sb-brand-name { display: none; }

.sb-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  padding: 14px 22px 8px;
}
.app[data-collapsed="true"] .sb-section-label {
  visibility: hidden;
  height: 24px;
  padding: 0;
}

.sb-nav {
  display: flex;
  flex-direction: column;
  padding: 4px 12px;
  gap: 4px;
}
.sb-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: var(--radius-btn);
  color: var(--ink-3);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 200ms var(--ease);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
}
.sb-link svg {
  flex-shrink: 0;
  transition: transform 200ms var(--ease-spring);
}
.sb-link:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.sb-link:hover svg {
  transform: rotate(-8deg) scale(1.1);
}
.sb-link[data-active="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  /* Sin box-shadow glow — antes se desbordaba lateralmente hacia el canvas
     y se veía a través del skeleton overlay durante transiciones de
     sección. El flood `--accent` ya da feedback de "este item está activo"
     sin necesidad de glow adicional. */
}
.sb-link-label {
  flex: 1;
  min-width: 0;
  white-space: normal;
  line-height: 1.25;
}
.app[data-collapsed="true"] .sb-link {
  justify-content: center;
  padding: 11px 0;
}
.app[data-collapsed="true"] .sb-link-label { display: none; }

.sb-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.sb-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: pulse 2s ease infinite;
  flex-shrink: 0;
}
.app[data-collapsed="true"] .sb-foot-text { display: none; }

/* ─── Topbar ─── */
.tt-topbar {
  position: sticky;
  top: 16px;
  z-index: 10;
  height: var(--topbar-h);
  background-color: var(--glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  margin-bottom: 16px;
}

.topbar-crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.topbar-crumbs strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.topbar-crumbs .sep {
  color: var(--ink-5);
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  max-width: 360px;
  flex: 1;
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  color: var(--ink-4);
  font-family: var(--font-sans);
  font-size: 13px;
  transition: all 200ms var(--ease);
}
.topbar-search:hover {
  border-color: var(--accent);
  color: var(--ink-2);
}
.topbar-search > span:first-of-type {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-search-kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--ink-3);
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lime-soft);
}
.topbar-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
  animation: pulse 2s ease infinite;
}

/* ─── Theme toggle ─── */
.theme-toggle {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
  transition: background 250ms var(--ease), color 250ms var(--ease), transform 400ms var(--ease-spring);
}
.theme-toggle:hover { color: var(--text); transform: rotate(18deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ─── Command palette (Cmd+K) ─── */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 50;
  display: grid;
  place-items: start center;
  padding-top: 14vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.cmdk-overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.cmdk {
  width: min(580px, 92vw);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 280ms var(--ease-spring);
}
.cmdk-overlay[data-open="true"] .cmdk { transform: scale(1); }
.cmdk-input {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
}
.cmdk-input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cmdk-input input::placeholder { color: var(--ink-4); }
.cmdk-list {
  padding: 8px;
  max-height: 380px;
  overflow-y: auto;
}
.cmdk-section-label {
  padding: 10px 14px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  font-weight: 500;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
.cmdk-item[data-active="true"],
.cmdk-item:hover {
  background: var(--accent-soft);
  color: var(--ink);
}
.cmdk-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cmdk-item[data-active="true"] .cmdk-item-icon,
.cmdk-item:hover .cmdk-item-icon {
  background: var(--accent);
  color: var(--accent-ink);
}
/* Variante con thumbnail del producto: la imagen llena la caja sin padding
   ni cambio de bg en hover (la imagen no necesita el highlight detrás). */
.cmdk-item-icon--img {
  background: var(--surface-2);
  overflow: hidden;
  padding: 0;
}
.cmdk-item-icon--img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cmdk-item[data-active="true"] .cmdk-item-icon--img,
.cmdk-item:hover .cmdk-item-icon--img {
  background: var(--surface-2);
}
.cmdk-item-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Subtítulo opcional para items de resultado (ej. nombre de tienda
   junto al nombre del producto, o la palabra "proveedor" junto al store_name). */
.cmdk-item-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  flex-shrink: 0;
}
.cmdk-item[data-active="true"] .cmdk-item-sub,
.cmdk-item:hover .cmdk-item-sub {
  color: var(--ink-3);
}
.cmdk-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  margin-left: auto;
}

/* ─── Skeleton loading ─── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    color-mix(in oklab, var(--surface-2) 60%, var(--surface-3) 40%) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 8px;
}

/* Skeleton screen — overlay del .canvas durante navegación entre secciones.
   Sidebar y topbar quedan visibles por fuera; sólo el contenido principal se
   reemplaza con shimmer. Aparece con fade-in 180ms; el browser carga la
   nueva página y reemplaza todo (skeleton incluido). Desaparece natural. */
.tt-skeleton-screen {
  position: absolute;
  inset: 0 8px;  /* respeta el padding horizontal del .canvas */
  z-index: 50;
  background: var(--bg);
  overflow: hidden;
  animation: pageIn 0.18s ease-out;
}
.tt-skeleton-screen[hidden] { display: none; }

.tt-skeleton-page {
  padding: 0 0 80px;
  min-height: 100%;
}

/* Las variantes están todas en el DOM pero solo la activa se muestra.
   El JS setea data-active="true" en la que matchea el path destino. */
.tt-skel-variant { display: none; padding: 0 0 80px; min-height: 100%; }
.tt-skel-variant[data-active="true"] { display: block; }

/* ─── Skeleton localizado para cards (filtros internos) ───
   Se monta dentro de un card con `data-cards-skeleton` y se activa con
   `data-cards-loading="true"` cuando el usuario cambia filtros/paginación
   en la misma página. Header + KPIs + toolbar quedan visibles arriba — solo
   la zona de productos muestra placeholders. */
/* Loader de filtros (blur + spinner) — reemplaza el skeleton gris que se veía
   feo (el `var(--surface)` viejo era vidrio translúcido en dark → velo gris).
   El overlay se vuelve un glass frost sobre las cards REALES (backdrop-filter)
   con un spinner accent + label centrados. Compartido por Radar/Tracker/Scoring
   (cualquier `[data-cards-skeleton]`). NO usa `color-mix` (Safari < 16.2 lo
   descarta) — bg con rgba explícito por tema; `-webkit-` para Safari. */
.tt-cards-skel-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: var(--radius-card-lg);
  overflow: hidden; /* clipea el barrido shimmer al rect redondeado */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease);
}
[data-theme="dark"] .tt-cards-skel-overlay {
  background: rgba(10, 10, 11, 0.45);
}
/* Variante "bare" (Radar/Scoring): el grid flota sobre el bg de la página (no
   dentro de un `.tt-card`). El frost igual aplica; solo ajustamos el radius. */
.tt-cards-skel-overlay--bare {
  border-radius: var(--radius-card);
}
/* Oculta el markup skeleton viejo que quedó dentro del overlay (lo reemplaza el
   shimmer + label de los pseudo-elementos). `!important` porque el hijo es
   `.bento` (`display:grid`, definido DESPUÉS → ganaría por orden). */
.tt-cards-skel-overlay > * {
  display: none !important;
}
/* Barrido shimmer: un brillo diagonal que pasa rápido de izquierda a derecha
   sobre toda la sección opaca (más visible que un spinner en un área grande).
   El glint es theme-aware (blanco translúcido); el overlay con `overflow:hidden`
   lo recorta. */
.tt-cards-skel-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: tt-shimmer-sweep 1.15s ease-in-out infinite;
}
[data-theme="dark"] .tt-cards-skel-overlay::before {
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
}
.tt-cards-skel-overlay::after {
  content: "Aplicando filtros…";
  position: relative; /* sobre el shimmer */
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
@keyframes tt-shimmer-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
[data-cards-skeleton][data-cards-loading="true"] .tt-cards-skel-overlay {
  opacity: 1;
  pointer-events: auto;
  animation: pageIn 0.18s ease-out;
}
/* En mobile el grid es alto (24 cards) → el label centrado caería fuera de
   pantalla. Lo anclamos cerca del TOPE de la sección para que el "Aplicando
   filtros…" se vea en la porción del grid que está en pantalla. NO movemos el
   scroll → la posición se preserva. El blur + shimmer cubren toda la sección;
   el efecto queda SCOPED al grid, no al viewport. */
@media (max-width: 768px) {
  .tt-cards-skel-overlay {
    justify-content: flex-start;
    padding-top: 28px;
  }
}

.tt-skel-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.tt-skel-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: var(--shadow-1);
  animation: rise 0.6s var(--ease-out) both;
}

.tt-skel-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

/* La columna del grid la fija el template inline (mismo `grid-template-columns`
   que la tabla real de cada sección, ej. suppliers 9-col); acá solo el chrome. */
.tt-skel-row {
  display: grid;
  gap: 14px;
  align-items: center;
}

/* Status/decision cards del skeleton (Radar 4×col-3, Scoring 6×col-2): a ≤520px
   el bento las mandaría a span 12 (apiladas). Igual que las reales (.tt-card),
   las dejamos 2 por fila. Espeja la regla de `[data-status-card-group] > .tt-card`. */
@media (max-width: 520px) {
  [data-status-card-group] > .tt-skel-card.col-2,
  [data-status-card-group] > .tt-skel-card.col-3 {
    grid-column: span 6;
    padding: 14px;
    min-width: 0;
  }
}

/* ─── ProductLoader (full-screen overlay) ─── */
.tt-product-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--bg);
  /* Los halos orbitando (hasta 260px) pueden sobresalir del viewport en
     pantallas angostas — clippeamos para que nunca generen scroll horizontal. */
  overflow: hidden;
  animation: pageIn 0.4s var(--ease-out);
}
.tt-product-loader[hidden] { display: none; }

.loader-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  max-width: 500px;
  padding: 24px;
}

.loader-mark {
  width: 132px;
  height: 132px;
  border-radius: 32px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 76px;
  font-weight: 500;
  letter-spacing: -0.05em;
  box-shadow:
    var(--shadow-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  animation: mark-breathe 2.6s ease infinite;
  position: relative;
  overflow: hidden;
}
.loader-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  animation: mark-shine 2.2s linear infinite;
}

.loader-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px dashed color-mix(in oklab, var(--accent) 40%, transparent);
  animation: halo-spin 14s linear infinite;
  pointer-events: none;
}
.loader-halo::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.loader-halo-2 {
  width: 260px;
  height: 260px;
  border-color: color-mix(in oklab, var(--coral) 40%, transparent);
  animation: halo-spin 22s linear infinite reverse;
}
.loader-halo-2::before {
  background: var(--coral);
  box-shadow: 0 0 12px var(--coral);
  top: auto;
  bottom: -6px;
}

.loader-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.loader-word-name {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(
    90deg,
    var(--ink) 0%,
    var(--accent) 30%,
    var(--coral) 60%,
    var(--ink) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: word-shine 3.4s linear infinite;
}
.loader-word-name em {
  font-style: italic;
  display: inline-block;
  padding-right: 0.08em;
}

.loader-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.loader-status .led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 1.5s ease infinite;
}
.loader-status .msg {
  position: relative;
  display: inline-grid;
  width: 240px;
  text-align: left;
}
.loader-status .msg > span {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.loader-status .msg > span[data-active="true"] {
  opacity: 1;
}

.loader-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 380px;
}
.loader-track {
  height: 4px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.loader-track-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width 400ms var(--ease);
  position: relative;
  overflow: hidden;
}
.loader-track-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: track-sweep 1.6s linear infinite;
}
.loader-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-4);
}
.loader-meta .pct {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─── Responsive shell ─── */
/* ─── Elementos solo-móvil del shell (hamburguesa + drawer). Ocultos en desktop;
   las media queries de abajo los muestran. ─── */
.topbar-burger {
  display: none;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: -4px;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.topbar-burger:hover { background: var(--surface-2); color: var(--ink); }
.sb-close {
  display: none;
  place-items: center;
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  cursor: pointer;
  z-index: 3;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.sb-close:hover { color: var(--accent); border-color: var(--accent); }
.sb-backdrop { display: none; }
/* Bloquea el scroll del fondo mientras el drawer está abierto (solo móvil). */
body.drawer-locked { overflow: hidden; }
/* Lock de scroll mientras el skeleton full-page de navegación entre secciones
   está visible — el overlay es position:absolute dentro del .canvas y el scroll
   lo maneja la ventana, así que sin esto el placeholder se mueve con el scroll. */
body.tt-skeleton-locked { overflow: hidden; }

@media (max-width: 1280px) {
  .canvas { max-width: 1280px; }
}
@media (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
}
@media (max-width: 820px) {
  .app {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 12px;
  }
  .app[data-collapsed="true"] {
    grid-template-columns: 1fr;
  }
  /* Sidebar = drawer off-canvas. Muestra el sidebar COMPLETO (marca, secciones,
     links CON etiqueta, créditos, estado) — no una tab bar. Se desliza desde la
     izquierda al tocar la hamburguesa. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100dvh;
    width: min(84vw, 300px);
    border-radius: 0 18px 18px 0;
    transform: translateX(-100%);
    transition: transform 320ms var(--ease);
    z-index: 50;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app[data-drawer-open="true"] .sidebar { transform: translateX(0); }
  .sb-toggle { display: none; }   /* el colapso a rail no aplica en móvil */
  .sb-close { display: grid; }    /* botón ✕ del drawer */
  /* En móvil ignoramos el estado "colapsado" de escritorio: el drawer siempre
     muestra todo. Estas reglas ganan a `.app[data-collapsed="true"] .X` (misma
     especificidad) por estar DESPUÉS en el archivo. */
  .app[data-collapsed="true"] .sb-brand-name { display: inline; }
  .app[data-collapsed="true"] .sb-section-label { display: block; }
  .app[data-collapsed="true"] .sb-link-label { display: block; }
  .app[data-collapsed="true"] .sb-foot-text { display: inline; }
  .app[data-collapsed="true"] .sb-link { justify-content: flex-start; padding: 11px 14px; }

  /* Fondo oscurecido detrás del drawer (tap para cerrar). */
  .sb-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms var(--ease), visibility 320ms;
  }
  .app[data-drawer-open="true"] .sb-backdrop { opacity: 1; visibility: visible; }

  .topbar-burger { display: grid; }

  .tt-topbar {
    height: 54px;
    padding: 0 12px;
    gap: 10px;
    margin-bottom: 12px;
  }
  .topbar-search,
  .topbar-status { display: none; }
  /* Crumbs ocupa el espacio sobrante y empuja los controles a la derecha; el
     título trunca con elipsis si no cabe. */
  .topbar-crumbs { flex: 1; min-width: 0; overflow: hidden; }
  .topbar-crumbs strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .theme-toggle { width: 40px; height: 40px; }
  /* Chip de usuario = solo el avatar; el email completo desbordaba el viewport.
     El correo + badge admin siguen visibles dentro del menú desplegable. */
  .topbar-user { margin-left: 0; }
  .topbar-user-trigger { padding: 5px; }
  .topbar-user-email,
  .topbar-user-badge { display: none; }
}
@media (max-width: 520px) {
  .topbar-crumbs strong { font-size: 13px; }
  .loader-mark { width: 100px; height: 100px; font-size: 58px; }
  .loader-word-name { font-size: 40px; }
  .loader-halo { width: 160px; height: 160px; }
  .loader-halo-2 { width: 210px; height: 210px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ▼ TUTREND v2 — Componentes (Phase 2)
   Cards, buttons, tables, badges, decision pills, toolbar, segmented,
   chips, prod-card, page-header, bento grid, detail-hero, country row.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Page header ─── */
.tt-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.tt-page-header > div { flex: 1; min-width: 0; }
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 500;
  margin-bottom: 16px;
}
.page-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s ease infinite;
}
.tt-page-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  /* line-height: 1.1 — antes era 0.98 que clippeaba los descenders y el slant
     italic del <em>. 1.1 da aire suficiente sin romper la verticalidad. */
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0 0 14px;
  /* Permite que el slant italic del <em> sobresalga sin ser clipeado por el
     contenedor (especialmente cuando el padre tiene overflow:hidden). */
  overflow: visible;
}
.tt-page-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--text) 30%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* `inline-block` + padding-right absorbe el bleeding del slant italic
     que background-clip:text recorta a la caja del glyph. Sin esto, la
     última letra del <em> se ve cortada del lado derecho. */
  display: inline-block;
  padding-right: 0.08em;
}
.page-sub {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
}
.page-sub b {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .tt-page-title { font-size: 42px; }
}
@media (max-width: 820px) {
  .tt-page-title { font-size: 34px; }
  .tt-page-header { flex-direction: column; align-items: stretch; }
}
@media (max-width: 520px) {
  .tt-page-title { font-size: 28px; }
}

/* ─── Bento grid (12 cols) ─── */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
@media (max-width: 820px) { .bento { gap: 12px; } }

.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

@media (max-width: 1280px) {
  .col-2 { grid-column: span 3; }
}
@media (max-width: 1024px) {
  .col-2, .col-3 { grid-column: span 4; }
  .col-4 { grid-column: span 6; }
  .col-5, .col-6 { grid-column: span 6; }
  .col-7, .col-8, .col-9 { grid-column: span 12; }
}
@media (max-width: 820px) {
  .col-2, .col-3, .col-4 { grid-column: span 6; }
  .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
}
@media (max-width: 520px) {
  .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
}

/* ─── Adaptación mobile (2026-06): status/decision cards + scan launcher ─── */
@media (max-width: 520px) {
  /* Status cards (Radar) y decision cards (Scoring) comparten
     [data-status-card-group]. A ≤520px el bento las manda a span 12 (full-width)
     → 6 cards apiladas = mucho espacio vertical muerto (solo un pill + un número).
     Las volvemos a 2 por fila y más compactas. Mayor especificidad que `.col-2`.
     `.col-3` cubre las status cards del Radar (4 cards, fila completa en desktop);
     `.col-2` las decision cards del Scoring. */
  [data-status-card-group] > .tt-card.col-2,
  [data-status-card-group] > .tt-card.col-3 {
    grid-column: span 6;
    padding: 14px;
    min-width: 0;
  }
  [data-status-card-group] .stat-num {
    font-size: 28px !important;
    margin-top: 8px !important;
  }

  /* Scan launcher (Radar): el campo "Analizar N productos" y el botón "Iniciar
     búsqueda" en fila se aprietan y el texto del botón se parte en dos líneas.
     Los apilamos y CENTRAMOS todo el contenido idle de la caja (antes pegado a
     la izquierda). */
  .scan-head {
    align-items: center;
    text-align: center;
  }
  .scan-meta,
  .scan-headline {
    justify-content: center;
  }
  .scan-controls {
    justify-content: center;
  }
  .scan-launch {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 0;
  }
  .scan-launch-field {
    justify-content: center;
  }
  .scan-launch .btn-scan {
    white-space: nowrap;
  }
}

/* ─── Panel de scan RUNNING en mobile (2026-06-03) ───
   El "cuadro del proceso" del Radar se veía enorme (imagen 240px + datos en torre =
   ~680px de alto) y desalineado (imagen centrada vs contenido a la izquierda).
   Compactamos: imagen del producto en vivo a 132px y alineada a la IZQUIERDA como
   el resto del contenido de la card; el bloque de búsqueda queda full-width abajo
   (legible). Métricas de progreso centradas para alinear con el header centrado. */
@media (max-width: 520px) {
  .scan-progress-meta {
    justify-content: center;
    gap: 1.4rem;
  }
  .scan-current {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }
  /* Todo el contenido de la card en vivo CENTRADO en mobile (imagen + datos +
     bloque de búsqueda) — coherente con el header y las métricas centradas. */
  .current-image {
    max-width: 132px;
    margin: 0 auto;
  }
  .current-info {
    gap: 7px;
    min-width: 0;
    align-items: center;
    text-align: center;
  }
  .current-name {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }
  .current-step {
    align-self: center;
  }
  .current-tags {
    justify-content: center;
  }
  .current-search {
    align-self: stretch;
    text-align: center;
  }
  .current-search-row,
  .current-search-counters {
    justify-content: center;
  }
  .search-history-title {
    justify-content: center;
  }
  /* Historial de sinónimos acotado en mobile: bloque scroll más bajo + filas
     compactas (ocultamos los labels verbosos "proveedores/similares" → stats
     "N · N") para que la query NO se trunque a "...". */
  .search-history-list {
    max-height: 132px;
  }
  .search-history-num-label {
    display: none;
  }
  .search-history-item {
    gap: 0.35rem;
  }

  /* Resumen al terminar el scan (estado "done"): el grid usaba `gap:1px` +
     `background: var(--border)` (hairline-table viejo) que choca con las cards v2
     (borde + radius propios) y dejaba un rectángulo del color del borde en la
     celda vacía de la última fila (7 stats impares en 2 cols). Lo pasamos a cards
     limpias separadas por gap real, fondo transparente. */
  .scan-summary {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: transparent;
    border: 0;
  }
  .scan-stat {
    padding: 12px 14px;
    border-radius: var(--radius-card);
  }
  .scan-stat-label {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .scan-stat-num {
    font-size: 1.5rem;
  }
  .scan-finish-meta {
    gap: 4px 1.25rem;
  }
}

/* ─── Opción C: cards de producto compactas 2-por-fila (Radar/Scoring/Tracker) ───
   A ≤520px el bento manda cada card a `span 12` (1 por fila) → imagen cuadrada
   gigante + datos en torre = una sola card llena la pantalla. Forzamos un grid de
   2 columnas y reseteamos el span de cada item a 1 celda. El !important vence el
   span del bento Y el `grid-template-columns: repeat(5,1fr)` inline del Tracker.
   Markup compartido: atributo `[data-product-grid]` en los 3 grids + sus skeletons.
   Resultado minimal: imagen + título + métrica principal + badge de estado. */
@media (max-width: 520px) {
  [data-product-grid] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  [data-product-grid] > * {
    grid-column: auto !important;
    min-width: 0;
  }

  /* Card más compacta. */
  [data-product-grid] .prod-body {
    padding: 10px 11px;
    gap: 6px;
  }
  [data-product-grid] .prod-title {
    font-size: 13px;
    line-height: 1.25;
  }

  /* Ocultamos lo secundario que infla el alto: tienda, tagline (Scoring) y el
     footer de acciones (Radar) — la imagen y el título ya enlazan al detalle. */
  [data-product-grid] .prod-store,
  [data-product-grid] .prod-body > p,
  [data-product-grid] .prod-foot {
    display: none !important;
  }

  /* Stats: mostramos SOLO el primer dato (Radar=Costo · Scoring=Vendidos) en vez
     de las 4 filas que apila la regla genérica `.prod-stats { 1fr }`. */
  [data-product-grid] .prod-stats {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 8px;
  }
  [data-product-grid] .prod-stats > div:not(:first-child) {
    display: none;
  }

  /* Overlay de la imagen: en Scoring se acumulan hasta 5 badges que taparían la
     miniatura chica. Dejamos solo el primero (decisión / tier / rank) y lo
     achicamos un poco. */
  [data-product-grid] .prod-img-overlay > *:nth-child(n + 2) {
    display: none;
  }
  [data-product-grid] .prod-img-overlay > .tt-dec,
  [data-product-grid] .prod-img-overlay > .tt-tier,
  [data-product-grid] .prod-img-overlay > .tt-chip {
    font-size: 9px;
    padding: 3px 7px;
  }
}

/* ─── Card primitive ─── */
.tt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
  overflow: hidden;
  transition: all 280ms var(--ease-spring);
  box-shadow: var(--shadow-1);
  position: relative;
}
/* Modifier: cards que contienen dropdowns/menus absolute-positioned que
   deben SALIR del border-radius del card (ej. tablas con menús de acciones
   por fila). Sin esto, el overflow:hidden default los recorta. */
.tt-card--allow-overflow {
  overflow: visible;
}
.tt-card[data-hoverable="true"]:hover,
.tt-card.is-hoverable:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.tt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tt-card-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  font-weight: 500;
}
.tt-card-action {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.tt-card-action:hover { color: var(--accent); }

@media (max-width: 820px) {
  .tt-card { padding: 18px; }
}
@media (max-width: 520px) {
  .tt-card { padding: 16px; border-radius: 18px; }
}

/* ─── Section head inside a card ───
   Cuando una tt-card contiene un section-head (h2 + sub), el border-bottom
   propio del section-head queda raro contra el border de la card. Esta
   variante lo neutraliza y solo deja el spacing — el card ya delimita
   visualmente la sección, no necesitamos separador adicional. */
.tt-card-section-head {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 18px;
}
.tt-card-section-head .tracker-section-sub {
  margin-top: 4px;
}
/* Variante con flex: título a la izquierda + meta-control (badge,
   botón) a la derecha. Usada en la Bitácora personal donde el estado
   de decisión vive como pill al lado del título. */
.tt-card-section-head--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─── Descripción del producto (LLM-cleaned) ───
   Texto largo formateado: intro en párrafos + bullets en `<ul>`. Tipografía
   más grande que el body promedio del card y line-height generoso porque
   el user típicamente lee la descripción una vez para entender el producto
   antes de tomar decisión — densidad alta cansa. */
.tt-product-description {
  margin-bottom: 32px;
}
.tt-product-description-body {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-1);
  max-width: 72ch;  /* línea cómoda para lectura, no se estira full-width */
}
.tt-product-description-body p {
  margin: 0 0 14px;
}
.tt-product-description-body p:last-child {
  margin-bottom: 0;
}
.tt-product-description-body ul {
  list-style: none !important;  /* override defensivo: el `*{padding:0}` global
                                   esconde los discs default pero algunos
                                   browsers todavía marcan list-style-type */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tt-product-description-body ul li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  list-style: none;
}
.tt-product-description-body ul li::marker {
  content: "";  /* belt-and-suspenders: aún si el browser inserta marker, vacío */
}
.tt-product-description-body ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
.tt-product-description-body ul + p,
.tt-product-description-body p + ul {
  margin-top: 14px;
}

/* Variante vacía — placeholder en itálica apagada. */
.tt-product-description--empty .tt-product-description-empty-msg {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-style: italic;
  color: var(--ink-4);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 820px) {
  .tt-product-description-body { font-size: 15px; }
  .tt-product-description-body > ul > li { font-size: 14px; padding-left: 20px; }
}
@media (max-width: 520px) {
  .tt-product-description-body { font-size: 14.5px; line-height: 1.6; }
  .tt-product-description-body > ul > li { font-size: 13.5px; }
}

/* ─── Stat ─── */
.stat-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  /* line-height generosa para que la caja vertical contenga descenders
     italics completos (los numerales en italic — 7, 4, 9 — bajan más que
     los regulares y line-height ajustado los recorta). */
  line-height: 1.2;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  overflow: visible;
}
.stat-num em {
  font-style: normal;
  background: linear-gradient(100deg, var(--text) 30%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Padding extiende la caja del em (donde se renderiza el gradient).
     Sin esto, el slant italic + descenders se salen de la caja y como
     background-clip:text recorta el gradient a la caja, esos pixels
     quedan invisibles. Con `padding-right` cubrimos el slant y con
     `padding-bottom` cubrimos el descender vertical (ej. "7" en 89,187). */
  display: inline-block;
  padding-right: 0.08em;
  padding-bottom: 0.12em;
  /* Compensa el padding-bottom en el flujo vertical para que el número
     no se "baje" visualmente respecto a su posición baseline original. */
  margin-bottom: -0.12em;
}
.stat-unit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-4);
  font-weight: 400;
}
.stat-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 12px;
}
@media (max-width: 820px) { .stat-num { font-size: 36px; } }
@media (max-width: 520px) { .stat-num { font-size: 32px; } }

/* ─── Delta badges ─── */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.delta.up { background: var(--lime-soft); color: var(--lime-ink); }
.delta.down { background: var(--rust-soft); color: var(--rust-ink); }

/* ─── Buttons ─── */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  height: 40px;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 200ms var(--ease-spring);
  background: transparent;
  color: var(--ink);
}
.tt-btn-primary {
  /* Gradient mono-hue: accent → accent-2 (mismo hue, distinta lightness).
     Cambio 2026-05-10: antes era `accent → mix(accent, coral)` que en
     dark mezclaba cyan con coral warm dando un look choqueante. El nuevo
     gradient mantiene la identidad del hue del theme (navy en light,
     cyan en dark). */
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.tt-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 36px color-mix(in oklab, var(--accent) 40%, transparent);
}
.tt-btn-primary:active { transform: translateY(0) scale(0.98); }

.tt-btn-secondary {
  /* Cambio 2026-05-10: bg pasa de `surface` a `surface-2` para tener
     más contraste con la card padre (que usa `surface`). Antes en dark
     el botón se confundía con el fondo. Border con tinte accent leve. */
  background: var(--surface-2);
  border-color: color-mix(in oklab, var(--accent) 22%, var(--line-2));
  color: var(--ink);
}
.tt-btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent) 20%, transparent);
}
.tt-btn-secondary:active { transform: translateY(0); }

.tt-btn-ghost { color: var(--ink-3); }
.tt-btn-ghost:hover { color: var(--ink); background: var(--surface-2); }

.tt-btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
.tt-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all 200ms var(--ease-spring);
  text-decoration: none;
}
.tt-btn-icon:hover { color: var(--accent); background: var(--accent-soft); transform: scale(1.1); }

/* Botón X de borrar sobre la imagen del producto (Radar `_card.html`). Va SOBRE la
   foto, así que un chip oscuro semi-transparente + X clara se ve bien en claro y
   oscuro por igual; al hover pasa a rojo (afford de borrado, antes era azul). */
.prod-card-delete {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.prod-card-delete:hover {
  color: #fff;
  background: var(--rust);
  transform: scale(1.1);
}

/* Al borrar una card del Radar, htmx aplica `.htmx-swapping` al wrapper `.col-3`
   durante el `swap:200ms` antes de removerlo → fade-out suave; luego el grid CSS
   reacomoda las cards restantes (sin huecos). El target es el `.col-3` completo
   (no solo el `<article>`), si no quedaba la celda vacía. */
#grid > .col-3.htmx-swapping {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  pointer-events: none;
}

/* ─── Segmented control ─── */
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}
.seg-item {
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  border-radius: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 200ms var(--ease);
}
.seg-item:hover { color: var(--ink); }
/* Estado activo:
   - `[data-active="true"]` para segs basados en links (server-rendered).
   - `:has(input:checked)` para segs basados en radios (form filters) — da
     respuesta visual INSTANTÁNEA al click sin esperar al submit. Los segs
     con radios NO deben usar `data-active` — el browser maneja la selección
     y CSS lo refleja con :has(). */
.seg-item[data-active="true"],
.seg-item.is-active,
.seg-item:has(input[type="radio"]:checked) {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
}

/* ─── Chip ─── */
.tt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 200ms var(--ease);
}
.tt-chip:hover { border-color: var(--accent); color: var(--accent); }
.tt-chip[data-active="true"],
.tt-chip.is-active,
/* Checkbox-chips (filtros del Scoring como `<label.tt-chip>` con checkbox): se
   activan cuando su checkbox está marcado (el highlight lo da `:has`, no JS). */
.tt-chip:has(input[type="checkbox"]:checked) {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
/* El checkbox nativo no se muestra; el `<label.tt-chip>` es el control visible. */
.tt-chip > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ─── Tier badges ─── */
.tt-tier {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid transparent;
}
.tt-tier-premium,
.tt-tier-PREMIUM {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: color-mix(in oklab, var(--amber) 30%, transparent);
}
.tt-tier-exclusivo,
.tt-tier-premium_exclusivo {
  background: var(--v2-magenta-soft);
  color: var(--v2-magenta);
  border-color: color-mix(in oklab, var(--v2-magenta) 30%, transparent);
}
.tt-tier-verificado {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: color-mix(in oklab, var(--blue) 30%, transparent);
}

/* ─── Decision pills ─── */
.tt-dec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700; /* +100 weight para mejor legibilidad en pills chicas */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 9px;
  border-radius: 999px;
  /* Border sutil del mismo hue del bg para separar el pill cuando se
     superpone a imágenes de producto con bordes que sangran al card. */
  border: 1px solid color-mix(in oklab, currentColor 28%, transparent);
}
.tt-dec .led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: pulse 2s ease infinite;
}
/* Color de texto usa los tokens `*-ink` (oscuros en light / brillantes en
   dark — ver definición arriba). El LED dot sigue usando el token brillante
   `--lime/--amber/--rust` para que SE VEA como punto luminoso. */
.tt-dec-entrar { background: var(--lime-soft); color: var(--lime-ink); }
.tt-dec-entrar .led { background: var(--lime); box-shadow: 0 0 6px var(--lime); }
.tt-dec-pronto { background: var(--amber-soft); color: var(--amber-ink); }
.tt-dec-pronto .led { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.tt-dec-quemado { background: var(--rust-soft); color: var(--rust-ink); }
.tt-dec-quemado .led { background: var(--rust); box-shadow: 0 0 6px var(--rust); }
.tt-dec-pass { background: var(--surface-2); color: var(--ink-3); }
.tt-dec-pass .led { background: var(--ink-4); animation: none; }
/* Variantes para los status del Radar — comparten visual con las decision
   pills del Scoring. Reusan los mismos tokens semánticos para consistencia. */
/* Pills CANDIDATOS y PENDIENTES con colores distintos del accent para que
   se diferencien visualmente del card TODOS (que usa accent puro). */
.tt-dec-cand    { background: color-mix(in oklab, oklch(0.55 0.20 270) 18%, transparent); color: oklch(0.42 0.22 270); }
.tt-dec-cand    .led { background: oklch(0.55 0.20 270); box-shadow: 0 0 6px oklch(0.55 0.20 270); }
[data-theme="dark"] .tt-dec-cand { color: oklch(0.82 0.18 270); }
[data-theme="dark"] .tt-dec-cand .led { background: oklch(0.78 0.18 270); box-shadow: 0 0 6px oklch(0.78 0.18 270); }
.tt-dec-test    { background: var(--amber-soft); color: var(--amber-ink); }
.tt-dec-test    .led { background: var(--amber);   box-shadow: 0 0 6px var(--amber); }
.tt-dec-gan     { background: var(--lime-soft); color: var(--lime-ink); }
.tt-dec-gan     .led { background: var(--lime);    box-shadow: 0 0 6px var(--lime); }
.tt-dec-sat     { background: var(--rust-soft); color: var(--rust-ink); }
.tt-dec-sat     .led { background: var(--rust);    box-shadow: 0 0 6px var(--rust); }
.tt-dec-pend    { background: color-mix(in oklab, oklch(0.58 0.20 340) 18%, transparent); color: oklch(0.42 0.22 340); }
.tt-dec-pend    .led { background: oklch(0.58 0.20 340); box-shadow: 0 0 6px oklch(0.58 0.20 340); }
[data-theme="dark"] .tt-dec-pend { color: oklch(0.82 0.20 340); }
[data-theme="dark"] .tt-dec-pend .led { background: oklch(0.78 0.20 340); box-shadow: 0 0 6px oklch(0.78 0.20 340); }
.tt-dec-todos   { background: var(--accent-soft); color: var(--accent); }
.tt-dec-todos   .led { background: var(--accent);  box-shadow: 0 0 6px var(--accent); }

/* ─── Tables ─── */
.tt-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.tt-tbl th {
  text-align: left;
  font-weight: 500;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.tt-tbl td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: middle;
  transition: background 160ms var(--ease);
}
.tt-tbl tbody tr:hover td { background: var(--surface-2); }
.tt-tbl tbody tr:hover td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.tt-tbl tbody tr:hover td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.tt-tbl .num { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; text-align: right; }
.tt-tbl .num.accent {
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
  display: inline-block;
  padding-right: 0.08em;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

/* ─── Product card ─── */
.prod-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 280ms var(--ease-spring);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  position: relative;
  text-decoration: none;
  color: inherit;
  /* Ocupa toda la altura del grid wrapper para que cards en la misma fila
     queden iguales aunque tengan contenido distinto (warning chip, etc). */
  height: 100%;
}
.prod-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-2);
  border-color: var(--accent);
}
.prod-card::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--radius-card) + 4px);
  border: 4px solid var(--accent-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.prod-card:hover::after { opacity: 1; }
.prod-img {
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
.prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prod-img-placeholder {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}
.prod-img-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
/* Cuando un producto acumula varios badges (decisión + bitácora + en racha
   + crecimiento) flotan sobre la imagen sin estirarse al ancho completo —
   se quedan a la izquierda y wrappean a una segunda fila si hace falta.
   Cada badge mantiene su texto en una sola línea. */
.prod-img-overlay > .tt-dec {
  white-space: nowrap;
}

/* Acordeón del historial de bitácora (A3): rotamos el chevron al abrir y
   ocultamos el marker default del <summary> en Safari/Chrome (en Webkit el
   ::-webkit-details-marker reemplaza el list-style: none). */
.journal-history > summary::-webkit-details-marker {
  display: none;
}
.journal-history[open] > summary .journal-history-chevron {
  transform: rotate(180deg);
}
.prod-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.prod-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.015em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-store {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.prod-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.prod-stat-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}
.prod-stat-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}
.prod-stat-val.big {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.prod-stat-val em {
  font-style: normal;
  background: linear-gradient(100deg, var(--text) 30%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  padding-right: 0.08em;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.prod-foot {
  display: flex;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  /* Sin negative margin — el footer queda dentro de la card y siempre
     se ve completo. Los hijos heredan border-radius bottom de overflow:hidden. */
}
.prod-foot a, .prod-foot button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  padding: 12px 10px;
  text-align: center;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  text-decoration: none;
  transition: all 200ms var(--ease);
}
.prod-foot a:last-child, .prod-foot button:last-child { border-right: 0; }
.prod-foot a:hover, .prod-foot button:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
@media (max-width: 520px) { .prod-stats { grid-template-columns: 1fr; } }

/* ─── Toolbar ─── */
.tt-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.toolbar-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  font-weight: 500;
}
@media (max-width: 520px) { .tt-toolbar { gap: 8px; } .seg-item { padding: 6px 10px; font-size: 11.5px; } }

/* ─── Filtros (toolbars) en mobile (2026-06-03) ───
   En el Radar la etiqueta "CATEGORÍA" iba inline empujando los chips, y los
   botones "Exportar CSV"/"Vaciar" quedaban chicos pegados a la izquierda en la
   2ª fila. Patrón compartido por Radar/Scoring/Suppliers + el seg "Ventana" del
   Tracker (todos usan `.tt-toolbar`):
   - cada grupo (label + control) ocupa su propia fila completa;
   - la etiqueta va SOBRE su control (no inline);
   - los segmented controls van a lo ancho con items repartidos por igual;
   - en el Radar el buscador toma una fila y los 2 botones se reparten 50/50. */
@media (max-width: 520px) {
  .tt-toolbar .toolbar-group {
    flex-wrap: wrap;
    width: 100%;
  }
  .tt-toolbar .toolbar-label {
    flex-basis: 100%;
    width: 100%;
    margin-bottom: 4px;
  }
  /* Segmented control full-width, items equitativos (tap targets parejos). */
  .tt-toolbar .seg {
    display: flex;
    width: 100%;
  }
  .tt-toolbar .seg-item {
    flex: 1;
    text-align: center;
    padding: 8px 6px;
  }
  /* Buscador a fila completa + los 2 botones de acción del Radar (únicos
     `.tt-btn-sm` hijos directos de un toolbar) repartidos 50/50 y más altos. */
  .tt-toolbar > .tt-btn-sm {
    flex: 1;
    height: 38px;
  }

  /* Tracker/Scoring: el form de filtros NO está en `.tt-toolbar` → no recibe el
     tratamiento de arriba y queda apretado/desbordado. Mismo patrón apilado acá
     (compartido por ambos para que el botón Aplicar quede igual en los dos). */
  .tracker-filters > form,
  .scoring-filters > form { gap: 14px !important; }
  .tracker-filters .toolbar-group,
  .scoring-filters > form .toolbar-group {
    flex-wrap: wrap;
    width: 100%;
  }
  .tracker-filters .toolbar-label,
  .scoring-filters > form .toolbar-label {
    flex-basis: 100%;
    width: 100%;
    margin-bottom: 4px;
  }
  .tracker-filters .seg { display: flex; width: 100%; }
  .tracker-filters .seg-item { flex: 1; text-align: center; padding: 8px 6px; }
  /* Combobox de proveedor a ancho completo (quita el `min-width:180px` inline).
     `font-size:16px` = umbral iOS: con <16px Safari hace auto-zoom al enfocar el
     input (y el zoom persiste al salir). 16px lo evita. */
  .tracker-filters .tracker-combobox { width: 100%; }
  .tracker-filters .tracker-combobox-input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    font-size: 16px !important;
  }
  /* Vendidos: los 2 inputs comparten el ancho de la fila. `font-size:16px` por la
     misma razón anti-zoom de iOS. */
  .tracker-filters input[name="min_sales"],
  .tracker-filters input[name="max_sales"] {
    flex: 1;
    width: auto !important;
    min-width: 0;
    font-size: 16px !important;
  }
  /* El spacer flex:1 sobra cuando todo va apilado → tomaría una fila vacía. */
  .tracker-filters > form > div[style*="flex: 1"],
  .scoring-filters > form > div[style*="flex: 1"] { display: none; }
  /* Aplicar (primario) y Limpiar (ghost) a ancho completo, apilados, con buen
     tap target. width:100% > flex:1 acá: el flex-wrap + grupos full-width hacían
     que `flex:1` no repartiera bien la fila. */
  .tracker-filters > form > .tt-btn-sm,
  .scoring-filters > form > .tt-btn-sm {
    width: 100%;
    height: 42px;
    justify-content: center;
  }
  /* El seg de Ventana/Rango (ahora dentro del form) full-width también en scoring. */
  .scoring-filters .seg { display: flex; width: 100%; }
  .scoring-filters .seg-item { flex: 1; text-align: center; padding: 8px 6px; }
}

/* ─── Search input ─── */
.tt-input-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 0 16px;
  height: 44px;
  flex: 1;
  min-width: 180px;
  transition: all 200ms var(--ease);
}
.tt-input-search:focus-within {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.tt-input-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}
.tt-input-search input::placeholder { color: var(--ink-4); }

/* ─── Country chips (Meta Ads tabs) ─── */
.country-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 200ms var(--ease);
}
.country-chip:hover { border-color: var(--accent); color: var(--ink); }
.country-chip[data-active="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.country-chip.is-analyzed:not([data-active="true"]) {
  background: var(--lime-soft);
  color: var(--lime);
}

/* ─── Detail hero (product detail page) ─── */
.detail-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}
/* Wrap del hero del producto: imagen principal arriba + grid de miniaturas
   debajo (carousel estilo Amazon/Shopify). El wrap reemplaza al div suelto
   `.detail-hero-img` cuando hay galería con varias fotos. */
.detail-hero-img-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.detail-hero-img {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
}
.detail-hero-img img { width: 100%; height: 100%; object-fit: cover; }
/* Grid horizontal de miniaturas. Wrap a otra fila si hay muchas (8+). */
.detail-hero-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
}
.detail-hero-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.detail-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-hero-thumb:hover {
  border-color: var(--accent);
  transform: scale(1.04);
}
.detail-hero-thumb--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.detail-hero-info { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.detail-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.detail-hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.detail-hero-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  padding-top: 8px;
}
.detail-hero-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  font-weight: 500;
  margin-bottom: 6px;
}
.detail-hero-stat-val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow: visible;
}
.detail-hero-stat-val em {
  font-style: normal;
  background: linear-gradient(100deg, var(--text) 30%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  padding-right: 0.08em;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.detail-hero-stat-val.small {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
/* Nota al pie de un stat (e.g. "leído hace 2 días" debajo del stock).
   Texto chico y ligero — informativo, no protagónico. */
.detail-hero-stat-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: 0.02em;
  cursor: help;
}
.detail-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 1024px) {
  .detail-hero-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .detail-hero { grid-template-columns: 1fr; gap: 18px; }
  /* Al colapsar a 1 columna, centramos la galería (imagen + miniaturas) y la
     capamos para que no estire la foto a todo el ancho de la tarjeta. */
  .detail-hero-img-wrap { align-self: center; width: 100%; max-width: 360px; }
  .detail-hero-img { max-width: none; }
  .detail-hero-stat-val { font-size: 24px; }
  /* Las labels de los charts viven en unidades del viewBox (1000 de ancho);
     al escalar el SVG a un ancho móvil quedan diminutas. Las agrandamos para
     que sigan legibles. */
  .tp-chart .tp-axis-label { font-size: 17px; }
  .tp-chart .tp-axis-label--x { font-size: 16px; }
}
@media (max-width: 520px) {
  .detail-hero-stats { grid-template-columns: repeat(2, 1fr); }
  /* El detalle anida `.detail-hero` (con su propia tarjeta) dentro de una
     `<section class="tt-card">`; el padding doble come ancho en pantallas
     chicas. Lo reducimos para dar aire al contenido. */
  .detail-hero { padding: 16px !important; }
  .detail-hero-thumbs { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .tp-chart-wrap { padding: 1rem 0.85rem 0.6rem; }
  .tp-chart .tp-axis-label { font-size: 20px; }
  .tp-chart .tp-axis-label--x { font-size: 19px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Product hero v3 (Opción C, 2026-06-04) — /tracker/product/{id}
   Layout vertical ÚNICO (mobile y desktop): carrusel swipeable + precio/ventas
   destacados + inventario colapsable. Reemplazó al `.detail-hero` de 2 columnas
   en el hero del detalle (los `.detail-hero*` quedan solo para el radar legacy).
   La columna se capa en ancho y se centra para que la galería no se estire en
   pantallas grandes. Quitados del hero: Sugerido, "leído"+fecha, Capturas,
   Visto desde (decisión del owner — no aportaban).
   ════════════════════════════════════════════════════════════════════════ */
.product-hero-card { padding: 20px; }
.product-hero { max-width: 520px; margin: 0 auto; }

/* ── Galería / carrusel ── */
.product-hero-gallery { position: relative; margin-bottom: 18px; }
.product-hero-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-hero-carousel::-webkit-scrollbar { display: none; }
.product-hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.product-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-hero-empty { aspect-ratio: 1 / 1; border-radius: var(--radius-card); }
/* Contador "1 / N" arriba a la derecha */
.product-hero-count {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
/* Dots: indicador en mobile + navegación clickeable en desktop */
.product-hero-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.product-hero-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink-5, #4a5468);
  cursor: pointer;
  transition: width 0.2s var(--ease), background 0.2s var(--ease);
}
.product-hero-dots button.on { background: var(--accent); width: 18px; border-radius: 3px; }
/* Flechas de navegación del carrusel. Solo en dispositivos con mouse
   (`hover:hover` + `pointer:fine`) — en touch se navega con swipe. */
.product-hero-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.18s var(--ease), background 0.18s var(--ease);
}
.product-hero-gallery:hover .product-hero-arrow { opacity: 1; }
.product-hero-arrow:hover { background: rgba(0, 0, 0, 0.78); }
.product-hero-arrow--prev { left: 10px; }
.product-hero-arrow--next { right: 10px; }
@media (hover: hover) and (pointer: fine) {
  .product-hero-arrow { display: grid; }
}

/* ── Meta + título ── */
.product-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.product-hero-store { color: var(--ink-3); text-decoration: none; font-weight: 500; }
.product-hero-store:hover { color: var(--accent); }
.product-hero-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

/* ── Headline: Precio + Vendidos ── */
.product-hero-headline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
}
.product-hero-kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.product-hero-kpi--sold { align-items: flex-end; text-align: right; }
.product-hero-kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  font-weight: 500;
}
.product-hero-kpi-val {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.product-hero-kpi-val--accent { color: var(--accent); font-size: 26px; }

/* ── Inventario colapsable ── */
.product-hero-inv { border: 1px solid var(--line); border-radius: var(--radius-card); margin-bottom: 4px; }
.product-hero-inv summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-hero-inv summary::-webkit-details-marker { display: none; }
.product-hero-inv-summary::before { content: "▸ "; color: var(--accent); }
.product-hero-inv-chev { color: var(--ink-4); transition: transform 0.2s var(--ease); }
.product-hero-inv[open] .product-hero-inv-chev { transform: rotate(90deg); }
.product-hero-inv-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px 14px; }
.product-hero-inv-body > div { text-align: center; }
.product-hero-inv-body span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  margin-bottom: 3px;
}
.product-hero-inv-body b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Acciones (botones rediseñados) ── */
.product-hero-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.product-hero-btn-main { width: 100%; justify-content: center; }
/* En mobile los 2 secundarios van APILADOS full-width (1 por fila) — en 2-col
   con etiquetas descriptivas se partían a 2 líneas y se veían saturados. En
   desktop (≥1024px, ver media query) vuelven a 2 columnas: hay ancho. */
.product-hero-actions-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* Labels descriptivos ("Competencia en Dropi", "Anuncios Meta + TikTok") no
   caben en una línea en el grid 2-col angosto de mobile — permitimos wrap con
   alto automático (el `.tt-btn` base es `white-space:nowrap; height:40px`). En
   desktop el panel derecho es ancho y caben en una sola línea. */
.product-hero-actions-grid .tt-btn {
  justify-content: center;
  white-space: normal;
  height: auto;
  min-height: 40px;
  padding: 7px 10px;
  line-height: 1.18;
  text-align: center;
}
.product-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-top: 2px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-decoration: none;
  padding: 6px;
}
.product-hero-link:hover { color: var(--accent); }

/* ── Desktop (≥1024px): 2 columnas (Opción D1) — carrusel a la izquierda, info
   a la derecha. La columna única vertical solo se mantiene en mobile/tablet.
   Breakpoint 1024 (no 821) a propósito: entre 821–1023 el sidebar ya ocupa
   240px y dejaría el canvas muy angosto para 2 columnas cómodas. El hero se
   capa a 900px y se centra para que el panel de info no se estire de más. ── */
@media (min-width: 1024px) {
  /* 2 columnas ANCLADAS A LA IZQUIERDA (no centradas con max-width → eso dejaba
     una isla con espacio vacío a ambos lados, parecía la opción contenida).
     `justify-content:start` deja el sobrante a la derecha = look PDP normal.
     Columnas flexibles para no desbordar en el límite del breakpoint (a 1024px
     el sidebar ya come 240px y el canvas queda angosto). */
  .product-hero {
    max-width: none;  /* sobrescribe el cap de 520px de la regla base (mobile) */
    display: grid;
    grid-template-columns: minmax(300px, 420px) minmax(320px, 520px);
    justify-content: start;
    gap: 40px;
    align-items: start;
  }
  .product-hero-gallery { margin-bottom: 0; }
  /* Secundarios en 2 columnas en desktop (el panel der tiene ancho de sobra). */
  .product-hero-actions-grid { grid-template-columns: 1fr 1fr; }
  /* Inventario expandido en desktop (hay espacio): el JS abre el <details> y
     acá lo dejamos como un bloque estático sin el toggle. */
  .product-hero-inv summary { cursor: default; }
  .product-hero-inv[open] .product-hero-inv-chev { display: none; }
}

/* ─── Sparkline (mini SVG) ─── */
.sparkline { display: block; max-width: 100%; height: 32px; }
.sparkline-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sparkline-area { fill: var(--accent); opacity: 0.12; }

/* ─── Status grid (Radar 6 cards) ─── */
.status-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.status-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: all 200ms var(--ease-spring);
  text-decoration: none;
  color: inherit;
}
.status-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-2); }
.status-card[data-active="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-glow);
  border-color: transparent;
}
.status-card[data-active="true"] .status-idx,
.status-card[data-active="true"] .status-label { color: rgba(255, 255, 255, 0.85); }
.status-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.status-idx {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.status-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.status-dot.dot-todos { background: var(--ink-4); }
.status-dot.dot-cand { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.status-dot.dot-test { background: var(--amber); }
.status-dot.dot-gan { background: var(--lime); }
.status-dot.dot-sat { background: var(--rust); }
.status-dot.dot-pend { background: var(--blue); }
.status-num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.status-card[data-active="true"] .status-num { color: var(--accent-ink); }
@media (max-width: 1024px) { .status-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .status-grid { grid-template-columns: repeat(2, 1fr); } .status-num { font-size: 28px; } }

/* ─── Pagination ─── */
.tt-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.tt-pagination a, .tt-pagination span, .tt-pagination button {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-3);
  text-decoration: none;
  border: 1px solid var(--line);
  cursor: pointer;
  min-width: 36px;
  text-align: center;
  transition: all 200ms var(--ease);
}
.tt-pagination a:hover { border-color: var(--accent); color: var(--accent); }
.tt-pagination [data-active="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.tt-pagination span.ellipsis { border: 0; }

/* ══════════════════════════════════════════════════════════════════════
   V2 OVERRIDES — Re-skin profundo de partials legacy.
   Mantiene class names viejos (HTMX/JS hooks intactos) pero les da look
   v2 (radius soft, sombras tight, paleta violeta/coral, sin neon glow).
   Cualquier corner/cyber decoration queda hidden por seguridad.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Hide cyber decorations universalmente ─── */
.detail-hero-corner,
.login-corner,
.current-corner,
.scan-glyph:not(.scan-glyph--ok):not(.scan-glyph--err),
.recent-glyph,
.competition-block-glyph,
.meta-ads-bucket-glyph,
.meta-ads-by-query-glyph,
.tracker-empty-glyph::before,
.detail-supplier-arrow,
.current-supplier-arrow,
.scanline,
.current-scanline,
.tp-hero::before,
.tp-hero::after { display: none !important; }

/* ─── Tier pills (legacy) → v2 colors ─── */
.tier-pill,
.detail-similar-tier,
.current-tier {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.tier-pill--premium, .tier--premium { background: var(--amber-soft); color: var(--amber-ink); }
.tier-pill--premium_exclusivo, .tier--premium_exclusivo { background: var(--v2-magenta-soft); color: var(--v2-magenta-ink); }
.tier-pill--verificado, .tier--verificado { background: var(--blue-soft); color: var(--blue-ink); }

/* ─── Back link → v2 ghost button ─── */
.back-link {
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-btn) !important;
  background: var(--surface) !important;
  color: var(--ink-3) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  transition: all 200ms var(--ease) !important;
}
.back-link:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* ─── Detail hero (legacy radar) → v2 detail-hero look ─── */
/* OJO: NO redeclarar `grid-template-columns` acá. Esta regla vive DESPUÉS de
   los media queries responsive (`.detail-hero { grid-template-columns: 1fr }`
   a ≤820px), así que cualquier columna fija que pongamos acá ganaría por orden
   de cascada y la galería NUNCA colapsaría a 1 columna en móvil. El grid de
   desktop (320px 1fr) ya lo define la regla base de `.detail-hero` de arriba. */
.detail-hero {
  padding: 24px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card-lg) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-1) !important;
}
.detail-image {
  background: var(--bg-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
}
.detail-image-fallback {
  font-family: var(--font-mono) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink-4) !important;
}
.detail-tier {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  border: 0 !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.08em !important;
  font-size: 10.5px !important;
}
[data-theme="dark"] .detail-tier { background: rgba(17, 16, 42, 0.85) !important; }
.detail-eyebrow {
  color: var(--ink-4) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.1em !important;
}
.detail-status {
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 9px !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
}
.detail-status--candidate { background: var(--lime-soft); color: var(--lime) !important; }
.detail-status--testing { background: var(--blue-soft); color: var(--blue) !important; }
.detail-status--winner { background: var(--amber-soft); color: var(--amber) !important; }
.detail-status--discarded { background: var(--rust-soft); color: var(--rust) !important; }
.detail-status--pending { background: var(--surface-2); color: var(--ink-4) !important; }
.detail-title {
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
}
.detail-supplier {
  font-family: var(--font-sans);
  color: var(--ink-3) !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
}
.detail-stats {
  background: transparent !important;
  border: 0 !important;
  gap: 1px !important;
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
}
.detail-stat {
  background: var(--surface) !important;
  padding: 14px 16px !important;
}
.detail-stat dt {
  color: var(--ink-4) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
}
.detail-stat dd {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
.detail-stat-text {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: var(--ink-2) !important;
}
.detail-dropi-btn {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-radius: var(--radius-btn) !important;
  padding: 10px 18px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: var(--shadow-glow) !important;
  transition: all 200ms var(--ease-spring) !important;
}
.detail-dropi-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 36px color-mix(in oklab, var(--accent) 40%, transparent) !important;
}

.detail-flag {
  border: 1px solid var(--amber-soft) !important;
  background: var(--amber-soft) !important;
  color: var(--amber) !important;
  border-radius: var(--radius-card) !important;
  padding: 12px 16px !important;
}
.detail-flag-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--amber) !important;
}
.detail-flag-msg { color: var(--ink-2) !important; }

.detail-notes {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-card) !important;
  padding: 14px 18px !important;
  box-shadow: var(--shadow-1) !important;
}
.detail-notes-label {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.1em !important;
  font-size: 10.5px !important;
  color: var(--ink-4) !important;
}
.detail-notes-content { color: var(--ink-2) !important; }

.detail-section-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.detail-section-sub { color: var(--ink-3) !important; letter-spacing: 0 !important; }

.detail-runs-table {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  overflow: hidden !important;
}
.detail-runs-row { border-bottom-color: var(--line) !important; }
.detail-runs-row--head {
  background: var(--surface-2) !important;
  color: var(--ink-4) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.1em !important;
}
.run-num { color: var(--accent) !important; text-shadow: none !important; font-family: var(--font-display) !important; }

.detail-run-block {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-1) !important;
}
.detail-run-header { background: var(--surface-2) !important; border-bottom-color: var(--line) !important; }
.detail-run-num { color: var(--accent) !important; }
.detail-run-stats strong { color: var(--accent) !important; }
.detail-similar-item a { border-bottom-color: var(--line) !important; }
.detail-similar-item a:hover { background: var(--surface-2) !important; }
.detail-similar-thumb {
  background: var(--bg-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-chip) !important;
}
.detail-similar-name { color: var(--ink) !important; }
.detail-similar-price { font-family: var(--font-display) !important; color: var(--ink) !important; }
.detail-similar-arrow { color: var(--ink-4) !important; }
.detail-similar-item a:hover .detail-similar-arrow { color: var(--accent) !important; }
.detail-empty {
  border: 1px dashed var(--line-2) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-card) !important;
}
.detail-empty-msg { color: var(--ink-3) !important; }

/* ─── Login panel → v2 card ─── */
.login-panel {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card-lg) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-2) !important;
  padding: 28px !important;
}
.login-icon {
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  width: 56px !important;
  height: 56px !important;
  box-shadow: none !important;
}
.login-icon--done { background: var(--lime-soft) !important; color: var(--lime) !important; }
.login-icon--error { background: var(--rust-soft) !important; color: var(--rust) !important; }
.login-icon--validating { background: var(--blue-soft) !important; color: var(--blue) !important; }
.login-icon-glyph { font-size: 24px !important; text-shadow: none !important; }
.login-countdown, .login-countdown-inline {
  font-family: var(--font-display) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
.login-title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
}
.login-msg, .login-hint { color: var(--ink-3) !important; font-family: var(--font-sans) !important; }
.login-msg strong { color: var(--ink) !important; }
.btn-login-confirm,
.btn-login-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: all 200ms var(--ease-spring) !important;
}
.btn-login-confirm {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: var(--shadow-glow) !important;
}
.btn-login-confirm:hover { transform: translateY(-2px) scale(1.02); }
.btn-login-cancel {
  background: var(--surface) !important;
  color: var(--ink-3) !important;
  border-color: var(--line-2) !important;
}
.btn-login-cancel:hover { color: var(--ink) !important; background: var(--surface-2) !important; }

/* ─── Scan panel (Radar) → v2 card ─── */
.scan-panel {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card-lg) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-1) !important;
  padding: 22px !important;
}
.scan-headline {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em !important;
}
.scan-glyph--ok { color: var(--lime) !important; text-shadow: none !important; }
.scan-glyph--err { color: var(--rust) !important; text-shadow: none !important; }
.scan-cursor { color: var(--accent) !important; }
.scan-launch-field {
  background: var(--surface-2) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-btn) !important;
  padding: 0 12px !important;
}
.scan-launch-field:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.scan-launch-label, .scan-launch-suffix { font-family: var(--font-mono) !important; font-size: 11px !important; color: var(--ink-4) !important; letter-spacing: 0.06em !important; }
.scan-launch-input { font-family: var(--font-display) !important; color: var(--ink) !important; font-size: 16px !important; background: transparent !important; }
.btn-scan,
.btn-scan-secondary,
.btn-scan-relogin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: all 200ms var(--ease-spring) !important;
  text-decoration: none !important;
}
.btn-scan,
.btn-scan-relogin {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: var(--shadow-glow) !important;
}
.btn-scan:hover, .btn-scan-relogin:hover { transform: translateY(-2px) scale(1.02); }
.btn-scan-secondary {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}
.btn-scan-secondary:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.scan-state-pill {
  border-radius: var(--radius-pill) !important;
  padding: 5px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  border: 0 !important;
  background: var(--surface-2) !important;
}
.scan-state-pill--running { background: var(--accent-soft) !important; color: var(--accent) !important; }
.scan-state-pill--done { background: var(--lime-soft) !important; color: var(--lime) !important; }
.scan-state-pill--error { background: var(--rust-soft) !important; color: var(--rust) !important; }
.scan-pulse { background: var(--accent) !important; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent) !important; }
.scan-progress-bar {
  background: var(--surface-2) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  height: 8px !important;
  overflow: hidden !important;
}
.scan-progress-fill {
  background: var(--accent) !important;
  box-shadow: none !important;
  border-radius: var(--radius-pill) !important;
}
.scan-progress-ticks { display: none !important; }
.progress-label { font-family: var(--font-mono) !important; color: var(--ink-4) !important; letter-spacing: 0.08em !important; font-size: 10.5px !important; }
.progress-value { font-family: var(--font-display) !important; color: var(--ink) !important; }
.progress-value--big { color: var(--accent) !important; }
.scan-current { gap: 18px !important; }
.current-image {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--bg-soft) !important;
  overflow: hidden !important;
}
.current-name {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.current-supplier { color: var(--ink-3) !important; font-family: var(--font-sans) !important; letter-spacing: 0 !important; }
.current-step { color: var(--ink-3) !important; font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: 0.06em !important; }
.step-dot { background: var(--accent) !important; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent) !important; }
.current-price { font-family: var(--font-display) !important; color: var(--ink) !important; }
.current-cats { color: var(--ink-4) !important; font-size: 12px !important; }
/* "Evaluados" NO es un contenedor propio: vive dentro del panel del scan, así
   que sin borde/fondo/sombra/radius (evita el box anidado dentro del .scan-panel).
   El header queda como una fila de label con un divisor inferior. */
.scan-recent {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.scan-recent-head {
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
.recent-title { font-family: var(--font-mono) !important; color: var(--ink-4) !important; letter-spacing: 0.1em !important; font-size: 11px !important; }
.recent-count { color: var(--accent) !important; font-family: var(--font-display) !important; }
.recent-item { border-bottom-color: var(--line) !important; }
.recent-thumb { border: 1px solid var(--line) !important; border-radius: var(--radius-chip) !important; background: var(--bg-soft) !important; }
.recent-name { color: var(--ink-2) !important; }
.recent-outcome {
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 9px !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
}
.recent-outcome--candidate { background: var(--lime-soft) !important; color: var(--lime) !important; }
.recent-outcome--burned { background: var(--rust-soft) !important; color: var(--rust) !important; }
.recent-outcome--skip { background: var(--surface-2) !important; color: var(--ink-4) !important; }
.recent-outcome--seen { background: var(--blue-soft) !important; color: var(--blue) !important; }
.recent-outcome--err { background: var(--rust-soft) !important; color: var(--rust) !important; }
.scan-stat { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-card) !important; }
.scan-stat-label { font-family: var(--font-mono) !important; color: var(--ink-4) !important; letter-spacing: 0.08em !important; }
.scan-stat-num { font-family: var(--font-display) !important; color: var(--ink) !important; }
.scan-stat--accent .scan-stat-num { color: var(--accent) !important; }
.scan-stat--err .scan-stat-num { color: var(--rust) !important; }
.scan-error {
  border: 1px solid var(--rust-soft) !important;
  background: var(--rust-soft) !important;
  border-radius: var(--radius-card) !important;
  color: var(--rust) !important;
}
.scan-error-label { color: var(--rust) !important; font-family: var(--font-mono) !important; }
.scan-error-msg { color: var(--ink-2) !important; }

/* ─── Notes form (legacy) → v2 ─── */
.card-notes-input {
  border: 1px solid var(--line-2) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  padding: 8px 10px !important;
  transition: all 200ms var(--ease) !important;
}
.card-notes-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; outline: none !important; }
.card-notes-label { font-family: var(--font-mono) !important; color: var(--ink-4) !important; font-size: 10.5px !important; letter-spacing: 0.08em !important; }
.card-notes-save {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  padding: 6px 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: all 200ms var(--ease) !important;
}
.card-notes-save:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.card-notes-saved { color: var(--lime) !important; font-family: var(--font-mono) !important; font-size: 11px !important; }

/* ─── Product preview popup (hover) → fondo SÓLIDO elevado + shadow-pop ─── */
/* OJO: este override con `!important` ganaba sobre el `.product-preview` base;
   usaba `--surface-3` (translúcido en dark = rgba(255,255,255,.10)) → la card se
   veía transparente en todos los flujos. Fondo sólido `--popover-bg` + borde acento. */
.product-preview {
  background: var(--popover-bg) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-pop) !important;
}
.product-preview-section-title { font-family: var(--font-mono) !important; color: var(--ink-4) !important; letter-spacing: 0.08em !important; font-size: 10.5px !important; }
.product-preview-total { font-family: var(--font-display) !important; color: var(--ink) !important; }
.product-preview-chart-line { stroke: var(--accent) !important; stroke-width: 2 !important; fill: none !important; }
.product-preview-chart-area { fill: color-mix(in oklab, var(--accent) 14%, transparent) !important; }
.product-preview-chart-dot { fill: var(--accent) !important; }
.product-preview-cursor { stroke: var(--ink-4) !important; stroke-width: 1 !important; stroke-dasharray: 3 3 !important; }
.product-preview-cursor-dot { fill: var(--accent) !important; stroke: var(--surface) !important; stroke-width: 2 !important; }
.product-preview-grid { stroke: var(--line) !important; }
.product-preview-axis { stroke: var(--line-2) !important; }
.product-preview-axis-label { fill: var(--ink-4) !important; font-family: var(--font-mono) !important; font-size: 9.5px !important; }
.product-preview-axis-label--y { text-anchor: end; }
.product-preview-axis-label--x { text-anchor: middle; }
/* Tooltip del mini-chart del popover de producto. Fondo SÓLIDO del tema (no invertido):
   antes usaba `--ink`/`--bg` (caja oscura/clara invertida) que con la paleta nueva daba una
   caja blanca ilegible en modo oscuro y escondía los labels `--text-muted`. Ahora caja `--bg`
   + texto `--text` + borde acento (coherente con `.tp-chart-tooltip`), legible en ambos temas. */
.product-preview-tooltip { background: var(--popover-bg) !important; color: var(--text) !important; border-radius: var(--radius-chip) !important; box-shadow: var(--shadow-2) !important; border: 1px solid var(--accent) !important; }
.product-preview-tooltip-value { font-family: var(--font-display) !important; }
.product-preview-comp { font-family: var(--font-sans) !important; color: var(--ink-2) !important; }
.product-preview-comp--good { color: var(--lime) !important; }
.product-preview-comp--unknown, .product-preview-comp-hint { color: var(--ink-4) !important; }
.product-preview-comp strong { color: var(--ink) !important; }
.product-preview-empty { color: var(--ink-4) !important; font-style: italic; }

/* ─── btn-tracker (usado en competition + meta-ads + tiktok) → v2 button ─── */
.btn-tracker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: all 200ms var(--ease-spring) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.btn-tracker--primary {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: var(--shadow-glow) !important;
}
.btn-tracker--primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 36px color-mix(in oklab, var(--accent) 40%, transparent) !important; }
.btn-tracker--secondary {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}
.btn-tracker--secondary:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-tracker--ghost {
  background: transparent !important;
  color: var(--ink-3) !important;
}
.btn-tracker--ghost:hover { background: var(--surface-2) !important; color: var(--ink) !important; }

/* btn-tracker--warn: variante para botones primary que mantienen la
   acción habilitada pero advierten visualmente que hay problemas
   pendientes (e.g. "Publicar igual con críticos sin resolver"). Tinte
   amber sin perder el peso visual del primary. */
.btn-tracker--warn {
  background: color-mix(in oklch, var(--amber, #f5a623) 88%, var(--accent)) !important;
  color: #1a1207 !important;
  box-shadow: 0 8px 24px color-mix(in oklch, var(--amber, #f5a623) 35%, transparent) !important;
}
.btn-tracker--warn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px color-mix(in oklch, var(--amber, #f5a623) 45%, transparent) !important;
}

/* ─── Tracker section title (legacy ▸ glyph variant) → v2 typography ─── */
.tracker-section-title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
  text-transform: none !important;
}
.tracker-section-sub { color: var(--ink-3) !important; font-family: var(--font-sans) !important; }
.tracker-empty {
  border: 1px dashed var(--line-2) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-card) !important;
  padding: 32px 24px !important;
  text-align: center !important;
}
.tracker-empty-glyph {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}
.tracker-empty-msg { color: var(--ink-3) !important; }

/* ─── Competition section → v2 card + table ─── */
.competition-section {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-card-lg) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-1) !important;
}
.competition-head { border-bottom: 1px solid var(--line) !important; }
.competition-captured { color: var(--ink-3) !important; }
.competition-progress {
  background: var(--accent-soft) !important;
  border: 0 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--radius-card) !important;
  padding: 14px 16px !important;
}
.competition-progress-bar { background: var(--surface) !important; border: 0 !important; height: 8px !important; border-radius: var(--radius-pill) !important; }
.competition-progress-fill {
  background: var(--accent) !important;
  box-shadow: none !important;
}
.competition-progress-pct { font-family: var(--font-display) !important; color: var(--accent) !important; text-shadow: none !important; }
.competition-progress-status { color: var(--ink-2) !important; }
.competition-progress-query {
  background: var(--surface) !important;
  border: 0 !important;
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-chip) !important;
}
.competition-error {
  border: 1px solid var(--rust-soft) !important;
  background: var(--rust-soft) !important;
  border-radius: var(--radius-card) !important;
  padding: 18px 20px !important;
}
.competition-error-glyph {
  font-family: var(--font-display) !important;
  color: var(--rust) !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}
.competition-error-msg { color: var(--ink-2) !important; }
.competition-block-title {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: var(--ink-4) !important;
  text-transform: uppercase !important;
}
.competition-block-count {
  background: var(--accent-soft) !important;
  border: 0 !important;
  color: var(--accent) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-mono) !important;
}
.competition-table-wrap {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  overflow: hidden !important;
}
.competition-table thead th {
  font-family: var(--font-mono) !important;
  color: var(--ink-4) !important;
  letter-spacing: 0.08em !important;
  font-size: 10.5px !important;
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--line) !important;
}
.competition-table tbody td { border-bottom: 1px solid var(--line) !important; color: var(--ink-2) !important; }
.competition-table tbody tr:hover td { background: var(--surface-2) !important; }
.competition-table .num { font-family: var(--font-mono) !important; }
.competition-table .num--accent { color: var(--accent) !important; font-weight: 600 !important; }
.competition-product-thumb {
  background: var(--bg-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-chip) !important;
}
.competition-product-name { color: var(--ink) !important; }
.competition-store-link { color: var(--ink-3) !important; }
.competition-store-link:hover { color: var(--accent) !important; }
.competition-best-flag {
  background: var(--amber-soft) !important;
  color: var(--amber) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  padding: 3px 8px !important;
}
.competition-queries summary { color: var(--ink-3) !important; font-family: var(--font-sans) !important; }
.competition-queries-link {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-chip) !important;
  color: var(--ink-2) !important;
  font-family: var(--font-mono) !important;
}
.competition-queries-link:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ─── Meta Ads section → v2 ─── */
.meta-ads-section {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-card-lg) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-1) !important;
}
.meta-ads-head { border-bottom: 1px solid var(--line) !important; }
.meta-ads-captured { color: var(--ink-3) !important; font-family: var(--font-mono) !important; }
.meta-ads-stale-badge {
  background: var(--amber-soft) !important;
  color: var(--amber) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  border: 0 !important;
  padding: 2px 8px !important;
}
.meta-ads-mode-badge {
  background: var(--v2-magenta-soft) !important;
  color: var(--v2-magenta) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-mono) !important;
  border: 0 !important;
  padding: 2px 8px !important;
  font-size: 10px !important;
}
.meta-ads-country-tab {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  padding: 6px 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: all 200ms var(--ease) !important;
  position: relative;
  overflow: hidden;
}
.meta-ads-country-tab:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.meta-ads-country-tab--active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.meta-ads-country-tab--analyzed::before { display: none !important; }
.meta-ads-country-tab-bar { background: var(--accent) !important; height: 2px !important; }
.meta-ads-country-tab-running {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  color: transparent !important; /* defensa: si llegara a haber glyph, invisible */
  flex-shrink: 0 !important;
  margin-left: 0.35rem !important;
  vertical-align: middle !important;
  animation: tt-dot-pulse 1.2s ease-in-out infinite !important;
}
.meta-ads-bulk-banner {
  background: var(--accent-soft) !important;
  border: 0 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--radius-card) !important;
  padding: 14px 16px !important;
}
.meta-ads-bulk-banner-bar { background: var(--surface) !important; border: 0 !important; height: 8px !important; border-radius: var(--radius-pill) !important; overflow: hidden; }
.meta-ads-bulk-banner-fill { background: var(--accent) !important; box-shadow: none !important; }
.meta-ads-bulk-banner-percent { font-family: var(--font-display) !important; color: var(--accent) !important; }
.meta-ads-bulk-banner-chip {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--ink-2) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  text-shadow: none !important;
  padding: 3px 8px !important;
}
.meta-ads-bulk-banner-chip--done { background: var(--lime-soft) !important; color: var(--lime) !important; border-color: transparent !important; }
.meta-ads-bulk-banner-chip--error { background: var(--rust-soft) !important; color: var(--rust) !important; border-color: transparent !important; }
.meta-ads-bulk-banner-chip--queued { color: var(--ink-4) !important; }
.meta-ads-progress {
  background: var(--accent-soft) !important;
  border: 0 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--radius-card) !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
/* Mismo tratamiento dinámico que TikTok (reusa keyframes tt-*): shimmer skeleton
   en el track + gradiente/glow/shine en el fill + punto pulsante. Ver el progreso
   de TikTok en `_tiktok_organic_section.html`. */
.meta-ads-progress-bar {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface)) !important;
  border: 0 !important;
  height: 10px !important;
  border-radius: var(--radius-pill) !important;
  position: relative;
  overflow: hidden;
}
.meta-ads-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent) 22%, transparent) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: tt-skeleton-sweep 1.6s ease-in-out infinite;
}
.meta-ads-progress-fill {
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in oklab, var(--accent) 65%, white)
  ) !important;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 45%, transparent) !important;
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.meta-ads-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-100%);
  animation: tt-fill-shine 1.5s ease-in-out infinite;
}
.meta-ads-progress-pct {
  font-family: var(--font-display) !important;
  color: var(--accent) !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
.meta-ads-progress-status {
  color: var(--ink-2) !important;
}
/* Punto pulsante inline antes del texto de estado (inline-block, no flex, para no
   espaciar los sub-spans del status: detail/query). */
.meta-ads-progress-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 7px;
  vertical-align: middle;
  animation: tt-dot-pulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .meta-ads-progress-bar::after,
  .meta-ads-progress-fill::after,
  .meta-ads-progress-status::before {
    animation: none;
  }
}
.meta-ads-progress-query {
  background: var(--surface) !important;
  border: 0 !important;
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-chip) !important;
}

/* Competencia: MISMO componente de progreso estandarizado que Meta/TikTok
   (2026-06-05). El bloque base (`.competition-progress*`, ~línea 4659) es idéntico
   al base de Meta; acá viene el override !important que le da el look v2: card
   accent-soft redondeada, shimmer skeleton en el track, gradiente+glow+shine en el
   fill y punto pulsante junto al estado. Reusa los keyframes tt-*. */
.competition-progress {
  background: var(--accent-soft) !important;
  border: 0 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--radius-card) !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.competition-progress-bar {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface)) !important;
  border: 0 !important;
  height: 10px !important;
  border-radius: var(--radius-pill) !important;
  position: relative;
  overflow: hidden;
}
.competition-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent) 22%, transparent) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: tt-skeleton-sweep 1.6s ease-in-out infinite;
}
.competition-progress-fill {
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in oklab, var(--accent) 65%, white)
  ) !important;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 45%, transparent) !important;
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.competition-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-100%);
  animation: tt-fill-shine 1.5s ease-in-out infinite;
}
.competition-progress-pct {
  font-family: var(--font-display) !important;
  color: var(--accent) !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
.competition-progress-status {
  color: var(--ink-2) !important;
}
.competition-progress-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 7px;
  vertical-align: middle;
  animation: tt-dot-pulse 1.2s ease-in-out infinite;
}
.competition-progress-query {
  background: var(--surface) !important;
  border: 0 !important;
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-chip) !important;
}
@media (prefers-reduced-motion: reduce) {
  .competition-progress-bar::after,
  .competition-progress-fill::after,
  .competition-progress-status::before {
    animation: none;
  }
}

.meta-ads-error {
  border: 1px solid var(--rust-soft) !important;
  background: var(--rust-soft) !important;
  border-radius: var(--radius-card) !important;
  padding: 18px 20px !important;
}
.meta-ads-error-glyph {
  font-family: var(--font-display) !important;
  color: var(--rust) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  text-transform: none !important;
}
.meta-ads-error-msg { color: var(--ink-2) !important; }
.meta-ads-kpis { border-radius: var(--radius-card) !important; overflow: hidden !important; border: 1px solid var(--line) !important; }
.meta-ads-kpi {
  background: var(--surface) !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  padding: 16px 18px !important;
}
.meta-ads-kpi:last-child { border-right: 0 !important; }
/* Cambio 2026-05-10: el bg accent del KPI central se veía "corrido" porque
   los `border-right` de los cards vecinos (separadores verticales del wrapper)
   creaban líneas oscuras a ambos lados del accent. Solución: pseudo-element
   que extiende el accent 1px hacia cada lado, cubriendo esos borders. */
.meta-ads-kpi--accent { background: var(--accent-soft) !important; position: relative; }
.meta-ads-kpi--accent::before {
  content: '';
  position: absolute;
  inset: 0 -1px;
  background: var(--accent-soft);
  z-index: 0;
  pointer-events: none;
}
.meta-ads-kpi--accent > * { position: relative; z-index: 1; }
.meta-ads-kpi-label { font-family: var(--font-mono) !important; color: var(--ink-4) !important; letter-spacing: 0.1em !important; font-size: 10.5px !important; }
.meta-ads-kpi-value { font-family: var(--font-display) !important; color: var(--ink) !important; font-size: 30px !important; font-weight: 500 !important; }
.meta-ads-kpi--accent .meta-ads-kpi-value { color: var(--accent) !important; }
.meta-ads-kpi-hint { color: var(--ink-4) !important; }
.meta-ads-by-query-title {
  font-family: var(--font-mono) !important;
  color: var(--ink-4) !important;
  letter-spacing: 0.1em !important;
  font-size: 11px !important;
}
.meta-ads-by-query-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  padding: 12px 14px !important;
  box-shadow: var(--shadow-1) !important;
}
.meta-ads-by-query-name {
  background: var(--surface-2) !important;
  border-radius: var(--radius-chip) !important;
  border: 0 !important;
  color: var(--ink-2) !important;
  font-family: var(--font-mono) !important;
  padding: 8px 12px !important;
}
.meta-ads-by-query-name:hover { color: var(--accent) !important; background: var(--accent-soft) !important; }
.meta-ads-by-query-pill {
  border-radius: var(--radius-pill) !important;
  border: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  padding: 3px 8px !important;
}
.meta-ads-by-query-pill--match { background: var(--lime-soft) !important; color: var(--lime) !important; }
.meta-ads-by-query-pill--uncertain { background: var(--amber-soft) !important; color: var(--amber) !important; }
.meta-ads-by-query-pill--unrelated { background: var(--surface-2) !important; color: var(--ink-4) !important; }
.meta-ads-by-query-total-num { font-family: var(--font-display) !important; color: var(--ink) !important; }
.meta-ads-bucket {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
}
.meta-ads-bucket-title {
  background: var(--surface-2) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--ink-4) !important;
  text-transform: uppercase !important;
  border: 0 !important;
}
.meta-ads-bucket-count {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-mono) !important;
}
/* Backdrop SIEMPRE oscuro (no `--ink`: es el color de TEXTO → en dark es casi
   blanco y lavaba el viewport con un velo claro). `rgba(0,0,0,..)` oscurece bien
   en ambos temas. */
.meta-ads-modal::backdrop { background: rgba(0, 0, 0, 0.72) !important; backdrop-filter: blur(8px); }
.meta-ads-modal {
  border: 0 !important;
  border-radius: var(--radius-card-lg) !important;
  /* Panel SÓLIDO: `--surface` es glass translúcido en dark → el marco se veía
     transparente sobre el backdrop. Truco gradiente-sobre-sólido = opaco
     (`--bg`) + tinte de elevación (`--surface-2`). */
  background-color: var(--bg) !important;
  background-image: linear-gradient(var(--surface-2), var(--surface-2)) !important;
  box-shadow: var(--shadow-pop) !important;
  padding: 0 !important;
}
.meta-ads-modal-content { padding: 24px !important; }
.meta-ads-modal-title { font-family: var(--font-display) !important; font-size: 22px !important; font-weight: 500 !important; letter-spacing: -0.025em !important; color: var(--ink) !important; }
.meta-ads-modal-close { color: var(--ink-3) !important; background: transparent !important; border: 0 !important; cursor: pointer; font-size: 24px !important; }
.meta-ads-modal-close:hover { color: var(--ink) !important; }
.meta-ads-modal-lede { color: var(--ink-3) !important; font-family: var(--font-sans) !important; }
.meta-ads-modal-list-icon { color: var(--accent) !important; }
.meta-ads-modal-list li { color: var(--ink-2) !important; }
.meta-ads-modal-list strong { color: var(--ink) !important; }
.meta-ads-modal-tip { background: var(--accent-soft) !important; color: var(--ink-2) !important; border-radius: var(--radius-card) !important; padding: 12px 16px !important; border: 0 !important; }
.meta-ads-bulk-helpers { display: flex; gap: 8px; flex-wrap: wrap; }
.meta-ads-bulk-helper-btn {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-chip) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  color: var(--ink-2) !important;
  padding: 6px 10px !important;
  cursor: pointer;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.meta-ads-bulk-helper-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.meta-ads-bulk-option {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  padding: 10px 14px !important;
}
.meta-ads-bulk-option:has(input:checked) { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.meta-ads-bulk-option--analyzed { background: var(--lime-soft) !important; }
.meta-ads-bulk-option--running { background: var(--blue-soft) !important; }
.meta-ads-bulk-option-status { font-family: var(--font-mono) !important; color: var(--ink-4) !important; font-size: 11px !important; }
.meta-ads-bulk-full-toggle { color: var(--ink-2) !important; font-family: var(--font-sans) !important; }
.meta-ads-footer { color: var(--ink-3) !important; font-family: var(--font-sans) !important; }
.meta-ads-search-link { color: var(--accent) !important; }
.meta-ads-video-modal::backdrop { background: rgba(0, 0, 0, 0.72) !important; backdrop-filter: blur(8px); }
.meta-ads-video-modal {
  border: 0 !important;
  border-radius: var(--radius-card-lg) !important;
  /* Panel SÓLIDO (ver nota en `.meta-ads-modal`). */
  background-color: var(--bg) !important;
  background-image: linear-gradient(var(--surface-2), var(--surface-2)) !important;
  box-shadow: var(--shadow-pop) !important;
}
.meta-ads-video-modal-title { font-family: var(--font-display) !important; font-size: 18px !important; font-weight: 500 !important; color: var(--ink) !important; }
.meta-ads-video-modal-player { background: var(--ink) !important; border-radius: var(--radius-card) !important; overflow: hidden; }
.meta-ads-video-modal-hint { color: var(--ink-3) !important; font-size: 13px !important; }

/* ─── TikTok organic section → v2 ─── */
.tiktok-organic-section {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-card-lg) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-1) !important;
}
.tiktok-organic-header { border-bottom: 1px solid var(--line) !important; }
.tiktok-organic-title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
}
.tiktok-organic-subtitle { color: var(--ink-3) !important; font-family: var(--font-sans) !important; }
.tiktok-organic-progress {
  background: var(--accent-soft) !important;
  border: 0 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--radius-card) !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
/* Track: barra de fondo con un shimmer "skeleton" que barre de izq a der
   continuamente — señal de "procesando" independiente del % real. */
.tiktok-organic-progress-bar {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface)) !important;
  border: 0 !important;
  height: 10px !important;
  border-radius: var(--radius-pill) !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.85rem;
}
.tiktok-organic-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent) 22%, transparent) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: tt-skeleton-sweep 1.6s ease-in-out infinite;
}
/* Fill: gradiente del acento + glow suave + un "shine" que barre la parte
   llena (refuerza el movimiento sobre el progreso real). */
.tiktok-organic-progress-fill {
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in oklab, var(--accent) 65%, white)
  ) !important;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 45%, transparent) !important;
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tiktok-organic-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  transform: translateX(-100%);
  animation: tt-fill-shine 1.5s ease-in-out infinite;
}
.tiktok-organic-progress-percent {
  font-family: var(--font-display) !important;
  color: var(--accent) !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
/* Punto pulsante junto al texto de fase → "vivo / procesando". */
.tiktok-organic-progress-phase {
  color: var(--ink-2) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tiktok-organic-progress-phase::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: tt-dot-pulse 1.2s ease-in-out infinite;
}
.tiktok-organic-progress-hint {
  color: var(--ink-4) !important;
}
@keyframes tt-skeleton-sweep {
  to {
    transform: translateX(100%);
  }
}
@keyframes tt-fill-shine {
  0% {
    transform: translateX(-100%);
  }
  55%,
  100% {
    transform: translateX(260%);
  }
}
@keyframes tt-dot-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent);
  }
  50% {
    opacity: 0.45;
    box-shadow: 0 0 0 5px transparent;
  }
}
/* Respeta a quien prefiere menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .tiktok-organic-progress-bar::after,
  .tiktok-organic-progress-fill::after,
  .tiktok-organic-progress-phase::before {
    animation: none;
  }
}
.tiktok-organic-error {
  background: var(--rust-soft) !important;
  border: 0 !important;
  border-radius: var(--radius-card) !important;
  padding: 18px 20px !important;
  color: var(--rust) !important;
}
.tiktok-organic-error strong { color: var(--rust) !important; font-family: var(--font-display) !important; }
.tiktok-organic-error p { color: var(--ink-2) !important; }
.tiktok-organic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 1px solid var(--line-2) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  cursor: pointer;
  transition: all 200ms var(--ease-spring) !important;
  text-decoration: none !important;
}
.tiktok-organic-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.tiktok-organic-btn--primary {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow) !important;
}
.tiktok-organic-btn--primary:hover { transform: translateY(-2px) scale(1.02); color: var(--accent-ink) !important; }
.tiktok-organic-captured { color: var(--ink-3) !important; font-family: var(--font-mono) !important; }
.tiktok-organic-stale-badge {
  background: var(--amber-soft) !important;
  color: var(--amber) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  border: 0 !important;
  padding: 2px 8px !important;
}
.tiktok-organic-kpis { border-radius: var(--radius-card) !important; overflow: hidden !important; border: 1px solid var(--line) !important; }
.tiktok-organic-kpi {
  background: var(--surface) !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  padding: 16px 18px !important;
}
.tiktok-organic-kpi:last-child { border-right: 0 !important; }
.tiktok-organic-kpi--match { background: var(--accent-soft) !important; }
.tiktok-organic-kpi--likes { background: var(--coral-soft) !important; }
.tiktok-organic-kpi-value { font-family: var(--font-display) !important; color: var(--ink) !important; font-size: 28px !important; font-weight: 500 !important; }
.tiktok-organic-kpi--match .tiktok-organic-kpi-value { color: var(--accent) !important; }
.tiktok-organic-kpi--likes .tiktok-organic-kpi-value { color: var(--coral) !important; }
.tiktok-organic-kpi-label { font-family: var(--font-mono) !important; color: var(--ink-4) !important; letter-spacing: 0.1em !important; font-size: 10.5px !important; }
.tiktok-organic-bucket {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
}
.tiktok-organic-bucket summary {
  background: var(--surface-2) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-2) !important;
  border: 0 !important;
}
.tiktok-organic-bucket-hint { color: var(--ink-4) !important; }
.tiktok-organic-empty { color: var(--ink-3) !important; font-style: italic !important; }
.tiktok-organic-cta-hint { color: var(--ink-4) !important; }

/* ══════════════════════════════════════════════════════════════════════
   V2 OVERRIDES — Pulidos finales de consistencia visual.
   Detalle de producto: títulos de sección más grandes para destacar
   visualmente. Componentes legacy (details/summary, table-wraps) que
   tenían bordes cuadrados se redondean para alinear con el resto del
   design system v2.
   ══════════════════════════════════════════════════════════════════════ */

/* Section titles del detalle de producto: más grandes para que destaquen.
   Antes 22px → ahora 28px (entre los hero titles a 36-56px y los card-labels
   chicos). Aplica a "Disponibilidad en otros proveedores", "Anuncios activos
   en Meta", "Creativos en TikTok", "Histórico de stock y precio", etc. */
.tracker-section-title {
  font-size: 28px !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

/* details/summary blocks (Queries usadas, Resultados por sinónimo,
   Snapshots history) — redondeo para que casen con los cards alrededor. */
.competition-queries,
.tp-history-table-wrap,
.tiktok-organic-bucket,
.meta-ads-bucket {
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

/* Summary clickeable: hover state suave + padding consistente */
.competition-queries summary,
.tp-history-table-wrap summary,
.tiktok-organic-bucket summary,
.meta-ads-bucket summary,
.meta-ads-bucket-title {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--ink-3) !important;
  padding: 12px 18px !important;
  text-transform: uppercase !important;
  transition: background 200ms var(--ease) !important;
  border-radius: var(--radius-card) !important;
}
.competition-queries summary:hover,
.tp-history-table-wrap summary:hover,
.tiktok-organic-bucket summary:hover,
.meta-ads-bucket summary:hover,
.meta-ads-bucket-title:hover {
  background: var(--surface-2) !important;
}
.competition-queries[open] summary,
.tp-history-table-wrap[open] summary,
.tiktok-organic-bucket[open] summary,
.meta-ads-bucket[open] .meta-ads-bucket-title {
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Chips de queries usadas en el details — redondeados con shape pill */
.competition-queries-list li {
  border: 0 !important;
  background: var(--surface-2) !important;
  border-radius: var(--radius-pill) !important;
  overflow: hidden !important;
}
.competition-queries-link {
  border-radius: var(--radius-pill) !important;
  padding: 5px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
}

/* Tabla de snapshots dentro del details — redondea bottom corners */
.tp-history-table {
  border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  overflow: hidden !important;
}

/* Progress bars sin border-radius (qa-track-bar y otras) → redondeo pill */
.qa-track-bar,
.competition-progress-bar,
.meta-ads-progress-bar,
.tiktok-organic-progress-bar,
.meta-ads-bulk-banner-bar,
.scan-progress-bar {
  border-radius: var(--radius-pill) !important;
  overflow: hidden !important;
}
.qa-track-fill,
.competition-progress-fill,
.meta-ads-progress-fill,
.tiktok-organic-progress-fill,
.meta-ads-bulk-banner-fill {
  border-radius: var(--radius-pill) !important;
}

/* Detail flag (banner de "motivo de descarte" del legacy detail.html) */
.detail-flag {
  border-radius: var(--radius-card) !important;
}

/* Toolbar de "Ventana" del detalle del producto (tracker-toolbar es legacy
   pero sigue activa). Redondeo + look v2 consistente con .tt-card. */
.tracker-toolbar {
  border-radius: var(--radius-card) !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  padding: 14px 22px !important;
  box-shadow: var(--shadow-1) !important;
}
.tracker-toolbar-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: var(--ink-4) !important;
}
.tracker-window {
  background: var(--surface-2) !important;
  border: 0 !important;
  border-radius: var(--radius-btn) !important;
  padding: 4px !important;
  gap: 2px !important;
  display: inline-flex !important;
}
.tracker-window-link {
  border: 0 !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--ink-3) !important;
  transition: all 200ms var(--ease) !important;
}
.tracker-window-link:hover {
  background: transparent !important;
  color: var(--ink) !important;
}
.tracker-window-link--active,
.tracker-window-link--active:hover {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: var(--shadow-1) !important;
}

/* Cards de gráficos del detalle del producto (Disminución de stock,
   Ventas teóricas por período, etc) — legacy .tp-chart-wrap. */
.tp-chart-wrap {
  border-radius: var(--radius-card-lg) !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  padding: 22px !important;
  box-shadow: var(--shadow-1) !important;
}
.tp-chart-title {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  text-transform: none !important;
  margin: 0 0 6px !important;
}
.tp-chart-meta {
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  color: var(--ink-3) !important;
  margin: 0 0 14px !important;
}

/* Detail runs table (sinónimos en detail.html legacy) — round container */
.detail-runs-table {
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
}

/* tp-history-table th first/last — round top corners cuando details está open */
.tp-history-table-wrap[open] .tp-history-table thead th:first-child {
  border-top-left-radius: 0 !important;
}
.tp-history-table-wrap[open] .tp-history-table thead th:last-child {
  border-top-right-radius: 0 !important;
}

/* Status cards mutuamente exclusivos (ej. decision cards de /scoring,
   filtros de status del Radar).

   Cambio 2026-05-10: active state "flood" semántico — el bg del card
   activo usa el color de la pill `.tt-dec` adentro. Cada variant expone
   `--card-active-bg` como CSS var (via `:has()`); el selector active la
   consume. Si no hay variant matching, fallback al `--accent` (Todos).
   `--accent-ink` mantiene contraste correcto en ambos themes (blanco en
   light, navy oscuro en dark) sobre cualquier color semántico saturado. */
.tt-card:has(.tt-dec-entrar)  { --card-active-bg: var(--lime); }
.tt-card:has(.tt-dec-pronto)  { --card-active-bg: var(--amber); }
.tt-card:has(.tt-dec-quemado) { --card-active-bg: var(--rust); }
.tt-card:has(.tt-dec-pass)    { --card-active-bg: var(--ink-3); }
.tt-card:has(.tt-dec-test)    { --card-active-bg: var(--amber); }
.tt-card:has(.tt-dec-gan)     { --card-active-bg: var(--lime); }
.tt-card:has(.tt-dec-sat)     { --card-active-bg: var(--rust); }
.tt-card:has(.tt-dec-todos)   { --card-active-bg: var(--accent); }
/* Para CANDIDATOS y PENDIENTES del Radar usamos colores distintos del
   `--accent` cyan/navy — sino el flood se confunde visualmente con el
   card TODOS (que sí usa accent). Hues bien separados para diferenciación
   inmediata: cand=violet-blue (270), pend=magenta-pink (340). */
.tt-card:has(.tt-dec-cand)    { --card-active-bg: oklch(0.55 0.20 270); }
.tt-card:has(.tt-dec-pend)    { --card-active-bg: oklch(0.58 0.20 340); }
[data-theme="dark"] .tt-card:has(.tt-dec-cand) { --card-active-bg: oklch(0.75 0.18 270); }
[data-theme="dark"] .tt-card:has(.tt-dec-pend) { --card-active-bg: oklch(0.74 0.20 340); }

/* Layout consistente de las status/decision cards: badge arriba, número grande
   SIEMPRE en su propia línea. `.stat-num` es `display:inline-flex` (inline-level),
   así que sin esto el número fluía al lado del badge y se BAJABA a la línea de
   abajo solo cuando era ancho (4 cifras en cards angostas col-2) → cada card
   alineaba el número a distinta altura. flex-column lo apila parejo. */
[data-status-card-group] .tt-card[data-status-card] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

[data-status-card-group] .tt-card[data-status-card][data-active="true"] {
  background: var(--card-active-bg, var(--accent));
  border-color: var(--card-active-bg, var(--accent));
  color: var(--accent-ink);
  /* Sin box-shadow — el flood del bg ya da feedback fuerte de "activo".
     Antes con shadow-glow el blur se desbordaba 36px y atravesaba el
     skeleton overlay durante transiciones entre secciones. */
}
/* El número grande del card y la pill .tt-dec adentro: heredamos accent-ink
   para mantener legibilidad sobre el bg flood. La pill pierde su bg propio
   para no competir — queda solo el LED + label en accent-ink. */
[data-status-card-group] .tt-card[data-status-card][data-active="true"] .stat-num,
[data-status-card-group] .tt-card[data-status-card][data-active="true"] .tt-card-label {
  color: var(--accent-ink);
}
[data-status-card-group] .tt-card[data-status-card][data-active="true"] .tt-dec {
  background: color-mix(in oklab, var(--accent-ink) 18%, transparent);
  color: var(--accent-ink);
}
[data-status-card-group] .tt-card[data-status-card][data-active="true"] .tt-dec .led {
  background: var(--accent-ink);
  box-shadow: none;
}

/* ─────────────────── Calculadora de rentabilidad (/calculadora) ─────────────────── */
.pricing-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.pricing-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pricing-input-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pricing-input-hint {
  font-size: 10px;
  color: var(--ink-5);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}
.pricing-input-wrap {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-btn);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pricing-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pricing-input-wrap input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.pricing-input-prefix,
.pricing-input-suffix {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  padding: 0 12px;
}
.pricing-input-prefix { border-right: 1px solid var(--line); }
.pricing-input-suffix { border-left: 1px solid var(--line); }

.pricing-divider {
  margin: 22px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pricing-divider > span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.pricing-form-actions {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
}
.pricing-saved-status { font-size: 12px; color: var(--ink-3); }
.pricing-saved-badge {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: oklch(0.50 0.16 145);
  background: color-mix(in oklab, var(--lime-soft) 70%, var(--surface) 30%);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* Banner que aparece cuando la calculadora se abre desde un producto del
   tracker — confirma qué pre-cargamos (proveedor + precio competitivo). */
.pricing-seeded-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
.pricing-seeded-banner-icon {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ─── Resultado ─── */
.pricing-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.pricing-kpi {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px 18px;
}
.pricing-kpi--primary {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.pricing-kpi-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.pricing-kpi-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pricing-kpi--primary .pricing-kpi-value {
  font-size: 32px;
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pricing-kpi-foot {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
}

.pricing-breakdown,
.pricing-shopify {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pricing-breakdown-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
}
.pricing-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pricing-breakdown-table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.pricing-breakdown-table .num {
  font-family: var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pricing-breakdown-hint {
  font-size: 11px;
  color: var(--ink-4);
  font-style: italic;
}
.pricing-breakdown-highlight td { background: var(--surface-2); padding-left: 8px; padding-right: 8px; }
.pricing-breakdown-good td { background: color-mix(in oklab, var(--lime-soft) 50%, var(--surface) 50%); }
.pricing-breakdown-warn td { background: color-mix(in oklab, var(--amber-soft) 50%, var(--surface) 50%); }
.pricing-breakdown-bad td { background: color-mix(in oklab, var(--rust-soft) 50%, var(--surface) 50%); }

.pricing-warning {
  margin-top: 14px;
  padding: 10px 14px;
  background: color-mix(in oklab, var(--amber-soft) 60%, var(--surface) 40%);
  border: 1px solid var(--amber);
  border-radius: var(--radius-card);
  font-size: 13px;
  color: var(--ink);
}

/* Responsive: layout 2-col → 1-col en pantallas chicas */
@media (max-width: 960px) {
  .pricing-form-grid { grid-template-columns: 1fr; }
  .pricing-kpis { grid-template-columns: 1fr; }
}

/* ─── Card explicativa al inicio de cada sección (Radar/Tracker/Scoring) ───
   Colapsable con <details>. Diseño suave (accent-soft bg) para no competir
   con el contenido principal. Marker default del <summary> oculto, usamos
   chevron propio que rota cuando [open]. */
.tt-section-intro {
  /* Cambio 2026-05-10: antes era gradient `accent-soft + coral-soft` que
     se sentía multicolor/disonante. Ahora bg sólido `surface-2` con
     tinte accent muy leve en el border — uniforme en light y dark,
     se integra mejor con el resto del sitio. */
  margin-bottom: 22px;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--line-2));
  background: var(--surface-2);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
}
.tt-section-intro-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.tt-section-intro-summary::-webkit-details-marker { display: none; }
.tt-section-intro-summary::marker { display: none; }
.tt-section-intro-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.tt-section-intro-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.tt-section-intro-toggle {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  transition: transform 0.2s var(--ease-out);
}
.tt-section-intro[open] .tt-section-intro-toggle {
  transform: rotate(180deg);
}
/* Mobile: anti-flash mientras el JS quita el [open] de los intros (que el server
   rinde abiertos para desktop). La clase `mobile-intros-collapsed` solo está en
   <html> en viewports mobile y se quita en DOMContentLoaded → colapsamos el cuerpo
   y reseteamos la flecha para no mostrar el contenido expandido por un instante. */
html.mobile-intros-collapsed .tt-section-intro[open] > .tt-section-intro-body {
  display: none;
}
html.mobile-intros-collapsed .tt-section-intro[open] .tt-section-intro-toggle {
  transform: none;
}
.tt-section-intro-body {
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}
.tt-section-intro-body p {
  margin: 0 0 14px;
}
.tt-section-intro-actions {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tt-section-intro-actions li {
  /* Gutter para la flecha en lugar de `display:flex` con la flecha como item
     hermano: el texto + <strong> formaban un flex item ANÓNIMO que no envuelve
     (se desbordaba a max-content y se recortaba en mobile). Como bloque normal
     con padding, el texto fluye y envuelve bien; la flecha vive en el gutter. */
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.tt-section-intro-actions li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 600;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes creative-download-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 0 4px transparent; }
}

/* ─── Modal del video de TikTok (embed oficial) ───
   Mismo patrón que `.meta-ads-video-modal` pero con paleta TikTok
   (cyan/magenta) + proporción vertical 9:16 que es lo típico de TikTok.
   Más angosto que el de Meta porque los videos son verticales. */
.tiktok-organic-video-modal {
  /* Accent global del theme (estandarizado 2026-05-10). Antes era rosa
     TikTok hardcodeado. */
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 1px solid var(--accent);
  /* Panel SÓLIDO (ver `.meta-ads-modal`): `--surface` es glass en dark. */
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface-2), var(--surface-2));
  color: var(--text);
  /* Más angosto — el embed de TikTok es 9:16 (vertical). 420px de ancho
     da una altura cómoda sin exceder viewport. */
  width: min(420px, calc(100vw - 2rem));
  max-width: 420px;
  max-height: calc(100vh - 2rem);
  height: fit-content;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 30px 60px rgba(0, 0, 0, 0.7),
    0 0 30px var(--accent-glow);
}

.tiktok-organic-video-modal::backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(3px);
}

.tiktok-organic-video-modal-content {
  display: flex;
  flex-direction: column;
}

.tiktok-organic-video-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line-2);
}

.tiktok-organic-video-modal-title {
  font-family: var(--font-sans, var(--body));
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tiktok-organic-video-modal-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.3rem;
  transition: color 120ms ease;
}
.tiktok-organic-video-modal-close:hover {
  color: var(--accent);
}

.tiktok-organic-video-modal-player {
  background: #000;
  /* TikTok embed `v2` reserva ~740px de alto natural. Aspect 9:16
     funciona pero deja chico el área util — usamos un alto fijo grande
     capeado a viewport. Reservamos 11rem (no 8rem) para que el header +
     la fila de acciones quepan con aire abajo sin que el `overflow:hidden`
     del modal los pegue/recorte contra el borde inferior. */
  height: min(680px, calc(100vh - 13.5rem));
  display: block;
  position: relative;
}

.tiktok-organic-video-modal-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tiktok-organic-video-modal-actions {
  /* CTA principal a lo ancho arriba + fila secundaria (Ver en TikTok / Cerrar)
     debajo. Antes era una sola fila con wrap → con 3 botones, "Cerrar" se
     bajaba solo y quedaba pegado/recortado contra el borde inferior. */
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem 1.15rem;
  border-top: 1px solid var(--line-2);
}
.tiktok-organic-video-modal-actions .btn-tracker--primary {
  width: 100%;
  justify-content: center;
}
.tiktok-organic-video-modal-actions-sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

/* ─── A5 del roadmap: Generador de copys AIDA ───
   Wrapper visual idéntico a Meta/TikTok/Creativos (card grande con header
   estándar). El contenido cambia según estado: empty/idle/running/ready/error.
   Tabs Hooks/Bodies/CTAs implementadas con `:has()` sobre radios escondidos
   (JS-free). */
.copy-gen-section {
  margin: 2.5rem 0 1.5rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-card-lg);
}
.copy-gen-header {
  margin-bottom: 1.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

/* Empty state (sin Meta cache) */
.copy-gen-empty {
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
}
.copy-gen-empty-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 6px 0;
}
.copy-gen-empty-msg {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

/* Idle state (sin copys, con cache Meta) */
.copy-gen-idle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 4px 4px;
}
.copy-gen-idle-msg {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}

/* Progress state */
.copy-gen-progress {
  padding: 4px 0;
}
.copy-gen-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.copy-gen-progress-phase {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.copy-gen-progress-percent {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.copy-gen-progress-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 8px;
}
.copy-gen-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 400ms ease;
}

/* ─── Indeterminate variant ───
   Cuando el LLM está corriendo (~5-15s) no tenemos progreso real porque el
   API no streamea métricas de avance. Mostramos un bloque accent del 35%
   que se desliza de izq a der en bucle — el patrón estándar de "indeterminate
   progress" del Material y de los browsers nativos. Más honesto que mentir
   con un porcentaje fijo en 60%. */
.copy-gen-progress-bar--indeterminate {
  position: relative;
  overflow: hidden;
}
.copy-gen-progress-fill--indeterminate {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  animation: copy-gen-indeterminate 1.4s ease-in-out infinite;
  /* Sin `transition: width` para que la animación no se interrumpa cuando
     el HTMX re-renderiza la sección durante el polling. */
  transition: none;
}

@keyframes copy-gen-indeterminate {
  0% {
    left: -35%;
    width: 35%;
  }
  50% {
    left: 30%;
    width: 50%;
  }
  100% {
    left: 100%;
    width: 35%;
  }
}
.copy-gen-progress-hint {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
}

/* Error state */
.copy-gen-error {
  padding: 16px;
  border: 1px solid var(--rust);
  border-radius: 8px;
  background: color-mix(in oklab, var(--rust) 8%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.copy-gen-error strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--rust);
}
.copy-gen-error p {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}

/* Ready state — meta resumen + lista de ads completas */
.copy-gen-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: 8px;
}
.copy-gen-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.copy-gen-meta-num {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--accent);
}
.copy-gen-meta-label {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.copy-gen-meta-item--quiet {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 11.5px;
}

/* ─── Análisis: buyer personas + ángulos de venta ───
   Bloque <details> colapsable que muestra el razonamiento de la IA antes
   de los anuncios. Permite al user entender en qué se basaron los copys. */
.copy-gen-analysis {
  margin: 16px 0 18px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
}
.copy-gen-analysis-summary {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.copy-gen-analysis-summary::before {
  content: '▸';
  display: inline-block;
  color: var(--ink-3);
  transition: transform 120ms ease;
}
.copy-gen-analysis[open] .copy-gen-analysis-summary::before {
  transform: rotate(90deg);
}
.copy-gen-analysis-summary::-webkit-details-marker { display: none; }
.copy-gen-analysis-block {
  padding: 0 16px 14px;
}
.copy-gen-analysis-title {
  margin: 8px 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Lista de buyer personas */
.copy-gen-personas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.copy-gen-persona-card {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.copy-gen-persona-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.copy-gen-persona-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  padding: 0 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.copy-gen-persona-name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.copy-gen-persona-profile {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.copy-gen-persona-pains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.copy-gen-persona-pains li {
  padding: 4px 8px 4px 22px;
  position: relative;
  background: color-mix(in oklab, var(--rust) 8%, transparent);
  border-left: 2px solid var(--rust);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
}
.copy-gen-persona-pains li::before {
  content: '!';
  position: absolute;
  left: 8px;
  top: 4px;
  width: 10px;
  height: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rust);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

/* Lista de ángulos de venta */
.copy-gen-angles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.copy-gen-angle-card {
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.copy-gen-angle-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.copy-gen-angle-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  padding: 0 6px;
  background: color-mix(in oklab, var(--amber) 18%, transparent);
  color: var(--amber);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.copy-gen-angle-name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.copy-gen-angle-target {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.copy-gen-angle-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

/* Título de la sección de ads */
.copy-gen-ads-title {
  margin: 14px 0 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

/* Targeting chips dentro de cada ad: "Dirigido a X · Ángulo Y" */
.copy-gen-ad-targeting {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.copy-gen-ad-targeting-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: help;
}
.copy-gen-ad-targeting-chip--persona {
  background: var(--accent-soft);
  color: var(--accent);
}
.copy-gen-ad-targeting-chip--angle {
  background: color-mix(in oklab, var(--amber) 16%, transparent);
  color: var(--amber);
}
.copy-gen-ad-targeting-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.copy-gen-ad-targeting-value {
  font-weight: 600;
}

/* ─── Lista de ads completas ───
   Cada ad es una tarjeta con hook + body + cta apilados, cada parte con su
   mini-etiqueta AIDA. Botón "Copiar anuncio" en el header copia las 3 partes
   concatenadas (formato Meta-pasteable). */
.copy-gen-ads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Lista acordeón de anuncios (Opción B, 2026-06-09): cada fila muestra hook +
   a-quién-apunta + copiar; tocar despliega body + CTA. Escanear-y-expandir. */
.copy-gen-acc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.copy-gen-acc-row {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; transition: border-color .15s;
}
.copy-gen-acc-row:hover,
.copy-gen-acc-row.is-open { border-color: var(--line-2); }
.copy-gen-acc-sum { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; cursor: pointer; }
.copy-gen-acc-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.copy-gen-acc-car { flex-shrink: 0; color: var(--ink-5); margin-top: 2px; transition: transform .2s; }
.copy-gen-acc-row.is-open .copy-gen-acc-car { transform: rotate(90deg); }
.copy-gen-acc-main { flex: 1; min-width: 0; }
.copy-gen-acc-hook { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.32; }
.copy-gen-acc-meta { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; }
.copy-gen-acc-meta .copy-gen-acc-n { font-family: var(--font-mono); font-weight: 600; color: var(--ink-5); }
.copy-gen-acc-meta .sep { margin: 0 5px; opacity: .5; }
.copy-gen-acc-copy {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.copy-gen-acc-copy:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.copy-gen-acc-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.copy-gen-acc-row.is-open .copy-gen-acc-body { max-height: 680px; }
.copy-gen-acc-body-in { padding: 0 14px 15px 40px; }
.copy-gen-acc-body-text { margin: 0 0 9px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.copy-gen-acc-cta { margin: 0; font-size: 14px; font-weight: 600; color: var(--accent); line-height: 1.45; }
@media (max-width: 600px) {
  .copy-gen-acc-body-in { padding-left: 14px; }
}

.copy-gen-ad-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 120ms ease;
}
.copy-gen-ad-card:hover {
  border-color: var(--line-2);
}

.copy-gen-ad-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.copy-gen-ad-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.copy-gen-ad-part {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.copy-gen-ad-part-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.copy-gen-ad-part-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.copy-gen-ad-part-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.copy-gen-ad-part-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-1);
}
/* Hook destacado: un punto más grande + un peso visual extra porque es la
   parte que tiene que detener el scroll. */
.copy-gen-ad-part-text--hook {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
/* CTA destacado: family mono + accent color para que "se vea como CTA". */
.copy-gen-ad-part-text--cta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* Botón "Copiar" — pill chico al margen derecho del item */
.copy-gen-copy-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.copy-gen-copy-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.copy-gen-copy-btn--done {
  background: var(--lime-soft, color-mix(in oklab, var(--lime) 15%, transparent));
  border-color: var(--lime);
  color: var(--lime);
}
/* Variante "Copiar anuncio entero": un punto más prominente que la versión
   por-item (que ya no existe — quedó como base solo para la versión done). */
.copy-gen-copy-btn--full {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  padding: 5px 12px;
  font-size: 11.5px;
}
.copy-gen-copy-btn--full:hover {
  background: var(--accent);
  color: var(--accent-ink, #fff);
  border-color: var(--accent);
}

/* Footer con metadata + acciones (Limpiar / Regenerar) */
.copy-gen-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.copy-gen-footer-time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-right: auto;
}

/* ─── A8: Generador de imágenes para landing ───
   Mismo wrapper visual que A5/A6 (card grande con header estándar). Grid
   responsive 2-3 cols con cards de imagen + meta + descarga individual.
   Tokens reusados de los `.copy-gen-*` para consistencia visual. */
.landing-images-section {
  margin: 2.5rem 0 1.5rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-card-lg);
}
.landing-images-header {
  margin-bottom: 1.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

/* Empty state (sin galería) */
.landing-images-empty {
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
}
.landing-images-empty-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 6px 0;
}
.landing-images-empty-msg {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

/* Idle state */
.landing-images-idle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 4px 4px;
}
.landing-images-idle-msg {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}
.landing-images-idle-cost {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
}
.landing-images-idle-cost strong {
  color: var(--ink-2);
}

/* Progress state */
.landing-images-progress {
  padding: 4px 0;
}
.landing-images-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.landing-images-progress-phase {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.landing-images-progress-phase strong {
  color: var(--accent);
}
.landing-images-progress-percent {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.landing-images-progress-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 8px;
}
.landing-images-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 400ms ease;
}
/* Indeterminate animation (durante briefs/persisting que no tienen progreso real).
   Mismo keyframe que A5 (`copy-gen-indeterminate`) — reusamos. */
.landing-images-progress-bar--indeterminate {
  position: relative;
  overflow: hidden;
}
.landing-images-progress-fill--indeterminate {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  animation: copy-gen-indeterminate 1.4s ease-in-out infinite;
  transition: none;
}
.landing-images-progress-hint {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
}

/* Error state */
.landing-images-error {
  padding: 16px;
  border: 1px solid var(--rust);
  border-radius: 8px;
  background: color-mix(in oklab, var(--rust) 8%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.landing-images-error strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--rust);
}
.landing-images-error p {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}

/* Ready state — meta + grid + footer */
.landing-images-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: 8px;
}
.landing-images-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.landing-images-meta-num {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--accent);
}
.landing-images-meta-label {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Grid de imágenes: responsive 2-3 cols según ancho del container. */
.landing-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.landing-images-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 120ms ease, transform 120ms ease;
}
.landing-images-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.landing-images-card-img-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: block;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
}
.landing-images-card-img-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.landing-images-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}
.landing-images-card-shot {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-images-card-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: background 120ms ease;
}
.landing-images-card-download:hover {
  background: var(--accent);
  color: var(--accent-ink, #fff);
}

/* Card de imagen fallada — placeholder visual con ícono ⚠ */
.landing-images-card--failed {
  background: color-mix(in oklab, var(--rust) 6%, var(--surface-2));
  border-color: color-mix(in oklab, var(--rust) 30%, var(--line));
}
.landing-images-card--failed .landing-images-card-img-trigger,
.landing-images-card-failed-icon {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--rust);
}
.landing-images-card-failed-msg {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--rust);
  font-weight: 600;
  cursor: help;
}

/* Details de fallos */
.landing-images-failed-detail {
  margin: 12px 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: color-mix(in oklab, var(--rust) 4%, transparent);
}
.landing-images-failed-detail summary {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--rust-ink);
  cursor: pointer;
  user-select: none;
}
.landing-images-failed-detail ul {
  margin: 8px 0 0;
  padding-left: 20px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Footer con metadata + acciones */
.landing-images-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.landing-images-footer-time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-right: auto;
}

/* Estado awaiting_hero_confirmation — hero preview + 3 botones de decisión */
.landing-images-confirm {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.landing-images-confirm-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.landing-images-confirm-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-1);
  margin: 0;
}
.landing-images-confirm-msg {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.landing-images-confirm-preview {
  display: flex;
  justify-content: center;
}
.landing-images-confirm-img-trigger {
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: 10px;
  padding: 6px;
  cursor: zoom-in;
  max-width: 320px;
}
.landing-images-confirm-img-trigger img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.landing-images-confirm-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Warning chip cuando la foto del producto no se pudo descargar — la IA
   dibuja el envase desde texto y la fidelidad cae. */
.landing-images-warning {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--rust-soft, rgba(220, 80, 60, 0.12));
  color: var(--rust-ink, var(--ink-1));
  border: 1px solid var(--rust, rgba(220, 80, 60, 0.4));
  font-size: 13px;
  line-height: 1.5;
}

/* ===== Competitor Assets section (Fase 1 del landing builder) ===== */
/* Reusa la mayoría de tokens de .landing-images-*; solo overrides puntuales. */
.competitor-assets-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-1);
}
/* En idle la sección va `hidden` (self-poll, sin assets aún). El `display:flex`
   de arriba pisa el `display:none` por defecto del atributo `[hidden]` (la clase
   gana por specificity) → sin esto, la sección oculta dibuja un recuadro vacío
   con borde/padding bajo "Copys con IA". Misma regla compañera que .qa-modal,
   .qa-sticky, .field-toast, etc. */
.competitor-assets-section[hidden] {
  display: none;
}
.competitor-assets-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.competitor-assets-empty,
.competitor-assets-error,
.competitor-assets-idle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.competitor-assets-empty-title,
.competitor-assets-error strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-1);
}
.competitor-assets-empty-msg,
.competitor-assets-idle-msg,
.competitor-assets-idle-cost {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.competitor-assets-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.competitor-assets-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
}
.competitor-assets-progress-phase {
  color: var(--ink-1);
  flex: 1;
}
.competitor-assets-progress-url {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  color: var(--ink-3);
  font-size: 11.5px;
}
.competitor-assets-progress-percent {
  font-family: var(--font-mono);
  color: var(--ink-2);
  white-space: nowrap;
}
.competitor-assets-progress-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.competitor-assets-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 250ms ease-out;
}
.competitor-assets-progress-bar--indeterminate .competitor-assets-progress-fill--indeterminate {
  width: 40%;
  animation: ca-indeterminate 1.4s ease-in-out infinite;
}
@keyframes ca-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.competitor-assets-progress-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
}

/* Variante banner — para mostrar progress mientras ya hay contenido visible.
   Más chico y horizontal, ocupa menos espacio que el progress full. */
.competitor-assets-progress--banner {
  padding: 10px 14px;
  border: 1px solid var(--accent, #1f4d8a);
  border-radius: 8px;
  background: var(--accent-soft, rgba(80, 100, 200, 0.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.competitor-assets-progress--banner .competitor-assets-progress-head {
  color: var(--accent, #1f4d8a);
  font-weight: 500;
}
.competitor-assets-progress-banner-icon {
  display: inline-block;
  margin-right: 4px;
  animation: bounce-down 1.2s ease-in-out infinite;
}
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.competitor-assets-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.competitor-assets-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.competitor-assets-meta-item--warning .competitor-assets-meta-num {
  color: var(--rust, #c95a3f);
}
.competitor-assets-meta-item--quiet {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3);
  max-width: 300px;
  line-height: 1.4;
  align-self: center;
}
.competitor-assets-meta-num {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-1);
}
.competitor-assets-meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
/* Bloque por tienda — header con nombre + URL + count + "Limpiar tienda",
   y debajo el grid de miniaturas. */
.competitor-assets-landing {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.competitor-assets-landing--blocked {
  background: var(--surface-2);
  opacity: 0.75;
}
.competitor-assets-landing-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.competitor-assets-landing-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.competitor-assets-landing-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-1);
}
.competitor-assets-landing-url {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.competitor-assets-landing-url:hover {
  color: var(--accent);
  text-decoration: underline;
}
.competitor-assets-landing-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.competitor-assets-landing-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  text-transform: lowercase;
}
.competitor-assets-landing-status {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--rust-soft, rgba(200, 90, 70, 0.10));
  color: var(--rust-ink, var(--rust, #c33));
}
.competitor-assets-landing-status--timeout,
.competitor-assets-landing-status--no_assets {
  background: var(--amber-soft, rgba(220, 170, 60, 0.10));
  color: var(--amber-ink, #b88a20);
}

/* Sub-bloques por sección heurística dentro de cada landing.
   Cada sección lleva su propio header con label en español + count.
   El left-border en color distintivo da jerarquía visual sin gritos. */
.competitor-assets-section-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--line-2);
  border-radius: 0 6px 6px 0;
  background: var(--surface-2);
}
.competitor-assets-section-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.competitor-assets-section-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink-1);
  text-transform: uppercase;
}
.competitor-assets-section-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* Colores semánticos por sección — accent del border-left + tinte del label. */
.competitor-assets-section-block--hero {
  border-left-color: var(--accent, #1f4d8a);
}
.competitor-assets-section-block--hero .competitor-assets-section-label {
  color: var(--accent, #1f4d8a);
}
.competitor-assets-section-block--ugc_review {
  border-left-color: var(--lime, #5a8);
}
.competitor-assets-section-block--ugc_review .competitor-assets-section-label {
  color: var(--lime-ink, var(--lime, #4a7));
}
.competitor-assets-section-block--gif_demo {
  border-left-color: var(--amber, #d4a017);
}
.competitor-assets-section-block--gif_demo .competitor-assets-section-label {
  color: var(--amber-ink, #b88a20);
}
.competitor-assets-section-block--badge_cta {
  border-left-color: var(--rust, #c95a3f);
}
.competitor-assets-section-block--badge_cta .competitor-assets-section-label {
  color: var(--rust-ink, var(--rust, #c95a3f));
}
.competitor-assets-section-block--gallery {
  border-left-color: var(--ink-3, #888);
}
.competitor-assets-section-block--other {
  border-left-color: var(--line-2, #ccc);
}
.competitor-assets-section-block--other .competitor-assets-section-label {
  color: var(--ink-3);
}

.competitor-assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.competitor-assets-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.competitor-assets-card-img-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
}
.competitor-assets-card-img-trigger img,
.competitor-assets-card-img-trigger video {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.competitor-assets-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 10.5px;
  color: var(--ink-3);
}
.competitor-assets-card-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  background: var(--accent-soft, rgba(80, 100, 200, 0.12));
  color: var(--accent, var(--ink-1));
}
.competitor-assets-card-badge--anim {
  background: var(--lime-soft, rgba(120, 180, 80, 0.15));
  color: var(--lime-ink, var(--ink-1));
}
.competitor-assets-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.competitor-assets-error-hint {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 8px 0 0;
}

/* ────────────────────────────────────────────────────────────────────
   Constructor de landing (Fase 2 B1, 2026-05-12)
   Reutiliza tokens existentes (--surface, --border, --accent, --lime, etc).
   Estructura: header + dropdown nicho + status banner + grid de cards.
   ──────────────────────────────────────────────────────────────────── */

.landing-builder-section {
  margin: 2.5rem 0 1.5rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-card-lg);
}

.landing-builder-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.landing-builder-header-titles {
  flex: 1 1 60%;
  min-width: 280px;
}

/* Dropdown de nicho */
.landing-builder-niche-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.landing-builder-niche-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.landing-builder-niche-select {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}
.landing-builder-niche-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.landing-builder-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  font-weight: 500;
}
.landing-builder-tag--auto {
  background: var(--accent-soft);
  color: var(--accent-ink, var(--ink-2));
}
.landing-builder-tag--manual {
  background: var(--amber-soft, var(--surface-2, var(--surface)));
  color: var(--amber-ink, var(--ink-2));
}

/* Status banner (progreso global + bulk btn + badge listo) */
.landing-builder-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 12px 16px;
  margin-bottom: 1.2rem;
  background: var(--surface-2, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
}
.landing-builder-status-progress {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.landing-builder-status-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.landing-builder-status-label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-3);
}
.landing-builder-status-badge {
  font-family: var(--font-display);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.landing-builder-status-badge--ready {
  background: var(--lime-soft);
  color: var(--lime-ink, #1a5a1a);
  border: 1px solid var(--lime);
}
.landing-builder-bulk-btn {
  margin-left: auto;
}

/* Warning sin galería */
.landing-builder-warning {
  padding: 12px 16px;
  margin-bottom: 1rem;
  background: var(--amber-soft, var(--surface));
  border: 1px solid var(--amber, var(--border));
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--amber-ink, var(--ink-2));
  line-height: 1.5;
}

/* Grid de cards de secciones */
.landing-builder-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.landing-builder-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  transition: border-color 0.15s ease;
}
.landing-builder-card:hover {
  border-color: var(--accent);
}

/* Border-left semántico por estado */
.landing-builder-card--empty {
  border-left: 3px solid var(--border);
}
.landing-builder-card--ia {
  border-left: 3px solid var(--accent);
}
.landing-builder-card--competitor {
  border-left: 3px solid var(--lime);
}
.landing-builder-card--mixed {
  border-left: 3px solid var(--amber, var(--accent-2));
}
.landing-builder-card--generating {
  border-left: 3px solid var(--accent-2);
  background: var(--accent-soft);
}
.landing-builder-card--error {
  border-left: 3px solid var(--rust, #c0392b);
  background: var(--rust-soft, var(--surface));
}

.landing-builder-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.landing-builder-card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  flex: 1 1 auto;
}
.landing-builder-card-required {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--amber-soft, var(--surface));
  color: var(--amber-ink, var(--ink-2));
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.landing-builder-card-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.landing-builder-card-status--empty {
  background: var(--surface-2, var(--surface));
  color: var(--ink-3);
}
.landing-builder-card-status--ia {
  background: var(--accent-soft);
  color: var(--accent-ink, var(--ink-2));
}
.landing-builder-card-status--competitor {
  background: var(--lime-soft);
  color: var(--lime-ink, #1a5a1a);
}
.landing-builder-card-status--mixed {
  background: var(--amber-soft, var(--surface));
  color: var(--amber-ink, var(--ink-2));
}

/* Body de la card: preview de imagen IA + chip de competencia */
.landing-builder-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.landing-builder-card-ia-preview {
  position: relative;
}
.landing-builder-card-img-trigger {
  display: block;
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.landing-builder-card-img-trigger img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.landing-builder-card-pill {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.landing-builder-card-pill--ia {
  background: var(--accent);
  color: var(--accent-ink, #fff);
}
.landing-builder-card-pill--comp {
  position: static;
  display: inline-block;
  background: var(--lime-soft);
  color: var(--lime-ink, #1a5a1a);
  border: 1px solid var(--lime);
}
.landing-builder-card-empty-hint {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
  padding: 20px 8px;
  text-align: center;
  font-style: italic;
}
.landing-builder-card-no-ia-hint {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}

/* Spinner durante generación */
.landing-builder-card-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.landing-builder-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lb-spin 0.8s linear infinite;
}
@keyframes lb-spin {
  to { transform: rotate(360deg); }
}

.landing-builder-card-error {
  padding: 10px;
  background: var(--rust-soft, var(--surface));
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--rust-ink, var(--ink-2));
  line-height: 1.45;
}

/* Botones de acción */
.landing-builder-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.landing-builder-card-actions form {
  display: contents;
}
.landing-builder-card-btn {
  font-size: 12px;
  padding: 6px 10px;
}
.landing-builder-card-btn--danger {
  color: var(--rust, #c0392b);
}
.landing-builder-card-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Modal picker de assets de competencia ─── */

.landing-picker-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.landing-picker-modal-content {
  background: var(--surface);
  border-radius: 12px;
  max-width: 1080px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.landing-picker-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}
.landing-picker-modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--ink);
}
.landing-picker-modal-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.45;
}
.landing-picker-modal-close {
  background: none;
  border: 1px solid var(--border);
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-2);
}
.landing-picker-modal-close:hover {
  background: var(--surface-2, var(--bg));
}
.landing-picker-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.landing-picker-modal-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-3);
  font-size: 14px;
}
.landing-picker-modal-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.landing-picker-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--border);
}

.landing-picker-landing-block {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.landing-picker-landing-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-2, var(--bg));
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.landing-picker-landing-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.landing-picker-landing-count {
  font-size: 12px;
  color: var(--ink-3);
}
.landing-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}
.landing-picker-card {
  position: relative;
  display: block;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.landing-picker-card:hover {
  transform: translateY(-2px);
}
.landing-picker-card input[type=checkbox] {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.landing-picker-card--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.landing-picker-card--recommended {
  border-color: var(--lime, #5cb85c);
}
.landing-picker-card--recommended.landing-picker-card--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--lime, #5cb85c);
}
.landing-picker-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-2, var(--bg));
}
.landing-picker-card-thumb img,
.landing-picker-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.landing-picker-card-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 10px;
  padding: 3px 7px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: 4px;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.landing-picker-card-recommended-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  padding: 3px 7px;
  background: var(--lime-soft, rgba(92, 184, 92, 0.2));
  color: var(--lime-ink, #1a5a1a);
  border: 1px solid var(--lime, #5cb85c);
  border-radius: 4px;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.landing-picker-modal-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.landing-picker-modal-controls-left {
  display: flex;
  gap: 8px;
}
.landing-picker-modal-hint {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  max-width: 60%;
  text-align: right;
  line-height: 1.4;
}

/* ─── Bloque de imagen de referencia custom (Constructor) ─── */
.landing-builder-reference {
  position: relative;
  margin-bottom: 1.2rem;
  border-radius: 10px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

/* Estado vacío: dropzone grande centrada con borde dashed.
   El form vive oculto dentro (sin afectar el layout). */
.landing-builder-reference--empty {
  background: var(--surface-2, var(--bg));
  border: 1px dashed var(--border);
  padding: 22px 24px 28px;
}
.landing-builder-reference--empty .landing-builder-reference-form {
  display: none;  /* el input está oculto y se dispara con .click() del CTA */
}
.landing-builder-reference-label-top {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.landing-builder-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px 16px 4px;
}
.landing-builder-dropzone-icon {
  color: var(--ink-3);
  margin-bottom: 4px;
}
.landing-builder-reference--dragover .landing-builder-dropzone-icon {
  color: var(--accent);
  transform: translateY(-3px);
}
.landing-builder-dropzone-icon svg {
  display: block;
  transition: transform 0.18s ease, color 0.18s ease;
}
.landing-builder-dropzone-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  margin: 0;
  font-weight: 600;
}
.landing-builder-dropzone-or {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.landing-builder-dropzone-cta {
  font-size: 14px;
  padding: 10px 24px;
  cursor: pointer;
}
.landing-builder-dropzone-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin: 14px 0 0;
  max-width: 480px;
  line-height: 1.45;
}

/* Estado con imagen: layout horizontal compacto */
.landing-builder-reference--filled {
  background: var(--surface-2, var(--bg));
  border: 1px solid var(--border);
  padding: 14px 16px;
}
.landing-builder-reference-filled-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.landing-builder-reference-info {
  flex: 1 1 320px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.landing-builder-reference-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.landing-builder-reference-hint {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0;
}
.landing-builder-reference-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.landing-builder-reference-preview {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.landing-builder-reference-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Estado dragover: zona toda iluminada con accent + overlay con texto.
   Aplica a ambos estados (empty y filled). */
.landing-builder-reference--dragover {
  border-color: var(--accent) !important;
  border-style: solid !important;
  background: color-mix(in oklab, var(--accent) 8%, var(--surface-2, var(--bg)));
}
.landing-builder-reference-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  border-radius: 10px;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  z-index: 2;
}
.landing-builder-reference--dragover .landing-builder-reference-overlay {
  display: flex;
}

/* Flash brevísimo al aceptar un paste exitoso (sin overlay completo, solo
   un pulso de borde + sutil tinte). */
.landing-builder-reference--accepted {
  border-color: var(--lime, #5cb85c) !important;
  background: color-mix(in oklab, var(--lime, #5cb85c) 8%, var(--surface-2, var(--bg)));
}

/* `<kbd>` para el shortcut de paste — chip compacto que matchea la tipografía
   monoespaciada del proyecto. */
.landing-builder-dropzone-or kbd,
.landing-builder-reference-hint kbd {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--surface, var(--bg));
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 0 2px;
  color: var(--ink-2);
}



/* ════════════════════════════════════════════════════════════════════════
   LANDING PREVIEW v2 (Fase 2 B1+, 2026-05-12)
   Replica el formato Shopify del user — paleta dark + amarillo + Arial.
   Fondo #0C0C15 · acento #FAEB20 / #FFD700 · CTA amarillo · precio rojo.
   Todo dentro de un frame mobile-first (~460px) que simula el celular.
   ════════════════════════════════════════════════════════════════════════ */

.lp-body {
  background: #1a1d24;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  color: #fff;
}

/* ─── Toolbar superior (control del developer, NO de la landing real) ─── */
.lp-toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #14171d;
  border-bottom: 1px solid #2a2e36;
  padding: 10px 16px;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.lp-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.lp-toolbar-back {
  font-size: 13px;
  color: #ccc;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid #2a2e36;
  border-radius: 6px;
  white-space: nowrap;
}
.lp-toolbar-back:hover {
  border-color: #FAEB20;
  color: #fff;
}
.lp-toolbar-info {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 13px;
  color: #aaa;
}
.lp-toolbar-info strong { color: #fff; }
.lp-toolbar-niche, .lp-toolbar-counter { color: #888; font-size: 12px; }
.lp-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lp-toolbar-actions form { margin: 0; }
.lp-toolbar-indicator {
  display: none;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(250,235,32,0.15);
  color: #fff;
  border: 1px solid #FAEB20;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
}
.lp-toolbar-indicator.htmx-indicator { display: none; }
.htmx-request .lp-toolbar-indicator,
.lp-toolbar-indicator.htmx-request { display: block; }

/* ─── Frame mobile-first ─── */
.lp-frame {
  max-width: 460px;
  margin: 0 auto;
  background: #0C0C15;
  min-height: 80vh;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif !important;
  box-shadow: 0 0 60px rgba(0,0,0,0.45);
}

.lp-empty {
  text-align: center;
  padding: 80px 24px;
  color: #aaa;
}
.lp-empty h2 { color: #fff; margin-bottom: 16px; font-size: 20px; }
.lp-empty p { font-size: 14px; line-height: 1.55; margin-bottom: 24px; }

.lp-copies-banner {
  background: rgba(250,235,32,0.08);
  color: #FAEB20;
  border-bottom: 1px solid rgba(250,235,32,0.3);
  padding: 12px 18px;
  font-size: 12.5px;
  line-height: 1.45;
}
.lp-copies-banner strong { display: block; margin-bottom: 3px; color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   BANNER (header con logo + strip "Pago contra entrega + Envío GRATIS")
   ════════════════════════════════════════════════════════════════════ */
.lp-banner-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 18px;
  background: #0C0C15;
}
.lp-banner-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-banner-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
}
.lp-banner-logo-name {
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fff;
  font-size: 13px;
}
.lp-banner-strip {
  background: #FAEB20;
  color: #0C0C15;
  text-align: center;
  font-weight: 800;
  padding: 10px 16px;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

/* ════════════════════════════════════════════════════════════════════
   HERO IMAGE / CARRUSEL (full width)
   El carrusel muestra los 4 shots del grupo "Hero" del wizard
   (hero, lifestyle_a, lifestyle_b, product_angles). Si solo hay 1
   slide, se rinde sin flechas ni dots. JS minimal en el shell del
   preview maneja prev/next + clicks en dots + swipe touch.
   ════════════════════════════════════════════════════════════════════ */
.lp-hero-image {
  background: #0C0C15;
}
.lp-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

.lp-hero-carousel {
  position: relative;
  background: #0C0C15;
  overflow: hidden;
}
.lp-hero-carousel-track {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;  /* fallback cuando las imágenes están cargando */
}
.lp-hero-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 280ms ease-out;
  pointer-events: none;
}
.lp-hero-carousel-slide[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
  position: relative;  /* el primer slide define la altura del track */
}
.lp-hero-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}
.lp-hero-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 22px;
  font-family: Arial, sans-serif;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 160ms ease;
}
.lp-hero-carousel-arrow:hover,
.lp-hero-carousel-arrow:focus-visible {
  background: rgba(0, 0, 0, 0.7);
  outline: none;
}
.lp-hero-carousel-arrow--prev { left: 8px; }
.lp-hero-carousel-arrow--next { right: 8px; }
.lp-hero-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.lp-hero-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: background 160ms ease, transform 160ms ease;
}
.lp-hero-carousel-dot[data-active="true"] {
  background: #FAEB20;
  transform: scale(1.2);
}
.lp-hero-carousel-dot:hover,
.lp-hero-carousel-dot:focus-visible {
  background: rgba(250, 235, 32, 0.7);
  outline: none;
}

/* ════════════════════════════════════════════════════════════════════
   TITULO Y SUBTITULO (CSS exacto del user — clases hero-*)
   ════════════════════════════════════════════════════════════════════ */
.hero-text-box {
  background: #0C0C15;
  text-align: center;
  padding: 10px 18px 12px;
}
.hero-title {
  margin: 0 0 10px;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 900 !important;
  letter-spacing: -0.4px;
  color: #FFFFFF;
  text-transform: none;
}
.hero-white { color: #FFFFFF; }
.hero-yellow {
  color: #FAEB20;
  font-weight: 900 !important;
}
.hero-subtitle {
  margin: 0 auto 14px;
  max-width: 640px;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
  color: #D9D9D9;
}
.hero-sub-highlight {
  color: #FFFFFF;
  font-weight: 800;
}
.hero-mini-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-top: 2px;
}
.hero-mini-benefits span {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  padding: 8px 10px;
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.06);
}
@media screen and (max-width: 480px) {
  .hero-text-box { padding: 8px 16px 10px; }
  .hero-title { font-size: 24px; line-height: 1.12; margin-bottom: 6px; }
  .hero-subtitle { font-size: 15px; line-height: 1.4; margin-bottom: 10px; }
  .hero-mini-benefits { gap: 8px; }
  .hero-mini-benefits span { font-size: 12px; padding: 7px 9px; }
}

/* ════════════════════════════════════════════════════════════════════
   URGENCIA CALL (hero-title-box del user)
   ════════════════════════════════════════════════════════════════════ */
.hero-title-box {
  display: block;
  width: calc(100% - 24px);
  margin: 12px 8px;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 12px 18px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 10px rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.05);
}
.hero-title-box h1 {
  margin: 0;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 900 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(255,255,255,0.2);
}
/* Variant 2-líneas con iconos al inicio (urgencia call). Cada línea es
   independiente con un emoji + texto centrados como bloque. */
.hero-title-box--stacked {
  padding: 14px 18px;
}
.hero-title-box--stacked .urgency-line {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 900;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-shadow: 0 0 4px rgba(255,255,255,0.18);
}
.hero-title-box--stacked .urgency-line + .urgency-line {
  margin-top: 6px;
}
.hero-title-box--stacked .urgency-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255,180,40,0.35));
}
@media screen and (max-width: 480px) {
  .hero-title-box { padding: 10px 16px; }
  .hero-title-box h1 { font-size: 15px; }
  .hero-title-box--stacked { padding: 12px 14px; }
  .hero-title-box--stacked .urgency-line { font-size: 15px; gap: 8px; }
  .hero-title-box--stacked .urgency-icon { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   PRECIO (price-box del user)
   ════════════════════════════════════════════════════════════════════ */
.price-box {
  text-align: center;
  margin: 2px auto;
  padding: 12px 16px 14px;
}
.price-before {
  color: #bbb;
  font-size: 15px;
  margin-bottom: 2px;
  letter-spacing: 0.04em;
}
.price-before span { text-decoration: line-through; }
.price-now-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}
.price-now {
  color: #FF0000;
  text-shadow: 0 0 8px rgba(255,0,0,0.4);
  font-size: 38px;
  font-weight: 900;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
}
.price-discount-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FF3030;
  background: transparent;
  border: 2px solid #FF3030;
  font-size: 15px;
  font-weight: 800;
  font-family: Arial, Helvetica, sans-serif;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 0 8px rgba(255,48,48,0.25);
}
.price-save {
  display: inline-block;
  background: #FAEB20;
  color: #0C0C15;
  font-size: 17px;
  font-weight: 900;
  font-family: Arial, Helvetica, sans-serif;
  padding: 10px 22px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 0 14px rgba(250,235,32,0.45), 0 4px 12px rgba(0,0,0,0.3);
}
@media screen and (max-width: 480px) {
  .price-now { font-size: 32px; }
  .price-now-row { gap: 10px; }
  .price-discount-pill { font-size: 13px; padding: 5px 10px; border-width: 1.5px; }
  .price-save { font-size: 15px; padding: 9px 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   TIMER (urgency-bar del user con countdown)
   ════════════════════════════════════════════════════════════════════ */
#urgency-bar {
  background: linear-gradient(90deg, #c0392b, #e74c3c);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  margin: 8px 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 8px;
  animation: lp-pulse-bg 2s ease-in-out infinite;
}
#countdown-timer {
  font-size: 22px;
  font-weight: 800;
  color: #ffe066;
  margin: 0 4px;
  font-variant-numeric: tabular-nums;
}
#urgency-sub { font-size: 13px; opacity: 0.9; }
@keyframes lp-pulse-bg {
  0%,100% { opacity: 1; }
  50% { opacity: 0.88; }
}
#countdown-timer.urgent { animation: lp-blink 0.7s step-start infinite; }
@keyframes lp-blink { 50% { opacity: 0; } }

/* ════════════════════════════════════════════════════════════════════
   PERSONAS VIENDO (viewers-bar del user)
   ════════════════════════════════════════════════════════════════════ */
#viewers-bar {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 9px 14px;
  margin: 6px 12px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 1.4;
}
#viewers-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #2ecc71;
  border-radius: 50%;
  margin-right: 4px;
  position: relative;
  top: -1px;
  animation: lp-pulse-dot 1.4s ease-in-out infinite;
}
#viewers-count { color: #ffe066; }
@keyframes lp-pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(46,204,113,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(46,204,113,0); }
}

/* ════════════════════════════════════════════════════════════════════
   STAR RATINGS (mock — Judge.me-like)
   ════════════════════════════════════════════════════════════════════ */
.lp-stars {
  text-align: center;
  padding: 14px 16px 4px;
  color: #fff;
}
.lp-stars-row {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: 4px;
}
.lp-star {
  color: #FFD700;
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 0 4px rgba(255,215,0,0.25);
}
.lp-stars-text {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════
   CTA principal (botón amarillo grande — Releasit-like)
   ════════════════════════════════════════════════════════════════════ */
.lp-cta-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 12px 16px;
  padding: 16px 18px;
  background: #FAEB20;
  color: #0C0C15;
  border: 0;
  border-radius: 999px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(250,235,32,0.15), 0 6px 18px rgba(250,235,32,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lp-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 5px rgba(250,235,32,0.2), 0 10px 24px rgba(250,235,32,0.35);
}
.lp-cta-btn--final { margin-top: 18px; }

/* ════════════════════════════════════════════════════════════════════
   BANNER SEGURIDAD (micro-trust-box del user)
   ════════════════════════════════════════════════════════════════════ */
.micro-trust-box {
  width: calc(100% - 24px);
  max-width: 420px;
  margin: 12px auto 0;
  padding: 12px 14px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
}
.micro-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFF;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: left;
}
.micro-trust-item:last-child { margin-bottom: 0; }
.micro-trust-icon {
  width: 22px;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}
.micro-trust-text { flex: 1; min-width: 0; }
@media screen and (max-width: 480px) {
  .micro-trust-item { font-size: 13.5px; gap: 8px; margin-bottom: 6px; }
  .micro-trust-icon { width: 18px; min-width: 18px; font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════════
   DOLOR (pain-section del user) — 4 dolores con emoji + final phrase
   ════════════════════════════════════════════════════════════════════ */
.pain-section {
  background: #0C0C15;
  padding: 24px 20px;
  text-align: center;
}
.pain-title {
  color: #FAEB20;
  font-size: 24px;
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.2;
}
.pain-sub {
  color: #FFFFFF;
  font-size: 16px;
  margin: 0 auto 24px;
  max-width: 600px;
  line-height: 1.5;
}
.pain-points {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
.pain-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.pain-item .icon {
  font-size: 20px;
  flex-shrink: 0;
}
.pain-item p {
  color: #D9D9D9;
  font-size: 15px;
  margin: 0;
  line-height: 1.5;
}
.pain-final {
  margin: 20px 0 0;
  color: #FFFFFF;
  font-size: 16px;
}
.pain-final span {
  color: #FAEB20;
  font-weight: 800;
}
@media (max-width: 480px) {
  .pain-title { font-size: 22px; }
  .pain-sub { font-size: 15px; }
  .pain-item p { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════════
   IMG DOLOR (pain-image-wrapper del user)
   ════════════════════════════════════════════════════════════════════ */
.pain-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0C0C15;
}
.pain-image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Imagen del solution_reveal — va DESPUÉS del dolor y ANTES del texto
   de transición. Mismo background del template Shopify del user. */
.lp-solution-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0C0C15;
}
.lp-solution-image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Bloque de sellos de seguridad al final del flow narrativo (imagen
   del shot `badge_cta` del wizard). El CTA principal con el botón
   "PÍDELO AHORA" ya vive arriba en su lugar tradicional — este bloque
   refuerza la confianza al cierre antes de FAQs. */
.lp-badge-cta-block {
  width: 100%;
  background: #0C0C15;
  padding: 8px 0;
}
.lp-badge-cta-block img {
  width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   OVERLAY DE PROGRESO DEL PREVIEW
   Cubre todo el viewport mientras corre un request de regenerar/borrar
   copys. Bloquea interacción con la landing. Backdrop semi-transparente
   + blur sutil + card centrado con spinner + texto contextual.
   Usa tokens globales para que respete el tema light/dark de la app.
   ═══════════════════════════════════════════════════════════════════ */
.lp-loading-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--bg) 70%, #000 30%);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: lp-loading-fade-in 200ms ease-out;
  padding: 24px;
}
.lp-loading-overlay[hidden] { display: none; }
body.lp-loading-active { overflow: hidden; }

.lp-loading-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 40px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.lp-loading-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid color-mix(in oklab, var(--accent) 20%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lp-loading-spin 0.8s linear infinite;
  margin: 0 auto 18px;
}

.lp-loading-title {
  font-family: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  margin: 0 0 6px;
}

.lp-loading-subtitle {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}

@keyframes lp-loading-spin {
  to { transform: rotate(360deg); }
}
@keyframes lp-loading-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pain-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12,12,21,0.2);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   TRANSICION SOLUCION (transition-proof del user)
   ════════════════════════════════════════════════════════════════════ */
.transition-proof {
  background: #0C0C15;
  text-align: center;
  padding: 25px 20px 6px;
  color: #FFF;
}
.transition-proof .pre-text {
  font-size: 16px;
  opacity: 0.7;
  margin: 0 0 12px;
  line-height: 1.5;
}
.transition-proof .main-text {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0;
}
.transition-proof span { color: #F4E04D; }
@media screen and (max-width: 480px) {
  .transition-proof .main-text { font-size: 24px; }
  .transition-proof .pre-text { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════════
   BLOQUE LONG-FORM (imitación de los banners Photoshop del Combo X8)
   Layout: imagen IA + headline + body + bullets con check amarillo.
   Glow dorado sutil para acercarse al look de tus banners hechos a mano.
   ════════════════════════════════════════════════════════════════════ */
.lp-longform {
  position: relative;
  background: #0C0C15;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding: 24px 20px 28px;
  margin: 8px 0;
  text-align: center;
  box-shadow: inset 0 0 80px rgba(255,255,255,0.04);
}
.lp-longform-image {
  margin: 0 -8px 18px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5),
              0 0 0 1px rgba(255,255,255,0.15);
}
.lp-longform-image img {
  width: 100%;
  height: auto;
  display: block;
}
.lp-longform-title {
  font-family: Arial, Helvetica, sans-serif;
  color: #FFD700;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.18;
  margin: 0 0 10px;
  text-transform: none;
  text-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.lp-longform-body {
  color: #ddd;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.lp-longform-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.lp-longform-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  font-size: 14px;
  color: #fff;
  line-height: 1.45;
}
.lp-longform-check {
  color: #FAEB20;
  font-weight: 900;
  font-size: 16px;
  flex-shrink: 0;
}

/* GIFs intermedios entre bloques long-form */
.lp-gif-intermedio {
  margin: 14px 16px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.lp-gif-intermedio img,
.lp-gif-intermedio video {
  width: 100%;
  height: auto;
  display: block;
}

/* Botón regenerar texto (overlay esquina del bloque, solo en hover) */
.lp-section-regen {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 5;
}
.lp-longform:hover .lp-section-regen,
.lp-faqs:hover .lp-section-regen { opacity: 1; }
.lp-section-regen .btn-tracker {
  background: rgba(0,0,0,0.7) !important;
  color: #FAEB20 !important;
  border-color: rgba(250,235,32,0.4) !important;
  font-size: 11px !important;
  padding: 4px 9px !important;
}
.lp-section-regen .btn-tracker:hover {
  background: rgba(0,0,0,0.85) !important;
  border-color: #FAEB20 !important;
}

/* ════════════════════════════════════════════════════════════════════
   FAQs (preguntas frecuentes) — estilo del user
   ════════════════════════════════════════════════════════════════════ */
.lp-faqs {
  position: relative;
  padding: 28px 20px 24px;
  background: #0C0C15;
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}
.lp-faqs-title {
  color: #FFD700;
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 20px;
  text-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.lp-faq-item {
  text-align: left;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 12px 16px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.lp-faq-item[open] {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
}
.lp-faq-q {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.4;
  list-style: none;
}
.lp-faq-q::before {
  content: "+";
  display: inline-block;
  color: #FAEB20;
  font-weight: 900;
  margin-right: 8px;
  font-size: 18px;
  width: 14px;
  text-align: center;
}
.lp-faq-item[open] .lp-faq-q::before { content: "−"; }
.lp-faq-a {
  color: #D9D9D9;
  font-size: 14px;
  line-height: 1.55;
  margin: 8px 0 0;
  padding-left: 22px;
}

/* ════════════════════════════════════════════════════════════════════
   COMPRA SEGURA footer
   ════════════════════════════════════════════════════════════════════ */
.lp-secure-buy {
  background: #0C0C15;
  text-align: center;
  padding: 28px 20px 22px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.lp-secure-buy-title {
  color: #FFD700;
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 4px;
  text-shadow: 0 0 8px rgba(255,215,0,0.3);
  letter-spacing: 0.02em;
}
.lp-secure-buy-sub {
  color: #aaa;
  font-size: 12px;
  letter-spacing: 0.1em;
  margin: 0 0 18px;
}
.lp-secure-buy-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  margin: 0 auto;
}
.lp-secure-buy-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 14px;
}
.lp-secure-buy-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.lp-secure-buy-item div {
  display: flex;
  flex-direction: column;
}
.lp-secure-buy-item strong {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.lp-secure-buy-item span {
  color: #aaa;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════════
   COMENTARIOS DE LOS CLIENTES (Judge.me mock)
   ════════════════════════════════════════════════════════════════════ */
.lp-reviews {
  background: #0C0C15;
  padding: 28px 20px;
  color: #fff;
}
.lp-reviews-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
}
.lp-reviews-rating {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.lp-reviews-stars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.lp-reviews-rating-num {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.lp-reviews-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 20px;
}
.lp-reviews-bar {
  display: grid;
  grid-template-columns: 70px 1fr 30px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #aaa;
}
.lp-reviews-bar > span:first-child { color: #FFD700; font-size: 11px; }
.lp-reviews-bar-fill {
  height: 8px;
  background: #FFD700;
  border-radius: 4px;
  min-width: 2px;
}
.lp-reviews-bar:nth-child(n+3) .lp-reviews-bar-fill { background: #666; }
.lp-reviews-blurb {
  text-align: center;
  color: #ccc;
  font-size: 14px;
  margin: 12px 0 18px;
}
.lp-reviews-photos-title {
  text-align: center;
  font-size: 15px;
  margin: 18px 0 12px;
  color: #fff;
  font-weight: 700;
}
.lp-reviews-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.lp-reviews-photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER de la tienda (info legal + contacto)
   ════════════════════════════════════════════════════════════════════ */
.lp-store-footer {
  background: #0C0C15;
  padding: 28px 22px;
  color: #aaa;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.lp-store-footer h3 {
  color: #fff;
  font-size: 16px;
  margin: 18px 0 10px;
  font-weight: 700;
}
.lp-store-footer h3:first-child { margin-top: 0; }
.lp-store-footer ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.lp-store-footer ul li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lp-store-footer p {
  margin: 6px 0;
  line-height: 1.5;
}
.lp-store-footer p strong { color: #fff; }

.lp-preview-meta {
  background: #14171d;
  color: #666;
  font-size: 11px;
  text-align: center;
  padding: 14px 18px;
  font-family: var(--font-sans, system-ui, sans-serif);
}


/* ═══════════════════════════════════════════════════════════════════════
   Landing preview — Vista DESKTOP (B7 responsive 2026-05-21)
   Activada por el toggle del toolbar via `body[data-view-mode="desktop"]`.
   Mobile (default sin atributo) NO se ve afectado por este bloque.

   Notas:
   - Frame crece a 1100px max + tipografía escalada + bloques 2-col en
     DOLOR/SOLUCIÓN/LONGFORM (imagen + texto lado a lado, zig-zag).
   - Las imágenes IA (rasterizadas con texto integrado) NO se reflujan —
     solo crecen proporcionalmente con `object-fit: cover`.
   - Paleta y fuentes locked (#0C0C15 + #FAEB20 + Arial !important).
   - Las animaciones JS (timer, viewers, carrusel) funcionan igual.
   - Selectores escritos pensando en Shopify (Fase 3): reemplazar el
     selector raíz `body[data-view-mode="desktop"]` por `@media (min-width:
     768px)` y queda 1:1 portable a sections Liquid.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Toggle buttons en el toolbar (siempre visibles, no parte de la landing) */
.lp-toolbar-views {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #0f1217;
  border: 1px solid #2a2f37;
  border-radius: 10px;
  padding: 2px;
  margin: 0 8px;
}
.lp-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #888;
  border: 0;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.lp-view-btn svg { display: block; }
.lp-view-btn:hover { color: #ccc; }
.lp-view-btn--active {
  background: #FAEB20;
  color: #0C0C15;
}
.lp-view-btn--active:hover { color: #0C0C15; }

/* Smooth transition cuando el user cambia entre mobile↔desktop */
.lp-frame {
  transition: max-width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── FRAME — desktop usa el viewport completo con background uniforme.
   En mobile el `.lp-frame` es una "caja" de 460px centrada con sombra; en
   desktop la eliminamos para que la landing se vea como una landing real
   full-viewport. El background `#0C0C15` se aplica al `.lp-body` para que
   cubra todo el ancho horizontal sin importar el max-width interno. */
body.lp-body[data-view-mode="desktop"] {
  background: #0C0C15;
}
body[data-view-mode="desktop"] .lp-frame {
  max-width: 100%;
  box-shadow: none;
}

/* ── Unificación de widths internos de bloques desktop.
   Variable común para que todos los bloques compartan el mismo eje vertical.
   Si quieres cambiar el ancho de contenido, cambia esta variable; el resto se
   ajusta automáticamente. */
body[data-view-mode="desktop"] .lp-frame {
  --lp-content-max: 1280px;
  --lp-content-pad: 56px;
}
body[data-view-mode="desktop"] .hero-text-box,
body[data-view-mode="desktop"] .hero-title-box--stacked,
body[data-view-mode="desktop"] .micro-trust-box,
body[data-view-mode="desktop"] .lp-section-pair--problem,
body[data-view-mode="desktop"] .lp-section-pair--solution,
body[data-view-mode="desktop"] .lp-longform,
body[data-view-mode="desktop"] .lp-badge-cta-block,
body[data-view-mode="desktop"] .lp-faqs,
body[data-view-mode="desktop"] .lp-reviews,
body[data-view-mode="desktop"] .lp-store-footer {
  max-width: var(--lp-content-max);
  margin-inline: auto;
  padding-inline: var(--lp-content-pad);
  box-sizing: border-box;
}

/* ── BANNER (logo + strip) — strip mantiene cobertura full-width del frame */
body[data-view-mode="desktop"] .lp-banner-header {
  padding: 18px 48px;
}
body[data-view-mode="desktop"] .lp-banner-logo-name {
  font-size: 22px;
}
body[data-view-mode="desktop"] .lp-banner-logo-mark {
  font-size: 28px;
}
body[data-view-mode="desktop"] .lp-banner-strip {
  font-size: 14px;
  padding: 10px 48px;
  letter-spacing: 0.04em;
}

/* ── HERO SPLIT — carrusel izq + info de valor der (grid 2-col en desktop).
   El wrapper `.lp-hero-split` envuelve el carrusel + la columna derecha con
   los bloques de valor (título/urgencia/precio/timer/personas/stars/CTA).
   En mobile no tiene CSS específico → block normal con children apilados
   (idéntico al flow original). En desktop se convierte en grid 2-col. */
body[data-view-mode="desktop"] .lp-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: var(--lp-content-max);
  margin-inline: auto;
  padding-inline: var(--lp-content-pad);
  padding-block: 32px 48px;
  align-items: start;
  box-sizing: border-box;
}
body[data-view-mode="desktop"] .lp-hero-split-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0; /* permite que los hijos no overflowen la celda del grid */
}

/* Carrusel: dentro del split pierde el centrado de 720px (ocupa la columna
   izquierda completa). Sticky para que se mantenga visible mientras el
   user scrollea la columna derecha (patrón típico de product pages). */
body[data-view-mode="desktop"] .lp-hero-split .lp-hero-carousel {
  max-width: 100%;
  margin: 0;
  position: sticky;
  top: 24px;
  align-self: start;
}
body[data-view-mode="desktop"] .lp-hero-carousel-arrow {
  width: 44px;
  height: 44px;
  font-size: 22px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body[data-view-mode="desktop"] .lp-hero-carousel-arrow:hover {
  background: rgba(0,0,0,0.85);
}

/* ───────────────────────────────────────────────────────────────────────
   HERO SPLIT — overrides de la columna derecha en desktop.
   Layout estilo Shopify product-page: todo alineado a la izquierda,
   spacing controlado, bloques compactos en lugar de cards centradas.
   ─────────────────────────────────────────────────────────────────────── */

/* Override de max-widths individuales de los bloques internos */
body[data-view-mode="desktop"] .lp-hero-split-right .hero-text-box,
body[data-view-mode="desktop"] .lp-hero-split-right .hero-title-box--stacked,
body[data-view-mode="desktop"] .lp-hero-split-right .price-box,
body[data-view-mode="desktop"] .lp-hero-split-right #urgency-bar,
body[data-view-mode="desktop"] .lp-hero-split-right #viewers-bar,
body[data-view-mode="desktop"] .lp-hero-split-right .lp-cta-btn,
body[data-view-mode="desktop"] .lp-hero-split-right .lp-cta-btn--final {
  max-width: 100%;
  margin: 0;
  margin-inline: 0;
}

/* Layout general: contenido centrado dentro de la columna, spacing balanceado */
body[data-view-mode="desktop"] .lp-hero-split-right {
  gap: 18px;
  align-items: center;
  text-align: center;
}

/* TÍTULO + SUBTÍTULO + MINI BENEFITS — centrados en la columna */
body[data-view-mode="desktop"] .lp-hero-split-right .hero-text-box {
  padding: 0;
  text-align: center;
  width: 100%;
}
body[data-view-mode="desktop"] .lp-hero-split-right .hero-title {
  text-align: center;
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 12px 0;
}
body[data-view-mode="desktop"] .lp-hero-split-right .hero-subtitle {
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 14px 0;
}
body[data-view-mode="desktop"] .lp-hero-split-right .hero-mini-benefits {
  justify-content: center;
  gap: 8px;
  margin-top: 0;
}

/* URGENCIA — 2 pills compactas centradas. Si caben en row, van lado a lado;
   si el texto es largo, hacen flex-wrap a 2 filas pero con tamaño pill normal
   (no full-width estiradas). Padding compacto para que no ocupen tanto vertical. */
body[data-view-mode="desktop"] .lp-hero-split-right .hero-title-box--stacked {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  width: 100%;
}
body[data-view-mode="desktop"] .lp-hero-split-right .urgency-line {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  text-shadow: none;
  white-space: nowrap;
  line-height: 1.4;
}
body[data-view-mode="desktop"] .lp-hero-split-right .urgency-icon {
  font-size: 13px;
  filter: none;
}

/* PRECIO — bloque centrado. HOY $XX.XXX en una sola línea (no wrap) con la
   pill -40% pegada al lado. Tamaño del precio bajado para que TODO el row
   quepa cómodo en el ancho de la columna sin desbordar. */
body[data-view-mode="desktop"] .lp-hero-split-right .price-box {
  text-align: center;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
body[data-view-mode="desktop"] .lp-hero-split-right .price-before {
  margin: 0;
  font-size: 14px;
  color: #aaa;
}
body[data-view-mode="desktop"] .lp-hero-split-right .price-now-row {
  justify-content: center;
  margin: 0;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
}
body[data-view-mode="desktop"] .lp-hero-split-right .price-now {
  font-size: 34px;
  line-height: 1;
  white-space: nowrap;
}
body[data-view-mode="desktop"] .lp-hero-split-right .price-discount-pill {
  font-size: 13px;
  padding: 5px 10px;
  flex-shrink: 0;
}
body[data-view-mode="desktop"] .lp-hero-split-right .price-save {
  font-size: 14px;
  padding: 7px 16px;
}

/* TIMER — barra slim centrada */
body[data-view-mode="desktop"] .lp-hero-split-right #urgency-bar {
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
body[data-view-mode="desktop"] .lp-hero-split-right #countdown-timer {
  font-size: 17px;
}

/* VIEWERS — pill sutil centrada */
body[data-view-mode="desktop"] .lp-hero-split-right #viewers-bar {
  text-align: center;
  padding: 8px 14px;
  font-size: 13px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* STARS — centradas */
body[data-view-mode="desktop"] .lp-hero-split-right .lp-stars {
  align-items: center;
  text-align: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
body[data-view-mode="desktop"] .lp-hero-split-right .lp-stars-row {
  justify-content: center;
  font-size: 20px;
}
body[data-view-mode="desktop"] .lp-hero-split-right .lp-stars-text {
  text-align: center;
  font-size: 13px;
}

/* CTA principal — full width, font reasonable, padding generoso */
body[data-view-mode="desktop"] .lp-hero-split-right .lp-cta-btn {
  font-size: 18px;
  padding: 16px 24px;
  margin-top: 4px;
  white-space: normal;
  letter-spacing: 0.03em;
  width: 100%;
}

/* ── HERO TEXT BOX — title + subtitle + mini-benefits escalan en desktop.
   `max-width` y `margin-inline: auto` ya vienen del bloque unificador
   arriba; acá solo el padding vertical específico. */
body[data-view-mode="desktop"] .hero-text-box {
  padding-block: 48px 32px;
}
body[data-view-mode="desktop"] .hero-title {
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
body[data-view-mode="desktop"] .hero-subtitle {
  font-size: 20px;
  line-height: 1.45;
  margin-top: 16px;
}
body[data-view-mode="desktop"] .hero-mini-benefits {
  gap: 14px;
  margin-top: 24px;
}
body[data-view-mode="desktop"] .hero-mini-benefits > * {
  font-size: 14px;
  padding: 8px 16px;
}

/* ── URGENCIA (2 líneas con emojis 🔥/⚠️) — escala tipográfica */
body[data-view-mode="desktop"] .hero-title-box--stacked {
  padding-block: 32px;
}
body[data-view-mode="desktop"] .urgency-line {
  font-size: 26px;
  line-height: 1.25;
}

/* ── PRECIO — caja crece + números aumentan jerarquía */
body[data-view-mode="desktop"] .price-box {
  padding: 36px 48px;
  max-width: 720px;
  margin: 24px auto;
  gap: 18px;
}
body[data-view-mode="desktop"] .price-box .price-old {
  font-size: 18px;
}
body[data-view-mode="desktop"] .price-box .price-now {
  font-size: 56px;
}
body[data-view-mode="desktop"] .price-box .price-save {
  font-size: 18px;
}
body[data-view-mode="desktop"] .price-discount-pill {
  font-size: 20px;
  padding: 8px 16px;
}

/* ── TIMER + PERSONAS — bars wider + emoji más grande */
body[data-view-mode="desktop"] #urgency-bar,
body[data-view-mode="desktop"] #viewers-bar {
  font-size: 15px;
  padding: 12px 24px;
  max-width: 720px;
  margin-inline: auto;
}
body[data-view-mode="desktop"] #countdown-timer {
  font-size: 19px;
  letter-spacing: 0.05em;
}

/* ── STAR RATINGS + CTA principal */
body[data-view-mode="desktop"] .lp-stars {
  font-size: 22px;
  margin-top: 24px;
}
body[data-view-mode="desktop"] .lp-stars-text {
  font-size: 14px;
}
body[data-view-mode="desktop"] .lp-cta-btn,
body[data-view-mode="desktop"] .lp-cta-btn--final {
  font-size: 22px;
  padding: 20px 36px;
  max-width: 520px;
  margin: 24px auto;
  letter-spacing: 0.04em;
}

/* ── MICRO TRUST — stack vertical mobile → row 3-col desktop, centrado.
   El mobile original NO tiene `display: flex` (los items son blocks
   apilados); en desktop activamos flex con row + center para que las 3
   ventajas queden en línea horizontal centradas en la caja, con textos
   más grandes y respiración. */
body[data-view-mode="desktop"] .micro-trust-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 48px;
  margin-block: 32px;
  padding-block: 28px;
  max-width: var(--lp-content-max);
  width: auto;
}
body[data-view-mode="desktop"] .micro-trust-item {
  justify-content: center;
  margin-bottom: 0;
  font-size: 18px;
  gap: 12px;
  flex: 0 0 auto;
}
body[data-view-mode="desktop"] .micro-trust-icon {
  font-size: 24px;
  width: 28px;
  min-width: 28px;
}
body[data-view-mode="desktop"] .micro-trust-text {
  flex: 0 0 auto; /* no se estire dentro del item */
}
body[data-view-mode="desktop"] .micro-trust-item {
  font-size: 16px;
}
body[data-view-mode="desktop"] .micro-trust-icon {
  font-size: 22px;
}

/* ═══ BLOQUES 2-COL ALTERNANTES ═══════════════════════════════════════
   Estos wrappers viven en el HTML (mobile-first los ignora — sin display
   se comportan como block normal con children apilados). En desktop el
   toggle activa `display: grid` para layout lado-a-lado.
   ───────────────────────────────────────────────────────────────────── */

/* DOLOR — imagen izq + texto der */
body[data-view-mode="desktop"] .lp-section-pair--problem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-block: 72px;
}
body[data-view-mode="desktop"] .lp-section-pair--problem .pain-image-wrapper {
  order: -1; /* imagen se mueve al inicio (izq) */
  margin: 0;
}
body[data-view-mode="desktop"] .lp-section-pair--problem .pain-image-wrapper img {
  border-radius: 12px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
body[data-view-mode="desktop"] .lp-section-pair--problem .pain-section {
  padding: 0;
}
body[data-view-mode="desktop"] .pain-title {
  font-size: 32px;
  line-height: 1.15;
}
body[data-view-mode="desktop"] .pain-sub {
  font-size: 17px;
  line-height: 1.55;
  margin-top: 16px;
}
body[data-view-mode="desktop"] .pain-points {
  margin-top: 24px;
  gap: 14px;
}
body[data-view-mode="desktop"] .pain-item p {
  font-size: 16px;
  line-height: 1.45;
}
body[data-view-mode="desktop"] .pain-item .icon {
  font-size: 22px;
}
body[data-view-mode="desktop"] .pain-final {
  font-size: 17px;
  line-height: 1.55;
  margin-top: 24px;
}

/* Si por algún motivo el pair queda con un solo child (sin imagen), no apliques grid */
body[data-view-mode="desktop"] .lp-section-pair:has(> :only-child) {
  display: block;
}

/* SOLUCIÓN — texto izq + imagen der (invertido respecto a DOLOR, zig-zag) */
body[data-view-mode="desktop"] .lp-section-pair--solution {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-block: 72px;
}
body[data-view-mode="desktop"] .lp-section-pair--solution .transition-proof {
  padding: 0;
}
body[data-view-mode="desktop"] .lp-section-pair--solution .lp-solution-image-wrapper {
  margin: 0;
}
body[data-view-mode="desktop"] .lp-section-pair--solution .lp-solution-image-wrapper img {
  border-radius: 12px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
body[data-view-mode="desktop"] .transition-proof .pre-text {
  font-size: 18px;
  line-height: 1.5;
}
body[data-view-mode="desktop"] .transition-proof .main-text {
  font-size: 34px;
  line-height: 1.15;
  margin-top: 12px;
}

/* LONGFORM — zigzag (impar: img izq, par: img der).
   Estructura HTML: cada `.lp-longform` tiene `.lp-longform-image` (opcional) +
   `.lp-longform-content` (siempre, agrupa title/body/bullets). El grid es
   simple imagen + content — sin truco de `grid-row: span 99` (frágil).
   Si NO hay imagen, el grid no se aplica (`:has()`) y el contenido fluye
   full-width. */
body[data-view-mode="desktop"] .lp-longform {
  margin-block: 72px;
}
body[data-view-mode="desktop"] .lp-longform:has(.lp-longform-image) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
body[data-view-mode="desktop"] .lp-longform-image {
  grid-column: 1;
  margin: 0;
}
body[data-view-mode="desktop"] .lp-longform-image img {
  border-radius: 12px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
body[data-view-mode="desktop"] .lp-longform-content {
  grid-column: 2;
  margin: 0;
  /* En mobile el wrapper no afecta layout — solo es columna en desktop. */
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Todo el contenido textual centrado para balance visual con la imagen. */
  text-align: center;
  align-items: center;
}
body[data-view-mode="desktop"] .lp-longform-content > * {
  margin: 0;
  width: 100%;
}
body[data-view-mode="desktop"] .lp-longform-content .lp-longform-title,
body[data-view-mode="desktop"] .lp-longform-content .lp-longform-body {
  text-align: center;
}
/* Bullets: cada card centra su contenido (check + texto) horizontalmente */
body[data-view-mode="desktop"] .lp-longform-content .lp-longform-bullets {
  align-items: center;
}
body[data-view-mode="desktop"] .lp-longform-content .lp-longform-bullet {
  justify-content: center;
  text-align: left; /* texto del bullet sigue left para legibilidad, solo
                       el item se centra en la card */
}
/* Even: invertir orden (imagen a la derecha) */
body[data-view-mode="desktop"] .lp-longform--even .lp-longform-image {
  grid-column: 2;
}
body[data-view-mode="desktop"] .lp-longform--even .lp-longform-content {
  grid-column: 1;
  grid-row: 1;
}
body[data-view-mode="desktop"] .lp-longform-title {
  font-size: 28px;
  line-height: 1.2;
}
body[data-view-mode="desktop"] .lp-longform-body {
  font-size: 17px;
  line-height: 1.6;
  margin-top: 12px;
}
body[data-view-mode="desktop"] .lp-longform-bullets {
  margin-top: 20px;
  gap: 12px;
}
body[data-view-mode="desktop"] .lp-longform-bullet {
  font-size: 16px;
  line-height: 1.5;
}
body[data-view-mode="desktop"] .lp-longform-check {
  font-size: 18px;
}

/* ── SELLOS SEGURIDAD (imagen rasterizada 4 shields) — wider */
body[data-view-mode="desktop"] .lp-badge-cta-block {
  margin-block: 48px;
}
body[data-view-mode="desktop"] .lp-badge-cta-block img {
  border-radius: 12px;
}

/* ── FAQs — más anchas, padding más generoso */
body[data-view-mode="desktop"] .lp-faqs {
  margin-block: 64px;
}
body[data-view-mode="desktop"] .lp-faqs-title {
  font-size: 32px;
}
body[data-view-mode="desktop"] .lp-faq-item {
  padding: 18px 24px;
  font-size: 16px;
  /* Cada FAQ se ve mejor más angosta — el bloque contenedor `.lp-faqs`
     hereda el ancho común (1040px) para alinear el título, pero los items
     individuales quedan compactos y centrados para no romper el ritmo de
     lectura con líneas muy largas. */
  max-width: 720px;
  margin-inline: auto;
}
body[data-view-mode="desktop"] .lp-faq-q {
  font-size: 16.5px;
}
body[data-view-mode="desktop"] .lp-faq-a {
  font-size: 15px;
  line-height: 1.6;
}

/* ── REVIEWS — grid 4-col en desktop vs 2-col mobile */
body[data-view-mode="desktop"] .lp-reviews {
  margin-block: 64px;
  padding-block: 32px;
}
body[data-view-mode="desktop"] .lp-reviews-title {
  font-size: 28px;
}
body[data-view-mode="desktop"] .lp-reviews-rating-num {
  font-size: 64px;
}
body[data-view-mode="desktop"] .lp-reviews-stars {
  font-size: 22px;
}
body[data-view-mode="desktop"] .lp-reviews-photos {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
body[data-view-mode="desktop"] .lp-reviews-photos img {
  border-radius: 10px;
}

/* ── FOOTER — stack mobile → 3-col grid desktop */
body[data-view-mode="desktop"] .lp-store-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  padding-block: 48px;
}
body[data-view-mode="desktop"] .lp-store-footer h3 {
  margin-top: 0;
}
body[data-view-mode="desktop"] .lp-store-footer p,
body[data-view-mode="desktop"] .lp-store-footer ul li {
  font-size: 13px;
}

/* ── Responsive del propio toolbar en pantallas chicas (independiente del toggle).
   Cuando el viewport es <600px, los botones de toggle se comprimen para no
   saturar el toolbar (que ya tiene back link, info, actions). */
@media (max-width: 600px) {
  .lp-toolbar-views {
    margin: 4px 0;
    padding: 1px;
  }
  .lp-view-btn span { display: none; }  /* solo iconos en móviles chicos */
  .lp-view-btn { padding: 5px 8px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Wizard Landing Builder — sección "Construir" del sidebar (B3 2026-05-15)
   Reusa tokens globales (--accent, --surface, --ink-*, --line-*, etc).
   Naming: .builder-* para todas las clases del wizard.
   ═══════════════════════════════════════════════════════════════════════ */

.builder-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
}

/* ── Barra slim de progreso — vive DENTRO del header del paso como una
   tercera fila integrada (debajo del eyebrow + meta). Flujo natural,
   se desplaza con el scroll junto al header. */
.builder-progress-bar {
  height: 4px;
  background: color-mix(in oklab, var(--line) 60%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.builder-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(.2, .8, .2, 1);
}
.builder-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%);
  animation: builder-sweep 2s linear infinite;
}

/* ── Header del paso — flujo natural. Estructura en 2 filas verticales:
   fila 1 con eyebrow + meta (lado a lado), fila 2 con la barra de progreso. */
.builder-topbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
}

/* Fila 1 del header: eyebrow izq + meta del paso der. */
.builder-topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.builder-topbar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.builder-topbar-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.builder-led {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: builder-led-pulse 1.5s ease-in-out infinite;
}

@keyframes builder-led-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.builder-progress-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  flex-shrink: 0;
}
.builder-progress-step  { color: var(--ink-2); font-weight: 500; }
.builder-progress-sep   { opacity: 0.4; }
.builder-progress-label { color: var(--ink-3); }

@keyframes builder-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Stage central (donde van los steps) ── */
.builder-stage {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: builder-step-in 0.55s cubic-bezier(.2, .8, .2, 1);
  /* min-height removido (2026-05-19): causaba quirks de layout en step 5
     con mucho contenido. Los steps cortos (Intro, Producto) ya tienen su
     altura natural suficiente. */
}
@keyframes builder-step-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ── Footer con botones contextuales ── */
.builder-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  /* Background sólido (2026-05-19) — antes era translúcido con
     backdrop-filter blur. El backdrop-filter creaba un composited
     layer que en step 5 (mucho contenido scrolleable) causaba bugs
     de clipping/render durante el scroll en algunos browsers. El
     sticky se mantiene; solo cambia el bg a opaco. */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-1);
  position: sticky;
  bottom: 12px;
  z-index: 25;
}
.builder-footer-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  flex: 1;
  min-width: 0;
}
.builder-footer-actions {
  display: inline-flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .builder-topbar-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .builder-footer  { flex-direction: column-reverse; align-items: stretch; }
  .builder-footer-actions { width: 100%; justify-content: space-between; }
}

/* ── Tipografía compartida entre steps ── */
.builder-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.builder-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 64px);
  /* line-height: 1.05 — 0.98 era muy ajustado y clippeaba el slant italic
     del <em> en líneas que terminan en itálica. 1.05 da aire al descender. */
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0 0 18px;
  color: var(--ink);
  /* Permite que el slant italic del <em> sobresalga si una palabra cae al
     borde derecho del contenedor padre. */
  overflow: visible;
}
.builder-h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--text) 30%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fix universal del trap `background-clip:text` con itálicas (memoria
     `project_css_traps.md`): inline-block + padding-right absorbe el
     bleeding del slant que el clip recorta a la caja del glyph. Sin esto,
     la última letra del <em> se ve cortada en el lado derecho. */
  display: inline-block;
  padding-right: 0.08em;
}
.builder-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink);
}
.builder-lede {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 56ch;
  margin: 0 0 18px;
}

/* ── Step 1 — Intro ── */
.builder-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
}
@media (max-width: 920px) {
  .builder-intro { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}

.builder-feats {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.builder-feat {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  animation: builder-feat-rise 0.6s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes builder-feat-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.builder-feat-ix {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-radius: 10px;
  padding: 8px 0;
  text-align: center;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.builder-feat h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--ink);
}
.builder-feat p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}

.builder-intro-art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.builder-intro-art svg {
  width: 100%;
  max-width: 400px;
  height: auto;
}
.builder-intro-orbit {
  transform-origin: 200px 200px;
}
.builder-intro-orbit--slow { animation: builder-spin 50s linear infinite; }
.builder-intro-orbit--fast { animation: builder-spin 30s linear infinite reverse; }
@keyframes builder-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.builder-intro-card {
  animation: builder-floaty 5s ease-in-out infinite;
}
.builder-intro-card--b { animation-delay: -2.5s; }
.builder-intro-card--c { animation-delay: -1.5s; }
@keyframes builder-floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .builder-intro-orbit, .builder-intro-card,
  .builder-progress-fill::after, .builder-led,
  .builder-stage, .builder-feat { animation: none !important; }
}

/* ── Step 2 — Pick producto ── */
.builder-step-head {
  padding: 0 8px;
  margin-bottom: 8px;
}

/* Chips de filtro por categoría — scroll horizontal en mobile, wrap en desktop.
   `.builder-sales-chips` es una variante visual del mismo rail, agregada
   en 2026-05-24 para filtrar por ventas mínimas en 7d. Hereda todo de
   `.builder-category-chips` por doble clase; el único delta visual es el
   prefijo `.builder-chips-rail-label` que identifica qué se está filtrando. */
.builder-category-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 0;
  margin-bottom: 4px;
}
.builder-sales-chips {
  /* Diferenciar visualmente del rail de categorías: separación inferior
     más generosa y borde sutil arriba en desktop para que se lea como
     "filtro independiente". Mobile lo deja como un rail más por encima. */
  margin-bottom: 8px;
}
.builder-chips-rail-label {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px 0 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}
.builder-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.builder-category-chip:hover {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
  color: var(--ink);
  transform: translateY(-1px);
}
.builder-category-chip[data-active="true"] {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  border-color: var(--accent);
  color: var(--accent);
}
.builder-category-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--line) 70%, transparent);
  color: var(--ink-4);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
}
.builder-category-chip[data-active="true"] .builder-category-chip-count {
  background: color-mix(in oklab, var(--accent) 25%, transparent);
  color: var(--accent);
}
.builder-pick-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.builder-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 920px) {
  .builder-product-grid { grid-template-columns: 1fr; }
}

/* ─── Step 2: "Ver más productos" — toggle + grid expandido ─── */

/* Botón toggle al pie del top-3. Va a full-width con un eyebrow + CTA en
   2 líneas para que se vea acción/contexto. */
.builder-more-toggle {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}
.builder-more-toggle .btn-tracker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 28px;
}
.builder-more-toggle-label {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
}
.builder-more-toggle-cta {
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
}
.builder-more-toggle .btn-tracker[data-expanded="1"] {
  display: none;
}

/* Sección expandida con el grid completo + paginación + búsqueda */
.builder-more-products {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px dashed var(--line);
  animation: builder-feat-rise 0.4s cubic-bezier(.16, 1, .3, 1) both;
}
.builder-more-products-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.builder-more-products-head-text h2 {
  margin: 0 0 4px;
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-1);
}
.builder-more-products-head-text p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
}
.builder-more-products-search {
  flex: 0 0 auto;
}
.builder-more-products-search-input {
  width: 280px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-1);
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.builder-more-products-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}

/* Grid compacto: 4 cols desktop, 3 tablet, 2 mobile-landscape, 1 mobile */
.builder-more-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  .builder-more-products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .builder-more-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .builder-more-products-grid { grid-template-columns: 1fr; }
}

/* Card compacta — más chica que el top-3, sin score bar ni link a detalle.
   `min-width: 0` CRÍTICO: grid items tienen min-width=auto por default, lo
   que les permite crecer más allá de `1fr` si el contenido (img) es ancho.
   Sin esto, una `<img>` con dimensiones intrínsecas grandes (1024px típico
   de los CDN de Dropi) hace que el card desborde el track del grid. */
.builder-more-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 2px solid var(--line);
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.builder-more-product-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--accent) 45%, var(--line));
}
.builder-more-product-card[data-selected="true"] {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
}
.builder-more-product-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.builder-more-product-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  opacity: 0;
  transition: opacity 160ms ease;
}
.builder-more-product-card[data-selected="true"] .builder-more-product-check {
  opacity: 1;
}
/* Placeholder usado por el handler global de imágenes rotas
   (base.html `data-fallback-urls`). Reemplaza el `<img>` cuando todas las
   URLs candidatas fallan. Toma el ancho/alto del contenedor padre que tenga
   posicionamiento (.builder-product-img o .builder-more-product-img) gracias
   al `position: absolute; inset: 0` cuando el padre es relative. */
.tt-img-fallback-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--ink-3);
  opacity: 0.5;
  background: color-mix(in oklch, var(--line) 60%, transparent);
}

/* Container de imagen con HEIGHT FIJA (no aspect-ratio). Aspect-ratio
   tiene quirks cuando el contenido `<img>` tiene dimensiones intrínsecas
   muy grandes (CDN de Dropi sirve a 1024px+). Height fija + object-fit
   garantiza uniformidad estricta sin importar la imagen o el browser. */
.builder-more-product-img {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: 10px;
  background: color-mix(in oklch, var(--line) 60%, transparent);
  overflow: hidden;
  font-size: 32px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.builder-more-product-img > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.builder-more-product-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.builder-more-product-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.builder-more-product-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.3;
  /* min-height de 2 líneas para que todas las cards del row se alineen
     verticalmente incluso cuando el nombre es de 1 sola línea. Sin esto
     CSS grid estira el row al más alto y se ven irregulares. */
  min-height: calc(13px * 1.3 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.builder-more-product-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-3);
}
.builder-more-product-store {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.builder-more-product-tag-emergent {
  flex-shrink: 0;
  font-size: 13px;
}
.builder-more-product-stats {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-3);
  padding-top: 4px;
  border-top: 1px solid color-mix(in oklch, var(--line) 60%, transparent);
}
.builder-more-product-score {
  color: var(--accent);
  font-weight: 600;
}
.builder-more-product-price {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}

/* Botón "Ver detalle del producto" del card del grid expandido. Mismo
   estilo idéntico al `.builder-product-actions` del top-3 — mantiene la
   consistencia visual entre ambos tipos de card. */
.builder-more-product-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.builder-more-product-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.builder-more-product-detail-link:hover {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.builder-more-product-detail-link svg {
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.builder-more-product-detail-link:hover svg {
  transform: translate(2px, -2px);
  opacity: 1;
}

/* Empty del grid (search sin resultados) */
.builder-more-products-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 12px;
}

/* Paginación */
.builder-more-products-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.builder-more-products-pager-info {
  font-size: 13px;
  color: var(--ink-3);
}

.builder-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 22px;
  background: var(--surface);
  border: 2px solid var(--line);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              background 0.25s ease;
  animation: builder-feat-rise 0.6s cubic-bezier(.16, 1, .3, 1) both;
}
.builder-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(10, 20, 40, 0.10);
}
.builder-product-card[data-selected="true"] {
  border-color: var(--accent);
  background: linear-gradient(180deg,
    var(--surface) 0%,
    color-mix(in oklab, var(--accent) 8%, var(--surface)) 100%);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 15%, transparent),
              0 12px 36px rgba(10, 20, 40, 0.10);
}
.builder-product-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Header del card: rank pill + opcional tag "EN RACHA" lado a lado. */
.builder-product-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.builder-product-rank {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--surface-2, var(--surface));
  color: var(--ink-3);
  border: 1px solid var(--line);
}

/* Tag "EN RACHA" — junto al rank en el header, sin solapar el score bar. */
.builder-product-tag-emergent {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  background: color-mix(in oklab, var(--lime, #84cc16) 18%, var(--surface-2));
  color: var(--lime-ink, #4d7c0f);
  border: 1px solid color-mix(in oklab, var(--lime, #84cc16) 32%, transparent);
}
.builder-product-rank--winner {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--amber, #f59e0b) 30%, var(--surface-2)) 0%,
    color-mix(in oklab, var(--amber, #f59e0b) 12%, var(--surface-2)) 100%);
  color: var(--amber-ink, #b45309);
  border-color: color-mix(in oklab, var(--amber, #f59e0b) 35%, transparent);
}

.builder-product-check {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.builder-product-card[data-selected="true"] .builder-product-check {
  opacity: 1;
  transform: scale(1);
  animation: builder-pop 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes builder-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.builder-product-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 10%, var(--surface-2)) 0%,
    color-mix(in oklab, var(--accent-2, var(--accent)) 6%, var(--surface-2)) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 14px;
}
.builder-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.builder-product-img-placeholder {
  font-size: 56px;
  opacity: 0.6;
}

.builder-product-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 4px;
  color: var(--ink);
  /* Truncar a 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.builder-product-store {
  font-size: 12px;
  color: var(--ink-4);
}

/* Row con store + pill de categoría en cada card. */
.builder-product-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.builder-product-category-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 10%, var(--surface-2));
  color: color-mix(in oklab, var(--accent) 80%, var(--ink));
  border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.builder-product-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.builder-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.builder-stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.builder-stat-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.builder-stat-value--accent {
  font-style: italic;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Asterisco sutil para indicar "stock total, no público — sin datos lazy".
   Tiene tooltip nativo via `title=` en el HTML. */
.builder-stat-hint {
  font-size: 12px;
  color: var(--ink-4);
  margin-left: 2px;
  cursor: help;
}

.builder-product-score {
  margin-top: auto;
}
.builder-product-score-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.builder-product-score-value {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
}
.builder-product-score-bar {
  height: 5px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.builder-product-score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  border-radius: 999px;
  animation: builder-fillin 1.2s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes builder-fillin {
  from { width: 0 !important; }
}

/* Footer del card: botón "Ver detalle del producto" que abre en nueva pestaña. */
.builder-product-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.builder-product-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.builder-product-detail-link:hover {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.builder-product-detail-link svg {
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.builder-product-detail-link:hover svg {
  transform: translate(2px, -2px);
  opacity: 1;
}

.builder-pick-actions {
  display: flex;
  justify-content: flex-end;
}
.builder-pick-submit {
  min-width: 240px;
}

/* ── Placeholder genérico (steps 3-9 hasta que se implementen) ── */
.builder-placeholder {
  padding: 48px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.builder-placeholder .builder-eyebrow { margin-bottom: 6px; }
.builder-debug {
  margin-top: 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-4);
}
.builder-debug summary { cursor: pointer; }
.builder-debug pre {
  text-align: left;
  background: var(--surface-2, var(--surface));
  padding: 10px 14px;
  border-radius: 10px;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--ink-3);
}

/* ── Empty state Step 2 ── */
.builder-empty {
  padding: 48px 32px;
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.builder-empty-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}

/* ─────────────────────────────────────────────────────────────────
   Wizard · Loader reusable (steps 3 análisis · 6 textos · 8 publish)
   ───────────────────────────────────────────────────────────────── */

.builder-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 32px 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  animation: builder-step-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.builder-loader-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  max-width: 560px;
}

.builder-loader-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.2vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink-1);
}

.builder-loader-subtitle {
  font-size: 14.5px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.45;
}

/* ─── Barra de progreso + porcentaje ─── */
.builder-loader-bar-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(520px, 100%);
  margin: 0 auto 14px;
}

.builder-loader-bar {
  flex: 1;
  height: 8px;
  background: color-mix(in oklch, var(--line) 60%, transparent);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.builder-loader-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.builder-loader-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklch, white 35%, transparent) 50%,
    transparent 100%);
  animation: builder-loader-sweep 1.4s linear infinite;
}

.builder-loader[data-state="summary"] .builder-loader-bar-fill::after,
.builder-loader[data-state="error"] .builder-loader-bar-fill::after {
  animation: none;
  opacity: 0;
}

@keyframes builder-loader-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.builder-loader-pct {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Mensaje rotativo ─── */
.builder-loader-message {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 8px 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
  max-width: 560px;
  animation: builder-loader-msg-in 0.4s ease both;
}

@keyframes builder-loader-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Spinner pequeño que acompaña el mensaje */
.builder-loader-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  animation: builder-loader-spin 0.8s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

.builder-loader-spinner--inline {
  width: 12px;
  height: 12px;
  border-width: 1.8px;
}

@keyframes builder-loader-spin {
  to { transform: rotate(360deg); }
}

/* ─── Tasks ticking (lista de 4 fases del análisis) ─── */
.builder-loader-tasks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(480px, 100%);
  text-align: left;
}

.builder-loader-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--ink-3);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.builder-loader-task[data-status="active"] {
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  border-color: color-mix(in oklch, var(--accent) 35%, var(--line));
  color: var(--ink-1);
  font-weight: 500;
}

.builder-loader-task[data-status="done"] {
  color: var(--ink-2);
  background: var(--surface);
  border-color: var(--line);
}

.builder-loader-task-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in oklch, var(--line) 80%, transparent);
  color: var(--ink-3);
  transition: background 0.3s ease, color 0.3s ease;
}

.builder-loader-task[data-status="active"] .builder-loader-task-icon {
  background: color-mix(in oklch, var(--accent) 18%, var(--surface));
  color: var(--accent);
}

.builder-loader-task[data-status="done"] .builder-loader-task-icon {
  background: var(--accent);
  color: var(--accent-ink, white);
}

.builder-loader-task[data-status="error"] .builder-loader-task-icon {
  background: color-mix(in oklch, var(--rust, #c84a4a) 22%, var(--surface));
  color: var(--rust-ink, var(--rust, #c84a4a));
}

.builder-loader-task[data-status="error"] .builder-loader-task-label {
  color: var(--rust-ink, var(--rust, #c84a4a));
}

.builder-loader-task-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: builder-loader-pulse 1s ease-in-out infinite;
}

@keyframes builder-loader-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.1); }
}

.builder-loader-task-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--ink-4) 50%, transparent);
}

.builder-loader-task-label { flex: 1; }

/* ─── Tarjeta de resumen (state=summary) ─── */
.builder-loader-summary {
  margin-top: 28px;
  padding: 22px 24px;
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--accent) 32%, var(--line));
  border-radius: 18px;
  width: min(540px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: builder-loader-summary-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes builder-loader-summary-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.builder-loader-summary-intro {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 500;
  text-align: left;
}

.builder-loader-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  text-align: left;
}

.builder-loader-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.builder-loader-summary-label {
  font-size: 11px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.builder-loader-summary-value {
  font-size: 14.5px;
  color: var(--ink-1);
  font-weight: 500;
  line-height: 1.25;
}

.builder-loader-summary-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}

/* CTA secundario del summary — ej. "↗ Ver vista previa de tu landing"
   desde el step 6 (textos generados). Estilo link con accent + hover
   underline. Vive entre la grid de contadores y el foot italic. */
.builder-loader-summary-cta {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
}
.builder-loader-summary-cta a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.builder-loader-summary-cta a:hover,
.builder-loader-summary-cta a:focus-visible {
  border-bottom-color: var(--accent);
}

/* ─── State summary_partial (terminal con errores) ─── */
.builder-loader-partial {
  margin-top: 28px;
  padding: 22px 24px;
  background: color-mix(in oklch, var(--amber, #d99528) 7%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--amber, #d99528) 32%, var(--line));
  border-radius: 18px;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  animation: builder-loader-summary-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.builder-loader-partial-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-loader-partial-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.builder-loader-partial-item-icon {
  flex-shrink: 0;
  color: var(--rust-ink, var(--rust, #c84a4a));
  margin-top: 1px;
}

.builder-loader-partial-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.builder-loader-partial-item-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
}

.builder-loader-partial-item-error {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
  word-break: break-word;
}

.builder-loader-partial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.builder-loader-partial-actions .btn-tracker {
  flex: 0 0 auto;
}

/* ─── State error ─── */
.builder-loader-error {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  background: color-mix(in oklch, var(--rust, #c84a4a) 8%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--rust, #c84a4a) 40%, var(--line));
  border-radius: 16px;
  width: min(560px, 100%);
  text-align: left;
}

.builder-loader-error-icon {
  color: var(--rust-ink, var(--rust, #c84a4a));
  flex-shrink: 0;
  margin-top: 2px;
}

.builder-loader-error-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.builder-loader-error-title { font-weight: 600; font-size: 14.5px; color: var(--ink-1); margin: 0; }
.builder-loader-error-msg   { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.builder-loader-error .btn-tracker { margin-top: 8px; align-self: flex-start; }

@media (max-width: 600px) {
  .builder-loader { padding: 40px 22px 36px; }
  .builder-loader-summary-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .builder-loader,
  .builder-loader-summary,
  .builder-loader-message,
  .builder-loader-task-pulse,
  .builder-loader-bar-fill::after,
  .builder-loader-spinner {
    animation: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Wizard · Step 8 · Publish (idle + loader shared) + Step 9 · Live
   ───────────────────────────────────────────────────────────────── */

/* IDLE — pantalla pre-arranque del step 8 (banner + botón publicar). */
.builder-publish-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  padding: 36px 24px 32px;
  max-width: 640px;
  margin: 0 auto;
  animation: builder-step-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.builder-publish-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.builder-publish-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.8vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink-1);
}

.builder-publish-lede {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.55;
  max-width: 560px;
}

.builder-publish-lede strong { color: var(--ink-1); font-weight: 600; }

/* Nota del modo stub — explica cómo configurar Shopify. */
.builder-publish-stub-note {
  width: min(560px, 100%);
  padding: 14px 16px;
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--accent) 28%, var(--line));
  border-radius: 14px;
  text-align: left;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

.builder-publish-stub-note-title {
  font-weight: 600;
  color: var(--ink-1);
  margin: 0 0 4px;
  font-size: 13.5px;
}

.builder-publish-stub-note-body {
  margin: 0;
}

.builder-publish-stub-note code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  padding: 1px 6px;
  background: color-mix(in oklch, var(--ink-1) 6%, transparent);
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* Lista preview de las 6 fases en pending. */
.builder-publish-task-preview {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, 100%);
  text-align: left;
}

.builder-publish-task-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* CTA principal del idle — botón gigante. */
.builder-publish-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.builder-publish-cta {
  padding: 14px 28px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.builder-publish-cta-hint {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   Wizard · Step 9 · Live (URL pill + stats + CTAs)
   ───────────────────────────────────────────────────────────────── */

.builder-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  padding: 36px 24px 48px;
  max-width: 720px;
  margin: 0 auto;
  animation: builder-step-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.builder-live-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.builder-led--success {
  background: color-mix(in oklch, var(--lime, #79e26b) 90%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--lime, #79e26b) 22%, transparent);
}

.builder-live-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.2vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink-1);
}

.builder-live-lede {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.55;
  max-width: 580px;
}

/* URL pill card — lo más prominente. */
.builder-live-url-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 6px 22px color-mix(in oklch, var(--ink-1) 6%, transparent);
}

.builder-live-url-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in oklch, var(--ink-1) 3%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.builder-live-url-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.builder-live-url-text {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  color: var(--ink-1);
  word-break: break-all;
  text-align: left;
}

.builder-live-url-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Stats grid — 4 cells. */
.builder-live-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
}

.builder-live-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.builder-live-stat-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}

.builder-live-stat-value--warn {
  color: var(--ink-3);
}

.builder-live-stat-label {
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}

/* Aside informativo sobre cleanup del theme del merchant. Solo aparece en
   modo Shopify real (no stub). Tono soft de advertencia, no destructivo. */
.builder-live-theme-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--accent-soft, rgba(0,0,0,0.08));
  background: var(--surface-2, rgba(0,0,0,0.03));
  border-radius: 12px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.builder-live-theme-note-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-1);
}

.builder-live-theme-note-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}

.builder-live-theme-note-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   STEP 7 — TESTIMONIOS (2026-05-24)
   Lista de reviews scrapeadas + form para agregar manuales antes de
   subirlos a Judge.me en el step 9 (publish).
   ════════════════════════════════════════════════════════════════════ */
.builder-testimonials {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.builder-testimonials-warn {
  padding: 14px 16px;
  background: color-mix(in oklab, var(--amber, #FAA619) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--amber, #FAA619) 40%, transparent);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-1);
}
.builder-testimonials-warn code {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  background: var(--surface-2, rgba(0,0,0,0.05));
  padding: 2px 6px;
  border-radius: 4px;
}
.builder-testimonials-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
}
.builder-testimonials-section-head {
  margin-bottom: 14px;
}
.builder-testimonials-section-head h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-1);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.builder-testimonials-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2, rgba(0,0,0,0.04));
}
.builder-testimonials-section-sub {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.builder-testimonials-empty {
  padding: 18px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.builder-testimonials-empty p { margin: 0 0 8px; }
.builder-testimonials-empty-cli {
  font-size: 11px;
  background: var(--surface-2, rgba(0,0,0,0.04));
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
}

.builder-testimonials-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.builder-testimonials-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2, rgba(0,0,0,0.02));
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: opacity 0.15s ease;
}
.builder-testimonials-item[data-enabled="0"] {
  opacity: 0.5;
}
.builder-testimonials-toggle {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.builder-testimonials-toggle input { cursor: pointer; width: 18px; height: 18px; }
.builder-testimonials-item-body { min-width: 0; }
.builder-testimonials-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
}
.builder-testimonials-name {
  font-weight: 700;
  color: var(--ink-1);
  font-size: 13px;
}
.builder-testimonials-rating {
  color: var(--amber, #FAA619);
  font-size: 13px;
  letter-spacing: 1px;
}
.builder-testimonials-lang {
  font-size: 11px;
  color: var(--ink-3);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.builder-testimonials-email {
  font-size: 11px;
  color: var(--ink-3);
}
.builder-testimonials-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.builder-testimonials-photo-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--ink-3);
}

/* Grid de thumbnails de fotos asociadas a una review scrapeada */
.builder-testimonials-photos {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.builder-testimonials-photo-thumb {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 160ms ease, border-color 160ms ease;
}
.builder-testimonials-photo-thumb:hover,
.builder-testimonials-photo-thumb:focus-visible {
  transform: scale(1.05);
  border-color: var(--accent);
}
.builder-testimonials-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Variante loading del empty state (scraping en curso) */
.builder-testimonials-empty--loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.builder-testimonials-empty-hint {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 480px;
  text-align: center;
}

/* Nota inline cuando el scrape sigue corriendo pero ya hay resultados parciales */
.builder-testimonials-scraping-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--accent) 24%, var(--line));
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-2);
}

/* Form de agregar manual */
.builder-testimonials-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.builder-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.builder-form-row label,
.builder-form-row-full {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.builder-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.builder-testimonials-form input[type="text"],
.builder-testimonials-form input[type="email"],
.builder-testimonials-form select,
.builder-testimonials-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink-1);
  font-family: inherit;
}
.builder-testimonials-form textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}
.builder-form-photo input[type="file"] {
  font-size: 12px;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-2, rgba(0,0,0,0.02));
  cursor: pointer;
}
.builder-form-actions {
  display: flex;
  justify-content: flex-end;
}

.builder-testimonials-summary {
  padding: 14px 18px;
  background: var(--surface-2, rgba(0,0,0,0.03));
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-1);
}
.builder-testimonials-summary-warn {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}

@media (max-width: 600px) {
  .builder-testimonials-item {
    grid-template-columns: auto 1fr;
  }
  .builder-testimonials-item > button {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .builder-form-row {
    grid-template-columns: 1fr;
  }
}

/* Atribución de origen de la review scrapeada (qué tienda la generó) — vive
   debajo del body, separado del meta-row para no competir con nombre/rating. */
.builder-testimonials-attribution {
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--ink-3);
  background: var(--surface-2, rgba(0,0,0,0.02));
  border-left: 2px solid color-mix(in oklch, var(--accent) 35%, var(--line));
  border-radius: 0 6px 6px 0;
  line-height: 1.4;
}
.builder-testimonials-attribution strong {
  color: var(--ink-2);
  font-weight: 600;
}

/* ─── Step 7 — Tiendas de competencia ──────────────────────────────────── */
.builder-stores {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}

/* Empty state cuando no hay Meta Ads cacheados */
.builder-stores-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px;
  background: var(--surface-2, rgba(0,0,0,0.02));
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.builder-stores-empty-icon {
  font-size: 42px;
  line-height: 1;
}
.builder-stores-empty h2 {
  margin: 0;
  font-size: 18px;
  color: var(--ink-1);
}
.builder-stores-empty p {
  margin: 0;
  max-width: 540px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.builder-stores-empty-hint {
  font-size: 13px;
  color: var(--ink-3);
}
.builder-stores-empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* Banner cuando el scrape ya está corriendo en background */
.builder-stores-progress {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--accent) 24%, var(--line));
  border-radius: 12px;
}
.builder-stores-progress strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-1);
}
.builder-stores-progress p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Form + bulk row */
.builder-stores-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.builder-stores-bulk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.builder-stores-bulk-hint {
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 4px;
}
/* Botón "Re-analizar marcadas (forzar)" — acción potencialmente destructiva
   (borra datos cacheados de las landings marcadas). Tinte amber para que el
   user note la diferencia con los otros botones del bulk-row. */
.builder-stores-rescrape-btn {
  border-color: color-mix(in oklch, var(--amber, #FAA619) 35%, var(--line)) !important;
}
.builder-stores-rescrape-btn:hover,
.builder-stores-rescrape-btn:focus-visible {
  background: color-mix(in oklch, var(--amber, #FAA619) 12%, var(--surface)) !important;
  border-color: color-mix(in oklch, var(--amber, #FAA619) 55%, var(--line)) !important;
}

/* Lista de tiendas */
.builder-stores-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.builder-stores-item {
  background: var(--surface-2, rgba(0,0,0,0.02));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.builder-stores-item:has(.builder-stores-checkbox:checked) {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--line));
  background: color-mix(in oklch, var(--accent) 5%, var(--surface));
}
.builder-stores-row {
  display: grid;
  grid-template-columns: auto 96px 1fr;
  gap: 14px;
  padding: 14px;
  align-items: flex-start;
  cursor: pointer;
}
.builder-stores-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.builder-stores-check-visual {
  display: block;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
  flex-shrink: 0;
}
.builder-stores-checkbox:checked + .builder-stores-check-visual {
  background: var(--accent);
  border-color: var(--accent);
}
.builder-stores-checkbox:checked + .builder-stores-check-visual::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.builder-stores-checkbox:focus-visible + .builder-stores-check-visual {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Thumbnail del ad. Puede ser <div> (placeholder) o <button> (cuando hay
   media clickeable que abre lightbox). Reset de defaults del button para
   que herede los mismos estilos que el div. */
.builder-stores-thumb {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
button.builder-stores-thumb {
  cursor: zoom-in;
  appearance: none;
}
button.builder-stores-thumb:hover,
button.builder-stores-thumb:focus-visible {
  transform: scale(1.03);
  border-color: var(--accent);
  box-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 30%, transparent);
  outline: none;
}
button.builder-stores-thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.builder-stores-thumb img,
.builder-stores-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.builder-stores-thumb--placeholder,
.builder-stores-thumb--fail {
  font-size: 28px;
  color: var(--ink-3);
}
.builder-stores-thumb--fail img,
.builder-stores-thumb--fail video { display: none; }

/* Variante video: badge "▶ video" en la esquina para diferenciar de imagen */
.builder-stores-thumb--video {
  position: relative;
}
.builder-stores-thumb-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  pointer-events: none;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}

/* Meta de la tienda */
.builder-stores-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.builder-stores-meta-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.builder-stores-name {
  font-size: 15px;
  color: var(--ink-1);
  font-weight: 700;
}
.builder-stores-domain {
  font-size: 11px;
  color: var(--ink-3);
  word-break: break-all;
}

/* Badges (relevance / scraped / failed) */
.builder-stores-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.builder-stores-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.builder-stores-badge--match {
  background: color-mix(in oklch, var(--lime, #7AC74F) 15%, var(--surface));
  color: var(--lime-ink, var(--ink-1));
  border: 1px solid color-mix(in oklch, var(--lime, #7AC74F) 35%, var(--line));
}
.builder-stores-badge--uncertain {
  background: color-mix(in oklch, var(--amber, #FAA619) 14%, var(--surface));
  color: var(--amber-ink, var(--ink-1));
  border: 1px solid color-mix(in oklch, var(--amber, #FAA619) 35%, var(--line));
}
.builder-stores-badge--scraped {
  background: color-mix(in oklch, var(--accent) 10%, var(--surface));
  color: var(--ink-2);
  border: 1px solid color-mix(in oklch, var(--accent) 26%, var(--line));
}
.builder-stores-badge--retry {
  background: color-mix(in oklch, var(--amber, #FAA619) 10%, var(--surface));
  color: var(--ink-2);
  border: 1px solid color-mix(in oklch, var(--amber, #FAA619) 30%, var(--line));
  cursor: help;
}
.builder-stores-badge--failed {
  background: color-mix(in oklch, var(--rust, #E15A4B) 12%, var(--surface));
  color: var(--rust-ink, var(--ink-1));
  border: 1px solid color-mix(in oklch, var(--rust, #E15A4B) 35%, var(--line));
}

.builder-stores-snippet {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
  font-style: italic;
}
.builder-stores-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.builder-stores-link {
  display: inline-block;
  font-size: 11px;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-3);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.builder-stores-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.builder-stores-footer-info {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.builder-stores-footer-info p {
  margin: 0;
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
}
.builder-stores-footer-info #builder-stores-summary {
  color: var(--ink-2);
  font-weight: 700;
}

@media (max-width: 600px) {
  .builder-stores-row {
    grid-template-columns: auto 1fr;
  }
  .builder-stores-thumb {
    grid-column: 1 / -1;
    width: 100%;
    height: 140px;
  }
}

/* CTAs secundarios. */
.builder-live-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.builder-live-restart {
  font-weight: 600;
}

.builder-live-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
}

@media (max-width: 600px) {
  .builder-live-stats { grid-template-columns: repeat(2, 1fr); }
  .builder-publish-idle { padding: 28px 18px 24px; }
  .builder-live { padding: 28px 18px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .builder-publish-idle,
  .builder-live {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Wizard · Step 8 · Setup Guide (visual stepper para configurar Shopify)
   ───────────────────────────────────────────────────────────────── */

.builder-setup-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 20px 48px;
  animation: builder-step-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.builder-setup-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 600px;
}

.builder-setup-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink-1);
}

.builder-setup-lede {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.55;
}

/* Stepper — lista ordenada con número grande en círculo a la izquierda. */
.builder-setup-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: setup-step;
}

.builder-setup-step {
  display: flex;
  gap: 18px;
  padding: 22px 22px 22px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  position: relative;
  transition: border-color 200ms ease, transform 200ms ease;
}

.builder-setup-step:hover {
  border-color: color-mix(in oklch, var(--accent) 30%, var(--line));
}

.builder-setup-step-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 12%, var(--surface));
  border: 1.5px solid color-mix(in oklch, var(--accent) 45%, var(--line));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--accent);
  margin-top: 2px;
}

.builder-setup-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.builder-setup-step-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  color: var(--ink-1);
}

.builder-setup-step-text {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.6;
}

.builder-setup-step-text strong { color: var(--ink-1); font-weight: 600; }

.builder-setup-step-text code,
.builder-setup-prompt-list code,
.builder-setup-scope-list code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  padding: 1px 6px;
  background: color-mix(in oklch, var(--ink-1) 6%, transparent);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-1);
}

.builder-setup-scope-list,
.builder-setup-prompt-list {
  list-style: none;
  padding: 0;
  margin: 2px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Sub-pasos anidados dentro de un step (ej. "Permitir desarrollo" → "Crear app"). */
.builder-setup-substeps {
  margin: 4px 0 6px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: substep;
  list-style: none;
}

.builder-setup-substeps li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  counter-increment: substep;
}

.builder-setup-substeps li::before {
  content: counter(substep) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.builder-setup-substeps li strong { color: var(--ink-1); font-weight: 600; }

/* Sub-lista dentro de un sub-step (variantes/opciones de un paso). */
.builder-setup-substeps-inline {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.builder-setup-substeps-inline li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}

.builder-setup-substeps-inline li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}

.builder-setup-substeps-inline li strong { color: var(--ink-1); font-weight: 600; }

/* Tabla "Deja estos campos como están" — desglosa default field-by-field. */
.builder-setup-fields-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 0;
  background: color-mix(in oklch, var(--ink-1) 3%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
}

.builder-setup-fields-table thead th {
  text-align: left;
  padding: 8px 12px;
  background: color-mix(in oklch, var(--ink-1) 5%, transparent);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.builder-setup-fields-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--line) 50%, transparent);
  color: var(--ink-2);
  line-height: 1.5;
  vertical-align: top;
}

.builder-setup-fields-table tbody tr:last-child td {
  border-bottom: none;
}

.builder-setup-fields-table tbody td:first-child {
  color: var(--ink-1);
  font-weight: 500;
  width: 42%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-setup-fields-table code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  background: color-mix(in oklch, var(--ink-1) 6%, transparent);
  border: 1px solid var(--line);
  border-radius: 5px;
}

@media (max-width: 600px) {
  .builder-setup-fields-table tbody td:first-child {
    white-space: normal;
    width: 50%;
  }
  .builder-setup-fields-table { font-size: 12px; }
  .builder-setup-fields-table thead th,
  .builder-setup-fields-table tbody td { padding: 7px 10px; }
}

.builder-setup-scope-list li,
.builder-setup-prompt-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.builder-setup-scope-list li::before,
.builder-setup-prompt-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}

.builder-setup-step-cta {
  align-self: flex-start;
  margin-top: 4px;
}

/* Warning del paso 2 — alerta del token de un solo uso. */
.builder-setup-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: color-mix(in oklch, var(--amber, #ffb84a) 9%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--amber, #ffb84a) 40%, var(--line));
  border-radius: 12px;
  margin-top: 2px;
}

.builder-setup-warning-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.2;
}

.builder-setup-warning-text {
  flex: 1;
  font-size: 13.5px;
  color: var(--ink-1);
  margin: 0;
  line-height: 1.55;
}

.builder-setup-warning-text strong { font-weight: 600; }

/* Info azul — usado para contexto neutro (ej. cambio de Shopify en 2026). */
.builder-setup-info {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 14px;
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--line));
  border-radius: 12px;
  margin-top: 2px;
}

.builder-setup-info-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.2;
}

.builder-setup-info-text {
  flex: 1;
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.55;
}

.builder-setup-info-text strong { color: var(--ink-1); font-weight: 600; }

/* Bloque de comando con botón copiar al portapapeles. */
.builder-setup-code {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in oklch, var(--ink-1) 4%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 2px;
}

.builder-setup-code-text {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  color: var(--ink-1);
  word-break: break-all;
  user-select: all;
}

.builder-setup-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  flex-shrink: 0;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.builder-setup-code-copy:hover,
.builder-setup-code-copy:focus-visible {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--line));
  color: var(--ink-1);
}

.builder-setup-code-copy--done {
  background: color-mix(in oklch, var(--lime, #79e26b) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--lime, #79e26b) 50%, var(--line));
  color: var(--ink-1);
}

.builder-setup-code-copy-icon { font-size: 12px; }

/* CTA "Verificar conexión" — botón primary + spinner cuando htmx en flight. */
.builder-setup-verify-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.builder-setup-verify-cta {
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.builder-setup-verify-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in oklch, var(--accent-ink, var(--accent)) 35%, transparent);
  border-top-color: var(--accent-ink, var(--accent));
  border-radius: 50%;
  animation: builder-loader-spin 0.8s linear infinite;
}

.builder-setup-verify-spinner.htmx-request,
.htmx-request .builder-setup-verify-spinner {
  display: inline-block;
}

/* Bloque alternativo "vista previa local". */
.builder-setup-preview-note {
  width: 100%;
  padding: 18px 22px;
  background: color-mix(in oklch, var(--ink-1) 3%, var(--surface));
  border: 1px dashed var(--line);
  border-radius: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.builder-setup-preview-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15.5px;
  margin: 0;
  color: var(--ink-1);
}

.builder-setup-preview-text {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 4px;
  line-height: 1.55;
  max-width: 520px;
}

@media (max-width: 600px) {
  .builder-setup-guide { padding: 24px 14px 36px; gap: 24px; }
  .builder-setup-step { padding: 18px 16px; gap: 14px; }
  .builder-setup-step-num { width: 32px; height: 32px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .builder-setup-guide,
  .builder-setup-step { animation: none !important; transition: none !important; }
  .builder-setup-verify-spinner { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   Docs page (Markdown servido en /docs/<slug>) — usa el shell base.
   ───────────────────────────────────────────────────────────────── */

.docs-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.docs-page-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.docs-page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink-1);
}

.docs-page-lede {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
}

.docs-page-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
}

.docs-page-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 28px 0 12px;
  color: var(--ink-1);
}

.docs-page-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  margin: 22px 0 8px;
  color: var(--ink-1);
}

.docs-page-body p { margin: 0 0 12px; }

.docs-page-body ul, .docs-page-body ol {
  margin: 8px 0 16px;
  padding-left: 22px;
}

.docs-page-body li { margin-bottom: 6px; }

.docs-page-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 1px 6px;
  background: color-mix(in oklch, var(--ink-1) 6%, transparent);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.docs-page-body pre {
  background: color-mix(in oklch, var(--ink-1) 4%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 8px 0 16px;
}

.docs-page-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

.docs-page-body blockquote {
  border-left: 3px solid color-mix(in oklch, var(--accent) 45%, var(--line));
  padding: 4px 14px;
  margin: 8px 0 16px;
  color: var(--ink-2);
  background: color-mix(in oklch, var(--accent) 4%, transparent);
}

.docs-page-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 28px 0;
}

.docs-page-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.docs-page-body a:hover,
.docs-page-body a:focus-visible {
  border-bottom-color: var(--accent);
}

.docs-page-foot {
  margin-top: 8px;
  display: flex;
  gap: 10px;
}

/* ─────────────────────────────────────────────────────────────────
   Wizard · Step 4 · Imágenes IA (grid 10 slots con status individual)
   ───────────────────────────────────────────────────────────────── */

.builder-images {
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: builder-step-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.builder-images-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}

.builder-images-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.8vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink-1);
}

.builder-images-subtitle {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

/* Barra de progreso global del step 4 */
.builder-images-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(440px, 100%);
  margin-top: 8px;
}
.builder-images-progress-bar {
  flex: 1;
  height: 6px;
  background: color-mix(in oklch, var(--line) 60%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.builder-images-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.builder-images-progress-label {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  text-align: right;
}

/* Grid 5×2 desktop · 3 cols tablet · 2 cols mobile */
.builder-images-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .builder-images-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .builder-images-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Slot individual */
.builder-image-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: builder-feat-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.builder-image-slot-frame {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.builder-image-slot[data-status="active"] .builder-image-slot-frame {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--line));
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 12%, transparent);
}

.builder-image-slot[data-status="done"] .builder-image-slot-frame {
  border-color: color-mix(in oklch, var(--accent) 25%, var(--line));
  background: var(--surface);
}

.builder-image-slot[data-status="error"] .builder-image-slot-frame {
  border-color: color-mix(in oklch, var(--rust, #c84a4a) 45%, var(--line));
  background: color-mix(in oklch, var(--rust, #c84a4a) 6%, var(--surface));
}

.builder-image-slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: builder-loader-msg-in 0.4s ease both;
}

.builder-image-slot-placeholder {
  color: var(--ink-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.builder-image-slot[data-status="error"] .builder-image-slot-placeholder {
  color: var(--rust-ink, var(--rust, #c84a4a));
}

.builder-image-slot-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in oklch, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  animation: builder-loader-spin 0.8s linear infinite;
}

/* Status badge en esquina del frame */
.builder-image-slot-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--surface-2, var(--surface));
  color: var(--ink-4);
  border: 1px solid var(--line);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.builder-image-slot[data-status="active"] .builder-image-slot-badge {
  background: color-mix(in oklch, var(--accent) 18%, var(--surface));
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 35%, transparent);
}

.builder-image-slot[data-status="done"] .builder-image-slot-badge {
  background: var(--accent);
  color: var(--accent-ink, white);
  border-color: var(--accent);
}

.builder-image-slot[data-status="error"] .builder-image-slot-badge {
  background: var(--rust-ink, var(--rust, #c84a4a));
  color: white;
  border-color: var(--rust-ink, var(--rust, #c84a4a));
}

.builder-image-slot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: builder-loader-pulse 1s ease-in-out infinite;
}

/* Meta: idx + label */
.builder-image-slot-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}

.builder-image-slot-idx {
  font-size: 11px;
  color: var(--ink-4);
  font-weight: 600;
  flex-shrink: 0;
}

.builder-image-slot-label {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-image-slot[data-status="done"] .builder-image-slot-label {
  color: var(--ink-1);
  font-weight: 500;
}

.builder-image-slot-error {
  font-size: 11px;
  color: var(--rust-ink, var(--rust, #c84a4a));
  margin: 0;
  line-height: 1.3;
  padding: 0 2px;
  font-style: italic;
}

.builder-images-hint {
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  padding: 12px 16px;
  background: color-mix(in oklch, var(--amber, #d4a017) 8%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--amber, #d4a017) 30%, var(--line));
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .builder-images,
  .builder-image-slot,
  .builder-image-slot-img,
  .builder-image-slot-spinner,
  .builder-image-slot-pulse {
    animation: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Wizard · Lightbox (reusable steps 4 y 5)
   ───────────────────────────────────────────────────────────────── */

.builder-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: color-mix(in oklch, var(--bg-1, #0a0a0f) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px 80px;
  animation: builder-lightbox-in 0.2s ease both;
}
.builder-lightbox[hidden] { display: none; }

@keyframes builder-lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.builder-lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.builder-lightbox-img,
.builder-lightbox-video {
  max-width: min(85vw, 1100px);
  max-height: 78vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  background: var(--surface);
  animation: builder-lightbox-img-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.builder-lightbox-video {
  background: #000;
  /* Tope inferior cuando los controls nativos del video aparecen */
  display: block;
}
.builder-lightbox-video[hidden],
.builder-lightbox-img[hidden] {
  display: none !important;
}

@keyframes builder-lightbox-img-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.builder-lightbox-caption {
  font-size: 13.5px;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  text-align: center;
}

.builder-lightbox-close,
.builder-lightbox-nav {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.builder-lightbox-close:hover,
.builder-lightbox-nav:hover {
  background: rgba(255,255,255,0.2);
  transform: scale(1.05);
}

.builder-lightbox-close {
  top: 20px;
  right: 20px;
}
.builder-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.builder-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.builder-lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.builder-lightbox-next:hover { transform: translateY(-50%) scale(1.05); }

@media (max-width: 700px) {
  .builder-lightbox { padding: 50px 12px 60px; }
  .builder-lightbox-close { top: 12px; right: 12px; }
  .builder-lightbox-prev { left: 8px; }
  .builder-lightbox-next { right: 8px; }
}

/* Hover hint en frames con lightbox habilitado */
.builder-image-slot-frame[data-lightbox-src] {
  cursor: zoom-in;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.builder-image-slot-frame[data-lightbox-src]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -6px color-mix(in oklch, var(--accent) 30%, transparent);
}

/* Botón Regenerar en slots con error (compacto, no rompe el grid) */
.builder-image-slot-retry {
  font-size: 11.5px !important;
  padding: 6px 12px !important;
  align-self: flex-start;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   Wizard · Step 5 · Galería (grid 4 cols con hover actions)
   ───────────────────────────────────────────────────────────────── */

.builder-gallery {
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: builder-step-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.builder-gallery-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}

.builder-gallery-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.8vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink-1);
}

.builder-gallery-subtitle {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

/* Grid 4 cols desktop · 2 cols tablet · 1 col mobile */
.builder-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) {
  .builder-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .builder-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .builder-gallery-grid { grid-template-columns: 1fr; }
}

.builder-gallery-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: builder-feat-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.builder-gallery-tile-frame {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.18s ease;
}

.builder-gallery-tile-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -8px color-mix(in oklch, var(--accent) 25%, transparent);
}

.builder-gallery-tile[data-status="active"] .builder-gallery-tile-frame {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--line));
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
}

.builder-gallery-tile[data-status="error"] .builder-gallery-tile-frame {
  border-color: color-mix(in oklch, var(--rust, #c84a4a) 45%, var(--line));
  background: color-mix(in oklch, var(--rust, #c84a4a) 6%, var(--surface));
  cursor: default;
}

.builder-gallery-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: builder-loader-msg-in 0.4s ease both;
}

.builder-gallery-tile-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-4);
}
.builder-gallery-tile[data-status="error"] .builder-gallery-tile-placeholder {
  color: var(--rust-ink, var(--rust, #c84a4a));
}
.builder-gallery-tile-placeholder-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Overlay con acciones — escondido por default, visible en hover (desktop)
   o always-on (mobile / touch devices) */
.builder-gallery-tile-actions {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.65) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.builder-gallery-tile-frame:hover .builder-gallery-tile-actions,
.builder-gallery-tile-frame:focus-within .builder-gallery-tile-actions {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  /* Touch devices: always visible */
  .builder-gallery-tile-actions {
    opacity: 1;
    pointer-events: auto;
    background: linear-gradient(180deg,
      rgba(0,0,0,0) 50%,
      rgba(0,0,0,0.55) 100%);
    justify-content: flex-end;
    flex-direction: row;
  }
}

.builder-gallery-tile-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.95);
  color: var(--ink-1, #0c0c14);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}
.builder-gallery-tile-btn:hover {
  background: white;
  transform: translateY(-1px);
}
.builder-gallery-tile-btn--danger:hover {
  background: var(--rust, #c84a4a);
  color: white;
  border-color: var(--rust, #c84a4a);
}
.builder-gallery-tile-btn svg { flex-shrink: 0; }

/* Meta + label */
.builder-gallery-tile-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}
.builder-gallery-tile-idx {
  font-size: 11px;
  color: var(--ink-4);
  font-weight: 600;
  flex-shrink: 0;
}
.builder-gallery-tile-label {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-gallery-tile[data-status="done"] .builder-gallery-tile-label {
  color: var(--ink-1);
  font-weight: 500;
}

.builder-gallery-summary {
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}
.builder-gallery-summary strong { color: var(--ink-1); font-weight: 600; }
.builder-gallery-summary-errors { color: var(--rust-ink, var(--rust, #c84a4a)); }

@media (prefers-reduced-motion: reduce) {
  .builder-gallery,
  .builder-gallery-tile,
  .builder-gallery-tile-img,
  .builder-gallery-tile-frame {
    animation: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Wizard · Modal de regenerate (step 5 · afinar imagen IA)
   ───────────────────────────────────────────────────────────────── */

.builder-regen-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: color-mix(in oklch, var(--bg-1, #0a0a0f) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  animation: builder-lightbox-in 0.2s ease both;
}

.builder-regen-modal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  width: min(640px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4);
  animation: builder-loader-summary-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.builder-regen-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 26px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.builder-regen-modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 6px 0 0;
  color: var(--ink-1);
}

.builder-regen-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.builder-regen-modal-close:hover {
  background: var(--surface-2, var(--surface));
  color: var(--ink-1);
}

.builder-regen-modal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 26px 24px;
  overflow-y: auto;
}

.builder-regen-modal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.builder-regen-modal-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.builder-regen-modal-hint {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink-4) 18%, transparent);
  color: var(--ink-3);
}

.builder-regen-modal-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s ease;
}
.builder-regen-modal-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}

.builder-regen-modal-foot {
  font-size: 11px;
  color: var(--ink-4);
  line-height: 1.5;
}

/* Dropzone del modal de regenerate — reusa las clases
   `.builder-context-banner-ref-dropzone*` del step 4 (mismo CSS visual,
   ver línea ~20031). El input file + el filename display también heredan
   estilos de ahí. Acá solo overrides para encajar en el ancho del modal. */
.builder-regen-modal-field > .builder-context-banner-ref-dropzone {
  min-height: 150px;
}

/* Cuando el user eligió/pegó/arrastró archivo, el dropzone entra en modo
   "preview": esconde icono + títulos + lista de formatos y solo muestra
   la miniatura + filename + botón Quitar. Border dashed se mantiene como
   marco contenedor. Click sobre la miniatura sigue abriendo el file picker
   (excepto sobre el botón "Quitar" que para propagation). */
.builder-context-banner-ref-dropzone[data-has-file="true"]
  > .builder-context-banner-ref-dropzone-icon,
.builder-context-banner-ref-dropzone[data-has-file="true"]
  > .builder-context-banner-ref-dropzone-title,
.builder-context-banner-ref-dropzone[data-has-file="true"]
  > .builder-context-banner-ref-dropzone-sub,
.builder-context-banner-ref-dropzone[data-has-file="true"]
  > .builder-context-banner-ref-dropzone-formats {
  display: none;
}

.builder-regen-modal-thumb-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.builder-regen-modal-thumb-preview[hidden] {
  display: none;
}
.builder-regen-modal-thumb-preview img {
  max-width: 100%;
  max-height: 140px;
  border-radius: 8px;
  object-fit: contain;
  background: color-mix(in oklch, var(--ink-1) 5%, transparent);
  border: 1px solid var(--line);
}
.builder-regen-modal-thumb-name {
  font-size: 11.5px;
  color: var(--ink-2);
  text-align: center;
  max-width: 90%;
  word-break: break-all;
  line-height: 1.3;
}
.builder-regen-modal-thumb-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.builder-regen-modal-thumb-remove:hover {
  color: var(--rust, #d9534f);
  border-color: color-mix(in oklch, var(--rust, #d9534f) 50%, var(--line));
  background: color-mix(in oklch, var(--rust, #d9534f) 6%, var(--surface));
}

/* Preview del prompt actual (collapsible) */
.builder-regen-modal-preview {
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.builder-regen-modal-preview-summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.builder-regen-modal-preview-summary::-webkit-details-marker { display: none; }
.builder-regen-modal-preview-summary::before {
  content: '▸';
  font-size: 9px;
  transition: transform 0.2s ease;
}
.builder-regen-modal-preview[open] .builder-regen-modal-preview-summary::before {
  transform: rotate(90deg);
}
.builder-regen-modal-preview-pre {
  margin: 12px 0 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}

.builder-regen-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 600px) {
  .builder-regen-modal { padding: 16px; }
  .builder-regen-modal-head { padding: 18px 20px 14px; }
  .builder-regen-modal-form { padding: 18px 20px 22px; }
  .builder-regen-modal-actions { flex-direction: column-reverse; }
  .builder-regen-modal-actions .btn-tracker { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .builder-regen-modal,
  .builder-regen-modal-card {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Wizard · Modal regenerate · editor del prompt completo
   ───────────────────────────────────────────────────────────────── */

.builder-regen-modal-preview-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-regen-modal-prompt-editor {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-2);
  resize: vertical;
  min-height: 220px;
  max-height: 400px;
  white-space: pre-wrap;
  word-break: break-word;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.builder-regen-modal-prompt-editor:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
  color: var(--ink-1);
}

.builder-regen-modal-prompt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.builder-regen-modal-restore {
  font-size: 12px !important;
  padding: 6px 12px !important;
}
.builder-regen-modal-restore[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.builder-regen-modal-prompt-status {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink-4) 14%, transparent);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: background 0.25s ease, color 0.25s ease;
}
.builder-regen-modal-prompt-status[data-state="changed"] {
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
   Wizard · Banner pre-arranque del step 4 (revisión de contexto)
   ───────────────────────────────────────────────────────────────── */

.builder-context-banner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 36px 28px;
  background: var(--surface);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--line));
  border-radius: 20px;
  animation: builder-step-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  box-shadow: 0 8px 24px -12px color-mix(in oklch, var(--accent) 18%, transparent);
}

.builder-context-banner-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
}

.builder-context-banner-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 4px 0 0;
  color: var(--ink-1);
}

.builder-context-banner-lede {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

.builder-context-banner-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.builder-context-banner-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 900px) {
  .builder-context-banner-fields {
    grid-template-columns: 1fr 1fr;
  }
  /* La imagen de referencia ocupa el ancho completo */
  .builder-context-banner-field:nth-child(3) {
    grid-column: 1 / -1;
  }
}

.builder-context-banner-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.builder-context-banner-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-1);
}

.builder-context-banner-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s ease;
}
.builder-context-banner-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}

.builder-context-banner-ref-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.45;
}

.builder-context-banner-ref-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* Grid de miniaturas — server-persisted (data-source="server") + pending
   (data-source="pending", agregadas en sesión via JS). Vacío cuando no
   hay ninguna; el dropzone ocupa todo el ancho debajo. */
.builder-context-banner-ref-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
}
.builder-context-banner-ref-thumbs:empty {
  display: none;
}

.builder-context-banner-ref-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--ink-1) 6%, transparent),
              0 8px 22px -16px color-mix(in oklch, var(--ink-1) 30%, transparent);
}
.builder-context-banner-ref-thumb[data-source="pending"] {
  border-color: color-mix(in oklch, var(--accent) 45%, var(--line));
}
.builder-context-banner-ref-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.builder-context-banner-ref-thumb-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0;
  background: color-mix(in oklch, var(--ink-1) 80%, transparent);
  color: var(--bg);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.builder-context-banner-ref-thumb-remove:hover {
  background: var(--rust, #ef4444);
  transform: scale(1.08);
}
.builder-context-banner-ref-thumb-remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Default de Dropi cuando no hay refs custom — un tile más pequeño con
   label que aclara su naturaleza ("por defecto"). Cuando el user sube
   una ref custom, JS lo oculta. */
.builder-context-banner-ref-dropi-default {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 8px;
  width: max-content;
  border-radius: 12px;
  background: color-mix(in oklch, var(--accent) 4%, var(--surface));
  border: 1px dashed color-mix(in oklch, var(--accent) 25%, var(--line));
}
.builder-context-banner-ref-dropi-default .builder-context-banner-ref-preview {
  width: 90px;
  height: 90px;
  border-radius: 8px;
}
.builder-context-banner-ref-dropi-label {
  font-size: 9.5px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.builder-context-banner-ref-preview-col {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.builder-context-banner-ref-preview {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--ink-1) 6%, transparent),
              0 8px 22px -14px color-mix(in oklch, var(--ink-1) 30%, transparent);
}

.builder-context-banner-ref-empty {
  width: 148px;
  height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  border: 1px dashed color-mix(in oklch, var(--ink-1) 18%, var(--line));
  background: color-mix(in oklch, var(--ink-1) 2%, var(--surface));
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.builder-context-banner-ref-empty svg {
  color: var(--ink-4);
  opacity: 0.7;
}

/* Dropzone: zona principal de upload con click + drag-and-drop + paste. */
.builder-context-banner-ref-dropzone {
  position: relative;
  width: 100%;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 12px;
  border: 1.5px dashed color-mix(in oklch, var(--accent) 35%, var(--line));
  background: color-mix(in oklch, var(--accent) 3%, var(--surface));
  transition: border-color 0.18s ease, background 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}
.builder-context-banner-ref-dropzone:hover {
  border-color: color-mix(in oklch, var(--accent) 55%, var(--line));
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
}
.builder-context-banner-ref-dropzone:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
}
.builder-context-banner-ref-dropzone[data-dragover="true"] {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, var(--surface));
  transform: scale(1.005);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent),
              0 12px 28px -16px color-mix(in oklch, var(--accent) 50%, transparent);
}

.builder-context-banner-ref-dropzone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  /* `--accent` directo (no `--accent-ink`): el bg del círculo es mayormente
     surface con tinte accent suave, así que el icon necesita el color de
     brand pleno para contrastar. `--accent-ink` está pensado para texto
     SOBRE un fondo de color accent (caso opuesto). */
  color: var(--accent);
  margin-bottom: 4px;
  transition: transform 0.2s ease;
}
.builder-context-banner-ref-dropzone:hover .builder-context-banner-ref-dropzone-icon,
.builder-context-banner-ref-dropzone[data-dragover="true"] .builder-context-banner-ref-dropzone-icon {
  transform: translateY(-2px);
}

.builder-context-banner-ref-dropzone-title {
  font-size: 13px;
  color: var(--ink-1);
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}
.builder-context-banner-ref-dropzone-cta {
  /* Texto del CTA "haz click para subir" — color de brand pleno para que
     contraste sobre el surface del dropzone. `--accent-ink` (navy oscuro
     en dark theme) es para texto que va ENCIMA de un fondo accent, no acá. */
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--accent) 55%, transparent);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.builder-context-banner-ref-dropzone-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.builder-context-banner-ref-dropzone-sep {
  color: var(--ink-4);
  opacity: 0.5;
}

.builder-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 1px 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  line-height: 1.4;
}

.builder-context-banner-ref-dropzone-formats {
  font-size: 9.5px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 2px 0 0;
  opacity: 0.7;
}

.builder-context-banner-ref-filename {
  font-size: 11.5px;
  color: color-mix(in oklch, var(--accent) 70%, var(--ink-1));
  word-break: break-all;
  font-weight: 500;
  margin-top: 10px;  /* aire vertical contra el borde inferior del dropzone */
}
.builder-context-banner-ref-filename:empty {
  display: none;
}

/* Status pill — variantes: dropi (info), custom (success), empty (warn).
   Tipografía mono compacta + padding ajustado para que el pill se sienta
   como una "etiqueta de estado", no como un banner. */
.builder-context-banner-ref-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}
.builder-context-banner-ref-pill-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  flex-shrink: 0;
}
.builder-context-banner-ref-pill[data-variant="dropi"] {
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  border-color: color-mix(in oklch, var(--accent) 25%, var(--line));
  color: color-mix(in oklch, var(--accent) 60%, var(--ink-1));
}
.builder-context-banner-ref-pill[data-variant="dropi"] .builder-context-banner-ref-pill-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 20%, transparent);
}
.builder-context-banner-ref-pill[data-variant="custom"] {
  background: color-mix(in oklch, var(--lime, #4ade80) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--lime, #4ade80) 30%, var(--line));
  color: color-mix(in oklch, var(--lime-ink, #166534) 100%, var(--ink-1));
}
.builder-context-banner-ref-pill[data-variant="custom"] .builder-context-banner-ref-pill-dot {
  background: var(--lime, #4ade80);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--lime, #4ade80) 22%, transparent);
}
.builder-context-banner-ref-pill[data-variant="empty"] {
  background: color-mix(in oklch, var(--amber, #f59e0b) 9%, var(--surface));
  border-color: color-mix(in oklch, var(--amber, #f59e0b) 32%, var(--line));
  color: color-mix(in oklch, var(--amber-ink, #b45309) 100%, var(--ink-1));
}
.builder-context-banner-ref-pill[data-variant="empty"] .builder-context-banner-ref-pill-dot {
  background: var(--amber, #f59e0b);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--amber, #f59e0b) 22%, transparent);
}

@media (max-width: 600px) {
  .builder-context-banner-ref-preview-col {
    width: 100%;
    justify-content: center;
  }
  .builder-context-banner-ref-preview,
  .builder-context-banner-ref-empty {
    width: 100%;
    max-width: 220px;
    height: 130px;
  }
  .builder-context-banner-ref-dropzone {
    min-width: 0;
    width: 100%;
  }
}

.builder-context-banner-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.builder-context-banner-countdown {
  font-size: 12px;
  color: var(--ink-3);
  padding: 6px 14px;
  background: color-mix(in oklch, var(--accent) 8%, var(--surface-2, var(--surface)));
  border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--line));
  border-radius: 999px;
  transition: background 0.3s ease;
}

@media (max-width: 600px) {
  .builder-context-banner { padding: 24px 22px 22px; }
  .builder-context-banner-actions { flex-direction: column-reverse; align-items: stretch; }
  .builder-context-banner-actions .btn-tracker,
  .builder-context-banner-actions .builder-context-banner-countdown {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .builder-context-banner { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   Wizard · Banner pre-arranque · 3 modos (radios) + CTAs slots vacíos
   ───────────────────────────────────────────────────────────────── */

/* Warning inline label */
.builder-context-banner-warn {
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--amber, #d4a017) 18%, transparent);
  color: var(--amber-ink, var(--amber, #d4a017));
  font-weight: 600;
  margin-left: 6px;
}

/* Fieldset de modos */
.builder-context-banner-modes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  padding: 0;
  margin: 0;
}

.builder-context-banner-modes-legend {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 4px;
  padding: 0;
}

.builder-context-banner-mode {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.builder-context-banner-mode:hover {
  border-color: color-mix(in oklch, var(--accent) 40%, var(--line));
}
.builder-context-banner-mode:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 14%, transparent);
}
.builder-context-banner-mode[data-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.builder-context-banner-mode[data-disabled="true"]:hover {
  border-color: var(--line);
}

.builder-context-banner-mode input[type="radio"] {
  margin: 3px 0 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.builder-context-banner-mode-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.builder-context-banner-mode-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.builder-context-banner-mode-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.builder-context-banner-mode-desc {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.builder-context-banner-mode-desc strong { color: var(--amber-ink, var(--amber, #d4a017)); }

/* ─── Slots vacíos del step 5 · CTAs grandes (Generar / Subir) ─── */

.builder-gallery-tile-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 18px;
}

.builder-gallery-tile-empty-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-1);
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
}
.builder-gallery-tile-empty-action:hover {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--line));
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  transform: translateY(-1px);
}

.builder-gallery-tile-empty-action--primary {
  background: var(--accent);
  color: var(--accent-ink, white);
  border-color: var(--accent);
}
.builder-gallery-tile-empty-action--primary:hover {
  background: color-mix(in oklch, var(--accent) 85%, black);
  border-color: color-mix(in oklch, var(--accent) 85%, black);
}

.builder-gallery-tile-empty-action svg { flex-shrink: 0; }

/* Cuando el slot está vacío, el frame ya no es zoom-in */
.builder-gallery-tile[data-status="pending"] .builder-gallery-tile-frame {
  cursor: default;
}
.builder-gallery-tile[data-status="pending"] .builder-gallery-tile-frame:hover {
  transform: none;
  box-shadow: none;
}

/* Input file oculto de forma accesible (no se ve pero responde a focus
   y a click programático). Usado en el banner pre-arranque del step 4. */
.builder-context-banner-ref-file-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Step 5 · Galería agrupada por sección de la landing ────────────
   El step 5 ya no muestra un grid plano de 10 tiles: los renderiza
   agrupados por sección (Hero / Dolor / Solución / Beneficios /
   Antes-Después / Cómo se usa / Sellos). Cada grupo tiene header con
   título + caption + contador, y debajo el mismo grid existente. */
.builder-gallery-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
}

.builder-gallery-group + .builder-gallery-group {
  border-top: 1px dashed var(--line);
  padding-top: 28px;
  margin-top: 4px;
}

.builder-gallery-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.builder-gallery-group-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.builder-gallery-group-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink-1);
}

.builder-gallery-group-caption {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
}

.builder-gallery-group-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.builder-gallery-group-count[data-complete="true"] {
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 35%, var(--line));
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
}

/* Grupos con un solo tile (Dolor/Solución/Beneficios/etc.): el tile
   solitario ocuparía toda una columna del grid de 4 y dejaría 3
   columnas vacías a la derecha. Lo limitamos a ~quarter del ancho
   para que se vea como un detalle, no como un placeholder. */
.builder-gallery-group .builder-gallery-grid:has(> .builder-gallery-tile:only-child) {
  grid-template-columns: minmax(0, 320px);
  justify-content: start;
}
@media (max-width: 800px) {
  .builder-gallery-group .builder-gallery-grid:has(> .builder-gallery-tile:only-child) {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   B7 — Dashboard de salud del bundle (step 7 del wizard, 2026-05-20)
   ────────────────────────────────────────────────────────────────────────── */

/* LED red para el eyebrow cuando hay críticos sin resolver. */
.builder-led--red {
  background: var(--rust);
  box-shadow: 0 0 8px color-mix(in oklch, var(--rust) 50%, transparent);
}
.builder-led--green {
  background: var(--lime);
  box-shadow: 0 0 8px color-mix(in oklch, var(--lime) 50%, transparent);
}

/* Grid de 4 stats arriba del dashboard. */
.builder-health-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0 28px;
}
@media (max-width: 800px) {
  .builder-health-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.builder-health-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.builder-health-stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.builder-health-stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.builder-health-stat-value[data-status="fail"] {
  color: var(--rust);
}
.builder-health-stat-value[data-status="pass"] {
  color: var(--lime-ink);
}

/* Grid de 2 cards (Tier 1 + Tier 2). En mobile colapsa a stack. */
.builder-health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 960px) {
  .builder-health-grid {
    grid-template-columns: 1fr;
  }
}

/* Cards de Tier 1 y Tier 2 — mismo wrapper. */
.builder-health-tier1-card,
.builder-health-tier2-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 240px;
}
.builder-health-card-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--line) 60%, transparent);
}
.builder-health-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}
.builder-health-card-cost {
  font-size: 11px;
  color: var(--ink-4);
  font-weight: 400;
}
.builder-health-card-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-4);
}

/* Lista de chequeos dentro de cada card. */
.builder-health-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.builder-health-check {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  background: color-mix(in oklch, var(--surface) 50%, var(--bg));
  border: 1px solid color-mix(in oklch, var(--line) 50%, transparent);
  border-radius: 10px;
}
.builder-health-check--ok {
  color: var(--lime-ink);
}
.builder-health-check--warning {
  color: var(--amber-ink);
  background: color-mix(in oklch, var(--amber) 5%, var(--surface));
  border-color: color-mix(in oklch, var(--amber) 25%, var(--line));
}
.builder-health-check--critical {
  color: var(--rust-ink);
  background: color-mix(in oklch, var(--rust) 5%, var(--surface));
  border-color: color-mix(in oklch, var(--rust) 30%, var(--line));
}
.builder-health-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.builder-health-check-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.builder-health-check-label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.builder-health-check-detail {
  margin: 0;
  font-size: 12px;
  color: var(--ink-4);
  line-height: 1.45;
}
.builder-health-check-cta {
  flex-shrink: 0;
}

/* Loader inline del Tier 2 (mientras el LLM responde). */
.builder-health-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 16px;
  min-height: 160px;
}
.builder-health-loader-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid color-mix(in oklch, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: builder-health-spin 0.9s linear infinite;
}
@keyframes builder-health-spin {
  to { transform: rotate(360deg); }
}
.builder-health-loader-message {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

/* Estado de error del Tier 2. */
.builder-health-error {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: color-mix(in oklch, var(--rust) 5%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--rust) 25%, var(--line));
  border-radius: 10px;
}
.builder-health-error-msg {
  margin: 0;
  font-size: 13px;
  color: var(--rust-ink);
}
.builder-health-empty {
  margin: 16px 0;
  font-size: 13px;
  color: var(--ink-4);
  text-align: center;
}

/* Acciones del footer del dashboard (preview + re-analizar). */
.builder-health-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Bloqueo del botón "Continuar a publicar" cuando hay críticos. */
.btn-tracker--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.builder-blocked-hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--rust-ink);
  font-style: italic;
}

/* Variant chiquito del btn-tracker para CTAs de chequeos. */
.btn-tracker--sm {
  padding: 6px 10px;
  font-size: 11.5px;
  border-radius: 8px;
}

/* ════════════════════════════════════════════════════════════════════
   Auth pages — login / signup / account / admin invites (Fase 0.3-A)
   ────────────────────────────────────────────────────────────────────
   Sistema mínimo dedicado para forms de auth, alineado al design system
   (tokens, Bricolage display, Inter Tight body). Las páginas auth viven
   bajo `.tt-canvas--locked` (sin sidebar) y rentan estos componentes.
   ════════════════════════════════════════════════════════════════════ */

.auth-shell {
  max-width: 480px;
  margin: 8vh auto 0;
  padding: 24px 16px 96px;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.auth-brand .sb-brand-mark {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  font-size: 34px;
}
.auth-brand-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.auth-brand-name em {
  font-style: normal;
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: var(--accent);
  display: inline-block;
  padding-right: 0.06em;
}

.auth-card {
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.auth-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
  margin: 10px 0 12px;
}
.auth-subtitle {
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* ─── Form fields ─── */
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.auth-input {
  /* Input "glass" alineado al design system: surface-2 + border line-2 +
     focus con accent. Sin gradients, sin shadows decorativos. */
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color 180ms var(--ease-spring), background 180ms var(--ease-spring);
  box-sizing: border-box;
}
.auth-input::placeholder { color: var(--ink-4); }
.auth-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.auth-input[aria-invalid="true"] {
  border-color: var(--rust, #c4554d);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rust, #c4554d) 18%, transparent);
}

/* Select estilizado del design system: oculta la flecha nativa (que se pega al
   borde) y pinta un chevron propio separado del borde derecho. Theme-adaptive
   (currentColor) + acento en focus. Reusable para cualquier <select.auth-input>. */
.auth-select-wrap { position: relative; display: block; }
.auth-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.auth-select::-ms-expand { display: none; }
.auth-select-chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  pointer-events: none;
  transition: color 180ms var(--ease-spring);
}
.auth-select-wrap:focus-within .auth-select-chevron { color: var(--accent); }
.auth-field-hint {
  color: var(--ink-4);
  font-size: 12px;
  line-height: 1.5;
  margin: 2px 0 0;
}
.auth-field-error {
  color: var(--rust, #c4554d);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 2px 0 0;
}

/* ─── Submit + secondary actions ─── */
.auth-submit {
  margin-top: 8px;
  height: 44px;
  font-size: 14px;
  width: 100%;
  justify-content: center;
}
.auth-meta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  color: var(--ink-4);
  line-height: 1.6;
}
.auth-meta a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.auth-meta a:hover { text-decoration: underline; }

/* ─── Banner de mensajes (success / error / info) ─── */
.auth-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.auth-banner-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
/* Fondos con tokens `oklch` SÓLIDOS (opacos en ambos temas), NO `color-mix`:
   Safari < 16.2 / iOS no parsea `color-mix` → descarta toda la línea `background`
   → el banner quedaba transparente e ilegible en desktop y mobile. `--rust-soft`
   y `--lime-soft` ya son oklch opacos por tema; info usa un oklch análogo. */
.auth-banner--success {
  background: var(--lime-soft);
  border: 1px solid var(--lime);
  color: var(--ink);
}
.auth-banner--success .auth-banner-icon {
  background: var(--lime, #6ea861);
  color: #fff;
}
.auth-banner--error {
  background: var(--rust-soft);
  border: 1px solid var(--rust);
  color: var(--ink);
}
.auth-banner--error .auth-banner-icon {
  background: var(--rust, #c4554d);
  color: #fff;
}
.auth-banner--info {
  background: oklch(0.95 0.05 257);
  border: 1px solid var(--accent);
  color: var(--ink);
}
[data-theme="dark"] .auth-banner--info {
  background: oklch(0.32 0.10 257);
}
.auth-banner--info .auth-banner-icon {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ─── Code chip (para mostrar invite_code copyable) ─── */
.auth-code-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px dashed var(--accent);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  user-select: all;
}

/* ════════════════════════════════════════════════════════════════════
   Topbar user chip — dropdown con email + role + Mi cuenta + Logout
   ════════════════════════════════════════════════════════════════════ */

.topbar-user {
  position: relative;
  margin-left: 4px;
}
.topbar-user-trigger {
  /* `<summary>` styles base — debe verse como un button. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
  transition: background 160ms var(--ease-spring), border-color 160ms var(--ease-spring);
}
.topbar-user-trigger::-webkit-details-marker { display: none; }
.topbar-user-trigger:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.topbar-user-mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0;
}
.topbar-user-email {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-user-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 2px 6px;
  border-radius: 6px;
}
.topbar-user[open] .topbar-user-trigger {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.topbar-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  /* Fondo OPACO: `--surface` es glass translúcido (en oscuro rgba blanco .045)
     y dejaba ver el contenido a través del menú → texto ilegible. Los popovers
     del proyecto usan `--bg` opaco; sumamos blur para conservar la estética. */
  background: var(--bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
  animation: fadeInDrop 180ms var(--ease-spring);
}
/* Variante "up": cuando el trigger está cerca del fondo del viewport, el
   menú abre HACIA ARRIBA. Se aplica via JS con data-menu-direction="up"
   sobre el <details>. */
.topbar-user[data-menu-direction="up"] .topbar-user-menu {
  top: auto;
  bottom: calc(100% + 8px);
  animation: fadeInDropUp 180ms var(--ease-spring);
}
@keyframes fadeInDrop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDropUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.topbar-user-menu-item {
  /* Compartido por <a> y <button> dentro del menú. */
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease;
}
.topbar-user-menu-item:hover { background: var(--surface-2); color: var(--accent); }
.topbar-user-menu-item--logout {
  color: var(--rust, #c4554d);
}
.topbar-user-menu-item--logout:hover {
  background: color-mix(in oklab, var(--rust, #c4554d) 12%, var(--surface));
  color: var(--rust, #c4554d);
}
.topbar-user-menu-form { display: contents; }
.topbar-user-menu-meta {
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   Admin invites mini-panel (Día 2)
   ════════════════════════════════════════════════════════════════════ */
.invites-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.invites-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-2);
}
.invites-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.invites-table tr:last-child td { border-bottom: 0; }
.invites-table-status--used { color: var(--ink-4); }
.invites-table-status--active { color: var(--lime, #6ea861); font-weight: 500; }
.invites-table-status--expired { color: var(--rust, #c4554d); }

/* La tabla de invites (6 columnas) se desborda en mobile. A ≤520px la
   convertimos en cards apiladas: cada fila es una card y cada celda una fila
   `label · valor` (el label sale de `data-label` vía `::before`). */
@media (max-width: 520px) {
  .invites-table { font-size: 14px; }
  .invites-table thead { display: none; }
  .invites-table,
  .invites-table tbody { display: block; width: 100%; }
  .invites-table tr {
    display: block;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-card);
    background: var(--surface-2);
    padding: 4px 14px;
    margin-bottom: 12px;
  }
  .invites-table tr:last-child { margin-bottom: 0; }
  .invites-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    text-align: right;
    word-break: break-word;
  }
  .invites-table tr td:last-child { border-bottom: 0; }
  .invites-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-4);
    text-align: left;
  }
  /* Celda de acción: sin label; el botón Revocar ocupa el ancho. Cuando la fila
     ya está usada/expirada el `<td>` queda vacío → no se muestra. */
  .invites-table-action:empty { display: none; }
  .invites-table-action { justify-content: flex-end; }
  .invites-table-action .tt-btn { width: 100%; justify-content: center; }
}

/* ── Créditos (Fase 0.8b) — badge del sidebar + banner de insuficiencia + página /account/credits ── */
.sb-credits {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 10px 0; padding: 8px 10px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface-2, rgba(255,255,255,0.02));
  color: var(--ink-2); text-decoration: none; font-size: 12.5px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sb-credits:hover { border-color: var(--accent); background: var(--surface-3, rgba(255,255,255,0.04)); }
.sb-credits-glyph { color: var(--accent); font-size: 14px; flex-shrink: 0; }
.sb-credits-text b { color: var(--ink); font-weight: 600; }
.sb-credits--low { border-color: var(--rust, #c4554d); }
.sb-credits--low .sb-credits-glyph { color: var(--rust, #c4554d); }
/* Colapsado: el estado real en runtime es `.app[data-collapsed="true"]` (el
   `data-sidebar-collapsed` de <html> es solo el hint anti-FOUC del pre-paint y
   NO se mantiene sincronizado tras el toggle). Con el selector viejo el texto
   nunca se ocultaba → el badge se desbordaba del sidebar de 76px. Centramos el
   glyph igual que los `.sb-link`. */
.app[data-collapsed="true"] .sb-credits {
  justify-content: center;
  gap: 0;
  padding: 8px 0;
}
.app[data-collapsed="true"] .sb-credits-text { display: none; }

.credits-banner {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid var(--rust, #c4554d); border-radius: 12px;
  background: color-mix(in srgb, var(--rust, #c4554d) 8%, var(--surface));
  color: var(--ink); font-size: 14px; line-height: 1.5;
}
.credits-banner-glyph { color: var(--rust, #c4554d); font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.credits-banner-body { flex: 1; }
.credits-banner-body b { font-weight: 600; }
.credits-banner-link { color: var(--accent); text-decoration: none; font-weight: 500; margin-left: 6px; white-space: nowrap; }
.credits-banner-link:hover { text-decoration: underline; }
.credits-banner-close {
  background: none; border: 0; color: var(--ink-4); font-size: 16px;
  cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.credits-banner-close:hover { color: var(--ink); }

.credits-page-balance {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 2px;
}
.credits-page-balance-num { font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--ink); line-height: 1; }
.credits-page-balance-of { color: var(--ink-3); font-size: 15px; }
.credits-meter { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin: 12px 0 4px; }
.credits-meter-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.3s ease; }
.credits-meter-fill--low { background: var(--rust, #c4554d); }
.credits-tx-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.credits-tx-table th { text-align: left; padding: 8px; color: var(--ink-4); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.credits-tx-table td { padding: 10px 8px; border-top: 1px solid var(--line-2); color: var(--ink-2); }
.credits-tx-amount--pos { color: var(--lime, #6ea861); font-weight: 500; }
.credits-tx-amount--neg { color: var(--rust, #c4554d); font-weight: 500; }

/* ======================================================================
   LISTA DENSA de creativos (Meta Ads + TikTok organic) — rediseño 2026-06-02
   Reemplaza las cards apiladas por filas tipo tabla escaneables, con un
   menú "⋯" por fila (popover `position:fixed` por JS, así escapa el
   `overflow:hidden` de `.meta-ads-bucket`). Clases compartidas `cdense-*`;
   las columnas cambian por sección con `.cdense-list--meta/--tiktok`.
   ====================================================================== */
.cdense-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.cdense-head {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 9px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
}
.cdense-row {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent; /* spine: winner / selección */
  transition: background 120ms ease, border-color 120ms ease;
}
.cdense-row:last-child { border-bottom: 0; }
.cdense-row:hover { background: var(--surface-2); }
.cdense-row--winner { border-left-color: var(--amber); }
/* columnas por sección */
.cdense-list--meta .cdense-head,
.cdense-list--meta .cdense-row { grid-template-columns: 52px minmax(0, 1fr) 104px 118px 64px; }
.cdense-list--tiktok .cdense-head,
.cdense-list--tiktok .cdense-row { grid-template-columns: 46px minmax(0, 1fr) 96px 64px; }
.cdense-col--right { text-align: right; }

/* ── TikTok · registros estilo Meta (tarjetas separadas, 2026-06-09) ──
   El operador pidió que la lista de videos se vea como los registros de Meta
   (madl): tarjetas redondeadas con borde + gap entre ellas, sin encabezado de
   columnas ni divisores continuos. Scopeado a `--tiktok` para NO afectar el
   cdense compartido (Meta usa `.madl-*`; los botones .cdense-actions/iconbtn/
   menu siguen idénticos en ambas). */
.cdense-list--tiktok {
  border: 0; background: transparent; box-shadow: none; border-radius: 0;
  overflow: visible; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 12px;
}
.cdense-list--tiktok .cdense-head { display: none; }
.cdense-list--tiktok .cdense-row {
  gap: 11px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface);
}
.cdense-list--tiktok .cdense-row:hover { background: var(--surface); border-color: var(--line-2); }
.cdense-list--tiktok .cdense-thumb { width: 46px; height: 46px; border-radius: 10px; }
.cdense-list--tiktok .cdense-name { font-size: 13px; font-weight: 700; }
.cdense-list--tiktok .cdense-sub { font-family: var(--font-sans); font-size: 11.5px; }

/* miniatura del creativo (click → modal de video/imagen) */
.cdense-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}
.cdense-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 160ms; }
.cdense-thumb:hover img { filter: brightness(1.08); }
.cdense-thumb-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ink-5); font-size: 1.05rem; }
.cdense-thumb-play {
  position: absolute; inset: 0; margin: auto;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.cdense-thumb-play svg { width: 13px; height: 13px; margin-left: 1px; }

/* anunciante / creador + sublínea */
.cdense-namecell { min-width: 0; }
.cdense-name { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.cdense-name a { color: inherit; text-decoration: none; }
.cdense-name a:hover { color: var(--accent); }
.cdense-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdense-variant {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; color: var(--accent);
  background: var(--accent-soft); border-radius: var(--radius-pill); padding: 1px 7px; cursor: help;
}
.cdense-sub {
  margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdense-sub .cdense-cta { text-transform: uppercase; letter-spacing: 0.04em; }
.cdense-sub .sep { color: var(--ink-5); margin: 0 6px; }

/* Tag de canal de tráfico del anuncio (hacia dónde lleva el botón). Aparece
   junto al nombre en las filas cdense y junto a los badges en las filas madl.
   Landing = tienda propia (accent) · WhatsApp = cierre por chat (verde lima) ·
   Otro = redes/agregador/marketplace/sin enlace (neutro). */
.meta-ads-section .traffic-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  cursor: help;
}
.meta-ads-section .traffic-tag--landing { background: var(--accent-soft); color: var(--accent); }
.meta-ads-section .traffic-tag--whatsapp { background: var(--lime-soft); color: var(--lime-ink); }
.meta-ads-section .traffic-tag--other { background: var(--surface-2); color: var(--ink-4); }
/* Mercado extranjero (la IA detectó otro país) — ámbar de precaución. */
.meta-ads-section .traffic-tag--foreign { background: var(--amber-soft); color: var(--amber-ink); }

/* métricas: precio / antigüedad / likes */
.cdense-metric { font-family: var(--font-mono); min-width: 0; }
.cdense-metric-main { font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.cdense-metric-main.is-price { color: var(--lime); }
.cdense-metric-sub { font-size: 10px; color: var(--ink-5); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; white-space: nowrap; }
.cdense-winner { display: block; font-size: 10.5px; color: var(--amber); font-weight: 600; margin-top: 1px; white-space: nowrap; }

/* acciones (Ver ad ↗ + menú ⋯) */
.cdense-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.cdense-iconbtn {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; text-decoration: none; transition: background 120ms, color 120ms; font-family: var(--font-sans);
}
.cdense-iconbtn:hover { background: var(--surface-3); color: var(--accent); }

/* menú flotante por fila */
.cdense-menu {
  position: fixed; z-index: 1000; min-width: 234px; padding: 6px;
  /* Fondo SÓLIDO: `--surface` es glass translúcido en dark (token trap) → el
     menú se veía transparente. `--bg` es opaco en ambos temas; borde + sombra
     lo despegan del contenido. */
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-btn);
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 2px;
}
.cdense-menu[hidden] { display: none; }
.cdense-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-2); text-decoration: none;
}
.cdense-menu-item:hover { background: var(--surface-2); color: var(--ink); }
.cdense-menu-item input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.cdense-menu-item:has(input:checked) { color: var(--accent); }
.cdense-menu-item--done { color: var(--lime); cursor: default; }
.cdense-menu-icon { width: 16px; text-align: center; color: var(--ink-4); flex-shrink: 0; }
.cdense-menu-sep { height: 1px; background: var(--line); margin: 4px 2px; }

/* ============================================================
   Meta Ads — mobile (≤600px): selector de país como dropdown +
   bottom sheet (Opción B), listado de anuncios reflowado a card,
   modal/banner bulk como sheet. Desktop intacto. (2026-06-05)
   ============================================================ */
.meta-ads-country-dropdown { display: none; }

/* Sheet de país: estilos del contenido (se renderiza dentro del <dialog>;
   en desktop el dialog está cerrado, no afecta nada). */
.meta-ads-sheet-grip { display: none; width: 40px; height: 4px; border-radius: 9px; background: var(--line-2); margin: 2px auto 12px; }
.meta-ads-sheet-list { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; margin: 0 -4px; }
.meta-ads-sheet-row { display: flex; align-items: center; gap: 11px; padding: 12px 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; cursor: pointer; }
.meta-ads-sheet-row:last-child { border-bottom: 0; }
.meta-ads-sheet-row--active { background: var(--accent-soft); border-radius: 10px; border-bottom-color: transparent; }
.meta-ads-sheet-row-flag { font-size: 19px; line-height: 1; }
.meta-ads-sheet-row-name { flex: 1; }
.meta-ads-sheet-row-tag { font-family: var(--font-mono); font-size: 10px; padding: 2px 9px; border-radius: var(--radius-pill); }
.meta-ads-sheet-row-tag--active { color: var(--accent); background: var(--accent-soft); }
.meta-ads-sheet-row-tag--done { color: #7fdc93; }
.meta-ads-sheet-row-tag--running { color: var(--accent); }
.meta-ads-sheet-multi { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 13px; border: 1px dashed var(--line-2); border-radius: 13px; background: transparent; color: var(--ink-2); font-family: var(--font-sans); font-size: 14px; cursor: pointer; }
.meta-ads-sheet-multi:hover { border-color: var(--accent); color: var(--accent); }

@keyframes meta-ads-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (max-width: 600px) {
  /* ── Selector de país: tabs → dropdown + sheet ── */
  .meta-ads-country-tabs { display: none; }
  .meta-ads-country-dropdown {
    display: flex; align-items: center; justify-content: space-between;
    /* margin-bottom: separa el dropdown del texto de apoyo de abajo (idle
       "Busca en Meta Ad Library…", cache, etc.), igual que los tabs en desktop. */
    width: 100%; box-sizing: border-box; margin: 0.9rem 0 1rem;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px;
    background: var(--surface-2); color: var(--ink); font-family: var(--font-sans); font-size: 15px; cursor: pointer;
  }
  .meta-ads-country-dropdown-current { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
  .meta-ads-country-dropdown-current > span:not(.meta-ads-country-dropdown-done) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .meta-ads-country-dropdown-done { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: #7fdc93; flex-shrink: 0; }
  .meta-ads-country-dropdown-chev { color: var(--ink-4); flex-shrink: 0; }

  /* ── Botones de análisis: full-width apilados (en vez de auto-width sueltos
     que se veían desalineados). Primario prominente; secundarios debajo. ── */
  .meta-ads-controls { flex-direction: column; align-items: stretch; gap: 9px; }
  .meta-ads-controls .btn-tracker { width: 100%; justify-content: center; }

  /* ── Modal/sheet como bottom sheet (país + bulk + full) ── */
  .meta-ads-modal[open] {
    inset: auto 0 0 0; margin: 0;
    width: 100%; max-width: none; max-height: 90vh; height: auto;
    border: 0; border-top: 1px solid var(--line-2);
    border-radius: 20px 20px 0 0;
    background: var(--bg);
    animation: meta-ads-sheet-up 220ms cubic-bezier(.2, .7, .2, 1);
  }
  .meta-ads-modal-content { padding: 10px 16px 22px; }
  .meta-ads-sheet-grip { display: block; }

  /* ── Listado de anuncios: fila densa → card apilada ──
     Stack vertical: thumb a la izquierda (span), nombre + acciones arriba,
     precio y antigüedad en línea completa debajo. Evita que el nombre haga
     span sobre las columnas de métrica y las colapse (clipping del sub). */
  .cdense-list--meta .cdense-head { display: none; }
  .cdense-list--meta .cdense-row {
    grid-template-columns: 48px 1fr auto;
    grid-template-areas:
      "thumb name  actions"
      "thumb price price"
      "thumb age   age";
    gap: 3px 12px;
    padding: 12px 14px;
  }
  .cdense-list--meta .cdense-row > .cdense-thumb { grid-area: thumb; align-self: start; width: 48px; height: 48px; }
  .cdense-list--meta .cdense-row > .cdense-namecell { grid-area: name; align-self: center; }
  .cdense-list--meta .cdense-row > .cdense-metric { grid-area: price; display: flex; align-items: baseline; gap: 6px; }
  .cdense-list--meta .cdense-row > .cdense-metric ~ .cdense-metric { grid-area: age; }
  .cdense-list--meta .cdense-row > .cdense-actions { grid-area: actions; align-self: start; }
  .cdense-list--meta .cdense-col--right { text-align: left; }
  .cdense-list--meta .cdense-sub { white-space: normal; }
  .cdense-list--meta .cdense-metric-sub { margin-top: 0; }
  .cdense-list--meta .cdense-winner { display: inline; margin-left: 6px; }

  /* ── Listado de TikTok: misma card apilada (1 métrica: likes) ── */
  .cdense-list--tiktok .cdense-head { display: none; }
  .cdense-list--tiktok .cdense-row {
    grid-template-columns: 48px 1fr auto;
    grid-template-areas:
      "thumb name  actions"
      "thumb likes likes";
    gap: 3px 12px;
    padding: 12px 14px;
  }
  .cdense-list--tiktok .cdense-row > .cdense-thumb { grid-area: thumb; align-self: start; width: 48px; height: 48px; }
  .cdense-list--tiktok .cdense-row > .cdense-namecell { grid-area: name; align-self: center; }
  .cdense-list--tiktok .cdense-row > .cdense-actions { grid-area: actions; align-self: start; }
  .cdense-list--tiktok .cdense-row > .cdense-metric { grid-area: likes; display: flex; align-items: baseline; gap: 6px; }
  .cdense-list--tiktok .cdense-col--right { text-align: left; }
  .cdense-list--tiktok .cdense-sub { white-space: normal; }
  .cdense-list--tiktok .cdense-metric-sub { margin-top: 0; }

  /* ── Banner de progreso paralelo: chips → filas legibles con aire ──
     Antes quedaban boxeadas (el border accent del chip) y el % pegado al
     borde. Ahora: filas full-width sin el outline azul ruidoso, más padding
     vertical, y la fase/% separados del borde derecho. Conserva el tinte de
     fondo por fase (cola/scrapeando/IA/listo) como señal de estado. */
  .meta-ads-bulk-banner { padding: 0.9rem 0.8rem; }
  .meta-ads-bulk-banner-head { align-items: flex-start; gap: 0.6rem; }
  .meta-ads-bulk-banner-label { font-size: 0.85rem; }
  .meta-ads-bulk-banner-list { flex-direction: column; gap: 0.3rem; }
  .meta-ads-bulk-banner-chip {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem !important;
    border-color: transparent !important;
  }
  .meta-ads-bulk-banner-chip-phase { margin-left: auto; padding-left: 0.5rem; }
  .meta-ads-bulk-banner-chip-pct { padding-left: 0.4rem; }

  /* Textos de apoyo: que no queden pegados al borde derecho del contenedor. */
  .meta-ads-section .tracker-section-sub { padding-right: 0.15rem; }
  .meta-ads-progress { padding: 0.9rem 1rem; }
}

/* ── Teaser "Desbloquea más herramientas" (2026-06-05) ──────────────────────
   Las secciones que dependen de un análisis previo (copys IA, contenido visual
   de competencia, descarga de creativos) van ocultas hasta que ese análisis
   exista. Este teaser le avisa al user que están ahí y se encoge a medida que se
   desbloquean. Pensado para verse bien en mobile y desktop. */
.tools-unlock { margin: 1.5rem 0; }
.tools-unlock[hidden] { display: none; }

.tools-unlock-card {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  padding: 1.15rem 1.3rem;
}

.tools-unlock-head {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}
.tools-unlock-badge {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.tools-unlock-head-text { min-width: 0; }
.tools-unlock-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.tools-unlock-sub {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.2rem 0 0;
  line-height: 1.45;
}

.tools-unlock-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.tools-unlock-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-chip);
  background: var(--surface);
  border: 1px solid var(--line);
}
.tools-unlock-item-icon {
  flex: 0 0 auto;
  color: var(--ink-4);
  display: grid;
  place-items: center;
}
.tools-unlock-item-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.tools-unlock-item-text strong {
  color: var(--ink);
  font-weight: 600;
}
.tools-unlock-item-req {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .tools-unlock { margin: 1.1rem 0; }
  .tools-unlock-card { padding: 1rem 1.05rem; }
  /* En mobile: icono + chip de requisito en la 1ª línea, texto debajo a todo
     el ancho — evita que el texto largo apriete el chip "Meta o TikTok". */
  .tools-unlock-item { flex-wrap: wrap; }
  .tools-unlock-item-icon { order: 1; }
  .tools-unlock-item-req { order: 1; margin-left: auto; }
  .tools-unlock-item-text { order: 2; flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Meta Ads — master-detail de anuncios (rediseño 2026-06-06)
   Lista de filas/acordeón a la izquierda + panel de detalle a la derecha.
   Todo scopeado bajo .meta-ads-section (donde --accent ya está re-escopeado).
   ═══════════════════════════════════════════════════════════════════════════ */
.meta-ads-section .madl { margin-top: 14px; }

/* Toolbar: filtros + orden */
.meta-ads-section .madl-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.meta-ads-section .madl-toolbar-spacer { flex: 1; }
.meta-ads-section .madl-chip {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line-2);
  padding: 7px 12px; border-radius: var(--radius-pill); cursor: pointer;
  transition: .12s; white-space: nowrap;
}
.meta-ads-section .madl-chip:hover { border-color: var(--accent); color: var(--accent); }
.meta-ads-section .madl-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Dropdown de orden custom */
.meta-ads-section .madl-sort { position: relative; }
.meta-ads-section .madl-sort-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px; transition: .12s;
}
.meta-ads-section .madl-sort-btn:hover,
.meta-ads-section .madl-sort.is-open .madl-sort-btn { border-color: var(--accent); color: var(--accent); }
.meta-ads-section .madl-sort-car { font-size: 10px; color: var(--ink-4); transition: transform .2s; }
.meta-ads-section .madl-sort.is-open .madl-sort-car { transform: rotate(180deg); color: var(--accent); }
.meta-ads-section .madl-sort-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; z-index: 20;
  /* fondo OPACO: `--surface` es vidrio (rgba transparente) en oscuro → el menú
     flota sobre la lista y el texto de abajo se transparentaba. Compuesto:
     base `--bg` opaca + tinte `--surface` encima. Funciona en ambos temas. */
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface), var(--surface));
  border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: var(--shadow-2); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.meta-ads-section .madl-sort-menu[hidden] { display: none; }
.meta-ads-section .madl-sort-opt {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: transparent; border: 0; border-radius: 9px; padding: 9px 12px;
  text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.meta-ads-section .madl-sort-opt:hover { background: var(--surface-2); }
.meta-ads-section .madl-sort-opt.is-on { background: var(--accent-soft); color: var(--accent); }
.meta-ads-section .madl-sort-opt .chk { font-size: 12px; opacity: 0; }
.meta-ads-section .madl-sort-opt.is-on .chk { opacity: 1; }

/* Encabezado de bucket */
.meta-ads-section .madl-bucket-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.meta-ads-section .madl-bucket-head h3 { font-size: 14px; font-weight: 700; margin: 0; }
.meta-ads-section .madl-bucket-hint { font-size: 12px; color: var(--ink-4); margin-left: auto; }

/* Lista a ancho completo (sin panel de detalle desde 2026-06-07) */
.meta-ads-section .madl-listcol { min-width: 0; }
.meta-ads-section .madl-list { display: flex; flex-direction: column; gap: 8px; }
.meta-ads-section .madl-empty { color: var(--ink-5); font-size: 13px; padding: 20px; text-align: center; }

/* Fila */
.meta-ads-section .madl-row {
  /* Columnas de la derecha con ancho FIJO (precio / antigüedad / acciones) para
     que se alineen verticalmente en TODAS las filas. Con `auto` cada fila se
     dimensionaba sola y el precio/↗/⋯ zigzagueaban. El `<summary>` de variantes
     usa los mismos anchos (ver más abajo) para caer en el mismo borde. */
  display: grid; grid-template-columns: 46px 1fr 156px 56px 64px; gap: 11px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); transition: .1s;
}
.meta-ads-section .madl-row:hover { border-color: var(--line-2); }
.meta-ads-section .madl-thumb {
  width: 46px; height: 46px; border-radius: 10px; background: var(--surface-2); position: relative;
  flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 0; padding: 0; cursor: pointer;
}
.meta-ads-section .madl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.meta-ads-section .madl-thumb-play {
  position: absolute; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.meta-ads-section .madl-thumb-empty { color: var(--ink-5); font-size: 16px; }
.meta-ads-section .madl-main { min-width: 0; }
.meta-ads-section .madl-name { font-size: 13px; font-weight: 700; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Nombre de tienda landing como link directo a Shopify. Accent + flecha sutil
   para que se note que es clickeable; subraya en hover. */
.meta-ads-section .madl-store-link { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.meta-ads-section .madl-store-link:hover { text-decoration: underline; }
.meta-ads-section .madl-store-link-ico { font-size: 0.85em; opacity: 0.75; }
.meta-ads-section .madl-sub { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
/* Celda de precio con micro-etiqueta de contexto (problema 2). La etiqueta
   cambia según el origen real del precio: texto del anuncio vs landing. */
.meta-ads-section .madl-pcell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; min-width: 0; }
.meta-ads-section .madl-micro { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-5); line-height: 1; white-space: nowrap; }
.meta-ads-section .madl-price { font: 700 12px/1 var(--font-mono); color: var(--ink); white-space: nowrap; }
.meta-ads-section .madl-price--none { color: var(--ink-5); font-weight: 500; font-family: var(--font); font-size: 12px; }
/* País != CO: se OCULTA la columna de precio (la divisa extranjera confunde).
   `.madl-pcell` se esconde y los grids dejan de reservar la columna de 156px.
   Los grids mobile se restauran dentro del @media (ver más abajo). */
.meta-ads-section .madl--no-price .madl-pcell { display: none; }
.meta-ads-section .madl--no-price .madl-row { grid-template-columns: 46px 1fr 56px 64px; }
.meta-ads-section .madl--no-price .madl-group-summary { grid-template-columns: auto 1fr 131px; }
.meta-ads-section .madl-age { font-size: 12px; color: var(--ink-3); font-weight: 600; white-space: nowrap; text-align: right; }
.meta-ads-section .madl-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-pill); line-height: 1.5; }
.meta-ads-section .madl-badge--winner { background: var(--amber-soft); color: var(--amber-ink); }
.meta-ads-section .madl-badge--new { background: var(--lime-soft); color: var(--lime-ink); }
/* Badge de variantes (problema 3): señala las tiendas que corren A/B testing. */
.meta-ads-section .madl-badge--var { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
/* En el resumen de tienda multi-variante el badge "🔁 N variantes" se alinea a la
   DERECHA del nombre → forma una columna pareja entre filas (el nombre varía de
   largo). El 🏆 de ganador, que va detrás, queda pegado a su derecha. */
.meta-ads-section .madl-group-summary .madl-name .madl-badge--var { margin-left: auto; }
/* Chip de conteo integrado al título (problema 1): reemplaza el pill negro
   aislado por "N anuncios · M tiendas" que se lee con la información. */
.meta-ads-section .madl-count-chip { font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px 11px; display: inline-flex; align-items: center; gap: 6px; }
.meta-ads-section .madl-count-chip b { color: var(--ink); font-weight: 700; }
.meta-ads-section .madl-count-chip .sep { color: var(--ink-5); }
/* Utilidad de filtro: oculta de forma robusta aunque el elemento sea display:grid
   (el atributo [hidden] del UA no vence a un display declarado por el autor). */
.meta-ads-section .madl-hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Precios de la competencia · TIRA COMPACTA (rediseño 2026-06-08)
   Reemplaza la caja grande `.meta-ads-competitor-pricing`: una sola línea con
   los 2 números clave + veredicto + "Ver análisis" desplegable.
   ═══════════════════════════════════════════════════════════════════════════ */
.meta-ads-section .meta-ads-cps {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); background: var(--surface); border-radius: 13px;
  padding: 11px 14px; margin: 4px 0 18px;
}
.meta-ads-section .meta-ads-cps-ico { font-size: 16px; line-height: 1; }
.meta-ads-section .meta-ads-cps-pair { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.meta-ads-section .meta-ads-cps-pair .k { font-size: 13px; color: var(--ink-4); font-weight: 600; }
.meta-ads-section .meta-ads-cps-pair .v { font: 800 18px/1 var(--font-mono); color: var(--ink); }
.meta-ads-section .meta-ads-cps-pair .v--none { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink-5); }
.meta-ads-section .meta-ads-cps-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-5); flex: none; }
.meta-ads-section .meta-ads-cps-verdict { margin-left: 2px; }
.meta-ads-section .meta-ads-cps-info {
  margin-left: auto; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--accent);
  background: transparent; border: 0; cursor: pointer; padding: 2px 4px; white-space: nowrap;
}
.meta-ads-section .meta-ads-cps-info:hover { text-decoration: underline; }
.meta-ads-section .meta-ads-cps-detail { flex-basis: 100%; border-top: 1px solid var(--line); padding-top: 9px; margin-top: 2px; }
.meta-ads-section .meta-ads-cps-detail[hidden] { display: none; }
.meta-ads-section .meta-ads-cps-detail p { margin: 0 0 4px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.meta-ads-section .meta-ads-cps-detail p:last-child { margin-bottom: 0; }
.meta-ads-section .meta-ads-cps-detail .hint { font-size: 11.5px; color: var(--ink-5); }
.meta-ads-section .meta-ads-cps-detail a { color: var(--accent); }
@media (max-width: 760px) {
  /* Mobile: cada par (etiqueta + valor) en su propia fila con el valor a la
     derecha; el veredicto y "Ver análisis" comparten la última fila. */
  .meta-ads-section .meta-ads-cps { gap: 10px; }
  .meta-ads-section .meta-ads-cps-ico { display: none; }
  .meta-ads-section .meta-ads-cps-dot { display: none; }
  .meta-ads-section .meta-ads-cps-pair {
    flex-basis: 100%; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 12px;
  }
  .meta-ads-section .meta-ads-cps-pair .v { white-space: nowrap; }
  .meta-ads-section .meta-ads-cps-info { margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sinónimos usados en la búsqueda · COLAPSABLE (rediseño 2026-06-08)
   Reemplaza la grilla `.meta-ads-by-query`: un <details> cerrado por defecto
   con filas densas adentro.
   ═══════════════════════════════════════════════════════════════════════════ */
.meta-ads-section .meta-ads-synf {
  border: 1px solid var(--line); background: var(--surface); border-radius: 13px;
  margin: 22px 0 18px; overflow: hidden;
}
.meta-ads-section .meta-ads-synf > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.meta-ads-section .meta-ads-synf > summary::-webkit-details-marker { display: none; }
.meta-ads-section .meta-ads-synf-ico { color: var(--ink-4); flex: none; }
.meta-ads-section .meta-ads-synf-ttl { font-size: 13px; font-weight: 700; }
.meta-ads-section .meta-ads-synf-meta { font-size: 12px; color: var(--ink-4); }
.meta-ads-section .meta-ads-synf-mini { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.meta-ads-section .meta-ads-synf-mini .pill--match { font-size: 10.5px; font-weight: 700; color: var(--lime-ink); background: var(--lime-soft); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.meta-ads-section .meta-ads-synf-mini .car { font-size: 11px; color: var(--ink-4); transition: transform .2s; }
.meta-ads-section .meta-ads-synf[open] .meta-ads-synf-mini .car { transform: rotate(180deg); }
.meta-ads-section .meta-ads-synf-body { border-top: 1px solid var(--line); padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.meta-ads-section .meta-ads-synr-row {
  display: grid; grid-template-columns: 1fr 112px 92px 18px; gap: 12px; align-items: center;
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px;
  padding: 9px 12px; text-decoration: none; transition: .12s;
}
.meta-ads-section .meta-ads-synr-row:hover { border-color: var(--accent); }
.meta-ads-section .meta-ads-synr-row.is-zero { opacity: .5; }
.meta-ads-section .meta-ads-synr-q { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.meta-ads-section .meta-ads-synr-q .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-ads-section .meta-ads-synr-q svg { flex: none; color: var(--ink-5); }
/* conteos: números coloreados (sin símbolos), cada uno en su sub-columna
   alineada a la derecha → las 3 columnas de color quedan rectas entre filas. */
.meta-ads-section .meta-ads-synr-counts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font: 700 11.5px/1 var(--font-mono); }
.meta-ads-section .meta-ads-synr-counts .c-m,
.meta-ads-section .meta-ads-synr-counts .c-u,
.meta-ads-section .meta-ads-synr-counts .c-n { display: inline-block; min-width: 18px; text-align: right; }
.meta-ads-section .meta-ads-synr-counts .c-m { color: var(--lime-ink); }
.meta-ads-section .meta-ads-synr-counts .c-u { color: var(--amber-ink); }
.meta-ads-section .meta-ads-synr-counts .c-n { color: var(--ink-5); }
.meta-ads-section .meta-ads-synr-counts .sep { display: inline-block; min-width: 0; color: var(--ink-5); opacity: .6; }
.meta-ads-section .meta-ads-synr-tot { font: 700 12px/1 var(--font-mono); color: var(--ink-4); white-space: nowrap; text-align: right; }
.meta-ads-section .meta-ads-synr-go { color: var(--ink-4); font-size: 13px; text-align: right; }
@media (max-width: 760px) {
  .meta-ads-section .meta-ads-synr-row { grid-template-columns: 1fr auto auto; align-items: start; }
  .meta-ads-section .meta-ads-synr-tot { display: none; }
  .meta-ads-section .meta-ads-synf-meta { flex-basis: 100%; order: 3; }
  /* el sinónimo se ajusta a varias líneas en vez de cortarse con "…" */
  .meta-ads-section .meta-ads-synr-q { align-items: flex-start; }
  .meta-ads-section .meta-ads-synr-q svg { margin-top: 2px; }
  .meta-ads-section .meta-ads-synr-q .nm { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
}

/* Acordeón de variantes por tienda (<details>) */
.meta-ads-section .madl-group { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); overflow: hidden; }
.meta-ads-section .madl-group > summary { list-style: none; cursor: pointer; }
.meta-ads-section .madl-group > summary::-webkit-details-marker { display: none; }
.meta-ads-section .madl-group-summary {
  /* Mismo ancho de columna de precio (156px) que `.madl-row` para que el precio
     se alinee con las filas simples. La última columna (131px) = antigüedad(56) +
     acciones(64) + el gap(11) que las separa en las filas simples → así el precio
     cae exactamente en el mismo borde derecho en ambos tipos de fila. */
  display: grid; grid-template-columns: auto 1fr 156px 131px; gap: 11px; align-items: center; padding: 10px 12px;
}
/* el conteo + chevron del acordeón se alinea a la derecha (mismo borde que ↗/⋯) */
.meta-ads-section .madl-group-summary > .madl-acc { justify-self: end; }
.meta-ads-section .madl-group-summary:hover { background: var(--surface-2); }
.meta-ads-section .madl-thumbs { display: flex; flex: none; }
.meta-ads-section .madl-thumb-mini {
  width: 36px; height: 36px; border-radius: 8px; background: var(--surface-2) center/cover;
  border: 2px solid var(--surface); margin-left: -11px; box-shadow: var(--shadow-1);
}
.meta-ads-section .madl-thumb-mini:first-child { margin-left: 0; }
.meta-ads-section .madl-acc-inline, .meta-ads-section .madl-group .madl-acc { display: flex; align-items: center; gap: 6px; color: var(--ink-4); }
.meta-ads-section .madl-group .madl-acc-n { font: 600 11px/1 var(--font-mono); background: var(--surface-2); padding: 4px 7px; border-radius: var(--radius-pill); }
.meta-ads-section .madl-group .madl-acc-car { font-size: 11px; transition: transform .2s; }
.meta-ads-section .madl-group[open] .madl-acc-car { transform: rotate(180deg); }
.meta-ads-section .madl-group-body { border-top: 1px solid var(--line); background: var(--surface-2); }
.meta-ads-section .madl-group-body .madl-row { border: 0; border-radius: 0; background: transparent; border-top: 1px solid var(--line); padding-left: 16px; }
.meta-ads-section .madl-group-body .madl-row:first-child { border-top: 0; }
.meta-ads-section .madl-group-body .madl-thumb { width: 40px; height: 40px; }

/* Acordeones de recientes / dudosos */
.meta-ads-section .madl-acc { margin-top: 10px; border: 1px dashed var(--line-2); border-radius: 12px; overflow: hidden; }
.meta-ads-section .madl-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.meta-ads-section .madl-acc > summary::-webkit-details-marker { display: none; }
.meta-ads-section .madl-acc > summary:hover { color: var(--accent); }
.meta-ads-section .madl-acc--uncertain > summary { color: var(--amber-ink); }
.meta-ads-section .madl-acc-count { margin-left: auto; font: 600 11px/1 var(--font-mono); background: var(--surface-2); color: var(--ink-3); padding: 4px 8px; border-radius: var(--radius-pill); }
.meta-ads-section .madl-acc-body { padding: 4px 10px 12px; }
.meta-ads-section .madl-acc-note { font-size: 11.5px; color: var(--ink-5); margin: 2px 2px 10px; }
.meta-ads-section .madl-acc-note b { color: var(--ink-3); }
.meta-ads-section .madl-acc--uncertain .madl-acc-note b { color: var(--amber-ink); }

/* Mobile: chips de filtro + orden full-width */
@media (max-width: 760px) {
  .meta-ads-section .madl-toolbar-spacer { display: none; }
  .meta-ads-section .madl-sort { width: 100%; order: 9; margin-top: 2px; }
  .meta-ads-section .madl-sort-btn { width: 100%; justify-content: space-between; }
  .meta-ads-section .madl-sort-menu { left: 0; right: 0; min-width: 0; }

  /* El chip de conteo baja a su propia línea bajo el título para no apretar. */
  .meta-ads-section .madl-bucket-head { flex-wrap: wrap; }
  .meta-ads-section .madl-bucket-hint { flex-basis: 100%; margin-left: 0; }

  /* Reflujo a 2 líneas: el nombre + texto arriba; precio etiquetado +
     antigüedad bajan debajo. Así el nombre deja de cortarse. */
  .meta-ads-section .madl-row {
    grid-template-columns: 44px 1fr auto;
    grid-template-areas: "thumb main acts" "thumb price age";
    row-gap: 7px; align-items: center;
  }
  .meta-ads-section .madl-group-summary {
    grid-template-columns: 44px 1fr auto;
    grid-template-areas: "thumb main acc" "thumb price acc";
    row-gap: 7px;
  }
  /* País != CO (`.madl--no-price`): el grid desktop de 4 cols rompería las áreas
     de 3 cols del mobile → lo restauramos a 3 cols (la `.madl-pcell` ya va oculta;
     el área "price" queda vacía y solo se ve la antigüedad en la 2ª línea). */
  .meta-ads-section .madl--no-price .madl-row { grid-template-columns: 44px 1fr auto; }
  .meta-ads-section .madl--no-price .madl-group-summary { grid-template-columns: 44px 1fr auto; }
  /* En mobile el badge "N variantes" va INLINE pegado al nombre (no a la derecha):
     la columna del nombre es angosta y el `margin-left:auto` del desktop dejaba un
     hueco grande / lo hacía envolver. */
  .meta-ads-section .madl-group-summary .madl-name .madl-badge--var { margin-left: 0; }
  .meta-ads-section .madl-row > .madl-thumb,
  .meta-ads-section .madl-group-summary > .madl-thumbs { grid-area: thumb; align-self: start; }
  .meta-ads-section .madl-row > .madl-main,
  .meta-ads-section .madl-group-summary > .madl-main { grid-area: main; align-self: center; }
  /* el precio etiquetado queda apilado y alineado a la IZQUIERDA (la etiqueta
     "PRECIO EN LA PÁGINA" es larga; en horizontal se desbordaba y el precio
     chocaba con la antigüedad). min-width:0 deja que la columna 1fr encoja. */
  .meta-ads-section .madl-row > .madl-pcell,
  .meta-ads-section .madl-group-summary > .madl-pcell {
    grid-area: price; align-items: flex-start; text-align: left; min-width: 0; gap: 1px;
  }
  .meta-ads-section .madl-pcell .madl-micro,
  .meta-ads-section .madl-pcell .madl-price { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .meta-ads-section .madl-pcell .madl-price { font-size: 13px; }
  .meta-ads-section .madl-micro { font-size: 10px; }
  .meta-ads-section .madl-row > .madl-age { grid-area: age; justify-self: end; align-self: center; }
  .meta-ads-section .madl-row > .cdense-actions { grid-area: acts; justify-self: end; align-self: center; }
  .meta-ads-section .madl-group-summary > .madl-acc { grid-area: acc; justify-self: end; align-self: center; }

  /* texto del anuncio: hasta 2 líneas (hay espacio vertical en mobile) */
  .meta-ads-section .madl-sub {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35;
  }
  .meta-ads-section .madl-name { flex-wrap: wrap; row-gap: 5px; }

  /* miniaturas apiladas: stack absoluto compacto que cabe en la columna de 44px */
  .meta-ads-section .madl-thumbs { position: relative; display: block; width: 44px; height: 44px; }
  .meta-ads-section .madl-thumbs .madl-thumb-mini {
    position: absolute; width: 32px; height: 32px; margin: 0; top: 0; left: 0;
  }
  .meta-ads-section .madl-thumbs .madl-thumb-mini:nth-child(2) { top: 6px; left: 7px; filter: brightness(.7); }
  .meta-ads-section .madl-thumbs .madl-thumb-mini:nth-child(3) { top: 12px; left: 14px; filter: brightness(.5); }
}