/* GENERADO por «python3 estilos.py construir» desde static/estilos/ — no editar a mano. */
/* ── estilos/tokens.css ── */
/* ============================================================
   Tokens — sistema de estilos (spec docs/superpowers/specs/2026-10-02-sistema-de-estilos-design.md §4).
   El ÚNICO archivo con valores escritos a mano. Paleta MORADA de CREATV Galadsy (pedido de Camilo, 2026-10-10: el
   violeta es el color principal y el oscuro prevalece; reemplaza la paleta azul del 2026-10-02).
   Contrastes sobre --panel #120c1f: --text 17:1 · --muted 8,4:1 · --muted-2 6,6:1 · --accent-texto 9,3:1 ·
   --cian 11:1 · --ok 9,6:1 · --warn 10:1 · --error 6,5:1 · --serie-1 5,3:1 · --serie-2 4,9:1 · blanco sobre
   --accent 5,7:1. --cian (hoy lavanda) pasa de 0,4 de luminancia: SOLO texto, trazos, íconos y sombras, nunca
   fondo ni borde (tests/test_modo_oscuro.py). Solo tema oscuro.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Superficies y texto */
  --bg: #07050e;
  --panel: #120c1f;
  --panel-2: #19112b;
  --panel-hover: #211839;
  --border: #2f2450;
  --border-soft: rgba(167, 139, 250, 0.16);
  --text: #f4f0ff;
  --muted: #b1a6cf;
  --muted-2: #9d92bd;

  /* Acento violeta: --accent para superficies llenas (letra blanca); --accent-texto para enlaces y textos */
  --accent: #7c3aed;
  --accent-2: #a855f7;
  --accent-grad: linear-gradient(135deg, #6d28d9, #9333ea);
  --accent-texto: #c4a5ff;
  --sobre-accent: #ffffff; /* letra e íconos sobre --accent o --accent-grad (5,7:1) */

  /* Luz (lavanda; el nombre --cian viene de la paleta azul): solo texto, trazos, íconos y sombras */
  --cian: #e0b3ff;
  --brillo: rgba(168, 85, 247, 0.42);

  /* Estados (siempre con texto o ícono, nunca solo color) */
  --ok: #3ecf8e;
  --warn: #e8b339;
  --error: #ff5f7a;
  --ok-fondo: rgba(62, 207, 142, 0.14);
  --warn-fondo: rgba(232, 179, 57, 0.14);
  --error-fondo: rgba(255, 95, 122, 0.14);

  /* Series de gráficos, en orden fijo (dataviz, validadas sobre el panel azul el 2026-10-02; sobre --panel #120c1f la 1 da 5,3:1 y la 2 4,9:1) */
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --serie-5: #d55181;
  --serie-6: #008300;
  --serie-7: #9085e9;
  --serie-8: #e66767;
  --tb-gasto: var(--serie-2); --tb-ingresos: var(--serie-1); --tb-warn: #fab219;

  /* Excepciones con nombre */
  --fondo-logo: #e9e9f0;
  --fondo-video: #121417;
  --fondo-lienzo: #000000;
  --velo-media: rgba(17, 17, 24, 0.72); /* botones encima de un video o una imagen (corazón de Crear) */
  --velo-media-fuerte: rgba(17, 17, 24, 0.88);
  --sobre-media: #ffffff;

  /* Tipografía */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Titular de la portada (2026-10-14, elegido por Camilo): ancha, redondeada y espacial */
  --font-titular: "Unbounded", "Space Grotesk", Arial, sans-serif;
  --t-sobretitulo: 0.72rem;
  --t-chico: 0.82rem;
  --t-base: 1rem;
  --t-titulo: 1.35rem;
  --t-cifra: 2rem;
  --t-gigante: 4.5rem;

  /* Espacios */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;

  /* Radios */
  --radius-sm: 8px;
  --radius-icono: 12px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pastilla: 999px;

  /* Sombras y brillos */
  --shadow: 0 12px 32px rgba(4, 0, 12, 0.6);
  --shadow-soft: 0 4px 18px rgba(4, 0, 12, 0.55);
  --shadow-glow: 0 0 0 1px rgba(168, 85, 247, 0.55), 0 8px 28px rgba(124, 58, 237, 0.38);
  --brillo-sm: 0 0 8px var(--brillo);
  --brillo-md: 0 0 16px var(--brillo);
  --fondo-escena:
    radial-gradient(900px 420px at 92% -14%, rgba(168, 85, 247, 0.22), transparent 62%),
    radial-gradient(700px 380px at -10% 110%, rgba(124, 58, 237, 0.10), transparent 60%),
    radial-gradient(rgba(196, 165, 255, 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px;

  /* Fondo galáctico (2026-10-10, CREATV Galadsy): galaxia morada con algo de azul profundo, estrellas y retícula. Solo
     fondo detrás de todo, con alfa baja: compuestos sobre --bg quedan oscuros, el oscuro prevalece. */
  --galaxia-1: rgba(124, 58, 237, 0.50);
  --galaxia-1-suave: rgba(124, 58, 237, 0.30);
  --galaxia-2: rgba(168, 85, 247, 0.38);
  --galaxia-2-suave: rgba(168, 85, 247, 0.22);
  --galaxia-3: rgba(59, 47, 214, 0.32);
  --galaxia-velo-1: rgba(168, 85, 247, 0.10);
  --galaxia-velo-2: rgba(124, 58, 237, 0.10);
  --galaxia-velo-3: rgba(224, 179, 255, 0.06);
  --estrella: rgba(246, 240, 255, 0.85);
  --estrella-tenue: rgba(246, 240, 255, 0.55);
  --estrella-color: rgba(214, 180, 255, 0.85);
  --reticula: rgba(167, 139, 250, 0.05);
  /* Velos: la barra superior y las superficies de la portada dejan ver el fondo. */
  --velo-cabecera: rgba(7, 5, 14, 0.72);
  --panel-velo: rgba(18, 12, 31, 0.74);
  --panel-velo-2: rgba(18, 12, 31, 0.55);
  --resalte-fondo: rgba(124, 58, 237, 0.18);
  --resalte-borde: rgba(196, 165, 255, 0.45);
  --resalte-borde-fuerte: rgba(196, 165, 255, 0.72);
  --sombra-media: rgba(4, 0, 12, 0.72);
  --degradado-lema: linear-gradient(100deg, #a855f7, #c084fc 45%, #f0d9ff);
  /* Banner de la portada: el velo que oscurece la foto para que el título se lea. */
  --velo-hero-centro: linear-gradient(to bottom, rgba(7, 5, 14, 0.82), rgba(7, 5, 14, 0.25) 34%, rgba(7, 5, 14, 0) 55%, rgba(7, 5, 14, 0.55) 82%, rgba(7, 5, 14, 1));
  --velo-hero: linear-gradient(90deg, rgba(7, 5, 14, 0.88), rgba(7, 5, 14, 0.45) 42%, rgba(7, 5, 14, 0) 68%), linear-gradient(to bottom, rgba(7, 5, 14, 0) 72%, rgba(7, 5, 14, 1));
  --velo-banner: linear-gradient(to bottom, rgba(7, 5, 14, 0.15), rgba(7, 5, 14, 0.35) 55%, rgba(7, 5, 14, 0.96));

  /* Movimiento */
  --pulso: 1.6s;

  /* Disposición */
  --sidebar-w: 232px;
  --sidebar-w-plegada: 72px;
}
/* ── estilos/legado/01-sistema-de-diseno.css ── */

* { box-sizing: border-box; }

html { scrollbar-color: var(--muted-2) var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  margin: 0;
  padding: 0 0 4rem;
  position: relative;
  min-height: 100vh;
  /* Seguro: la página nunca debe scrollear de lado. Si algo se desborda
     (una tabla, un bloque de código, la barra de pestañas), tiene que
     resolverlo con su propio overflow-x: auto, no empujar la página entera. */
  overflow-x: hidden;
}

/* ---------- header ---------- */

/* Solo la barra superior de la página (base.html: <body><header>). Las
   plantillas también usan <header> dentro de tarjetas (Puesta a punto,
   ideas y campañas de Sprints): una regla `header {…}` sin acotar les
   metía el sticky, el fondo, el padding y el margen de la barra lateral
   (tests/test_estilos.py lo vigila). */
body > header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--velo-cabecera);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  /* En celular no cabe logo + breadcrumb + cerrar sesión en una sola fila —
     que pase a la siguiente línea en vez de cortarse fuera de pantalla. */
  flex-wrap: wrap;
}

.marca-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--text);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--muted);
}
.header-nav a { color: var(--muted); text-decoration: none; transition: color .15s; }
.header-nav a:hover { color: var(--text); }
.header-sep { color: var(--muted-2); }
.header-actual { color: var(--text); font-weight: 600; text-transform: capitalize; }

.header-logout {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
}
.header-usuario { color: var(--muted); }
.header-logout button {
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--muted);
  padding: .3rem .6rem;
  font-size: .8rem;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.header-logout button:hover { color: var(--text); border-color: var(--muted); }

/* ---------- layout ---------- */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  line-height: 1.15;
}

h2 {
  font-family: var(--font-display);
  font-size: .85rem;
  margin: 2.75rem 0 1.1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .55rem;
}
h2::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--accent-grad);
  border-radius: 2px;
  display: inline-block;
}

/* ---------- tabs (Cambiar calzado / Nueva idea) ---------- */

.tabs-nav {
  display: flex;
  gap: .4rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
  /* En celular las 5 pestañas no caben — que se desplace ella sola, nunca
     la página entera (eso dejaba contenido cortado a la derecha, sin forma
     de llegar a FlowSettings). */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tab-btn {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  background: none;
  border: none;
  padding: .8rem 1.1rem;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  top: 1px;
  transition: color .15s;
  flex: 0 0 auto;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.activo {
  color: var(--text);
  border-bottom: 2px solid transparent;
  border-image: var(--accent-grad) 1;
}
.tab-panel { display: none; }
.tab-panel.activo { display: block; }

/* ---------- animación de entrada ---------- */

.aparece { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.aparece-visible { opacity: 1; transform: translateY(0); }

/* ---------- flash ---------- */

.flash {
  padding: .8rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-size: .88rem;
  font-weight: 500;
  animation: flash-in .35s ease;
}
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.flash.ok { background: rgba(47, 158, 110, .1); color: var(--ok); border: 1px solid rgba(47, 158, 110, .25); }
.flash.warn { background: rgba(181, 129, 8, .1); color: var(--warn); border: 1px solid rgba(181, 129, 8, .25); }
.flash.error { background: rgba(196, 63, 90, .1); color: var(--error); border: 1px solid rgba(196, 63, 90, .25); }
/* Banner de cuenta (base.html): correo sin poner o sin confirmar. */
.cuenta-banner { animation: none; }
.cuenta-banner-form { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: center; }
.cuenta-banner-form input { padding: .35rem .6rem; font-size: .82rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); min-width: 12rem; }
.cuenta-banner-form a { font-size: .8rem; }

/* ---------- hero (index) ---------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-texto);
  margin-bottom: .8rem;
}
.hero h1 { margin-bottom: .6rem; max-width: 20ch; }
.hero-sub { color: var(--muted); max-width: 44ch; line-height: 1.55; margin: 0; font-size: .95rem; }

.hero-stats { display: flex; gap: 2.25rem; flex: 0 0 auto; }
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.stat-label { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .4rem; }

/* ---------- clientes ---------- */

.grid-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1.25rem;
}

.card-cliente {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: aparece-card .5s ease both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes aparece-card { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.card-cliente:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(168, 85, 247, .4); }

.card-cliente-portada { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--panel-2); }
.card-cliente-portada img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.card-cliente:hover .card-cliente-portada img { transform: scale(1.06); }
.card-cliente-sin-portada {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-grad);
}
.card-cliente-sin-portada span { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: rgba(255,255,255,.85); }
.card-cliente-degradado {
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, var(--panel), transparent);
}
.card-cliente-body { padding: 1.1rem 1.25rem 1.25rem; }
.card-cliente .nombre { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin-bottom: .7rem; text-transform: capitalize; }

.badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.badge {
  font-size: .7rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
}
.badge.pendiente { background: rgba(181, 129, 8, .13); color: var(--warn); }
.badge.publicado { background: rgba(47, 158, 110, .13); color: var(--ok); }
.badge.rechazado { background: rgba(196, 63, 90, .13); color: var(--error); }
.badge.ok { background: rgba(47, 158, 110, .13); color: var(--ok); }
.badge.error { background: rgba(196, 63, 90, .13); color: var(--error); }

/* ---------- personajes / assets ---------- */

.personajes-row { display: flex; gap: 1rem; overflow-x: auto; padding: .25rem .25rem .75rem; }
.personaje-thumb { flex: 0 0 auto; text-align: center; position: relative; }
.personaje-thumb a { position: relative; display: block; }
.personaje-eliminar {
  position: absolute; top: -6px; right: -6px; z-index: 2;
}
.personaje-eliminar button {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); font-size: .7rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.personaje-eliminar button:hover { color: var(--error); border-color: rgba(196, 63, 90, .4); background: rgba(196, 63, 90, .1); }
.personaje-thumb img {
  width: 130px; height: 130px; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--border);
  display: block; transition: transform .2s ease, border-color .2s ease;
}
.personaje-thumb a:hover img { transform: translateY(-3px); border-color: rgba(253, 183, 22, .4); }
.personaje-thumb .nombre {
  font-size: .74rem; color: var(--muted); margin-top: .5rem;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge-video {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,.75); backdrop-filter: blur(4px);
  color: var(--text); font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  padding: .18rem .45rem; border-radius: 5px;
}
.personaje-sin-frame {
  width: 130px; height: 130px; border-radius: var(--radius);
  border: 1px dashed var(--error);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: .5rem;
}
.personaje-sin-frame span { color: var(--error); font-size: .7rem; line-height: 1.3; }

/* ---------- formularios ---------- */

.campo-label {
  display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: .7rem 0 .3rem; font-weight: 600;
}
textarea, select, input[type="number"], input[type="text"], input[type="password"] {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: .6rem .75rem;
  font: inherit; font-size: .87rem;
  transition: border-color .15s, box-shadow .15s;
}
/* Radios y casillas quedan fuera: el borde + halo de un campo de texto se
   pintaba como un recuadro alrededor del circulito. Ellos usan outline. */
textarea:focus, select:focus, input:not([type="radio"]):not([type="checkbox"]):focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
textarea { resize: vertical; }
input[type="file"] { color: var(--muted); font-size: .82rem; }

.form-nueva-idea, .form-guia-estilo, .form-subir-personaje {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.form-nueva-idea, .form-guia-estilo {
  padding: 1.5rem; margin-bottom: 1.5rem; max-width: 760px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.fila-campos, .fila-campos-idea {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .7rem;
}
.fila-campos-idea { grid-template-columns: 1fr 2fr; margin: .6rem 0; }

.checks-plataformas { display: flex; flex-wrap: wrap; gap: .9rem; padding-top: .4rem; font-size: .85rem; }
.checks-plataformas label { display: flex; align-items: center; gap: .35rem; text-transform: capitalize; cursor: pointer; }
.checks-plataformas input { width: auto; }
.checks-plataformas label.opcion-deshabilitada { color: var(--muted); cursor: not-allowed; opacity: .55; text-decoration: line-through; }

.form-subir-personaje { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem 1.25rem; margin-top: 1rem; }
.form-subir-personaje > * { max-width: 100%; min-width: 0; }
.form-analizar-marca { margin-top: .75rem; }

/* ---------- botones ---------- */

button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .87rem;
  border: none;
  border-radius: var(--radius-sm);
  padding: .65rem 1.15rem;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, opacity .15s ease, filter .15s ease;
  letter-spacing: -0.005em;
}
button:active { transform: scale(.97); }
button:disabled { opacity: .55; cursor: default; transform: none; }

.btn-generar, .btn-aprobar {
  background: var(--accent-grad);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-generar:hover:not(:disabled), .btn-aprobar:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: var(--shadow-glow);
}

.btn-rechazar {
  background: transparent;
  color: var(--error);
  border: 1px solid rgba(196, 63, 90, .35);
}
.btn-rechazar:hover:not(:disabled) { background: rgba(196, 63, 90, .1); }

.btn-guardar {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-guardar:hover:not(:disabled) { border-color: var(--muted); }

.btn-sm { padding: .42rem .8rem; font-size: .78rem; }
.acciones { display: flex; gap: .55rem; margin-top: .9rem; }

/* ---------- ideas / prompts ---------- */

.idea-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-soft);
}
.idea-header { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.4rem; }
.idea-eliminar { margin-left: auto; flex: 0 0 auto; }
summary.idea-header { cursor: pointer; list-style: none; }
summary.idea-header::-webkit-details-marker { display: none; }
.idea-block:not([open]) summary.idea-header { margin-bottom: 0; }
.idea-chevron { color: var(--muted); font-size: .75rem; flex: 0 0 auto; transition: transform .15s ease; }
.idea-block[open] .idea-chevron { transform: rotate(90deg); }

.concepto-card { padding: 1rem 0; border-top: 1px solid var(--border-soft); }
.concepto-texto { font-size: .88rem; color: var(--text); margin-bottom: .7rem; }
.concepto-imagenes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .concepto-imagenes { grid-template-columns: 1fr; } }
.concepto-imagen { background: var(--panel-hover); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; }
.proveedor-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .5rem; }
.concepto-img-preview { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 6px; display: block; }
.concepto-acciones { display: flex; gap: .5rem; margin-top: .6rem; }
.animaciones-lista { display: flex; flex-direction: column; gap: .6rem; margin-top: .7rem; }
.animacion-row { display: flex; flex-direction: column; gap: .4rem; }
.animacion-row textarea { font-size: .82rem; }

.catalogo-productos { display: flex; gap: 1rem; flex-wrap: wrap; }
.producto-opcion {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .8rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--panel-hover); cursor: pointer; width: 140px; text-align: center;
  transition: border-color .15s ease;
}
.producto-opcion:has(input:checked) { border-color: var(--accent); }
.producto-opcion input { margin: 0; }
.producto-opcion img { width: 100%; aspect-ratio: 1/1; object-fit: contain; border-radius: 6px; background: var(--panel-2); }
.producto-opcion span { font-size: .78rem; color: var(--muted); }

.swaps-lista { display: flex; flex-direction: column; gap: .7rem; }
.swap-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 1rem; }
.swap-card[open] { padding-bottom: 1rem; }
.swap-card-resumen {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .7rem;
  padding: .7rem 0; margin: 0 -0.1rem;
}
.swap-card-resumen::-webkit-details-marker { display: none; }
.swap-thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--panel-hover); }
.swap-thumb img, .swap-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.swap-thumb-vacio { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .8rem; }
.swap-resumen-texto { flex: 1 1 auto; min-width: 0; font-size: .86rem; display: flex; flex-direction: column; gap: .1rem; }
.swap-resumen-meta { font-size: .74rem; color: var(--muted); }
.swap-card[open] .idea-chevron { transform: rotate(90deg); }

.swap-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .3rem 0 .8rem; }
@media (max-width: 560px) { .swap-lados { grid-template-columns: 1fr; } }
.swap-lado img, .swap-lado video { width: 100%; border-radius: 6px; display: block; }

.evaluacion-matriz { margin: .8rem 0; padding-top: .8rem; border-top: 1px solid var(--border-soft); }
.evaluacion-matriz summary { cursor: pointer; font-size: .85rem; color: var(--muted); }
.evaluacion-matriz summary strong { font-size: .95rem; }
.lista-evaluacion { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.lista-evaluacion li { font-size: .82rem; color: var(--muted); }
.lista-evaluacion li strong { color: var(--text); text-transform: capitalize; }
.puntaje-chip {
  display: inline-block; min-width: 2.4rem; text-align: center; font-size: .72rem; font-weight: 700;
  padding: .1rem .4rem; border-radius: 5px; margin-right: .4rem;
}
.puntaje-alto { color: var(--ok); border: 1px solid rgba(47, 158, 110, .3); background: rgba(47, 158, 110, .1); }
.puntaje-medio { color: var(--warn); border: 1px solid rgba(181, 129, 8, .3); background: rgba(181, 129, 8, .1); }
.puntaje-bajo { color: var(--error); border: 1px solid rgba(196, 63, 90, .3); background: rgba(196, 63, 90, .1); }

.comparacion-modelos { margin-top: 1.2rem; }
.comparacion-modelos > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; width: fit-content;
}
.comparacion-modelos > summary::-webkit-details-marker { display: none; }
.comparacion-contenido {
  margin-top: 1.2rem; padding: 1.2rem 1.3rem; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.comparacion-contenido h3 {
  font-family: var(--font-display); font-size: .78rem; margin: 1.6rem 0 .7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.comparacion-contenido h3:first-of-type { margin-top: 0; }
.comparacion-contenido table { font-size: .8rem; }
.comparacion-nota { color: var(--muted); font-weight: 400; }
.tag-estado {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
  white-space: nowrap;
}
.tag-en-uso { color: var(--ok); background: rgba(47, 158, 110, .1); }
.tag-descartado { color: var(--error); background: rgba(196, 63, 90, .1); }
.tag-advertencia { color: var(--warn); background: rgba(181, 129, 8, .1); }
.idea-ref {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border); flex: 0 0 auto;
}
.idea-label {
  font-family: var(--font-display); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent-texto); font-weight: 700; display: block; margin-bottom: .2rem;
}
.idea-texto { font-size: 1.02rem; font-weight: 500; }

.prompts-lista { display: flex; flex-direction: column; gap: .65rem; }
.prompt-row {
  display: flex; align-items: flex-start; gap: .7rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem .95rem;
  transition: border-color .15s;
}
.prompt-row:hover { border-color: var(--muted-2); }
.prompt-row-num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--panel-hover); color: var(--muted);
  font-family: var(--font-display); font-size: .74rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: .15rem;
}
.prompt-row-form { flex: 1 1 auto; min-width: 0; }
.prompt-row-form textarea { min-height: 2.7rem; }
.prompt-row-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.mini-select, .mini-input { width: auto; padding: .32rem .5rem; font-size: .78rem; }
.mini-input { width: 4.5rem; }
.costo-mini { font-size: .78rem; color: var(--warn); font-weight: 600; }
.prompt-row-acciones { display: flex; gap: .5rem; }
.prompt-row-descartar { flex: 0 0 auto; margin-top: .15rem; }
.prompt-row-descartar .btn-sm { padding: .38rem .58rem; }

.plataforma-chip {
  font-size: .7rem; padding: .18rem .55rem; border-radius: 6px;
  background: var(--panel-hover); border: 1px solid var(--border);
  color: var(--muted); text-transform: capitalize; font-weight: 500;
}
.plataforma-chip.ok { color: var(--ok); border-color: rgba(47, 158, 110, .3); background: rgba(47, 158, 110, .08); }
.plataforma-chip.error { color: var(--error); border-color: rgba(196, 63, 90, .3); background: rgba(196, 63, 90, .08); }

.lista-invariantes { margin: .8rem 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.lista-invariantes li { font-size: .85rem; color: var(--muted); line-height: 1.5; }
.lista-invariantes li strong { color: var(--text); text-transform: capitalize; }

.open-items-box { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border-soft); }
.lista-open-items { margin: .6rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.lista-open-items li { font-size: .82rem; color: var(--muted); }
.lista-open-items li strong { color: var(--text); }

.estado-chip {
  display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: 5px; margin-right: .4rem; letter-spacing: .02em;
}
.estado-blocked { color: var(--error); border: 1px solid rgba(196, 63, 90, .3); background: rgba(196, 63, 90, .1); }
.estado-needed { color: var(--warn); border: 1px solid rgba(181, 129, 8, .3); background: rgba(181, 129, 8, .1); }
.estado-proposed, .estado-404 { color: var(--muted); border: 1px solid var(--border); background: var(--panel-hover); }
.estado-done { color: var(--ok); border: 1px solid rgba(47, 158, 110, .3); background: rgba(47, 158, 110, .1); }

.imagen-row { align-items: stretch; }
.imagen-candidata {
  flex: 0 0 auto; width: 84px; height: 84px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer;
  transition: transform .2s;
}
.imagen-candidata:hover { transform: scale(1.04); }
.prompt-solo-lectura {
  font-size: .85rem; color: var(--text); padding: .55rem .7rem;
  background: var(--panel-hover); border: 1px solid var(--border);
  border-radius: var(--radius-sm); line-height: 1.45;
}

/* ---------- progreso ---------- */

.progreso-row { align-items: center; }
.progreso-contenido { flex: 1 1 auto; min-width: 0; }
.barra-progreso {
  position: relative;
  width: 100%; height: 8px;
  background: var(--panel-hover);
  border-radius: 999px; overflow: hidden;
  margin-top: .65rem; border: 1px solid var(--border);
}
.barra-progreso-fill {
  height: 100%;
  background: var(--accent-grad);
  transition: width .5s ease;
  position: relative;
  overflow: hidden;
}
.barra-progreso-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -50% 0; } }

/* Barra INDETERMINADA: la pone el polling (base.html) cuando trabajos.consultar
   devuelve progreso_real=false, o sea cuando el número es una estimación contra
   el reloj y no un dato medido. Ocupa todo el ancho y deja las rayas en
   movimiento como única señal — dice "está trabajando" sin fingir que sabe
   cuánto falta. Mismo amarillo del sistema, un punto más apagado que la barra
   proporcional para que se distingan de un vistazo. */
.barra-progreso-fill.barra-progreso-indeterminada {
  /* Sin width fijo a propósito: el ancho lo pone el JS y es proporcional al
     progreso. Las rayas solo señalan "este número es un estimado, no una
     medición del proveedor" — esconder el avance sería contestar con menos
     información de la que ya se tenía. */
  opacity: .72;
  /* color de fondo plano + UNA sola capa de rayas: la animación mueve
     background-position, y un degradado de fondo como segunda capa se
     desplazaría con ella dejando un hueco al final de la barra. */
  background-color: var(--accent);
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, .55) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, .55) 75%, transparent 75%, transparent
  );
  background-size: 22px 22px;
  animation: rayas-progreso .9s linear infinite;
  transition: none;  /* no hay posición que animar: solo se mueven las rayas */
}
/* El shimmer de la barra proporcional encima de las rayas se lee como ruido. */
.barra-progreso-fill.barra-progreso-indeterminada::after { display: none; }
@keyframes rayas-progreso { from { background-position: 0 0; } to { background-position: 22px 0; } }

/* Banner de "ya terminó, pero no recargué sola porque tienes cambios sin
   guardar". Va fijo y por encima de todo a propósito: la tarjeta del trabajo
   puede estar colapsada o en una pestaña oculta, y ahí el aviso no se veía. */
.aviso-recarga-global {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: min(90vw, 640px);
  padding: .7rem 1rem;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.progreso-texto { font-size: .78rem; color: var(--muted); margin-top: .4rem; }
.card-video .barra-progreso { margin-top: .5rem; }
.card-video .progreso-texto { margin-bottom: .3rem; }

/* ---------- videos ---------- */

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.4rem;
}
.card-video {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-video:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-video video { width: 100%; display: block; background: #000; max-height: 420px; }
.card-video .body { padding: 1.15rem 1.25rem 1.3rem; }
.card-video .titulo { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin-bottom: .4rem; }
.card-video .prompt {
  color: var(--muted); font-size: .85rem; margin-bottom: .8rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-video .plataformas { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .85rem; }

/* ---------- tabla / bitácora ---------- */

table { width: 100%; border-collapse: collapse; font-size: .84rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border-soft); }
th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--panel); }
td.estado-ok { color: var(--ok); }
td.estado-error { color: var(--error); }

.vacio { color: var(--muted); font-size: .89rem; padding: 1rem 0; line-height: 1.5; }

/* ---------- gestión del catálogo de productos ---------- */

.producto-gestion {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  margin-top: 1rem;
  background: var(--panel);
}

.producto-gestion-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: .8rem;
}

.producto-gestion-foto { position: relative; }

.producto-gestion-foto img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
}

/* La ✕ de cada foto va encima de la miniatura: con una fila de botones aparte
   no se sabía cuál borraba cuál. */
.producto-gestion-foto form {
  position: absolute;
  top: -6px;
  right: -6px;
  margin: 0;
}

.producto-gestion-foto button {
  width: 22px;
  height: 22px;
  line-height: 1;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  font-size: .7rem;
}

.producto-gestion-foto button:hover {
  color: var(--error);
  border-color: rgba(196, 63, 90, .4);
  background: rgba(196, 63, 90, .1);
}

.producto-gestion-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
}

.btn-peligro,
.btn-eliminar-producto {
  border: 1px solid rgba(196, 63, 90, .4);
  background: rgba(196, 63, 90, .1);
  color: var(--error);
  border-radius: 10px;
  padding: .4rem .8rem;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}

.btn-peligro:hover,
.btn-eliminar-producto:hover { background: rgba(196, 63, 90, .2); }

/* ---------- modal de confirmación ---------- */

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* El `display: flex` de arriba GANA sobre el atributo `hidden`: `hidden` solo
   aplica `display: none` desde la hoja de estilos del navegador, y cualquier
   regla del autor la pisa. Sin esta línea el modal de eliminar se ve abierto
   siempre, apenas carga la página. */
.modal-fondo[hidden] { display: none; }

.modal-caja {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.modal-caja h3 { margin: 0 0 .6rem; font-size: 1rem; }
.modal-caja p { font-size: .84rem; color: var(--muted); margin: 0 0 .6rem; }
.modal-advertencia { color: var(--error) !important; font-weight: 600; }

.modal-acciones {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
}

.modal-acciones form { margin: 0; }

/* ---------- informe para la cuenta de cobro ---------- */

.informe-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: .9rem;
  margin-top: 1rem;
}

.informe-tarjeta {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.informe-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.informe-label {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.35;
}

/* Generación probada por la bitácora pero reconstruida: se marca distinto para
   que nunca se confunda con una registrada en vivo (su costo no se conoce). */
.badge.reconstruido {
  background: rgba(167, 139, 250, .14);
  color: var(--accent-2);
  border: 1px solid rgba(167, 139, 250, .3);
}

/* ---------- maniquí para marcar dónde va el producto ---------- */

.maniqui-wrap {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: .8rem 0;
}

.maniqui {
  width: 150px;
  height: auto;
  flex: 0 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .4rem;
}

/* Las divisiones del canon de 8 cabezas: es lo que hace visible la PROPORCIÓN
   que se está marcando, no solo la ubicación. */
.maniqui-guias line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.maniqui-guias text { font-size: 9px; fill: var(--muted); font-family: var(--font-body); }

.maniqui-zonas path {
  fill: var(--panel-2);
  stroke: var(--muted);
  stroke-width: 1;
  cursor: pointer;
  transition: fill .12s;
}
.maniqui-zonas path:hover { fill: var(--panel-hover); }
.maniqui-zonas path.activa { fill: var(--accent); stroke: var(--accent); }

.maniqui-lateral { flex: 1 1 220px; min-width: 200px; }

.maniqui-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }

.maniqui-preset {
  font: inherit;
  font-size: .72rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}
.maniqui-preset:hover { color: var(--text); border-color: var(--accent); }
.maniqui-preset.activo { color: var(--text); border-color: var(--accent); background: rgba(168, 85, 247, .15); }

.maniqui-resumen {
  margin-top: .7rem;
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.45;
  min-height: 2.4em;
}

/* Los checkboxes son la fuente de verdad del formulario, pero no aportan
   visualmente al lado del maniquí: se ocultan salvo que no haya JS. */
.maniqui-checks { display: none; }

/* Banco de recetas de FlowPlus: chips que rellenan la acción central. */
.banco-prompts { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .5rem; }

.campo-error { color: var(--error); font-size: .8rem; margin: .35rem 0 0; }
textarea.con-error, input.con-error { border-color: var(--error) !important; box-shadow: 0 0 0 2px rgba(255, 90, 90, .25); }


/* ── estilos/legado/02-barra-lateral-dentro-de-un-proyecto.css ── */
/* ============================================================
   Barra lateral (dentro de un proyecto)
   ============================================================ */
.con-sidebar { --sb: var(--sidebar-w); }
.con-sidebar.sidebar-plegada { --sb: var(--sidebar-w-plegada); }
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb); z-index: 20;
  background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: .9rem .6rem;
  transition: width .18s ease;
}
.sidebar-marca { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem .9rem; text-decoration: none; color: var(--text); }
.sidebar-nav { display: flex; flex-direction: column; gap: .2rem; }
.sidebar-item {
  display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .7rem;
  border: 0; border-radius: 10px; background: transparent; color: var(--muted);
  font: inherit; font-size: .9rem; font-weight: 500; text-align: left; cursor: pointer; text-decoration: none;
  transition: background .12s, color .12s;
}
.sidebar-item svg { width: 22px; height: 22px; flex: 0 0 22px; }
.sidebar-item:hover { background: var(--panel-2); color: var(--text); }
.sidebar-item.activo { background: var(--panel-hover); color: var(--accent-texto); font-weight: 600; }
.sidebar-pie { margin-top: auto; display: flex; flex-direction: column; gap: .3rem; }
.sidebar-colapsar { align-self: flex-start; border: 0; background: transparent; color: var(--muted-2); padding: .4rem .7rem; cursor: pointer; border-radius: 8px; }
.sidebar-colapsar svg { width: 20px; height: 20px; }
.sidebar-colapsar:hover { color: var(--text); background: var(--panel-2); }
.sidebar-usuario { display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem; border-top: 1px solid var(--border); margin-top: .3rem; }
.sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-grad); color: #fff; display: grid; place-items: center; font-weight: 700; flex: 0 0 34px; }
.sidebar-usuario-datos { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sidebar-usuario-datos strong { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-usuario-datos small { color: var(--muted-2); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-salir { border: 0; background: transparent; color: var(--muted-2); font-size: .74rem; cursor: pointer; padding: .2rem .3rem; }
.sidebar-salir:hover { color: var(--error); }
.sidebar-plegada .sidebar-texto { display: none; }
.sidebar-plegada .sidebar-item { justify-content: center; padding: .6rem 0; }
.sidebar-plegada .sidebar-marca { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-plegada .sidebar-usuario { justify-content: center; padding-left: 0; padding-right: 0; }

/* El header pasa a ser una barra superior a la derecha de la barra lateral. */
body.con-sidebar > header { margin-left: var(--sb); transition: margin-left .18s ease; }
body.con-sidebar > header .marca-header { display: none; }
body.con-sidebar > header .header-logout { display: none; }
.con-sidebar main { margin-left: var(--sb); max-width: none; padding: 2rem 2.5rem; transition: margin-left .18s ease; }
.pagina-cabecera { margin-bottom: 1.2rem; }
.con-sidebar .tab-panel.activo { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem 1.8rem; box-shadow: var(--shadow-soft); }

/* Celular (spec 2026-09-26-movil): la barra lateral sale de la pantalla y
   entra con «☰ Menú» como panel encima de la página; el contenido usa todo
   el ancho. En escritorio estos elementos no se ven. */
.menu-movil, .sidebar-cerrar, .sidebar-fondo, .header-pestana { display: none; }
@media (max-width: 760px) {
  .con-sidebar, .con-sidebar.sidebar-plegada { --sb: 0px; }
  .con-sidebar .sidebar {
    width: min(84vw, 300px); z-index: 40; padding-top: 3.2rem; overflow-y: auto;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body.menu-abierto .sidebar { transform: none; box-shadow: var(--shadow); }
  body.menu-abierto { overflow: hidden; }
  .sidebar-fondo { position: fixed; inset: 0; z-index: 35; background: rgba(17, 17, 24, .45); }
  body.menu-abierto .sidebar-fondo { display: block; }
  .sidebar-cerrar {
    display: grid; place-items: center; position: absolute; top: .6rem; right: .6rem;
    width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--border);
    background: var(--panel); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer;
  }
  .sidebar-colapsar { display: none; }
  /* En el menú siempre con nombres, aunque en escritorio esté plegada. */
  .con-sidebar.sidebar-plegada .sidebar-texto { display: revert; }
  .con-sidebar.sidebar-plegada .sidebar-usuario-datos { display: flex; }
  .con-sidebar.sidebar-plegada .sidebar-usuario .sidebar-gasto { display: block; }
  .con-sidebar.sidebar-plegada .sidebar-item { justify-content: flex-start; padding: .6rem .7rem; }
  .con-sidebar.sidebar-plegada .sidebar-marca,
  .con-sidebar.sidebar-plegada .sidebar-usuario { justify-content: flex-start; padding-left: .5rem; padding-right: .5rem; }
  body.con-sidebar > header { margin-left: 0; padding: .6rem 1rem; gap: .6rem; flex-wrap: nowrap; }
  body.con-sidebar > header .menu-movil {
    display: inline-flex; align-items: center; gap: .4rem; flex: none; padding: .45rem .75rem; font-size: .85rem;
  }
  body.con-sidebar > header .header-nav { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* «Proyectos /» (admin) ya está dentro del menú: en la barra solo proyecto · pestaña. */
  body.con-sidebar > header .header-nav > a, body.con-sidebar > header .header-sep { display: none; }
  body.con-sidebar > header .header-pestana { display: inline; }
  body.con-sidebar > header .header-pestana:not(:empty)::before { content: "·"; margin: 0 .4rem; color: var(--muted-2); }
  .con-sidebar main { margin-left: 0; padding: 1rem; }
  .con-sidebar .tab-panel.activo { padding: 1rem; border-radius: var(--radius); }
  /* Nada desplaza la página de lado: las tablas anchas se desplazan en su caja,
     las filas de campos se apilan y las filas de botones se envuelven. */
  main table { display: block; max-width: 100%; overflow-x: auto; }
  .fila-campos, .fila-campos-idea { grid-template-columns: minmax(0, 1fr); }
  .form-subir-personaje { flex-wrap: wrap; }
  /* Panel de admin (sin barra lateral): las cifras se envuelven. */
  .hero-stats { flex: 1 1 100%; flex-wrap: wrap; gap: 1rem 1.6rem; }
}

/* Selector de archivos nativo: en tema claro se ve como un botón de la app. */
input[type="file"]::file-selector-button {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--accent-texto);
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: .45rem .8rem; margin-right: .6rem; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent); }

/* Sub-pestañas del catálogo (Productos · Personajes · Entornos · Logos) */
.cat-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 1.2rem; }
.cat-tab { border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 999px; padding: .45rem .9rem; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.cat-tab:hover { color: var(--text); border-color: var(--muted-2); }
.cat-tab.activo { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-n { display: inline-block; min-width: 1.4em; margin-left: .3rem; padding: 0 .35em; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .74rem; text-align: center; }
.cat-tab.activo .cat-n { background: rgba(255,255,255,.25); }

/* Crear: modos (Desde referencias / Cambiar producto) — mismo look que las
   pestañas de categoría del catálogo. */
.crear-modos { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.crear-modo { border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 999px; padding: .45rem .9rem; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.crear-modo:hover { color: var(--text); border-color: var(--muted-2); }
.crear-modo.activo { background: var(--accent); border-color: var(--accent); color: #fff; }
.crear-panel { display: none; }
.crear-panel.activo { display: block; }

/* Campañas: piezas de Crear para armar una campaña */
.piezas-campana .producto-opcion video { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; background: #000; }
.piezas-campana .producto-opcion.ya-en-lista { opacity: .55; }
.piezas-campana .producto-opcion small { display: block; }

/* Crear › Generados: cuadrícula de piezas + detalle en diálogo */
.generados-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: .9rem; margin-top: 1rem; }
.generado { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.generado:hover, .generado:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); outline: none; border-color: var(--accent); }
.generado-media { position: relative; aspect-ratio: 9/12; background: var(--panel-2); }
.generado-media img, .generado-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.generado-media .generado-portada { filter: saturate(.6); opacity: .8; }
.generado-tipo { position: absolute; left: .5rem; top: .5rem; background: rgba(17,17,24,.72); color: #fff; font-size: .68rem; font-weight: 600; padding: .2rem .5rem; border-radius: 999px; }
.generado-velo { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: .6rem; background: linear-gradient(to top, rgba(15,17,21,.95), rgba(15,17,21,.2)); }
.generado-velo .barra-progreso { margin: 0 0 .3rem; }
.generado-velo .progreso-texto { font-size: .7rem; }
.generado-estado { align-self: center; font-size: .74rem; font-weight: 600; color: var(--muted); }
.generado-estado.error { color: var(--error); }
.generado-pie { padding: .55rem .7rem .65rem; display: flex; flex-direction: column; gap: .1rem; }
.generado-pie strong { font-size: .82rem; }
.generado-pie small { font-size: .7rem; color: var(--muted); }

.generado-modal { border: 0; border-radius: 16px; padding: 0; width: min(960px, 94vw); max-height: 92vh; background: var(--panel); color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.generado-modal::backdrop { background: rgba(17,17,24,.55); backdrop-filter: blur(3px); }
.generado-cerrar { position: absolute; right: .6rem; top: .5rem; z-index: 2; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: rgba(17,17,24,.7); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.generado-modal-cuerpo { display: grid; grid-template-columns: minmax(260px, 44%) 1fr; max-height: 92vh; }
.detalle-media { background: #0e0e14; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.detalle-media img, .detalle-media video { max-width: 100%; max-height: 92vh; object-fit: contain; }
.detalle-info { padding: 1.4rem 1.4rem 1.2rem; overflow: auto; }
.detalle-texto { font-size: .95rem; line-height: 1.45; margin: .2rem 0 .6rem; }
.detalle-acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.detalle-acciones a.btn-generar { text-decoration: none; display: inline-block; }
@media (max-width: 720px) { .generado-modal-cuerpo { grid-template-columns: 1fr; } .detalle-media { min-height: 220px; } }
/* Final edition (2026-09-27): el guion y «Producir finales» son largos. En
   pantalla ancha la fila de la rejilla no pasa del alto del modal y la columna
   de datos se desplaza sola: el video queda a la vista. Solo #fe-modal (Crear
   y la ficha de Referentes siguen igual); en celular es una columna y el
   modal entero se desplaza, como siempre. */
@media (min-width: 721px) {
  #fe-modal .generado-modal-cuerpo { grid-template-rows: minmax(0, 1fr); }
  #fe-modal .detalle-info { overflow-y: auto; }
}

/* Portada (landing) e inicio de sesión */
.landing-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding: 2.5rem 0 3.5rem; }
.landing-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: none; margin-bottom: 1rem; }
.landing-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.landing-cta a { text-decoration: none; display: inline-flex; align-items: center; padding: .8rem 1.3rem; font-size: .95rem; }
.landing-hero-visual { position: relative; height: 380px; }
.landing-tarjeta { position: absolute; width: 170px; aspect-ratio: 9/13; border-radius: 16px; background: var(--accent-grad); box-shadow: var(--shadow); padding: .7rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.landing-tarjeta .generado-tipo { position: absolute; top: .6rem; left: .6rem; }
.landing-tarjeta strong { font-family: var(--font-display); font-size: .95rem; }
.landing-tarjeta small { font-size: .72rem; opacity: .85; }
.landing-tarjeta.t1 { left: 8%; top: 40px; transform: rotate(-6deg); background: linear-gradient(160deg, var(--accent), #a855f7); }
.landing-tarjeta.t2 { left: 38%; top: 0; z-index: 2; background: linear-gradient(160deg, var(--accent-2), var(--accent)); }
.landing-tarjeta.t3 { left: 66%; top: 60px; transform: rotate(7deg); background: linear-gradient(160deg, #a855f7, var(--accent-2)); }



.landing-empezar { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.2rem; }
.landing-empezar h2 { margin: 0 0 .4rem; font-size: 1.6rem; }
.landing-form { margin: 0; }
.landing-pie { margin-top: 3rem; font-size: .76rem; text-align: center; }

.login-caja { max-width: 420px; margin: 4rem auto 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.2rem; box-shadow: var(--shadow-soft); }

@media (max-width: 900px) {
  .landing-hero { grid-template-columns: 1fr; }
  .landing-hero-visual { height: 300px; }
  .landing-empezar { grid-template-columns: 1fr; }
}

/* Campañas: resultados del anuncio */
.ad-resultados { margin: .8rem 0 1rem; padding: .9rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.ad-resultados-cab { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; align-items: baseline; margin-bottom: .6rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: .6rem; }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .1rem; }
.kpi span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kpi strong { font-family: var(--font-display); font-size: 1.25rem; }
.kpi small { font-size: .7rem; color: var(--muted); }

/* ---- Final edition (Crear › detalle de una pieza) ---- */
.fe-seccion { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.fe-titulo { margin: 0 0 .2rem; font-family: var(--font-display); font-size: 1rem; }
.fe-subtitulo { margin: 1rem 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fe-preparar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-top: .6rem; font-size: .8rem; }
.fe-preparar label, .fe-opciones label { display: flex; flex-direction: column; gap: .25rem; }
.fe-guion { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.fe-bloque { border: 1px solid var(--border); border-radius: 10px; padding: .55rem .7rem; display: grid; gap: .35rem; font-size: .8rem; background: var(--panel); }
.fe-bloque-cab { display: flex; justify-content: space-between; align-items: baseline; }
.fe-bloque-cab strong { text-transform: capitalize; font-size: .8rem; }
.fe-bloque-cab small { color: var(--muted); font-size: .7rem; }
.fe-bloque label { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: var(--muted); }
.fe-bloque input, .fe-bloque textarea { font-size: .82rem; color: var(--text); }
.fe-producir { display: flex; flex-direction: column; gap: .7rem; }
.fe-destinos { padding-top: 0; font-size: .8rem; }
.fe-destinos label { text-transform: none; }
.fe-destinos small { color: var(--muted); }
.fe-opciones { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; font-size: .8rem; }
.fe-opciones label.fe-check { flex-direction: row; align-items: center; gap: .35rem; }
.fe-opciones label.fe-check input { width: auto; }
.fe-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.fe-final { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; }
.fe-final-mini { width: 32px; height: 44px; border-radius: 6px; background: var(--panel-2); overflow: hidden; flex: none; }
.fe-final-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fe-final-nombre { font-weight: 600; }
.fe-capas { list-style: none; padding: 0; margin: 0; font-size: .76rem; display: flex; flex-direction: column; gap: .25rem; }
.fe-capas strong { text-transform: capitalize; }
/* Editor capa 4b (9/9): «Editar» es la acción principal; el guion con IA
   (ángulo, «Preparar guion con IA», «Producir finales») queda plegado, mismo
   tratamiento de caja que `.org-publicar`. */
.fe-automatico { margin-top: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .8rem; background: var(--panel); }
.fe-automatico > summary { cursor: pointer; font-size: .85rem; font-weight: 600; }
.fe-automatico[open] > summary { margin-bottom: .3rem; }
.fe-automatico .fe-seccion:first-of-type { margin-top: .6rem; padding-top: 0; border-top: none; }
.generado-badge { position: absolute; right: .5rem; top: .5rem; background: rgba(15,17,21,.85); color: var(--text); font-size: .74rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.generado-final .generado-media video.generado-portada { filter: saturate(.6); opacity: .8; }

/* ---- Experimentos (Crear > pestaña Experimentos) ---- */
.panel-cabecera { margin-bottom: 1.2rem; }
.form-experimento { display: flex; flex-direction: column; gap: .8rem; margin-top: .6rem; font-size: .82rem; }
.form-experimento label { display: flex; flex-direction: column; gap: .25rem; }
.exp-paises { border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; margin: 0; }
.exp-paises legend { padding: 0 .3rem; font-size: .78rem; color: var(--muted); }
.exp-paises .fe-destino { flex-direction: row; align-items: center; gap: .5rem; font-size: .8rem; }

.semaforo {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--muted-2);
}
.semaforo-armando { background: var(--muted-2); }
.semaforo-pausado { background: var(--warn); }
.semaforo-corriendo { background: var(--ok); }
.semaforo-cerrado { background: var(--muted); }
.semaforo-error { background: var(--error); }
.semaforo-lanzando { background: var(--warn); animation: exp-pulso 1.1s ease-in-out infinite; }
.semaforo-decidido { background: var(--accent, #6c5ce7); }
@keyframes exp-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.exp-acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }

.exp-arbol { list-style: none; margin: .8rem 0; padding: 0; }
.exp-pais { border-left: 2px solid var(--border); padding-left: 1rem; margin-bottom: .8rem; }
.exp-pais-cab { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .84rem; }
.exp-pais-cab form.inline { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }

.exp-piezas { list-style: none; margin: .5rem 0 0 1.2rem; padding: 0; border-left: 2px solid var(--border-soft); }
.exp-pieza {
  display: grid; grid-template-columns: 48px 1fr auto; gap: .6rem; align-items: center; padding: .35rem 0 .35rem 1rem;
}
.exp-pieza-mini { width: 48px; height: 85px; border-radius: 6px; overflow: hidden; background: var(--panel-hover); flex: none; }
.exp-pieza-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-pieza-nombre { font-size: .82rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.kpis-mini { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; max-width: 26rem; }
.kpis-mini .kpi { font-size: .72rem; padding: .3rem .5rem; }
.btn-xs { padding: .15rem .5rem; font-size: .72rem; }

.exp-agregar, .exp-meter { display: flex; gap: .4rem; align-items: end; flex-wrap: wrap; margin-top: .8rem; }
.exp-agregar label, .exp-meter label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; }

.exp-eventos { margin-top: .8rem; }
.exp-eventos ul { font-size: .76rem; max-height: 14rem; overflow: auto; list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }

/* ---- Experimentos (bloque 4): modo, propuestas, veredictos, reglas ---- */
.tag-modo { text-transform: none; }
.tag-propuestas { font-size: .72rem; padding: .1rem .45rem; border-radius: 999px; background: var(--warn); color: var(--bg); font-weight: 600; }
.exp-ayuda-modo { font-size: .76rem; padding-top: .3rem; }
.exp-parentesco { font-size: .8rem; display: flex; gap: 1rem; flex-wrap: wrap; margin: .4rem 0; }
.exp-modo { display: inline-flex; align-items: center; gap: .6rem; margin: .4rem 0; flex-wrap: wrap; font-size: .82rem; }
.exp-modo label { display: inline-flex; align-items: center; gap: .3rem; }
.exp-modo small { font-size: .72rem; padding: 0; display: inline; }
.exp-propuestas { border: 1px solid var(--warn); border-radius: var(--radius); padding: .6rem .8rem; margin: .6rem 0; background: color-mix(in srgb, var(--warn) 8%, transparent); }
.exp-propuestas-cab { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .84rem; }
.exp-propuestas ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.exp-propuesta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; }
.exp-propuesta form.inline { margin: 0; display: inline; }
.exp-propuesta-que { flex: 1 1 14rem; }
.exp-propuesta-que small, .exp-numeros { color: var(--muted); }
.exp-numeros { display: block; font-size: .72rem; }
.tag-accion { text-transform: uppercase; letter-spacing: .03em; }
.veredicto { font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; font-weight: 600; color: #fff; cursor: help; }
.veredicto-ganador { background: var(--ok); }
.veredicto-perdedor { background: var(--error); }
.veredicto-inconcluso { background: var(--muted); }
.tag-escalon { cursor: help; }
.exp-derivaciones { margin: .6rem 0; font-size: .8rem; }
.exp-derivaciones > ul { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.exp-derivacion-items { list-style: none; margin: .2rem 0 0 1.2rem; padding: 0; font-size: .74rem; color: var(--muted); }
.exp-reglas { margin-top: .6rem; }
.exp-reglas summary { cursor: pointer; font-size: .84rem; }
.reglas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .5rem .9rem; margin: .5rem 0; }
.regla { display: flex; flex-direction: column; gap: .2rem; font-size: .76rem; }
.regla input[type="number"] { width: 100%; }
.regla-sin { font-size: .72rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; }
.exp-reglas-form .vacio { font-size: .74rem; padding-top: .2rem; }

/* Sprints */
.sprints-lista { display: grid; gap: .6rem; margin-bottom: 1rem; }
.sprint-card { display: flex; gap: 1rem; align-items: center; padding: .8rem 1rem; text-decoration: none; color: inherit; }
.sprint-card:hover { background: var(--panel-hover); }
.anillo text { font-family: var(--font-body); font-weight: 700; }
/* Mayúscula solo en la primera letra («Ready to generate», «Listo para generar»):
   `capitalize` ponía una en cada palabra («Ready To Generate»). Las etiquetas del
   catálogo van en minúscula porque también se usan dentro de frases. */
.estado-sprint::first-letter { text-transform: uppercase; }
.estado-sprint-planeando, .estado-sprint-planeada { border-color: var(--muted-2); }
.estado-sprint-referencias { border-color: var(--accent); }
.estado-sprint-listo_para_generar, .estado-sprint-ideas_aprobadas { border-color: var(--ok); }
.estado-sprint-generando { border-color: var(--warn); }
.estado-sprint-revision { border-color: var(--accent-2); }
.estado-sprint-completado, .estado-sprint-completada { border-color: var(--ok); color: var(--ok); }
.sprint-subtitulo { margin-top: 1.6rem; }
.sprint-punto { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; margin-right: .3rem; }
.sprint-mini { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; vertical-align: middle; }
.sprint-paleta { display: inline-flex; gap: .2rem; vertical-align: middle; margin-left: .4rem; }
.sprint-paleta span { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-soft); display: inline-block; }
.sprint-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.sprint-calendario { margin: .6rem 0 1rem; }
.sprint-aviso { display: block; margin: .3rem 0; border-color: var(--warn); }
.sprint-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sprint-cabecera-derecha { text-align: center; }
.sprint-migas { color: var(--muted); font-size: .85rem; margin: 0 0 .6rem; }
.sprint-tablero { display: grid; gap: .6rem; }
.sprint-campana { padding: .7rem 1rem; }
.sprint-campana-cab { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sprint-sep { color: var(--muted-2); }
.sprint-campana-cuerpo { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-top: .5rem; }
.sprint-cantidades { display: flex; gap: .5rem; align-items: end; }
.sprint-cantidades .mini-input { width: 4rem; }
.sprint-barra { position: relative; height: 1.3rem; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.sprint-barra-fill { height: 100%; background: var(--accent-grad); transition: width .4s ease; }
.sprint-barra span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .75rem; }
.sprint-campana-acciones { display: flex; gap: .4rem; align-items: center; }
.sprint-eventos li small { color: var(--muted); margin-right: .4rem; }
.sprint-refs-progreso { margin: .6rem 0 1rem; }
.sprint-zona { border: 2px dashed var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: .8rem; }
.sprint-zona.sobre { border-color: var(--accent); background: rgba(168, 85, 247, .06); }
.sprint-zona-drop { display: block; padding: 1.4rem; text-align: center; cursor: pointer; }
.sprint-refs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .8rem; margin-top: 1rem; }
.sprint-ref { padding: 0; overflow: hidden; }
.sprint-ref-media { position: relative; background: #000; }
.sprint-ref-media img, .sprint-ref-media video { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.sprint-ref-estado { position: absolute; top: .5rem; left: .5rem; }
.sprint-ref-cuerpo { padding: .7rem .9rem .9rem; display: grid; gap: .5rem; }
.sprint-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.sprint-chip { font-size: .75rem; border: 1px solid var(--border); border-radius: 999px; padding: .15rem .5rem; cursor: pointer; }
.sprint-chip:has(input:checked) { border-color: var(--accent); background: rgba(168, 85, 247, .15); }
.sprint-chip input { display: none; }
.sprint-ref-analisis p { margin: 0 0 .3rem; font-size: .85rem; }
.sprint-analisis-dl { font-size: .8rem; display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; }
.sprint-analisis-dl dt { color: var(--muted); }
.sprint-analisis-dl dd { margin: 0; }
.sprint-analizando::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; margin-right: .4rem; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.sprint-ref-acciones { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
.sprint-guardado { color: var(--ok); font-size: .75rem; }
.sprint-reutilizar ul { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .3rem; }

/* ---- Catálogo › Productos: lo comercial en la tarjeta, importar (secundario), importados sin fotos ---- */
.cat-comercial-linea { display: flex; flex-wrap: wrap; gap: .3rem .4rem; align-items: center; margin-top: .2rem; }
.cat-comercial-linea .tag-estado { margin: 0; }
.cat-comercial select { min-width: 5.5rem; }
.cat-en-prueba { display: flex; align-items: center; gap: .4rem; font-size: .84rem; margin-top: .6rem; }
.cat-importar > summary { display: inline-block; }
.cat-sinfotos .tabla-productos { margin-top: .4rem; }
.prod-subir-fotos { cursor: pointer; display: inline-block; }
.prod-form-fotos { margin: 0; }

/* ---- Productos (bloque 5): importar/sincronizar (ahora dentro de Catálogo), tiendas, Pixel ---- */
.prod-acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1rem; }
.prod-acciones .prod-importar { flex: 1 1 18rem; }
.prod-form-importar { margin-top: .5rem; }
.prod-form-importar input[type="url"] { width: 100%; }
.prod-link-config { display: inline-block; text-decoration: none; align-self: center; }
.prod-importando { margin-bottom: 1rem; }
.prod-filtros { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .82rem; margin: .4rem 0 .6rem; }
.prod-filtros label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.prod-filtros .vacio { padding: 0; font-size: .76rem; }

.tabla-productos td { vertical-align: middle; }
.tabla-productos .prod-thumb-celda { width: 56px; }
.prod-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; background: var(--panel-hover); }
.prod-thumb-vacia { background: repeating-linear-gradient(45deg, var(--panel-hover), var(--panel-hover) 6px, var(--panel) 6px, var(--panel) 12px); }
.prod-categoria { display: block; padding: 0; font-size: .72rem; }
.prod-url { display: block; font-size: .72rem; color: var(--muted); word-break: break-all; }
.prod-archivado { opacity: .55; }
.prod-form-inline { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: 0; }
.prod-form-inline .prod-precio { width: 6.5rem; }
.prod-form-inline .prod-moneda { width: 3.6rem; text-transform: uppercase; }
.prod-form-inline .prod-url-input { flex: 1 1 100%; min-width: 10rem; }
.prod-prioridad { width: 4.2rem; }
.prod-en-prueba { width: 1.1rem; height: 1.1rem; }
.prod-estado { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.prod-estado form.inline { margin: 0; }
.prod-acciones-fila { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.prod-acciones-fila form.inline { margin: 0; }
.prod-acciones-fila button, .prod-estado button { white-space: nowrap; }

.badge-fuente { text-transform: lowercase; }
.badge-fuente-shopify { color: #8bc36a; background: rgba(94, 142, 62, .12); }
.badge-fuente-shopify_publico { color: #8bc36a; background: rgba(94, 142, 62, .12); }
.badge-fuente-woo { color: #b48be0; background: rgba(127, 84, 179, .12); }  /* violeta de la marca WooCommerce, a propósito */
.badge-fuente-meli { color: #e0b33a; background: rgba(255, 230, 0, .22); }
.badge-fuente-csv { color: var(--muted); background: rgba(120, 120, 120, .12); }
.badge-fuente-url { color: var(--accent-texto); background: rgba(168, 85, 247, .12); }

.tabla-tiendas td { vertical-align: top; }
.tienda-acciones { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.tienda-acciones form.inline { margin: 0; }
.tienda-conectar { margin-top: .8rem; }
.tienda-tipos { margin: .6rem 0; }
.tienda-tipo-panel[hidden] { display: none; }
.tag-atribucion { text-transform: none; }
.tag-atribucion-pixel { color: var(--ok); background: rgba(47, 158, 110, .1); }
.tag-atribucion-tienda { color: var(--accent-texto); background: rgba(168, 85, 247, .12); }
.pixel-estado { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .84rem; margin: .4rem 0; }
.pixel-estado form.inline { margin: 0; flex-basis: 100%; }
.pixel-ayuda { margin-top: .6rem; }
.pixel-ayuda summary { cursor: pointer; font-size: .84rem; }
.pixel-ayuda ul { padding-left: 1.2rem; }
.pixel-ayuda li { margin-bottom: .4rem; }

/* ---- Tablero (Bloque 6) ---- */
/* Colores de las dos series del gráfico: viven en tokens.css (--tb-ingresos =
   --serie-1, --tb-gasto = --serie-2; serie validada sobre #120c1f el 2026-10-02).
   El texto del gráfico nunca usa el color de la serie: va en --muted / --text. */

.tb-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.tb-cabecera .vacio { padding-bottom: 0; }
.tb-csv { flex: none; text-decoration: none; margin-top: .3rem; }

.tb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); gap: .7rem; margin-bottom: .7rem; }
.tb-tiles-moneda { grid-column: 1 / -1; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: .3rem; }
.kpi-tile { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.kpi-tile span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kpi-tile strong { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; color: var(--text); }   /* se parte solo en el espacio antes de la moneda, nunca dentro del número */
.kpi-tile strong.tb-sin-dato { color: var(--muted-2); }
.kpi-tile small { font-size: .72rem; color: var(--muted); }
.kpi-tile-enlace { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.kpi-tile-enlace:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); }

.tb-vacio { margin: .6rem 0 1rem; padding: 1.2rem 1.3rem; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--bg); }
.tb-vacio h3 { margin: 0 0 .2rem; font-family: var(--font-display); font-size: 1.05rem; }
.tb-vacio .vacio { padding: 0; }
.tb-vacio a { color: var(--accent-texto); }

.tb-seccion { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.tb-seccion-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.tb-seccion h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; }
.tb-seccion .vacio { padding: .4rem 0; }
/* Mes a mes: el desglose del total, una fila por mes (y por moneda). En el
   celular es tabla-apilada: una tarjeta por fila. */
.tb-meses { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tb-meses th, .tb-meses td { padding: .45rem .6rem; border-bottom: 1px solid var(--border); text-align: left; }
.tb-meses th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.tb-meses .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-meses .tb-sin-dato { color: var(--muted-2); }
.tb-meses tr.tb-mes-varias td { border-bottom-style: dashed; }

/* Top 5 ganadoras */
.tb-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .8rem; }
.tb-ganadora { display: flex; gap: .8rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: .8rem; min-width: 0; }
.tb-ganadora-mini { width: 56px; height: 100px; border-radius: 8px; overflow: hidden; background: var(--panel-hover); flex: none; display: flex; align-items: center; justify-content: center; color: var(--muted-2); }
.tb-ganadora-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-ganadora-cuerpo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1; }
.tb-ganadora-titulo { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.tb-ganadora-titulo strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-bandera { font-size: 1.05rem; flex: none; }
.tb-ganadora-exp { color: var(--muted); font-size: .74rem; }
.tb-ganadora-kpis { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .74rem; color: var(--muted); }
.tb-ganadora-kpis b { color: var(--text); font-weight: 600; }
.tb-ganadora-motivo { margin: 0; font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-ganadora .btn-xs { align-self: flex-start; text-decoration: none; margin-top: .2rem; }

/* Alertas: el nivel va escrito además del color (nunca solo color). */
.tb-alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tb-alerta { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; padding: .65rem .9rem; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--muted-2); font-size: .86rem; line-height: 1.45; }
.tb-alerta-nivel { flex: none; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); min-width: 3.2rem; }
.tb-alerta-texto { flex: 1 1 320px; min-width: 0; }
.tb-alerta-ir { flex: none; color: var(--accent-texto); text-decoration: none; font-size: .8rem; white-space: nowrap; }
.tb-alerta-ir:hover { text-decoration: underline; }
.tb-alerta-alta { border-left-color: var(--error); }
.tb-alerta-alta .tb-alerta-nivel { color: var(--error); }
.tb-alerta-media { border-left-color: var(--tb-warn); }
.tb-alerta-media .tb-alerta-nivel { color: var(--tb-warn); }
.tb-alerta-baja { border-left-color: var(--muted-2); }
.tb-sin-alertas { color: var(--muted); }

@media (max-width: 720px) {
  .tb-tiles { grid-template-columns: repeat(2, 1fr); }
  .tb-top { grid-template-columns: 1fr; }
}

/* ---- Configuración › Puesta a punto (tarjetas por servicio) ---- */
.llaves-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: .9rem;
  margin-top: 1rem;
}
.llave-tarjeta {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .84rem;
}
.llave-configurada { border-left-color: var(--ok); }
.llave-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.llave-cabecera h3 { margin: 0; font-size: .98rem; }
/* Entre los párrafos propios de la tarjeta manda el `gap`: ni el margen por
   defecto de <p> ni el padding vertical de .vacio (pensado para estados vacíos
   sueltos). Solo hijos directos: el bloque de Conectar Meta que va dentro de
   la tarjeta Meta conserva su propio espaciado. */
.llave-tarjeta > p { margin: 0; }
.llave-tarjeta > .vacio { padding: 0; }
.llave-var { font-size: .72rem; }
.llave-var-falta { color: var(--warn); }
.llave-enlace { font-size: .8rem; align-self: flex-start; }
.llave-pasos summary { cursor: pointer; font-size: .82rem; }
.llave-pasos ol { padding-left: 1.2rem; margin: .4rem 0 0; font-size: .78rem; }
.llave-pasos li { margin-bottom: .3rem; }

/* Conectar tu tienda: paso a paso por plataforma */
.tienda-pasos { display: grid; gap: .4rem; margin: .6rem 0 1rem; }
.tienda-paso-a-paso { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .9rem; }
.tienda-paso-a-paso summary { cursor: pointer; font-size: .86rem; font-weight: 600; }
.tienda-paso-a-paso ol { padding-left: 1.2rem; margin: .5rem 0; font-size: .8rem; }
.tienda-paso-a-paso li { margin-bottom: .3rem; }

/* Experimentos › Reglas del motor */
.exp-reglas-motor { margin-bottom: 1rem; }

/* Sprints — producción */
.sprint-ideas { display: grid; gap: .7rem; }
.sprint-idea { padding: .8rem 1rem; display: grid; gap: .5rem; }
.sprint-idea-descartada { opacity: .55; }
.sprint-idea-cab { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sprint-idea-titulo { flex: 1; min-width: 12rem; font-weight: 700; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: .2rem .4rem; }
.sprint-idea-titulo:focus { border-color: var(--border); background: var(--panel-2); }
.sprint-idea textarea { width: 100%; }
.sprint-idea-refs { display: flex; gap: .3rem; }
.sprint-idea-acciones { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
.sprint-lote-modal { max-width: 34rem; }
.sprint-lote-estimado { font-weight: 700; }
.sprint-lote-resumen { margin: -.4rem 0 1rem; }
.sprint-revision-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .8rem; }
.sprint-pieza { padding: 0; overflow: hidden; outline: 2px solid transparent; }
.sprint-pieza.seleccionada { outline-color: var(--accent); }
.sprint-pieza-aprobada .sprint-revision-chip { border-color: var(--ok); color: var(--ok); }
.sprint-pieza-rechazada .sprint-revision-chip { border-color: var(--error); color: var(--error); }
.sprint-pieza-error { margin: 1rem; }
.sprint-qa { display: flex; gap: .3rem; align-items: center; }
.sprint-qa-score { font-weight: 700; min-width: 2.2rem; text-align: center; border-radius: 6px; padding: .1rem .3rem; background: var(--panel-2); }
.sprint-qa-pasa { color: var(--ok); }
.sprint-qa-revisar { color: var(--warn); }
.sprint-qa-falla { color: var(--error); }
.qa-check { font-size: .8rem; cursor: help; }
.qa-check.ok { color: var(--ok); }
.qa-check.mal { color: var(--error); }
/* _sprint_qa.html: al tocar la fila del QA se despliegan las razones (sin hover, sirve en el celular). */
.qa-detalle > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.qa-detalle > summary::-webkit-details-marker { display: none; }
.qa-razones { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: .8rem; color: var(--text); }
.qa-razones li.ok { color: var(--muted); }
.qa-razones li.mal strong { color: var(--error); }
.sprint-entrega { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .9rem; }
.sprint-entrega th, .sprint-entrega td { border-bottom: 1px solid var(--border); padding: .45rem .5rem; text-align: left; vertical-align: top; word-break: break-all; }
.generado-sprint { text-decoration: none; margin-left: .4rem; }
kbd { border: 1px solid var(--border); border-radius: 4px; padding: 0 .3rem; font-size: .8em; }

/* Bloque 7 — publicación orgánica (Experimentos, Crear, propuestas, Configuración) */
.org-bloque { grid-column: 2 / -1; flex-basis: 100%; display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; font-size: .8rem; }
.org-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.org-pub { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.org-pub form.inline { margin: 0; display: inline; }
.org-pub-plataforma { font-weight: 600; }
.org-estado-publicada { color: var(--ok); background: rgba(47, 158, 110, .1); }
.org-estado-error { color: var(--error); background: rgba(196, 63, 90, .1); }
.org-estado-publicando, .org-estado-en_cola { color: var(--warn); background: rgba(181, 129, 8, .1); }
.org-publicar { border: 1px solid var(--border); border-radius: var(--radius); padding: .35rem .7rem; background: var(--panel); }
.org-publicar > summary { cursor: pointer; font-size: .8rem; font-weight: 600; }
.org-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.org-canales { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.org-canal { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; cursor: pointer; }
.org-canal small { color: var(--muted); font-size: .72rem; }
.org-canal-no { color: var(--muted); cursor: not-allowed; }
.org-herramientas { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.org-aviso { font-size: .76rem; }
.org-texto { display: flex; flex-direction: column; gap: .3rem; }
.org-texto[hidden] { display: none; }   /* display:flex pisaría el atributo hidden */
.org-texto .campo-label { margin: 0; }
.org-texto input[type="text"], .org-texto textarea { width: 100%; box-sizing: border-box; font-size: .8rem; }
.org-pie { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.org-propuesta { flex-basis: 100%; border-top: 1px dashed var(--border); padding-top: .5rem; }
.org-canales-config { list-style: none; margin: .6rem 0 1rem; padding: 0; display: grid; gap: .5rem; }
.org-canal-config { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: var(--radius); padding: .6rem .9rem; font-size: .84rem; }
.org-canal-config-ok { border-left-color: var(--ok); }
.org-canal-cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------- Gasto real (Task 3): precio a la vista ---------- */
/* Chip del sidebar bajo el nombre del proyecto: generación en USD (+ pauta en su moneda). */
.sidebar-gasto { display: block; margin-top: .3rem; font-size: .68rem; line-height: 1.25; color: var(--muted); text-decoration: none; white-space: normal; border: 1px solid var(--border); border-radius: .6rem; padding: .25rem .5rem; transition: border-color .15s, color .15s; }
.sidebar-gasto:hover { color: var(--text); border-color: var(--accent); }
/* Configuración › Gasto: tiles reutilizan .kpi-tile; tablas por tipo e historial. */
.gasto-tiles { margin-top: .4rem; }
.gasto-descargas { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.gasto-tabla { margin-top: .4rem; }
.gasto-tabla th, .gasto-tabla td { padding: .4rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.gasto-tabla th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.gasto-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gasto-tabla .gasto-total td { font-weight: 700; border-bottom: 0; }
.gasto-historial { max-height: 28rem; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.gasto-historial .gasto-tabla { margin-top: 0; }
.gasto-historial thead th { position: sticky; top: 0; background: var(--panel); }
.gasto-fecha { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.gasto-detalle { word-break: break-word; }
.gasto-nota { padding-top: .6rem; }
/* Nota de precio junto a un botón («≈ US$ 0,01 la regla con IA»). */
.precio-nota { font-size: .74rem; }
/* Propuesta del motor: precio estimado de derivar/rescatar. */
.exp-propuesta-precio { color: var(--muted); white-space: nowrap; margin-left: .35rem; }
/* Panel admin: gasto de generación del mes por proyecto. */
.card-cliente-gasto { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--border); }
.card-cliente-gasto span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.card-cliente-gasto strong { font-variant-numeric: tabular-nums; font-size: .92rem; }

/* ---- Panel de administrador (admin.py): totales del mes, salud del worker,
   tabla comparativa de proyectos e historial. ---- */
.admin-bloque { margin-top: 2rem; }
.admin-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.admin-cabecera h2 { margin: 0; font-size: 1.15rem; }
.admin-cabecera .vacio { padding: 0; font-size: .82rem; }
.admin-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.kpi.kpi-alerta strong { color: var(--error); }
.admin-tipos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.admin-tipo { display: inline-block; font-size: .74rem; padding: .2rem .55rem; border-radius: 999px; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.admin-tipo strong { color: var(--text); }
.admin-tipos-celda { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 22rem; }
.admin-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.tabla-admin th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .6rem .75rem; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--panel-2); }
.tabla-admin td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabla-admin tr:last-child td { border-bottom: 0; }
.tabla-admin td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-admin td.admin-error, .tabla-admin td.admin-detalle { font-size: .8rem; color: var(--muted); max-width: 34rem; }
.admin-pill { display: inline-block; font-size: .72rem; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.admin-pill.ok { background: rgba(62, 207, 142, .15); color: var(--ok); }
.admin-pill.off { background: var(--panel-2); color: var(--muted); }
.admin-bloque h3 { font-size: .95rem; margin: 1.2rem 0 .5rem; }
.admin-bloque .grid-clientes { margin-top: 1.2rem; }

/* Meta en modo agencia (/admin/meta): formulario de conectar y selects de
   asignación por proyecto. */
.agencia-conectar summary::-webkit-details-marker { display: none; }
.agencia-form { display: grid; gap: .5rem; max-width: 32rem; margin-top: .6rem; }
.agencia-form label { display: grid; gap: .25rem; font-size: .82rem; }
.agencia-asignar { display: grid; gap: .35rem; min-width: 16rem; }
.agencia-asignar select { font-size: .8rem; max-width: 22rem; }
.tabla-agencia td.admin-detalle { max-width: 20rem; }
.meta-agencia-tarjeta .idea-header { margin-bottom: .6rem; }

/* Experimentos — galería primero */
.exp-galeria-cab { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.exp-galeria-cab h3 { margin:0; font-size:1rem; }
.exp-filtros { display:flex; gap:.4rem; flex-wrap:wrap; }
.exp-filtros .chip { border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:999px; padding:.2rem .7rem; font-size:.8rem; cursor:pointer; }
.exp-filtros .chip.activo { background:var(--accent); color:#fff; border-color:var(--accent); }
.exp-tarjetas { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap:.8rem; margin-top:.8rem; }
.exp-tarjeta { position:relative; display:flex; flex-direction:column; gap:.4rem; border:2px solid transparent; border-radius:10px; padding:.4rem; background:var(--panel-2); cursor:pointer; }
.exp-tarjeta:has(input:checked) { border-color:var(--accent); background:rgba(124, 58, 237, .16); }
.exp-tarjeta input[type=checkbox] { position:absolute; top:.6rem; left:.6rem; width:1.2rem; height:1.2rem; z-index:1; }
.exp-tarjeta-media { aspect-ratio:9/16; max-height:220px; overflow:hidden; border-radius:8px; background:#111; }
.exp-tarjeta-media img, .exp-tarjeta-media video { width:100%; height:100%; object-fit:cover; display:block; }
.exp-tarjeta-texto strong { font-size:.85rem; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exp-tarjeta-texto small { color:var(--muted); font-size:.72rem; }
.exp-barra { position:sticky; bottom:0; display:flex; gap:1rem; align-items:center; justify-content:space-between; background:var(--panel); border-top:1px solid var(--border); padding:.6rem 1rem; margin-top:.8rem; z-index:5; }
.exp-pasos { border:1px solid var(--border); border-radius:12px; padding:1rem; margin-top:1rem; }
/* display:flex pisaría el atributo hidden (misma trampa que .org-texto[hidden]): todo lo que
   el JS esconde con .hidden = true lleva su regla explícita. */
.exp-tarjeta[hidden], .exp-barra[hidden], .exp-pasos[hidden], .exp-pasos [data-paso][hidden],
.exp-pasos [data-solo-app][hidden], .exp-pasos [data-solo-no-app][hidden] { display:none; }
/* Instalaciones de la app (2026-10-07): las URLs de tienda y el App ID en «Avanzado». */
.exp-solo-app { margin-top:.8rem; }
.exp-solo-app p { flex-basis:100%; margin:0; }
.exp-pasos-nav { display:flex; gap:1rem; list-style:none; padding:0; margin:0 0 1rem; font-weight:600; color:var(--muted-2); }
.exp-pasos-nav li { cursor:pointer; }
.exp-pasos-nav li.activo { color:var(--accent-texto); }
.exp-pasos-botones { display:flex; gap:.6rem; margin-top:1rem; }
.exp-resumen { font-weight:600; margin-top:.8rem; }
.exp-cuadricula table { border-collapse:collapse; margin:.6rem 0; }
.exp-cuadricula th, .exp-cuadricula td { border:1px solid var(--border); padding:.3rem .6rem; text-align:center; font-size:.85rem; }
.exp-cuadricula tbody th { text-align:left; font-weight:500; text-transform:none; letter-spacing:0; }
/* La miniatura del árbol es de 48×85 (arriba): el video llena lo mismo que la imagen. */
.exp-pieza-mini video { width:100%; height:100%; object-fit:cover; display:block; }
/* Paso 1: cada país con su presupuesto en una sola línea, en filas que se envuelven. */
.exp-pasos .exp-paises { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; }
.exp-pasos .exp-paises .fe-destino { flex:0 0 auto; white-space:nowrap; }

/* --- Nicho y avatares (docs/superpowers/plans/2026-09-18-nicho-avatares-parte1.md) --- */
.nicho-fuentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .8rem; margin-bottom: .8rem; }
.nicho-conteos { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.nicho-comentarios { display: flex; flex-direction: column; gap: .4rem; }
.nicho-comentario { padding: .5rem .8rem; border: 1px solid var(--border); border-radius: 8px; }
.nicho-comentario.excluido { opacity: .5; }
.nicho-comentario p { margin: .2rem 0; }
.nicho-paginas { display: flex; gap: .5rem; }
.nicho-nucleo { margin-top: .8rem; padding: .8rem 1rem; }
.nicho-sub { margin: .5rem 0; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: 8px; }
.nicho-sub.estado-aprobado { border-color: var(--accent); }
.nicho-sub.estado-descartado { opacity: .55; }
.nicho-cita { margin: .3rem 0; padding-left: .8rem; border-left: 3px solid var(--border); font-style: italic; }
.estado-nicho-armando { background: rgba(168, 85, 247, .15); }
.estado-nicho-generando { background: rgba(232, 179, 57, .15); }
.estado-nicho-revisando, .estado-nicho-aprobado { background: rgba(62, 207, 142, .2); }
.estado-nicho-propuesto { background: rgba(168, 85, 247, .15); }
.estado-nicho-descartado { background: rgba(255, 95, 122, .15); }

/* Configuración › Meta: el cliente elige cómo conectar (2026-09-20) */
.meta-formas { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: .5rem 0; }
.meta-forma { border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1rem; }
.meta-forma-recomendada { border-color: var(--accent); }
.meta-forma-titulo { font-weight: 600; margin: 0 0 .4rem; }
.meta-forma-puntos { margin: 0 0 .7rem 1.1rem; padding: 0; font-size: .92rem; }
.meta-id-creatv code { font-size: 1.15rem; padding: .15rem .45rem; }
.meta-buscar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; margin: .5rem 0; }
.meta-activos { display: grid; gap: .6rem; max-width: 36rem; }
.meta-activos fieldset { border: 1px solid var(--border); border-radius: 8px; display: grid; gap: .3rem; }
.meta-avisar form { display: grid; gap: .4rem; max-width: 32rem; margin-top: .5rem; }

/* Nicho · últimas recolecciones (Reddit, YouTube, Apify) */
.nicho-recolecciones { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }

/* Referentes — biblioteca (spec 2026-09-23 §8) */
.ref-panel { display:flex; flex-direction:column; gap:.6rem; margin-top:.6rem; }
/* Envoltorio de los filtros: en escritorio no existe para el diseño; en el celular se pliega. */
.ref-filtros { display: contents; }
.ref-filtros-boton { display: none; }
.ref-copycoders { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin:.4rem 0 .8rem; padding:.6rem .8rem;
  border:1px dashed var(--border); border-radius:var(--radius); background:var(--bg); font-size:.85rem; color:var(--muted); }
.ref-copycoders strong { color:var(--text); }
.ref-copycoders span { flex:1 1 20rem; min-width:0; }
.ref-selects { display:flex; gap:.5rem; flex-wrap:wrap; }
.ref-selects select, .ref-selects input { font-size:.8rem; max-width:16rem; }
.ref-conteo { color:var(--muted); font-size:.8rem; margin:.2rem 0; }
.ref-tarjetas { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap:.8rem; }
.ref-tarjeta { position:relative; display:flex; flex-direction:column; gap:.4rem; border-radius:10px; padding:.4rem; background:var(--panel-2); min-width:0; }
.ref-check { position:absolute; top:.6rem; left:.6rem; z-index:1; }
.ref-check input[type=checkbox] { width:1.2rem; height:1.2rem; }
.ref-tarjeta-candidato { cursor:pointer; }
.ref-tarjeta-candidato input[type=checkbox] { margin-bottom:.3rem; }
.ref-tarjeta-candidato img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; }
.ref-candidatos { margin-top:.6rem; }
.ref-usar-sprint-lista { list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.ref-usar-sprint-lista li { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.4rem .2rem; border-bottom:1px solid var(--border); font-size:.85rem; }
.ref-barra { position:sticky; bottom:0; display:flex; gap:1rem; align-items:center; justify-content:space-between; background:var(--panel); border-top:1px solid var(--border); padding:.6rem 1rem; margin-top:.8rem; z-index:5; }
.ref-barra[hidden] { display:none; }
.ref-tarjeta-media { display:block; width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:8px; background:#111; border:0; padding:0; cursor:zoom-in; }
.ref-tarjeta-media img { width:100%; height:100%; object-fit:cover; display:block; }
.ref-tarjeta-texto strong { font-size:.82rem; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ref-tarjeta-texto small { color:var(--muted); font-size:.72rem; }
.ref-etiquetas { display:flex; gap:.3rem; flex-wrap:wrap; }
.ref-etiquetas .tag-estado { font-size:.68rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.ref-marca { background:var(--accent); color:#fff; }
.ref-mas { text-align:center; margin:.8rem 0; }
.ref-ficha .detalle-media img { width:100%; height:auto; border-radius:8px; }
.ref-cuerpo { white-space:pre-wrap; font-size:.82rem; }
@media (max-width: 640px) { .ref-tarjetas { grid-template-columns:repeat(2, minmax(0, 1fr)); } .ref-selects select, .ref-selects input { max-width:100%; } }

/* Recrear con mi producto (spec 2026-09-23 §9) */
.ref-recrear-titulo { margin: 0 0 .6rem; }
.ref-recrear-form textarea { width: 100%; font-size: .82rem; }
.ref-recrear-acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
/* Recrear fiel (spec 2026-09-30): textos leídos de la referencia e imágenes a generar. */
.ref-recrear-bloque { margin: .7rem 0; display: grid; gap: .45rem; }
.ref-recrear-bloque legend { font-weight: 600; font-size: .85rem; }
.ref-recrear-bloque small { color: var(--muted); }
.ref-recrear-bloque .ayuda { margin: 0; font-size: .8rem; color: var(--muted); }
.ref-recrear-textos { display: grid; gap: .5rem; }
.ref-recrear-textos label { display: grid; gap: .2rem; font-size: .8rem; color: var(--muted); }
.ref-recrear-textos input { width: 100%; }
.ref-recrear-leyendo { margin: 0; font-size: .85rem; color: var(--muted); }
.ref-recrear-prompts { margin-top: .6rem; }
.ref-recrear-prompts .ayuda { font-size: .8rem; margin: .4rem 0; color: var(--muted); }
.ref-usos { margin-top: .4rem; }

/* Formularios dentro de un <dialog class="generado-modal"> (Traer referentes,
   Mis barridos). Una columna con padding propio: `.generado-modal-cuerpo` es
   la rejilla imagen | datos de la ficha y NO sirve para un formulario. */
.generado-modal:has(.modal-form) { width: min(620px, 94vw); }
.generado-modal:has(.modal-form.ancho) { width: min(960px, 94vw); }
.modal-form { max-height: 92vh; overflow: auto; padding: 1.6rem 1.6rem 0; }
.modal-form-cab { padding-right: 2.6rem; margin-bottom: 1.2rem; }
.modal-form-cab h3 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1.3rem; }
.modal-form-cab p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.modal-form-seccion { padding: 1.1rem 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .8rem; }
.modal-form-titulo { font-family: var(--font-display); font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.modal-form-titulo b { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; }
.modal-form-fila { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; }
.modal-form-campo { display: flex; flex-direction: column; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--muted); }
.modal-form-campo.crece { flex: 1 1 240px; }
.modal-form-campo select { width: auto; min-width: 9rem; }
.modal-form-ayuda { margin: 0; font-size: .76rem; color: var(--muted); line-height: 1.5; }
.modal-form-aviso { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--radius-sm); background: rgba(232, 179, 57, .12); border: 1px solid rgba(232, 179, 57, .35); font-size: .82rem; }
.modal-form-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; cursor: pointer; padding-bottom: .55rem; }
.modal-form-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); margin: 0; }
.con-unidad { display: inline-flex; align-items: center; gap: .45rem; }
.con-unidad input { width: 6.5rem; }
.con-unidad em { font-style: normal; font-weight: 400; color: var(--muted); font-size: .82rem; }
.modal-form-pie { position: sticky; bottom: 0; background: var(--panel); border-top: 1px solid var(--border); margin: 0 -1.6rem; padding: 1rem 1.6rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.modal-form-precio { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 200px; }
.modal-form-precio strong { font-family: var(--font-display); font-size: 1.15rem; }
.modal-form-precio small { color: var(--muted); font-size: .74rem; line-height: 1.4; }
.modal-form-precio button { align-self: flex-start; margin-top: .3rem; }
.modal-form-tabla { overflow-x: auto; margin-bottom: 1.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.modal-form > .vacio { padding-bottom: 1.6rem; }
.tag-en-curso { color: var(--accent-texto); background: rgba(124, 58, 237, .1); }
.barrido-fecha { white-space: nowrap; }
.barrido-sub { display: block; margin-top: .2rem; font-size: .72rem; color: var(--muted); line-height: 1.4; }
/* La barra del barrido en curso: su celda no tiene otro contenido, así que sin ancho mínimo se encogía a un punto. */
.barrido-progreso { min-width: 9rem; }
.barrido-progreso .barra-progreso { margin-top: .2rem; }
.barrido-progreso .progreso-texto { display: block; margin-top: .3rem; font-size: .72rem; }

/* Opciones excluyentes: control segmentado (pastillas) y tarjetas. El radio
   queda encima, invisible, para que el clic y el teclado sigan siendo suyos. */
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; }
.segmentado label { position: relative; cursor: pointer; }
.segmentado input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmentado span { display: block; padding: .42rem 1rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--muted); transition: background .15s, color .15s; }
.segmentado input:checked + span { background: var(--panel); color: var(--text); box-shadow: var(--shadow-soft); }
.segmentado input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.segmentado input:disabled + span { opacity: .5; cursor: not-allowed; }
.opcion-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.opcion-tarjeta { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: .8rem .95rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.opcion-tarjeta:hover { border-color: var(--muted-2); }
.opcion-tarjeta input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcion-tarjeta strong { font-size: .88rem; }
.opcion-tarjeta small { font-size: .76rem; color: var(--muted); }
.opcion-tarjeta:has(input:checked) { border-color: var(--accent); background: rgba(124, 58, 237, .05); box-shadow: 0 0 0 1px var(--accent); }
.opcion-tarjeta:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Traer referentes: solo el campo del modo elegido (los dos siguen en el DOM). */
.ref-traer-fuente { margin: 0 0 1rem; font-size: .8rem; color: var(--muted); }
.ref-traer-fuente strong { color: var(--text); font-weight: 600; }
.ref-traer form:has(input[name="modo"][value="marca"]:checked) [data-solo="palabra"],
.ref-traer form:has(input[name="modo"][value="palabra"]:checked) [data-solo="marca"] { display: none; }
.ref-traer [data-solo="marca"] { display: flex; flex-direction: column; gap: .4rem; }
.ref-traer form:has(input[name="fuente"][value="apify"]:checked) [data-solo-fuente="atria"],
.ref-traer form:has(input[name="fuente"][value="trendtrack"]:checked) [data-solo-fuente="atria"],
.ref-traer form:not(:has(input[name="fuente"][value="apify"]:checked)) [data-solo-fuente="apify"] { display: none; }
.ref-traer form:not(:has(input[name="fuente"][value="trendtrack"]:checked)) [data-solo-fuente="trendtrack"] { display: none; }
/* TrendTrack solo busca por palabra clave: no ofrece la tarjeta «De una marca». */
.ref-traer form:has(input[name="fuente"][value="trendtrack"]:checked) [data-no-fuente="trendtrack"] { display: none; }
@media (max-width: 520px) {
  .modal-form { padding: 1.2rem 1rem 0; }
  .modal-form-pie { margin: 0 -1rem; padding: .9rem 1rem 1rem; }
  .opcion-tarjetas { grid-template-columns: 1fr; }
  .modal-form-pie .btn-generar { width: 100%; }
}

/* ── estilos/legado/03-base-visual-comun-2026-09-25-spec.css ── */
/* ============================================================
   Base visual común (2026-09-25) — spec:
   docs/superpowers/specs/2026-09-25-base-visual-comun-design.md
   Va al final a propósito: es la fuente de verdad de campos, botones,
   encabezado de pestaña y estado vacío, y pisa reglas viejas por orden
   sin tocarlas una por una.
   ============================================================ */

/* Campos: todo lo que se escribe o se elige se ve igual (el estilo de
   arriba solo cubría text/number/password: 42 campos quedaban nativos). */
input:not([type]), input[type="email"], input[type="url"], input[type="search"], input[type="tel"],
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: .6rem .75rem; font: inherit; font-size: .87rem;
  transition: border-color .15s, box-shadow .15s;
}
/* Dentro de una fila flex un campo con `flex: 1` no se achicaba por debajo de
   su ancho propio (~20 caracteres) y empujaba el botón vecino fuera de la
   pantalla en celular («Agregar link» en Crear). */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { min-width: 0; }
/* El control nativo mide su ancho sin contar el botón con estilo y recortaba
   «Sin archivos seleccionados» a «Sin archivo…leccionados». */
input[type="file"] { width: 20rem; max-width: 100%; }
.campo-label { text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--text); }
/* Etiqueta que envuelve su campo («Descripción <textarea>»): mismo tamaño
   que las demás. `:where` deja la especificidad en 0, así cualquier
   componente con clase propia (.modal-form-campo, .fe-opciones…) manda. */
:where(label:has(> textarea, > select, > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]))) {
  display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--text);
}
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem 1.1rem; margin: 0 0 1rem; min-width: 0; }
legend { font-family: var(--font-display); font-size: .95rem; font-weight: 600; color: var(--text); padding: 0 .4rem; }

/* Botones: secundario por defecto; las variantes van DESPUÉS con la misma
   especificidad para ganarle. .menu-movil y .au-filtro no pintan su fondo: sin entrar
   aquí quedaban con el gris del navegador (2026-10-02, capturas del sistema de estilos). */
button:not([class]), .btn, .btn-secondary, .btn-sm, .btn-xs, .menu-movil, .au-filtro {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
}
button:not([class]):hover:not(:disabled), .btn:hover:not(:disabled), .btn-secondary:hover:not(:disabled),
.btn-sm:hover:not(:disabled), .btn-xs:hover:not(:disabled), .menu-movil:hover,
.au-filtro:not(.activo):hover { border-color: var(--muted-2); }
a.btn, a.btn-sm, a.btn-xs, a.btn-generar, a.btn-guardar, a.btn-secondary, a.btn-primary {
  display: inline-flex; align-items: center; text-decoration: none;
}
.btn-generar, .btn-aprobar, .btn-primary, .btn.primario {
  background: var(--accent-grad); color: #fff; border: 1px solid transparent; box-shadow: var(--shadow-soft);
}
.btn-generar:hover:not(:disabled), .btn-aprobar:hover:not(:disabled), .btn-primary:hover:not(:disabled),
.btn.primario:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-glow); border-color: transparent; }
.btn-guardar { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
.btn-rechazar { background: transparent; color: var(--error); border: 1px solid rgba(196, 63, 90, .35); }
.btn-rechazar:hover:not(:disabled) { background: rgba(196, 63, 90, .1); border-color: rgba(196, 63, 90, .35); }
.btn-peligro, .btn-eliminar-producto { background: rgba(196, 63, 90, .1); color: var(--error); border: 1px solid rgba(196, 63, 90, .4); }
.btn-peligro:hover:not(:disabled), .btn-eliminar-producto:hover:not(:disabled) { background: rgba(196, 63, 90, .2); border-color: rgba(196, 63, 90, .4); }

/* Desplegables: fila clicable con flecha (antes «+ Nuevo sprint» parecía
   una caja de texto). Los que ya traen .idea-chevron no llevan otra. */
summary { cursor: pointer; }
.swap-card-resumen { font-weight: 600; }
.swap-card-resumen:hover { color: var(--accent-texto); }
.swap-card-resumen:not(:has(.idea-chevron))::after {
  content: ""; margin-left: auto; flex: none; width: .45rem; height: .45rem;
  border-right: 2px solid var(--muted-2); border-bottom: 2px solid var(--muted-2);
  transform: rotate(-45deg); transition: transform .15s;
}
.swap-card[open] > .swap-card-resumen:not(:has(.idea-chevron))::after { transform: rotate(45deg); }
#alta-sprint > summary, #nuevo-estudio > summary { color: var(--accent-texto); }

/* Encabezado de pestaña: título grande, una línea, acciones a la derecha. */
.panel-cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .8rem 1.5rem;
  margin: 0 0 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border);
}
.panel-cabecera > :first-child { flex: 1 1 24rem; min-width: 0; }
.panel-cabecera h2 {
  display: block; margin: 0 0 .35rem; font-size: 1.6rem; font-weight: 700; color: var(--text);
  text-transform: none; letter-spacing: -0.015em;
}
.panel-cabecera h2::before { display: none; }
.panel-cabecera-desc { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; max-width: 72ch; }
.panel-cabecera-desc + .panel-cabecera-desc { margin-top: .4rem; }
/* max-width: sin él, `flex: 0 0 auto` toma el ancho de una sola línea y en el celular la cabecera del
   sprint («+ Campaña · Generar lote · Revisar · Más») medía 434 px a 375: la página corría de lado. */
.panel-cabecera-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex: 0 0 auto; max-width: 100%; }

/* Estado vacío: un título, una línea y (si aplica) el botón para empezar. */
.estado-vacio {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  margin: .5rem 0 1.2rem; padding: 2rem 1.5rem; border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--bg);
}
.estado-vacio-titulo { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text); }
.estado-vacio-texto { margin: 0; max-width: 52ch; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.estado-vacio .btn-generar, .estado-vacio .btn-sm { margin-top: .5rem; }

/* ── estilos/legado/04-crear-flow-plus-corregir-prompts-con-cla.css ── */
/* ============================================================
   Crear › Flow Plus: corregir prompts con Claude (_crear_flowplus.html)
   Prefijo gp-. Lista de prompts (1/3) + prompt elegido y chat (2/3);
   en una sola columna por debajo de 900px. Los textos largos del prompt
   envuelven (pre-wrap + overflow-wrap) para no empujar la página de lado.
   ============================================================ */
.gp [hidden] { display: none !important; }
.gp { min-width: 0; }
.gp-intro { padding-top: 0; max-width: 72ch; }
.gp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.2rem; align-items: start; }
.gp-col-lista, .gp-detalle { min-width: 0; }
.gp-col-lista { display: flex; flex-direction: column; gap: .7rem; }
.gp-nuevo-btn { align-self: flex-start; }
.gp-mono, .gp-texto, .gp-dif { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
textarea.gp-mono { font-size: .8rem; line-height: 1.5; }
.gp-ayuda { color: var(--muted); font-size: .76rem; line-height: 1.45; margin: .35rem 0 0; }
.gp-botones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.gp-cargando { padding: .4rem 0; }

/* Avisos en línea: .flash de la app, más compactos. */
.gp-aviso.flash { margin: .7rem 0 0; padding: .6rem .8rem; font-size: .82rem; }
.gp-aviso p { margin: 0; overflow-wrap: anywhere; }
.gp-aviso ul { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--text); font-weight: 400; }
.gp-aviso li { overflow-wrap: anywhere; }
.gp-aviso button { margin-top: .5rem; }

/* Formulario «Nuevo prompt» */
.gp-nuevo { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem 1rem 1rem; }
.gp-nuevo textarea, .gp-nuevo input, .gp-nuevo select { background: var(--panel); }

/* Lista de prompts */
.gp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.gp-item {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: .4rem;
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .7rem .8rem;
  font-family: var(--font-body); font-weight: 400; transition: border-color .15s, box-shadow .15s, background .15s;
}
.gp-item:hover { border-color: var(--muted-2); }
.gp-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gp-item[aria-current="true"] {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
  background: var(--panel-2);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.gp-item-titulo { font-family: var(--font-display); font-weight: 600; font-size: .88rem; overflow-wrap: anywhere; }
.gp-sin-titulo { color: var(--muted); font-style: italic; }
.gp-meta { display: flex; flex-wrap: wrap; gap: .3rem .65rem; align-items: center; font-size: .74rem; color: var(--muted); }
/* Las etiquetas de estado de la app usan --ok / --warn como texto; aquí se
   oscurecen un poco para que se lean sobre fondo claro. */
.gp .tag-en-uso { color: var(--ok); color: color-mix(in srgb, var(--ok) 55%, var(--text)); }
.gp .tag-advertencia { color: var(--warn); color: color-mix(in srgb, var(--warn) 50%, var(--text)); }

/* Detalle del prompt elegido */
.gp-detalle { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.25rem; }
.gp-detalle > .vacio { padding: .4rem 0; }
.gp-cab { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.gp-cab h3 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.gp-version { font-variant-numeric: tabular-nums; }
.gp-bloque-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .35rem; }
.gp-bloque-cab .campo-label { margin: 0; }
.gp-texto {
  margin: 0; font-size: .8rem; line-height: 1.55; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .75rem .85rem; max-height: 28rem; overflow-y: auto;
}
.gp-texto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gp-texto.gp-recien { animation: gp-recien 1.4s ease; }
@keyframes gp-recien {
  0% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.gp-texto-original { background: var(--panel); border-style: dashed; color: var(--muted); }
.gp-original { margin-top: 1rem; }
.gp-editar textarea { min-height: 14rem; }
.gp-acciones { margin-top: .9rem; }
.gp-problemas {
  margin: .8rem 0 0; padding: .7rem .9rem; font-size: .84rem; line-height: 1.45;
  border: 1px solid var(--warn); border-left-width: 4px; border-radius: var(--radius-sm);
  background: var(--panel-2);
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
}
.gp-problemas ul, .gp-problemas-propuesta ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.gp-problemas li, .gp-problemas-propuesta li { overflow-wrap: anywhere; }

.gp-contexto { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem .8rem; font-size: .84rem; }
.gp-contexto summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: .8rem; }
.gp-contexto[open] summary { margin-bottom: .2rem; }
.gp-contexto-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.gp-fijos { margin: 0; padding-left: 1.1rem; }
.gp-fijos li { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; }

/* Chat con Claude */
.gp-chat-titulo {
  font-family: var(--font-display); font-size: .78rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; margin: 1.8rem 0 .6rem;
  padding-top: 1.2rem; border-top: 1px solid var(--border);
}
.gp-hilo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.gp-msj { min-width: 0; border-radius: var(--radius); padding: .65rem .85rem .75rem; font-size: .86rem; line-height: 1.5; }
.gp-msj-autor { display: block; font-family: var(--font-display); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .2rem; }
.gp-msj-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.gp-msj-texto + .gp-msj-texto { margin-top: .35rem; }
.gp-msj-persona {
  align-self: flex-end; max-width: 85%;
  border: 1px solid var(--accent); border-bottom-right-radius: 4px;
  background: var(--panel-2);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.gp-msj-persona .gp-msj-autor { color: var(--accent-texto); }
.gp-msj-claude { align-self: stretch; background: var(--panel-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.gp-msj-error { border-color: var(--error); background: var(--panel); background: color-mix(in srgb, var(--error) 7%, var(--panel)); }
.gp-msj-error .gp-msj-autor { color: var(--error); }
.gp-msj-detalle { color: var(--muted); font-size: .8rem; }

.gp-pensando { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-style: italic; }
.gp-puntos { display: inline-flex; gap: 4px; }
.gp-puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .25; animation: gp-latido 1.2s ease-in-out infinite; }
.gp-puntos i:nth-child(2) { animation-delay: .2s; }
.gp-puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes gp-latido { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.gp-msj-pendiente .btn-guardar { margin-top: .5rem; }
@media (prefers-reduced-motion: reduce) {
  .gp-puntos i { animation: none; opacity: .6; }
  .gp-texto.gp-recien { animation: none; }
}

/* Tarjeta «Propuesta de Claude» con el diff por líneas */
.gp-propuesta { margin-top: .65rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.gp-propuesta-en-uso { border-color: var(--ok); }
.gp-propuesta-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.gp-propuesta-cab strong { font-family: var(--font-display); font-size: .82rem; }
.gp-dif-resumen { display: inline-flex; gap: .4rem; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.gp-mas { color: var(--ok); font-weight: 700; }
.gp-menos { color: var(--error); font-weight: 700; }
.gp-dif { font-size: .76rem; line-height: 1.5; padding: .3rem 0; }
.gp-dif-linea { display: block; position: relative; padding: 0 .75rem 0 1.7rem; white-space: pre-wrap; overflow-wrap: anywhere; text-decoration: none; color: var(--text); }
.gp-dif-marca { position: absolute; left: .6rem; top: 0; width: .8rem; text-align: center; color: var(--muted); }
.gp-dif-igual { color: var(--muted); }
.gp-dif-quita { background: rgba(220, 38, 38, .09); text-decoration: line-through; text-decoration-color: rgba(255, 95, 122, .6); }
.gp-dif-quita .gp-dif-marca { color: var(--error); }
.gp-dif-pone { background: rgba(22, 163, 74, .12); }
.gp-dif-pone .gp-dif-marca { color: var(--ok); }
.gp-dif-nada { margin: 0; padding: .4rem .75rem; color: var(--muted); font-family: var(--font-body); font-size: .8rem; }
.gp-dif-plegado {
  display: block; width: 100%; text-align: left; border-radius: 0; margin: .15rem 0;
  padding: .2rem .75rem .2rem 1.7rem; background: var(--panel-2); color: var(--muted);
  border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
  font-family: var(--font-body); font-weight: 500; font-size: .72rem;
}
.gp-dif-plegado:hover { color: var(--text); background: var(--panel-hover); }
.gp-dif-plegado:active { transform: none; }
.gp-problemas-propuesta {
  padding: .55rem .75rem; border-top: 1px solid var(--error); font-size: .8rem;
  color: var(--error); color: color-mix(in srgb, var(--error) 70%, var(--text));
  background: var(--panel-2); background: color-mix(in srgb, var(--error) 7%, var(--panel));
}
.gp-propuesta-pie { display: flex; align-items: center; gap: .5rem .7rem; flex-wrap: wrap; padding: .55rem .75rem; border-top: 1px solid var(--border); }
.gp-propuesta-pie small { color: var(--muted); font-size: .74rem; }
.gp-propuesta > .gp-aviso.flash { margin: 0 .75rem .6rem; }

/* Caja para escribirle a Claude */
.gp-entrada { margin-top: 1rem; }
.gp-entrada textarea { min-height: 5rem; }
.gp-entrada-pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem .8rem; flex-wrap: wrap; margin-top: .55rem; }
.gp-entrada-pie small { color: var(--muted); font-size: .74rem; }
.gp-entrada-pie button { margin-left: auto; }

/* Solo para lectores de pantalla («Se quita:», «Se agrega:» en el diff). */
.gp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .gp-layout { grid-template-columns: minmax(0, 1fr); }
  .gp-detalle { scroll-margin-top: 5rem; }
}
@media (max-width: 560px) {
  /* En celular la pestaña ya es una tarjeta: el detalle suelta su borde y su
     relleno para que el prompt y el diff tengan todo el ancho posible. */
  .gp-detalle { padding: 1rem 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
  .gp-msj { padding: .5rem .55rem .6rem; }
  .gp-propuesta-cab, .gp-propuesta-pie, .gp-problemas-propuesta { padding-left: .6rem; padding-right: .6rem; }
  .gp-msj-persona { max-width: 100%; }
  .gp-texto { padding: .6rem .65rem; max-height: 22rem; }
  .gp-dif-linea { padding-left: 1.4rem; padding-right: .5rem; }
  .gp-dif-marca { left: .35rem; }
}

/* ---- Flow Plus › Guiones (gpg-) ---- */
.gpg { margin: 0 0 2rem; padding: 0 0 1.5rem; border-bottom: 1px solid var(--border); }
.gpg-cab, .gpg-lote-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.gpg-form { display: grid; gap: .5rem; margin: .8rem 0; }
.gpg-form textarea, .gpg-form input[type=text], .gpg-form input[type=number], .gpg-form select { width: 100%; box-sizing: border-box; }
.gpg-lotes { list-style: none; padding: 0; margin: .8rem 0; display: grid; gap: .6rem; }
.gpg-lote, .gpg-guion, .gpg-video { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: .8rem; }
.gpg-guiones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.gpg-guion-btn { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 999px; padding: .3rem .7rem; font: inherit; font-size: .82rem; cursor: pointer; }
.gpg-guion-btn.activo { border-color: var(--accent); color: var(--accent-texto); }
.gpg-lineas li { margin: .2rem 0; overflow-wrap: anywhere; }
.gpg-marca { font-size: .75rem; color: var(--muted); border: 1px dashed var(--border); border-radius: 6px; padding: 0 .3rem; }
.gp-sub { margin: 1.5rem 0 .6rem; }
.gpg-tabla { display: block; overflow-x: auto; max-width: 100%; width: 100%; border-collapse: collapse; font-size: .85rem; }
.gpg-tabla th, .gpg-tabla td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.gpg-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: .6rem; }
.gpg-ok { color: var(--ok); }
.gpg-mal { color: var(--error); }
@media (max-width: 600px) { .gpg-tabla { font-size: .78rem; } }

/* Configuración en apartados (spec 2026-09-26-configuracion-apartados):
   pastillas como las de Catálogo; Meta a todo el ancho en Conexiones. */
/* Detalles (2026-09-26): foto que no carga → recuadro neutro (base.html);
   pie de la barra lateral con el gasto en su propia línea. */
img.img-rota { object-fit: contain; background: var(--panel-2); padding: 12%; }
.sidebar-usuario { flex-wrap: wrap; }
.sidebar-usuario-datos { flex: 1 1 0; }
.sidebar-usuario .sidebar-gasto { flex: 1 1 100%; margin-top: 0; }
.sidebar-plegada .sidebar-usuario .sidebar-gasto { display: none; }
.config-apartados { margin: 0 0 1.4rem; }
.config-apartado > h2:first-child { margin-top: .4rem; }
.llaves-tarjetas-ancha { grid-template-columns: minmax(0, 1fr); }

/* Selector de idioma (2026-09-26): enlaces «English · Español» antes del
   login, en el header público. */
.idioma-enlaces { margin-left: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.idioma-enlaces a { color: var(--accent-texto); text-decoration: none; }

/* ── estilos/legado/05-tablero-de-sprints-2026-09-26-spec.css ── */
/* =====================================================================
   Tablero de Sprints (2026-09-26) — spec
   docs/superpowers/specs/2026-09-26-sprints-tablero-design.md.
   Solo variables de :root (el modo oscuro las redefine).
   ===================================================================== */
.sprint-nuevo-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .8rem 1rem; margin-top: .8rem; }
.sprint-nuevo-ancho { grid-column: 1 / -1; }
.sprint-nuevo-form label[hidden] { display: none; }
.tablero-titulo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.tablero-resumen { margin: .3rem 0 0; font-weight: 600; }
.tablero-mas { position: relative; }
.tablero-mas-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: .4rem; min-width: 220px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .6rem; }
.tablero-mas-menu button { width: 100%; }
.tablero-editar-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .8rem 1rem; margin-top: .8rem; }
.tablero-editar-campos .ancho { grid-column: 1 / -1; }
.tablero-editar-campos input[hidden] { display: none; }
.tablero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .9rem; margin-top: 1rem; }
.tablero-tarjeta { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem;
  cursor: pointer; text-align: left; color: var(--text); font: inherit; display: flex; flex-direction: column; gap: .35rem;
  min-width: 0; transition: border-color .15s, box-shadow .15s; }
.tablero-tarjeta:hover, .tablero-tarjeta:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-soft); outline: none; }
.tablero-tarjeta.activa { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.tablero-tarjeta p { margin: 0; overflow-wrap: anywhere; }
.tablero-tarjeta-cab { display: flex; align-items: center; gap: .5rem; }
.tablero-tarjeta-nueva { border-style: dashed; align-items: center; justify-content: center; min-height: 160px; gap: .2rem; text-align: center; }
.chip-etapa { display: inline-block; border-radius: 999px; padding: .05rem .55rem; font-size: .75rem; font-weight: 700;
  background: var(--accent-grad); color: #fff; }
.tablero-miniaturas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: .2rem 0; }
.tablero-miniaturas img, .tablero-miniatura-vacia { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px;
  background: var(--panel-2); border: 1px dashed var(--border); display: block; }
.tablero-miniaturas img { border-style: solid; }
.tablero-tarjeta-cantidades { font-size: .85rem; color: var(--muted); }
.tablero-siguiente { color: var(--accent-texto); font-weight: 600; font-size: .9rem; }
.tablero-fondo { position: fixed; inset: 0; background: rgba(10, 10, 25, .35); z-index: 60; }
.tablero-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--panel);
  border-left: 1px solid var(--border); box-shadow: var(--shadow); z-index: 61; overflow-y: auto; padding: 1rem 1.2rem 2rem; }
.tablero-panel[hidden], .tablero-fondo[hidden] { display: none; }
body.panel-abierto { overflow: hidden; }
.panel-campana-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.panel-campana-cab h2 { margin: 0; font-size: 1.15rem; }
.panel-seccion { border-top: 1px solid var(--border); padding-top: .8rem; margin-top: .8rem; display: grid; gap: .6rem; }
.panel-persona-rapida { margin-top: .6rem; }
.panel-persona-rapida form { display: grid; gap: .5rem; margin-top: .5rem; }
@media (max-width: 760px) {
  .tablero-panel { width: 100%; border-left: 0; padding: .8rem 16px 2rem; }
  .tablero-mas-menu { position: static; margin-top: .4rem; box-shadow: none; }
}
.panel-seccion h3 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.panel-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .6rem; }
.panel-fila-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel-opciones { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.panel-opciones label { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px;
  padding: .2rem .7rem; cursor: pointer; font-size: .85rem; margin: 0; position: relative; }
.panel-opciones input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.panel-opciones label:has(input:checked) { background: var(--accent-grad); color: #fff; border-color: transparent; }
.panel-opciones label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.panel-sugerencias { margin: 0; font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.chip-sugerencia { border: 1px dashed var(--border); background: var(--panel-2); color: var(--text); border-radius: 999px;
  padding: .1rem .6rem; font-size: .8rem; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.panel-familias { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chip-familia { display: inline-flex; gap: .3rem; align-items: center; border: 1px solid var(--accent); border-radius: 999px;
  padding: .1rem .6rem; font-size: .8rem; background: var(--panel-2); }
.chip-familia button { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; min-height: 0; }
.panel-familia-buscar { flex: 1 1 180px; min-width: 0; }
.panel-elegidos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.panel-elegido { position: relative; margin: 0; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--panel-2);
  border: 1px solid var(--border); }
.panel-elegido img { width: 100%; height: 100%; object-fit: cover; display: block; }
.panel-elegido-vacio { border-style: dashed; }
.panel-elegido figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-size: .7rem; background: var(--panel); padding: .1rem .3rem; }
.panel-quitar, .panel-sumar { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; min-height: 0; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; line-height: 1; padding: 0; }
.panel-sugeridos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr)); gap: .5rem; }
.panel-sugerido { position: relative; margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel-2); }
.panel-sugerido img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.panel-sugerido figcaption { font-size: .72rem; padding: .25rem .35rem; overflow-wrap: anywhere; }
.panel-acciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.panel-sub { margin: 0; font-size: .85rem; }
.panel-campana-aviso { background: var(--panel-2); border-left: 3px solid var(--warn); padding: .4rem .6rem; margin: .6rem 0 0; font-size: .85rem; }
.panel-campana-aviso[hidden] { display: none; }
.panel-subir form { display: grid; gap: .5rem; margin-top: .5rem; }
.panel-campana-pie { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: 1rem; padding-top: .8rem; }
@media (max-width: 760px) {
  .panel-elegidos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* V1 (ronda final): `.vacio` trae `padding: 1rem 0` para líneas de estado
   vacío sueltas; dentro de un <label> con select/textarea (flex-column por la
   base visual) esa pista quedaba en su propia fila con un salto enorme y
   desalineaba los selects de la fila vecina. La tarjeta sufría lo mismo con
   `.tablero-tarjeta-enfoque vacio`. */
.sprint-nuevo-form label .vacio, .tablero-editar-campos label .vacio, .panel-campana label .vacio {
  display: inline; padding: 0;
}
.tablero-tarjeta .vacio { padding: 0; }
/* Entrega 2 (2026-09-27): pestañas del panel y describir referentes */
.panel-pestanas { display: flex; gap: .4rem; flex-wrap: wrap; margin: .8rem 0 .2rem; }
.panel-pestana { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px;
  padding: .25rem .8rem; font: inherit; font-size: .9rem; cursor: pointer; min-height: 2.25rem; }
.panel-pestana span { color: var(--muted); margin-left: .2rem; }
.panel-pestana[aria-selected="true"] { background: var(--accent-grad); color: #fff; border-color: transparent; }
.panel-pestana[aria-selected="true"] span { color: #fff; }
.tablero-panel.panel-ancho { width: min(960px, 100%); }
.panel-describir { display: grid; gap: .5rem; padding: .6rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.panel-describir[hidden] { display: none; }
.panel-describir-cab { display: flex; gap: .5rem; align-items: center; }
.panel-describir-cab img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.enlace-describir { background: none; border: 0; padding: 0; min-height: 0; font: inherit; font-size: .7rem;
  color: var(--accent-texto); cursor: pointer; }
.panel-sofisticacion { margin: 0; font-size: .85rem; }
.panel-ideas-conteo { margin: 0; }
.panel-ideas { gap: .5rem; }
.panel-idea { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .7rem; background: var(--panel); }
.panel-idea > summary { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; cursor: pointer; }
.panel-idea-aprobada { border-color: var(--ok); }
.panel-idea-estado { margin-left: auto; font-size: .8rem; color: var(--muted); }
.panel-idea-cuerpo { display: grid; gap: .5rem; margin-top: .6rem; }
.panel-idea-refs { display: flex; gap: 4px; flex-wrap: wrap; }
.panel-idea-refs img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.chip-tipo { font-size: .7rem; font-weight: 700; border: 1px solid var(--border); border-radius: 999px; padding: 0 .45rem; }
.panel-generar { border: 1px dashed var(--accent); border-radius: var(--radius); padding: .8rem; }
.panel-piezas-cab { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.panel-piezas-cab p { margin: 0; }
.panel-piezas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .8rem; margin-top: .8rem; }
/* align-content: las filas del grid no se estiran a la altura de la tarjeta vecina (los botones medían 43 px). */
.panel-pieza { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem; display: grid; gap: .4rem;
  background: var(--panel); min-width: 0; align-content: start; }
.panel-pieza-aprobada { border-color: var(--ok); }
.panel-pieza-rechazada { border-color: var(--error); }
.panel-pieza-media video, .panel-pieza-media img { width: 100%; max-height: 360px; object-fit: contain; display: block;
  border-radius: 6px; background: var(--panel-2); }
.panel-pieza-qa { margin: 0; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.panel-rechazo { display: grid; gap: .4rem; }
.panel-rechazo[hidden] { display: none; }


/* 2026-10-09, enmienda lote 7: los errores se leen fuera de la miniatura cuadrada. */
.panel-analisis-error { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; min-width: 0; }
.panel-analisis-error p { flex: 1 1 15rem; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.panel-analisis-error form { max-width: 100%; min-width: 0; }
.panel-analisis-error button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* ── estilos/legado/06-crear-compositor-2026-09-27-spec.css ── */
/* ============================================================
   Crear: compositor (2026-09-27) — spec:
   docs/superpowers/specs/2026-09-27-crear-compositor-design.md
   Una tarjeta en dos mitades (bandeja arriba, formulario abajo) y una barra
   de pastillas con menús. Solo tokens de :root (modo oscuro único).
   ============================================================ */
.crear-comp { max-width: 920px; margin-top: 1rem; position: relative; }
.crear-comp [hidden] { display: none !important; }
.crear-comp-arriba { background: var(--panel); border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 1rem 1.1rem .3rem; }
.crear-comp-abajo { background: var(--panel); border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: .1rem 1.1rem 1rem; }
.crear-comp.soltando .crear-comp-arriba, .crear-comp.soltando .crear-comp-abajo { border-color: var(--accent-2); background: var(--panel-hover); }

/* Referencias (bandeja + lo elegido del catálogo) */
.crear-refs { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.crear-refs + .crear-refs, #fp-bandeja-wrap + .crear-refs { margin-top: .6rem; }
.crear-ref { position: relative; margin: 0; width: 76px; }
.crear-ref img { width: 76px; height: 76px; object-fit: cover; display: block; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); }
.crear-ref.es-video img { border: 2px solid var(--accent-2); }
.crear-ref figcaption { margin-top: .25rem; font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crear-ref form { margin: 0; }
.crear-ref-quitar { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: .8rem; line-height: 1; cursor: pointer; }
.crear-refs-acciones { display: flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: center; align-self: center; }
.crear-refs-acciones form { margin: 0; }
.crear-refs-vacio { margin: 0 0 .4rem; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.crear-ref-aviso { margin: 0 0 .5rem; font-size: .8rem; color: var(--muted); }
.crear-subida { margin-top: .6rem; font-size: .78rem; color: var(--muted); }

/* Botones con forma de enlace (Describir con IA, Quitar todas, super prompt) */
.crear-enlace { background: none; border: 0; padding: 0; min-height: 0; box-shadow: none; color: var(--accent-texto);
  font-family: var(--font-body); font-size: .8rem; font-weight: 600; cursor: pointer; text-align: left; }
.crear-enlace:hover:not(:disabled) { text-decoration: underline; filter: none; box-shadow: none; }
.crear-enlace-gris { color: var(--muted); font-weight: 500; }

/* Texto */
.crear-etiquetas { margin: .7rem 0 .1rem; }
.crear-etiquetas:empty { display: none; }
.crear-comp-abajo textarea { width: 100%; min-height: 6.5rem; resize: vertical; background: transparent; border: 0; box-shadow: none;
  padding: .7rem .1rem .5rem; font-size: 1rem; line-height: 1.55; color: var(--text); }
.crear-comp-abajo textarea:focus { outline: none; box-shadow: none; border: 0; }
.crear-comp-abajo textarea.con-error { box-shadow: inset 0 0 0 1px var(--error); border-radius: var(--radius-sm); }
.crear-oculto-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barra: pastillas a la izquierda; precio y Generar a la derecha */
.crear-barra { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: .8rem; margin-top: .3rem; }
.crear-pills { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; min-width: 0; }
.crear-pill-zona { position: relative; }
.crear-pill { display: inline-flex; align-items: center; gap: .3rem; min-height: 0; padding: .45rem .85rem; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text); box-shadow: none;
  font-family: var(--font-body); font-size: .8rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.crear-pill:hover { background: var(--panel-hover); }
.crear-pill[aria-expanded="true"] { border-color: var(--accent-2); background: var(--panel-hover); }
.crear-pill.con-aviso { border-color: var(--warn); }
.crear-mas { width: 2.2rem; height: 2.2rem; padding: 0; justify-content: center; font-size: 1.2rem; }
.crear-generar { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.crear-precio { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.crear-generar .btn-generar { border-radius: 999px; padding: .65rem 1.35rem; margin: 0; }

/* Menús */
.crear-menu { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 30; width: 320px; max-width: calc(100vw - 2rem);
  display: flex; flex-direction: column; gap: .3rem; padding: .5rem; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.crear-menu-ancho { width: 370px; }
.crear-menu-der { left: auto; right: 0; }
.crear-menu-titulo { margin: .35rem .45rem .1rem; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.crear-menu-item { display: flex; flex-direction: row; gap: .7rem; align-items: flex-start; width: 100%; min-height: 0; padding: .55rem .6rem;
  text-align: left; background: none; border: 0; border-radius: var(--radius-sm); box-shadow: none; color: var(--text);
  font-family: var(--font-body); font-size: .85rem; font-weight: 400; cursor: pointer; }
.crear-menu-item:hover { background: var(--panel-hover); }
.crear-menu-item strong, .crear-opcion strong, .crear-interruptor strong { display: block; font-size: .85rem; font-weight: 600; color: var(--text); }
.crear-menu-item small, .crear-opcion small, .crear-interruptor small { display: block; margin-top: .1rem; font-size: .74rem; font-weight: 400; line-height: 1.4; color: var(--muted); }
.crear-menu-ico { flex: none; width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--panel); }
.crear-menu-fila { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding: .15rem .45rem; }
.crear-menu-fila input[type="text"], .crear-menu-fila input[type="url"] { flex: 1 1 10rem; margin: 0; }
.crear-menu-sep { height: 1px; background: var(--border); margin: .25rem .3rem; }
.crear-nota { margin: .1rem .45rem; font-size: .74rem; line-height: 1.45; color: var(--muted); }
.crear-nota-aviso { color: var(--warn); }

/* Listas de una opción (tipo, modelo, Mi música) */
.crear-opciones { display: flex; flex-direction: column; gap: .2rem; }
.crear-opcion { position: relative; display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem;
  border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.crear-opcion:hover { background: var(--panel-hover); }
.crear-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.crear-opcion:has(input:checked) { border-color: var(--accent-2); background: var(--panel-hover); }
.crear-opcion:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.crear-opcion > span { flex: 1; min-width: 0; }
.crear-modelo em { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--accent-texto); white-space: nowrap; }
.crear-opcion-simple { width: 100%; min-height: 0; padding: .5rem .6rem; text-align: left; background: none; box-shadow: none;
  border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: .85rem; font-weight: 500; cursor: pointer; }
.crear-opcion-simple:hover { background: var(--panel-hover); }
.crear-opcion-simple[aria-pressed="true"] { border-color: var(--accent-2); background: var(--panel-hover); }

/* Fichas (duración, formato, estilos de música) */
.crear-fichas { display: flex; flex-wrap: wrap; gap: .35rem; padding: .1rem .35rem; }
.crear-ficha { min-height: 0; padding: .35rem .75rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--border);
  box-shadow: none; color: var(--text); font-family: var(--font-body); font-size: .78rem; font-weight: 500; cursor: pointer; }
.crear-ficha:hover:not(:disabled) { background: var(--panel-hover); }
.crear-ficha[aria-pressed="true"] { border-color: var(--accent-2); background: var(--panel-hover); }
.crear-ficha:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

/* Interruptores (borrador, sonido de la escena) */
.crear-interruptor { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: var(--radius-sm); cursor: pointer; }
.crear-interruptor > span { flex: 1; min-width: 0; }
.crear-interruptor input { order: 2; flex: none; appearance: none; -webkit-appearance: none; position: relative; width: 2.2rem; height: 1.3rem;
  margin: 0; border-radius: 999px; background: var(--panel-hover); border: 1px solid var(--border); cursor: pointer; transition: background .15s ease; }
.crear-interruptor input::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 6px); height: calc(1.3rem - 6px);
  border-radius: 50%; background: var(--muted); transition: transform .15s ease, background .15s ease; }
.crear-interruptor input:checked { background: var(--accent-grad); border-color: transparent; }
.crear-interruptor input:checked::after { transform: translateX(.9rem); background: var(--text); }
.crear-interruptor input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crear-interruptor input:disabled { opacity: .45; cursor: not-allowed; }

/* Música */
.crear-musica { display: flex; flex-direction: column; gap: .2rem; }
.crear-musica-inicio { display: flex; flex-direction: column; gap: .3rem; padding: .2rem .45rem; }
.crear-musica-inicio audio { width: 100%; height: 32px; }
.crear-inicio { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); }
.crear-inicio input { width: 4.5rem; margin: 0; }
#mm-wrap .mm-panel { padding: 0 .45rem .2rem; }

/* Pie y catálogo */
.crear-pie { max-width: 920px; display: flex; justify-content: space-between; align-items: center; gap: .4rem 1rem; flex-wrap: wrap;
  margin: .6rem .2rem 0; font-size: .78rem; color: var(--muted); }
.crear-pie .crear-enlace { color: var(--muted); font-weight: 500; }
.crear-pie .crear-enlace strong { color: var(--accent-texto); font-weight: 600; }
/* Receta de tomas (2026-09-30): va pegada a «Crear super prompt», que es lo único que la usa. */
.crear-super { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .8rem; min-width: 0; }
.crear-receta { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; margin: 0; font-size: .78rem; color: var(--muted); }
.crear-receta { max-width: 100%; }
.crear-receta > span { white-space: nowrap; }
.crear-receta select { width: auto; min-width: 0; max-width: 100%; flex: 0 1 auto; margin: 0; padding: .2rem .5rem; font-size: .78rem; }
.crear-pie .crear-receta-desc { flex-basis: 100%; margin: 0; }
.crear-consejos { max-width: 920px; margin: .5rem .2rem 0; font-size: .78rem; color: var(--muted); }
.crear-consejos summary { font-weight: 500; }
.crear-consejos ul { margin: .35rem 0 0; padding-left: 1.2rem; line-height: 1.5; }
.selector-en-dialogo .comparacion-contenido { padding: 0; border: 0; background: none; }
.selector-resumen { margin: 0 0 .8rem; font-size: .82rem; color: var(--muted); }

.crear-velo { display: none; }
@media (max-width: 760px) {
  .crear-comp-arriba { padding: .8rem .8rem .3rem; }
  .crear-comp-abajo { padding: .1rem .8rem .8rem; }
  /* Una sola línea: con wrap, cada línea de una columna mide lo que su hijo más
     ancho (la fila de pastillas) y «Generar» se salía de la tarjeta. */
  .crear-barra { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .crear-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
  .crear-pills::-webkit-scrollbar { display: none; }
  .crear-pill-zona { position: static; flex: none; }
  .crear-menu, .crear-menu-ancho, .crear-menu-der { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none;
    max-height: 75vh; overflow-y: auto; z-index: 60; padding: .9rem .8rem 1.2rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  body.crear-menu-abierto .crear-velo { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .55); }
  .crear-generar { margin-left: 0; }
  .crear-generar .btn-generar { flex: 1; }
}

/* ---------- Triple Whale (2026-09-28): pestaña de métricas y evaluación ----------
   Reusa tiles, secciones, alertas y el gráfico del Tablero (.kpi-tile, .tb-*);
   aquí solo lo propio: barra de controles, reparto, tablas e ideas. */
.tw-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .6rem 1rem; margin: 0 0 1rem; }
.tw-controles { display: flex; flex-wrap: wrap; gap: .6rem; }
.tw-controles .campo-label { display: flex; flex-direction: column; gap: .2rem; margin: 0; }
.tw-sync { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; font-size: .8rem; color: var(--muted); }
.tw-sync form.inline { margin: 0; }
.tw-progreso { margin: 0 0 1rem; }
.tw-aviso { display: block; padding: .4rem .6rem; border-radius: 8px; font-size: .82rem; }
.tb-alerta-bien { border-left-color: var(--ok); }
.tb-alerta-bien .tb-alerta-nivel { color: var(--ok); }
.tw-reparto { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.tw-reparto-item { display: flex; flex-direction: column; gap: .2rem; min-width: 8.5rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.tw-reparto-item strong { font-size: 1.2rem; }
.tw-reparto-item small { color: var(--muted); font-size: .76rem; }
.tw-tabla-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tw-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }
.tw-tabla th { text-align: left; font-weight: 600; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: .45rem .5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tw-tabla td { padding: .5rem; border-bottom: 1px solid var(--border); vertical-align: top; white-space: nowrap; }
.tw-tabla td.tw-nombre, .tw-tabla td.tw-senales { white-space: normal; min-width: 12rem; }
.tw-nombre strong { display: block; overflow-wrap: anywhere; }
.tw-nombre small, .tw-motivo { display: block; color: var(--muted); font-size: .74rem; white-space: normal; max-width: 18rem; }
.tw-senales .tag-estado { margin: 0 .25rem .25rem 0; display: inline-block; white-space: normal; }
.tw-nombre .tw-accion { margin: .25rem 0 0; }
.tw-idea .tag-estado { display: inline-block; margin: .1rem 0 .3rem; }
.tw-filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.tw-filtros .chip { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; cursor: pointer; min-height: 0; }
.tw-filtros .chip.activo { background: var(--accent); color: #fff; border-color: var(--accent); }
.tw-evaluar { margin: .4rem 0 .8rem; }
.tw-eval { margin-top: .6rem; }
.tw-eval h4 { margin: 1rem 0 .5rem; font-size: .9rem; }
.tw-eval-resumen { font-size: .92rem; line-height: 1.55; margin: .2rem 0 .6rem; }
.tw-patrones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .4rem 1.2rem; }
.tw-patrones ul { margin: 0; padding-left: 1.1rem; font-size: .86rem; line-height: 1.5; }
.tw-ideas, .tw-analizados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .8rem; }
.tw-idea, .tw-analizado { border: 1px solid var(--border); border-radius: 12px; padding: .8rem .9rem; background: var(--bg); font-size: .84rem; min-width: 0; }
.tw-idea > strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.tw-idea p { margin: .4rem 0; line-height: 1.45; }
.tw-idea form { margin-top: .5rem; }
.tw-idea-hechas { margin: .5rem 0 0; }
.tw-idea-piezas { margin: .15rem 0 0; padding-left: 1.1rem; font-size: .8rem; line-height: 1.5; }
.tw-idea-piezas .tag-estado { display: inline-block; }
.tw-origen-idea { color: var(--accent-texto, var(--muted)); }
.tw-angulo { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; margin: .4rem 0; font-size: .8rem; }
.tw-angulo dt { color: var(--muted); font-weight: 600; }
.tw-angulo dd { margin: 0; }
.tw-escena { color: var(--muted); }
.tw-prompt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tw-analizado { display: flex; gap: .7rem; align-items: flex-start; }
.tw-analizado img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.tw-analizado p { margin: .3rem 0; line-height: 1.4; }
@media (max-width: 760px) {
  .tw-barra { align-items: stretch; }
  .tw-controles, .tw-controles .campo-label { width: 100%; }
}

/* ── estilos/legado/07-celular-revision-de-pantallas-2026-09-28.css ── */
/* ============================================================
   Celular: revisión de pantallas (2026-09-28). Lo que a 375 px se
   salía de la pantalla, quedaba en una sola columna eterna o
   escondía información. Nada cambia en escritorio.
   ============================================================ */
@media (max-width: 760px) {
  /* Crear › Generados: dos columnas (con una sola, 126 piezas eran ~61 000 px de alto). */
  .generados-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .generado-pie { padding: .45rem .55rem .55rem; }
  .generado-pie strong, .generado-pie small { overflow-wrap: anywhere; }
  /* Experimentos › galería: 150 px por columna no cabían dos por 4 px → 127 piezas en una columna (~37 000 px). */
  .exp-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .exp-tarjeta { min-width: 0; }
  .exp-tarjeta .tag-estado { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  /* Resumen de un experimento o de un cambio de producto: las etiquetas bajan de línea (se salían 100+ px). */
  .swap-card-resumen { flex-wrap: wrap; row-gap: .35rem; }
  /* Publicar orgánico: «TikTok — falta token_tiktok.json» no cabía en una línea y se salía 40–66 px. */
  .org-canal { max-width: 100%; flex-wrap: wrap; }
  .org-canal small { overflow-wrap: anywhere; }
  /* Árbol del experimento (país → pieza): menos sangría y la columna de métricas/publicar baja a su propia fila
     (con tres columnas, «Publicar orgánico» quedaba de 160 px). */
  .exp-pais { padding-left: .6rem; }
  .exp-piezas { margin-left: .3rem; }
  .exp-pieza { grid-template-columns: 48px minmax(0, 1fr); padding-left: .6rem; }
  .exp-pieza > :nth-child(n+3) { grid-column: 1 / -1; }
  .kpis-mini { justify-content: flex-start; }
  /* Experimentos › paso 1: el presupuesto de cada país alineado a la derecha y sin salirse
     («United States» + 8rem no cabían); la edad «18 – 65» en una línea, no en tres. */
  .exp-pasos .exp-paises .fe-destino { display: flex; flex: 1 1 100%; width: 100%; white-space: normal; min-width: 0; }
  .exp-pasos .exp-paises .fe-destino input[type=number] { flex: 0 1 7rem; min-width: 0; margin-left: auto; }
  .exp-pasos label:has(> input[name=edad_min]) {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: .4rem; flex-wrap: wrap;
  }
  /* Catálogo › producto: el selector de fotos (20rem) empujaba su formulario 45 px fuera de la tarjeta. */
  .producto-gestion-acciones > * { max-width: 100%; min-width: 0; }
  /* Referentes: los filtros (8 pastillas, 4 selectores y la búsqueda) ocupaban toda la primera
     pantalla; se pliegan detrás de «Filtros (n)». */
  .ref-filtros-boton { display: inline-flex; align-self: flex-start; gap: .3rem; }
  .ref-filtros:not(.abierto) { display: none; }
  .ref-filtros.abierto { display: flex; flex-direction: column; gap: .6rem; }
  /* Botones «×» de quitar (referencia en Crear, foto del catálogo, personaje): 22 px eran
     poco para un dedo; 32 px en el celular. */
  .crear-ref-quitar, .producto-gestion-foto button, .personaje-eliminar button {
    width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: .9rem;
  }
  /* Selector de opciones en píldora (p. ej. «Fuente» en Traer referentes): con opciones largas se
     parte en dos líneas y la píldora redonda parecía una mancha; esquinas redondeadas normales. */
  .segmentado { border-radius: 14px; }
  .segmentado span { border-radius: 11px; }
  /* Rutas y nombres técnicos largos en un párrafo (Configuración › Marca) se partían fuera de la caja. */
  p code, li code, small code { overflow-wrap: anywhere; }
  /* Tablero › alertas: el error crudo de Meta (JSON sin espacios) empujaba la página a 792 px. */
  .tb-alerta { min-width: 0; }
  .tb-alerta-texto { min-width: 0; overflow-wrap: anywhere; }
  /* Red de seguridad: una palabra larga (URL, id, JSON) se parte en vez de salirse. */
  main :is(p, li, small, dd, blockquote) { overflow-wrap: break-word; }
}
@media (max-width: 760px) {
  /* Filas de botones y filtros: bajan de línea en vez de apretar (en «Revisar» los selectores quedaban de 32 px). */
  .acciones { flex-wrap: wrap; }
  .sprint-acciones label.fe-check { flex: 1 1 7rem; min-width: 0; }
  .sprint-acciones label.fe-check select { width: 100%; }
}
/* Atajos de teclado y «pasa el cursor»: no aplican en pantallas táctiles. */
@media (hover: none) { .solo-teclado { display: none; } }

/* Tablas en el celular: cada fila es una tarjeta y cada dato lleva el título
   de su columna delante (static/tablas.js copia los títulos a data-etiqueta).
   Antes las columnas de la derecha (monto, costo, acciones) quedaban escondidas. */
@media (max-width: 640px) {
  :is(table.tabla-apilada, table.tabla-admin, table.tabla-tiendas, table.tabla-productos,
      table.gasto-tabla, table.sprint-entrega, table.gpg-tabla) {
    display: block; width: 100%; border: 0; font-size: .86rem;
  }
  :is(table.tabla-apilada, table.tabla-admin, table.tabla-tiendas, table.tabla-productos,
      table.gasto-tabla, table.sprint-entrega, table.gpg-tabla) :is(thead, .tabla-cabecera) { display: none; }
  :is(table.tabla-apilada, table.tabla-admin, table.tabla-tiendas, table.tabla-productos,
      table.gasto-tabla, table.sprint-entrega, table.gpg-tabla) :is(tbody, tfoot) { display: block; }
  :is(table.tabla-apilada, table.tabla-admin, table.tabla-tiendas, table.tabla-productos,
      table.gasto-tabla, table.sprint-entrega, table.gpg-tabla) tr {
    display: block; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .4rem .7rem; margin-bottom: .55rem; background: var(--panel);
  }
  :is(table.tabla-apilada, table.tabla-admin, table.tabla-tiendas, table.tabla-productos,
      table.gasto-tabla, table.sprint-entrega, table.gpg-tabla) td {
    display: block; width: auto; max-width: none; padding: .3rem 0; border: 0; text-align: right;
    white-space: normal; word-break: normal; overflow-wrap: anywhere; min-width: 0;
  }
  /* El título flota a la izquierda y el dato (con todas sus partes) fluye a la derecha. */
  :is(table.tabla-apilada, table.tabla-admin, table.tabla-tiendas, table.tabla-productos,
      table.gasto-tabla, table.sprint-entrega, table.gpg-tabla) td::before {
    content: attr(data-etiqueta); float: left; max-width: 42%; margin-right: .75rem; text-align: left;
    color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    line-height: 1.6;
  }
  :is(table.tabla-apilada, table.tabla-admin, table.tabla-tiendas, table.tabla-productos,
      table.gasto-tabla, table.sprint-entrega, table.gpg-tabla) td::after { content: ""; display: block; clear: both; }
  :is(table.tabla-apilada, table.tabla-admin, table.tabla-tiendas, table.tabla-productos,
      table.gasto-tabla, table.sprint-entrega, table.gpg-tabla) td:not([data-etiqueta]) { text-align: left; }
  :is(table.tabla-apilada, table.tabla-admin, table.tabla-tiendas, table.tabla-productos,
      table.gasto-tabla, table.sprint-entrega, table.gpg-tabla) td:not([data-etiqueta])::before { content: none; }
  :is(table.tabla-apilada, table.tabla-admin, table.tabla-tiendas, table.tabla-productos,
      table.gasto-tabla, table.sprint-entrega, table.gpg-tabla) td:empty { display: none; }
  .admin-scroll, .modal-form-tabla { overflow-x: visible; border: 0; background: none; }
}

/* Detalle técnico de un error (el texto crudo de Meta, para soporte): plegado y sin salirse. */
.detalle-tecnico { margin: .2rem 0 .6rem; font-size: .76rem; color: var(--muted); }
.detalle-tecnico code { display: block; margin-top: .3rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── estilos/legado/08-crear-audios-crear-audios-html-spec-2026.css ── */
/* ============================================================
   Crear › Audios (_crear_audios.html, spec 2026-09-28)
   Prefijo au-. Formulario (izquierda) + Tus audios (derecha) desde 900px,
   una sola columna por debajo. Nada pide más ancho que su caja.
   ============================================================ */
.au [hidden] { display: none !important; }
.au { min-width: 0; }
.au-intro { padding-top: 0; max-width: 72ch; }
.au-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.4rem; align-items: start; }
@media (max-width: 899px) { .au-layout { grid-template-columns: minmax(0, 1fr); } }
.au-form, .au-lista-col { min-width: 0; }
.au-form textarea { width: 100%; }
.au-fila { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: .6rem 0; }
.au-fila > label { flex: 1 1 10rem; min-width: 0; }
.au-inicio input { width: 6rem; }
.au-ayuda { color: var(--muted); font-size: .76rem; line-height: 1.45; margin: .35rem 0 0; overflow-wrap: anywhere; }
.au-ayuda a { color: var(--accent-texto); }
.au-musica audio, .au-item audio { width: 100%; height: 32px; }
.au-subir-btn { cursor: pointer; }
.au-botones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.au-sub { margin: 0 0 .6rem; }
.au-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.au-item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.au-item-cab { display: flex; flex-direction: column; gap: .15rem; }
.au-item-nombre { overflow-wrap: anywhere; }
.au-item-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Galería de voces (2026-09-29): tarjetas con ▶; la elegida lleva el borde de
   acento; en el celular, dos columnas. */
.au-voces-caja legend span { color: var(--accent-texto); }
.au-voces-filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .6rem; }
.au-filtro { border-radius: 999px; padding: .3rem .75rem; font-size: .78rem; }
.au-filtro.activo { background: var(--accent); border-color: var(--accent); color: #fff; }
.au-voces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .5rem; }
.au-voz { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .55rem 2.7rem .55rem .7rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; min-width: 0; }
.au-voz:hover { border-color: var(--muted-2); }
.au-voz[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.au-voz-nombre { font-weight: 600; font-size: .88rem; }
.au-voz-tono { color: var(--muted); font-size: .72rem; line-height: 1.3; overflow-wrap: anywhere; }
.au-voz-play { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 50%; padding: 0; font-size: .8rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
.au-voz-play:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-texto); }
.au-voz-play.sonando { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 760px) { .au-voces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Nicho · investigar el nicho (Parte 3) */
.nicho-inv-cabecera { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.nicho-inv-cabecera h3 { margin: 0; }
.nicho-inv-cifras { margin: .4rem 0; font-size: .9rem; }
.nicho-inv-pasos { list-style: none; padding: 0; margin: .6rem 0; display: flex; flex-direction: column; gap: .3rem; }
.nicho-inv-paso { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .88rem; }
.nicho-inv-paso-nombre { min-width: 11rem; font-weight: 600; }
.nicho-inv-paso.paso-pendiente { opacity: .6; }
.nicho-inv-aviso { color: var(--warn); overflow-wrap: anywhere; }
.nicho-inv-chips { border: 0; padding: 0; margin: .4rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.nicho-inv-chips legend { font-weight: 600; margin-bottom: .2rem; }
.nicho-inv-chips[hidden], .nicho-inv-casa[hidden] { display: none; }   /* display:flex pisaría el atributo hidden */
#inv-marcar-todas { align-self: flex-start; }                         /* el formulario estira a sus hijos a todo el ancho */
.nicho-inv-estimado { margin: .6rem 0; font-size: .9rem; display: flex; flex-direction: column; gap: .15rem; }
.nicho-inv-tabla td { overflow-wrap: anywhere; }

/* Nicho · avatares del proyecto (spec 2026-09-29) */
.nicho-avatares-resumen { margin-bottom: 1rem; }
.nicho-avatares-muestra { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0; }
.nicho-avatares-muestra a { text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nicho-completar { margin-bottom: .6rem; }
.nicho-otros { margin-top: 1rem; }
/* Fix round 1 (Ruling 25): estas dos son las primeras en meter texto libre y
   largo dentro de un .tag-estado, que es white-space: nowrap -- sin esto se
   corta en silencio contra el borde del celular (body ya tiene overflow-x:
   hidden). No se toca .tag-estado global: el resto de sus usos son etiquetas
   cortas que SÍ deben quedar en una sola línea. */
.nicho-faltantes { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }

/* ── Flow Plus: imágenes de cada escena (2026-09-30) ───────────────────────
   _gpg_escenas.html: las imágenes del video (Image 1…N + extra) y, por escena,
   fichas que se prenden y apagan. Filas flexibles que se envuelven: en el
   celular nada empuja la página hacia el costado. */
.gpg-escenas { margin: 1rem 0; }
.gpg-escenas h6 { margin: .9rem 0 .4rem; font-size: .82rem; color: var(--muted); font-weight: 600; }
.gpg-pool { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.gpg-img { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; width: 132px; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); padding: .4rem; }
.gpg-img.falta { border-style: dashed; }
.gpg-img img, .gpg-img .gpg-img-vacia { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--panel-2); }
.gpg-img-vacia { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.1rem; }
.gpg-img-nombre { font-size: .75rem; line-height: 1.3; overflow-wrap: anywhere; }
.gpg-img-estado { font-size: .72rem; color: var(--muted); }
.gpg-img.falta .gpg-img-estado { color: var(--warn); }
.gpg-img-acciones { display: flex; flex-wrap: wrap; gap: .3rem; }
.gpg-img-btn { font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.gpg-img-btn:hover { border-color: var(--accent); }
.gpg-subir { cursor: pointer; }
.gpg-subir.subiendo { opacity: .55; pointer-events: none; }
.gpg-del-catalogo { width: 100%; }
.gpg-del-catalogo .gpg-pool { margin-top: .5rem; max-height: 22rem; overflow-y: auto; }
.gpg-escena { border-top: 1px solid var(--border); padding: .6rem 0; }
.gpg-escena-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-bottom: .4rem; }
.gpg-escena-cab span { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.gpg-fichas { display: flex; flex-wrap: wrap; gap: .4rem; }
.gpg-ficha { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 68px; padding: .25rem;
  border: 2px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--muted);
  font: inherit; font-size: .7rem; cursor: pointer; opacity: .55; }
.gpg-ficha img, .gpg-ficha .gpg-img-vacia { width: 56px; height: 56px; object-fit: cover; border-radius: 5px; background: var(--panel-2); }
.gpg-ficha.activa { opacity: 1; border-color: var(--accent); color: var(--text); }
.gpg-ficha:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gpg-ficha-mas { opacity: 1; border-style: dashed; text-align: center; }
@media (max-width: 760px) { .gpg-img { width: calc(50% - .25rem); } }
.gpg-escena-cab .gpg-a-crear { margin-left: auto; }


/* PND-095 (2026-10-07): acciones hermanas del radio; filtro oculta la tarjeta completa. */
.au-voz-contenedor { position: relative; min-width: 0; }
.au-voz-contenedor:has(.au-voz[hidden]) { display: none; }
/* ── estilos/legado/09-catalogo-galeria-y-ficha-spec-2026-09-28.css ── */
/* ============================================================
   Catálogo: galería y ficha (spec 2026-09-28 §10)
   ============================================================ */
.cat-sync { margin-bottom: .8rem; }
.cat-toolbar { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin: 0 0 1rem; }
.cat-toolbar .cat-buscador { flex: 1 1 14rem; max-width: 22rem; margin: 0; }
.cat-chips-filtro { display: flex; flex-wrap: wrap; gap: .35rem; }
.cat-chips-filtro .chip { border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 999px; padding: .3rem .7rem; font: inherit; font-size: .8rem; cursor: pointer; }
.cat-chips-filtro .chip:hover { color: var(--text); border-color: var(--muted-2); }
.cat-chips-filtro .chip.activo { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-chips-filtro .chip span { opacity: .8; margin-left: .2rem; }
.cat-chips-filtro .chip span:empty { display: none; }
.cat-orden { width: auto; margin: 0; font-size: .82rem; }
.cat-grid-wrap { min-height: 6rem; }
.cat-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .8rem; }
.cat-tarjeta { display: flex; flex-direction: column; gap: .4rem; border-radius: 12px; padding: .5rem; background: var(--panel-2); border: 1px solid var(--border); cursor: pointer; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.cat-tarjeta:hover, .cat-tarjeta:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-soft); outline: none; }
.cat-tarjeta-sinfotos { cursor: default; border-style: dashed; }
.cat-tarjeta-media { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--panel); }
.cat-tarjeta-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-tarjeta-vacia { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, var(--panel-hover), var(--panel-hover) 6px, var(--panel) 6px, var(--panel) 12px); }
.cat-chip { position: absolute; left: .4rem; bottom: .4rem; font-size: .68rem; padding: .15rem .45rem; border-radius: 999px; background: var(--panel); color: var(--text); border: 1px solid var(--border); }
.cat-tarjeta-texto { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.cat-tarjeta-texto strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-colores { display: flex; align-items: center; gap: .25rem; }
.cat-color-punto { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: var(--panel); display: inline-block; flex: none; }
.cat-color-sin-fotos { border-style: dashed; }
.cat-colores small { color: var(--muted); font-size: .7rem; }
.cat-tarjeta-precio { font-size: .84rem; }
.cat-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.cat-chips .tag-estado { margin: 0; font-size: .68rem; }
.cat-tarjeta-acciones { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.cat-tarjeta-acciones form.inline { margin: 0; }
.cat-mas { text-align: center; margin: .8rem 0; }
.cat-nuevo { margin-top: 1rem; }
/* ficha */
.cat-panel-lateral { width: min(640px, 100%); }
.cat-ficha-precio { margin: .4rem 0 0; font-size: .95rem; }
.cat-colores-tira { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; }
.cat-color-ficha { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 72px; padding: .3rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); color: var(--muted); font: inherit; font-size: .7rem; cursor: pointer; }
.cat-color-ficha img, .cat-color-vacio { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; display: block; background: var(--panel); border: 1px dashed transparent; }
.cat-color-ficha.sin-fotos .cat-color-vacio { border-color: var(--border); }
.cat-color-ficha.no-disponible { opacity: .55; }
.cat-color-ficha[aria-selected="true"] { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent); }
.cat-color-ficha span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-color-fotos { margin-top: .6rem; }
/* Foto de ambiente: la celda es más ancha que una foto de referencia (92 px)
   para que «Asignar a color…» se lea entero; la foto y el select la llenan. */
.cat-foto-general { width: 8.5rem; }
.cat-foto-general img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.cat-foto-general .cat-form-mover { position: static; margin: .3rem 0 0; }
.cat-foto-general .cat-form-mover select { font-size: .7rem; padding: .2rem .3rem; width: 100%; }
.cat-nuevo-color { margin-top: .6rem; }
.cat-nuevo-color form { display: grid; gap: .5rem; margin-top: .5rem; }
.cat-crear-con { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.cat-crear-con select { width: auto; margin: 0; }
/* Producto archivado (2026-10-01): aviso con «Desarchivar» arriba de la
   ficha; «Archivar» va en el pie, junto a «Eliminar». */
.cat-ficha-archivado { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .6rem 0 0; padding: .6rem .8rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--panel-2); font-size: .84rem; }
.cat-ficha-archivado p { margin: 0; flex: 1 1 16rem; color: var(--muted); }
.cat-ficha-archivado form, .cat-pie-quitar form { margin: 0; }
.cat-pie-quitar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
/* Selector de Crear/Sprints: un producto con colores agrupa sus tiles bajo un
   encabezado en vez de listarlos sueltos (spec 2026-09-28 §10.5). */
.producto-grupo { flex: 1 1 100%; }
.producto-grupo-nombre { margin: .4rem 0 .2rem; font-size: .8rem; color: var(--muted); }
.producto-grupo-nombre small { margin-left: .3rem; }
.producto-grupo-tiles { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 640px) {
  .cat-tarjetas { grid-template-columns: repeat(2, 1fr); }
  .cat-toolbar .cat-buscador { max-width: 100%; }
}

/* Mis voces (2026-09-30): voces propias arriba de la galería, con su ✕ a la
   izquierda del ▶, y el panel para clonar o diseñar. */
.au-vp-titulo { margin: .5rem 0 .45rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.au-vp-voces { margin-bottom: .3rem; }
.au-voz-propia { padding-right: 4.6rem; }
/* Un nombre propio largo y sin espacios no se mete debajo del ✕ (ni estira la leyenda «Voz: …»). */
.au-voz-propia .au-voz-nombre, .au-voces-caja legend span { overflow-wrap: anywhere; }
.au-vp-borrar { position: absolute; right: 2.85rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: .72rem; line-height: 1; cursor: pointer; }
.au-vp-borrar:hover { color: var(--error); background: rgba(196, 63, 90, .1); }
.au-vp-crear { min-height: 3.2rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--accent-texto); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; padding: .55rem .7rem; }
.au-vp-crear:hover { border-color: var(--accent); }
.au-vp-panel { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .9rem .9rem; margin: .5rem 0 .8rem; min-width: 0; }
.au-vp-pestanas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.au-vp-form { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.au-vp-form input[type="text"], .au-vp-form textarea { background: var(--panel); }
.au-vp-permiso { display: flex; gap: .5rem; align-items: flex-start; font-size: .8rem; line-height: 1.45; color: var(--text); }
.au-vp-permiso input { margin-top: .2rem; flex: none; }
/* En el celular la galería va a dos columnas; con ✕ y ▶ eso dejaba 45 px de
   texto en una voz propia y el nombre se metía debajo del ✕: aquí cada
   tarjeta pide al menos 12rem (una columna en 375 px). */
@media (max-width: 760px) { .au-vp-voces { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); } }
/* ── Flow Plus: cadena de escenas (2026-10-01) ─────────────────────────────── */
.gpg-cadena { margin: 1rem 0; padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); }
.gpg-cadena h5 { margin-top: 0; }
.gpg-cadena-estado { margin: .5rem 0; font-weight: 600; }
.gpg-cadena-faltan { margin: .3rem 0 .6rem; padding-left: 1.2rem; font-size: .82rem; color: var(--warn); overflow-wrap: anywhere; }
.gpg-cadena-aviso { color: var(--warn); }
.gpg-cadena-escenas { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .35rem; }
.gpg-cadena-escena { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .85rem;
  padding: .35rem .5rem; border-radius: 6px; background: var(--panel-2); overflow-wrap: anywhere; }
.gpg-cadena-escena.lista .tag-estado { color: var(--ok); }
.gpg-cadena-escena.fallo .tag-estado, .gpg-cadena-error { color: var(--error); }
.gpg-cadena-escena .btn-xs { margin-left: auto; }

/* ── estilos/legado/10-crear-anuncio-hablado-2026-10-01-crear-h.css ── */
/* ============================================================
   Crear › Anuncio hablado (2026-10-01) (_crear_hablado.html,
   _hablado_panel.html; spec 2026-10-01). Prefijo hb-; las tarjetas de voz
   reusan las de Audios (.au-voz). Dos columnas desde 761 px; en el celular,
   una sola y las fotos a tres por fila. Nada pide más ancho que su caja.
   ============================================================ */
.hb [hidden] { display: none !important; }
.hb { min-width: 0; }
.hb-intro { padding-top: 0; max-width: 72ch; }
.hb-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.hb-paso { min-width: 0; }
.hb-paso h3 { margin: 0 0 .5rem; font-size: 1rem; }
.hb-paso-final { grid-column: 1 / -1; }
.hb-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr)); gap: .5rem; margin: .6rem 0; max-height: 26rem; overflow-y: auto; }
.hb-foto { position: relative; display: block; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--panel-2); }
.hb-foto input { position: absolute; opacity: 0; pointer-events: none; }
.hb-foto img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.hb-foto.elegida { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.hb-foto:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.hb-foto-origen { position: absolute; left: .3rem; bottom: .3rem; max-width: calc(100% - .6rem); padding: .1rem .35rem; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-subir { cursor: pointer; }
.hb-texto, .hb-movimiento textarea { width: 100%; }
.hb-aviso-legal { margin: .4rem 0 0; padding: .45rem .6rem; border-left: 3px solid var(--warn); background: var(--panel-2); font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.hb-movimiento { margin-top: .8rem; }
.hb-voz-lista audio { width: 100%; height: 32px; }
@media (max-width: 760px) { .hb-layout { grid-template-columns: minmax(0, 1fr); } .hb-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Salud de la plataforma (/admin/salud, /admin/salud/registros; spec
   2026-10-01-escala-y-monitoreo §6). Reusa .admin-bloque, .kpis y .tabla-admin. ---- */
.salud-estado-ok { color: var(--ok); }
.salud-estado-aviso { color: var(--warn); }
.salud-estado-problema { color: var(--error); }
.admin-pill.salud-pill-problema { background: rgba(255, 95, 122, .14); color: var(--error); }
.admin-pill.salud-pill-aviso { background: var(--warn-fondo); color: var(--warn); }
.salud-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.salud-aviso { display: flex; gap: .6rem; align-items: baseline; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .75rem; font-size: .86rem; line-height: 1.45; }
.salud-aviso-problema { border-color: rgba(255, 95, 122, .45); }
.salud-filtros { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .7rem; }
.filtro-pill { font-size: .78rem; padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); text-decoration: none; white-space: nowrap; }
.filtro-pill.activo { background: var(--panel-2); color: var(--text); border-color: var(--accent); }
.salud-form-linea { display: inline-flex; margin: .6rem 0 0; }
.salud-filtros .salud-form-linea { margin: 0 0 0 auto; }
.tabla-salud td.salud-cuando { white-space: nowrap; font-size: .8rem; }
.salud-mensaje { margin-top: .2rem; overflow-wrap: anywhere; }
.salud-traza summary { cursor: pointer; font-size: .78rem; margin-top: .35rem; }
.salud-traza pre, .registro-entrada pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .74rem; line-height: 1.45; background: var(--panel-2); border-radius: 8px; padding: .5rem .6rem; margin: .3rem 0 0; max-height: 28rem; overflow: auto; }
.salud-acciones { display: flex; flex-wrap: wrap; gap: .3rem; }
.salud-fecha { font-size: .95rem; }
.salud-grafico { margin: 1rem 0 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem .5rem; }
.salud-grafico figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--muted); margin-bottom: .4rem; }
.salud-grafico svg { width: 100%; height: 90px; display: block; }
.salud-leyenda { display: inline-flex; align-items: center; gap: .35rem; }
.salud-muestra { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; }
.salud-muestra-ok, .salud-barra { fill: var(--accent); background: var(--accent); }
.salud-muestra-error, .salud-barra-error { fill: var(--error); background: var(--error); }
.salud-blanco { fill: transparent; }
.salud-eje { stroke: var(--border); stroke-width: 1; }
.salud-eje-x { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-top: .2rem; }
.salud-filtros-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: 1rem; }
.salud-filtros-form label { display: grid; gap: .25rem; font-size: .8rem; }
.registro-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.registro-entrada { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .45rem .65rem; }
.registro-entrada.registro-error, .registro-entrada.registro-critical { border-color: rgba(255, 95, 122, .45); }
.registro-cabeza { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .76rem; color: var(--muted); }
.registro-detalle summary { cursor: pointer; list-style: none; }
.registro-detalle summary pre { display: inline; background: none; padding: 0; }

/* ── estilos/legado/11-final-edition-tablero-2026-10-02-daniel.css ── */
/* ============================================================
   Final edition: tablero (2026-10-02). Daniel pidió el tablero y «un
   branding de este estilo» con una referencia de presentación tecnológica:
   azul marino profundo, azul eléctrico con brillo, números grandes en
   círculos, íconos en recuadros que brillan y un flujo de pasos con flechas.
   La paleta vive ahora en tokens.css para toda la plataforma; las
   reglas propias del tablero se conservan aquí hasta mudar sus componentes
   (entrega 1 del sistema de estilos, 2026-10-02).
   Contrastes medidos sobre --panel #120c1f: --text 15:1, --muted 7,3:1,
   --accent-texto 7,8:1, letra blanca sobre --accent 5:1. --cian pasa de
   0,4 de luminancia: va solo en texto, trazos y sombras, nunca de fondo ni
   de borde (tests/test_modo_oscuro.py).
   ============================================================ */

.con-sidebar #tab-final.tab-panel.activo {
  background:
    radial-gradient(900px 420px at 92% -14%, rgba(168, 85, 247, 0.22), transparent 62%),
    radial-gradient(700px 380px at -10% 110%, rgba(224, 179, 255, 0.08), transparent 60%),
    radial-gradient(rgba(196, 165, 255, 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--bg);
  border-color: rgba(147, 51, 234, 0.3);
  box-shadow: 0 24px 60px rgba(4, 0, 12, 0.55), inset 0 1px 0 rgba(196, 165, 255, 0.08);
}

/* Cabecera: sobretítulo, título que brilla y una línea de luz debajo. */
#tab-final .fe-hero { position: relative; margin-bottom: 1.2rem; border-bottom-color: var(--border-soft); }
#tab-final .fe-hero::after, .fe-columna-cab::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: min(240px, 45%);
  background: linear-gradient(90deg, var(--accent-2), transparent); box-shadow: 0 0 12px var(--brillo);
}
.fe-sobretitulo { margin: 0 0 .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cian); }
#tab-final .fe-hero h2 { font-size: clamp(1.7rem, 1.25rem + 1.4vw, 2.35rem); letter-spacing: -.02em; text-shadow: 0 0 30px rgba(168, 85, 247, .4); }
#tab-final .fe-hero .btn-generar { display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1.2rem; }
.fe-icono { width: 1em; height: 1em; display: block; }
#tab-final .fe-hero .btn-generar .fe-icono { width: 1.1em; height: 1.1em; }

/* Cifras: ícono en recuadro que brilla + número grande. */
.fe-cifras { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .7rem; }
.fe-cifra {
  display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .8rem .9rem;
  background: linear-gradient(180deg, rgba(25, 17, 43, .9), rgba(18, 12, 31, .9));
  border: 1px solid var(--border); border-radius: var(--radius);
}
.fe-cifra > div { min-width: 0; }
.fe-cifra small { display: block; font-size: .72rem; color: var(--muted); overflow-wrap: anywhere; }
.fe-cifra strong { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.fe-cifra-icono, .fe-flujo-icono, .fe-vacio-icono {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; color: var(--cian);
  background: linear-gradient(145deg, rgba(168, 85, 247, .3), rgba(124, 58, 237, .08));
  border: 1px solid rgba(168, 85, 247, .45);
  box-shadow: 0 0 18px rgba(168, 85, 247, .25), inset 0 1px 0 rgba(224, 179, 255, .15);
}
.fe-cifra-icono .fe-icono, .fe-flujo-icono .fe-icono, .fe-vacio-icono .fe-icono { width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(224, 179, 255, .55)); }

/* Cómo funciona: cinco pasos unidos por flechas de luz. */
.fe-flujo {
  list-style: none; margin: 0 0 1.5rem; padding: 1rem 1rem .9rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem;
  background: rgba(18, 12, 31, .55); border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.fe-flujo li { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.fe-flujo li + li::before {
  content: ""; position: absolute; top: 20px; right: calc(50% + 29px); width: calc(100% - 58px + .5rem); height: 2px;
  background: linear-gradient(90deg, rgba(168, 85, 247, .1), var(--accent-2)); box-shadow: 0 0 8px var(--brillo);
}
.fe-flujo li + li::after { content: ""; position: absolute; top: 16px; right: calc(50% + 23px); border: 5px solid transparent; border-left-color: var(--accent-2); }
.fe-flujo strong { margin-top: .2rem; font-size: .8rem; color: var(--text); overflow-wrap: anywhere; }
.fe-flujo small { font-size: .7rem; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }

/* Columnas numeradas (01 En edición · 02 Finalizados). */
.fe-columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (min-width: 1180px) { .fe-columnas { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.fe-columna {
  min-width: 0; padding: 1rem 1rem 1.15rem;
  background: linear-gradient(180deg, rgba(25, 17, 43, .6), rgba(14, 9, 24, .6));
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
}
.fe-columna-cab { position: relative; display: flex; align-items: center; gap: .85rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border-soft); }
.fe-columna-cab::after { width: min(140px, 40%); }
.fe-columna-cab > div { min-width: 0; }
.fe-columna-cab h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0; font-size: 1.12rem; color: var(--text); }
.fe-columna-cab p { margin: .2rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.fe-numero {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #fff;
  background: radial-gradient(circle at 35% 30%, #a855f7, #7c3aed 55%, #4c1d95);
  border: 1px solid rgba(196, 165, 255, .6);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, .12), 0 0 22px rgba(168, 85, 247, .45);
}
.fe-numero .fe-icono { width: 22px; height: 22px; }
.fe-contador {
  font-size: .74rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; font-variant-numeric: tabular-nums;
  color: var(--accent-texto); background: rgba(168, 85, 247, .14); border: 1px solid rgba(168, 85, 247, .35);
}

/* Tarjetas: superficie azul y brillo al pasar. */
#tab-final .generado { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-color: var(--border); border-radius: 14px; }
#tab-final .generado:hover, #tab-final .generado:focus-visible { border-color: var(--accent-2); box-shadow: var(--shadow-glow); }
#tab-final .generado-media { background: var(--bg); }
#tab-final .generado-velo { background: linear-gradient(to top, rgba(7, 5, 14, .95), rgba(7, 5, 14, .15)); }
#tab-final .generado-tipo, #tab-final .generado-badge { background: rgba(7, 5, 14, .82); border: 1px solid rgba(168, 85, 247, .35); }
.fe-chips { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.fe-chips:empty { display: none; }
.fe-chips li {
  font-size: .66rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px;
  color: var(--accent-texto); background: rgba(168, 85, 247, .12); border: 1px solid rgba(168, 85, 247, .3);
}
.fe-chips .fe-chip-vivo { color: var(--cian); }
.fe-chips .fe-chip-vivo::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .3rem; border-radius: 50%; vertical-align: .05em;
  background: var(--accent-2); box-shadow: 0 0 6px var(--cian); animation: fe-pulso 1.6s ease-in-out infinite;
}
.fe-chips .fe-chip-error { color: var(--error); background: var(--error-fondo); border-color: rgba(255, 95, 122, .4); }
.fe-banderas { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.fe-banderas li { font-size: .85rem; line-height: 1; padding: .16rem .22rem; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); }
.fe-banderas .fe-bandera-ok { border-color: rgba(62, 207, 142, .6); }
.fe-banderas .fe-bandera-vivo { border-color: var(--accent-2); box-shadow: 0 0 8px var(--brillo); animation: fe-pulso 1.6s ease-in-out infinite; }
.fe-banderas .fe-bandera-error { border-color: rgba(255, 95, 122, .65); }
#tab-final .generado-pie .fe-siguiente { margin-top: .35rem; font-size: .72rem; font-weight: 600; color: var(--accent-texto); }
@keyframes fe-pulso { 50% { opacity: .45; } }
/* Elegir en «+ Nueva» va al editor: la tarjeta avisa al instante, y en el
   tablero la que se está preparando para el editor se resalta. */
#tab-final .generado-velo.fe-abriendo { justify-content: center; align-items: center; background: rgba(7, 5, 14, .78); }
#tab-final .fe-abriendo .generado-estado { color: var(--cian); }
#tab-final .generado.fe-resaltada { border-color: var(--accent-2); box-shadow: var(--shadow-glow), 0 0 32px rgba(168, 85, 247, .45); animation: fe-resalte 1.8s ease-in-out 3; }
@keyframes fe-resalte { 50% { box-shadow: var(--shadow-glow), 0 0 8px rgba(168, 85, 247, .2); } }

/* «+ Nueva final edition»: la primera tarjeta de «En edición». */
#tab-final .fe-nueva {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 230px; padding: 1.2rem .8rem;
  text-align: center; color: var(--text); border-radius: 14px; border: 1.5px dashed rgba(168, 85, 247, .55);
  background: radial-gradient(circle at 50% 38%, rgba(168, 85, 247, .18), transparent 65%), rgba(18, 12, 31, .5);
}
#tab-final .fe-nueva:hover, #tab-final .fe-nueva:focus-visible { border-color: var(--accent-2); box-shadow: var(--shadow-glow); outline: none; }
.fe-nueva-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: #fff;
  background: var(--accent-grad); box-shadow: 0 0 0 6px rgba(168, 85, 247, .12), 0 0 26px rgba(168, 85, 247, .55);
}
.fe-nueva-icono .fe-icono { width: 26px; height: 26px; }
.fe-nueva strong { font-size: .9rem; }
.fe-nueva small { font-size: .72rem; font-weight: 500; color: var(--muted); }
.fe-vacio { margin-top: 1rem; }

/* Selector y detalle: el mismo brillo azul alrededor. */
#tab-final .generado-modal {
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(4, 0, 12, .7), 0 0 0 1px rgba(168, 85, 247, .18), 0 0 70px rgba(168, 85, 247, .14);
}
#tab-final .generado-modal::backdrop { background: rgba(4, 0, 12, .72); }
#tab-final .detalle-media { background: radial-gradient(circle at 50% 40%, rgba(168, 85, 247, .14), transparent 70%), var(--bg); }
#tab-final .generado-modal-cuerpo > .vacio { padding: 1.4rem 1.6rem; }
#tab-final .fe-titulo { display: flex; align-items: center; gap: .5rem; }
#tab-final .fe-titulo::before { content: ""; width: 4px; height: 1em; border-radius: 2px; background: var(--accent-2); box-shadow: 0 0 8px var(--brillo); }
#tab-final .fe-subtitulo { color: var(--cian); letter-spacing: .1em; }
#tab-final .fe-elegir-modal { width: min(1040px, 94vw); }
.fe-elegir-cuerpo { max-height: 92vh; overflow-y: auto; padding: 1.3rem 1.4rem 1.5rem; }
.fe-elegir-cuerpo .fe-columna-cab { padding-right: 2.6rem; }
.fe-elegible-accion { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fe-elegir-vacio { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .fe-flujo { padding: .75rem .4rem .7rem; gap: .2rem; }
  .fe-flujo small { display: none; }
  .fe-flujo strong { font-size: .66rem; }
  .fe-flujo-icono { width: 34px; height: 34px; border-radius: 10px; }
  .fe-flujo-icono .fe-icono { width: 18px; height: 18px; }
  .fe-flujo li + li::before { top: 16px; right: calc(50% + 21px); width: calc(100% - 42px + .2rem); }
  .fe-flujo li + li::after { display: none; }
  .fe-columna { padding: .8rem .65rem .9rem; }
  .fe-numero { width: 38px; height: 38px; font-size: .92rem; }
  .fe-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .fe-cifra:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fe-cifra { padding: .65rem .7rem; gap: .6rem; flex-direction: column; align-items: flex-start; }
  .fe-cifra small { overflow-wrap: normal; }
  .fe-cifra strong { font-size: 1.25rem; }
  .fe-cifra-icono { width: 36px; height: 36px; }
  #tab-final .fe-nueva { min-height: 200px; }
  .fe-elegir-cuerpo { padding: 1rem .8rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fe-chips .fe-chip-vivo::before, .fe-banderas .fe-bandera-vivo, #tab-final .generado.fe-resaltada { animation: none; }
}

/* ── estilos/legado/12-alertas-2026-10-02-spec-docs-superpowers.css ── */
/* ============================================================
   Alertas (2026-10-02) — spec docs/superpowers/specs/2026-09-20-alertas-design.md
   §6 y §12: la burbuja del sidebar (roja si alguna alerta bloquea, ámbar si
   no; con la barra plegada, encima del ícono), la pestaña (un grupo por
   sección, una fila por alerta con el borde del color de su nivel) y la línea
   del Tablero. Textos largos (un error, una URL de recarga) parten la línea
   en vez de empujar la página de lado a 375 px. La letra de la burbuja es
   --bg: sobre --error o --warn el blanco no se lee.
   ============================================================ */
.sidebar-item { position: relative; }
.sidebar-burbuja {
  margin-left: auto; flex: none; min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; line-height: 1.35rem; text-align: center; color: var(--bg); background: var(--warn);
}
.sidebar-burbuja.bloquea { background: var(--error); }
.sidebar-plegada .sidebar-burbuja {
  position: absolute; top: .15rem; right: .45rem; margin: 0; min-width: 1.05rem; height: 1.05rem;
  padding: 0 .25rem; font-size: .58rem; line-height: 1.05rem;
}
@media (max-width: 760px) {
  /* En el menú del celular la barra va siempre con nombres: la burbuja vuelve a su sitio, a la derecha. */
  .con-sidebar.sidebar-plegada .sidebar-burbuja {
    position: static; margin-left: auto; min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem;
    font-size: .68rem; line-height: 1.35rem;
  }
}

.alertas-resumen strong { color: var(--text); }
.alertas-grupo { margin-top: 1.4rem; }
.alertas-grupo h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: 1rem; }
.alertas-n { font-size: .7rem; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: .05rem .45rem; }
.alertas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.alerta {
  display: flex; align-items: flex-start; gap: .5rem .8rem; flex-wrap: wrap; padding: .7rem .9rem;
  border-radius: 10px; background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--muted-2);
  font-size: .86rem; line-height: 1.45;
}
.alerta-nivel {
  flex: none; min-width: 4.2rem; padding-top: .15rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.alerta-cuerpo { flex: 1 1 18rem; min-width: 0; overflow-wrap: anywhere; }
.alerta-titulo { display: block; color: var(--text); }
.alerta-detalle { margin: .2rem 0 0; color: var(--muted); }
.alerta-acciones { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; max-width: 100%; }
.alerta-form { margin: 0; }
.alerta-ir { color: var(--accent-texto); text-decoration: none; font-size: .8rem; white-space: nowrap; }
.alerta-ir:hover { text-decoration: underline; }
.alerta-bloquea { border-left-color: var(--error); }
.alerta-bloquea .alerta-nivel { color: var(--error); }
.alerta-atencion { border-left-color: var(--tb-warn); }
.alerta-atencion .alerta-nivel { color: var(--tb-warn); }
.alerta-descartada { opacity: .75; }
.alertas-descartadas { margin-top: 1.6rem; }
.alertas-descartadas summary { color: var(--muted); font-size: .86rem; }
.alertas-descartadas .alertas-lista { margin-top: .6rem; }
.tb-aviso-alertas { margin: 0; font-size: .9rem; color: var(--text); }
.tb-aviso-alertas a { color: var(--accent-texto); }
@media (max-width: 760px) {
  .alerta-nivel { min-width: 0; flex-basis: 100%; padding-top: 0; }
}
/* ── estilos/base.css ── */
/* Base (spec 2026-10-02-sistema-de-estilos §4.6 y §9 regla 7). Lo común a toda página que se vaya mudando desde
   legado/ vive aquí. Quien pidió «reducir movimiento» en su sistema no ve animaciones ni transiciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Enlaces: sin esta regla el navegador los pinta lila (#9e9eff) y morados al visitarlos (#d0adf0) en tema oscuro.
   :where() no suma especificidad, así que cualquier clase con su propio color le gana. */
:where(a) { color: var(--accent-texto); }

/* Barra lateral: Crear arriba de todo como botón azul lleno (2026-10-08, feedback que recibió Daniel: tenía que
   notarse más que las demás pestañas). Es una pestaña más (.sidebar-item, data-tab="creativeflowplus"); estas reglas
   le ganan a las de .sidebar-item de legado/02 por ir después y con la misma o más especificidad. Plegada queda
   como un cuadro azul con el «+»; en el celular, igual dentro del menú ☰. */
.sidebar-item.sidebar-crear {
  background: var(--accent-grad); color: var(--sobre-accent); font-weight: 600;
  box-shadow: var(--shadow-soft); margin-bottom: var(--esp-3);
}
/* Brillo corto a propósito: --shadow-glow (28 px) se derramaba sobre la fila de abajo y Experimentos parecía
   seleccionado. Abierta, Crear lleva un anillo claro separado del botón. */
.sidebar-item.sidebar-crear:hover { color: var(--sobre-accent); filter: brightness(1.08); box-shadow: var(--brillo-sm); }
.sidebar-item.sidebar-crear.activo {
  background: var(--accent-grad); color: var(--sobre-accent);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent-texto);
}
.sidebar-item.sidebar-crear:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 2px; }
/* ── estilos/componentes/marca.css ── */
/* Marca CREATV Galadsy (2026-10-06): el símbolo y el nombre son máscaras (PNG con alfa en static/img/galadsy-*)
   pintadas con el color del texto, así siguen el tema sin un segundo juego de archivos. */
.marca-mark,
.marca-texto,
.marca-logo {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
}
.marca-mark {
  width: 34px;
  height: 36px;
  -webkit-mask-image: url("img/galadsy-simbolo.png");
  mask-image: url("img/galadsy-simbolo.png");
}
.marca-texto {
  width: 108px;
  height: 37px;
  -webkit-mask-image: url("img/galadsy-nombre.png");
  mask-image: url("img/galadsy-nombre.png");
}
/* Logo completo (símbolo + nombre) de las páginas principales: portada, login, recuperar, restablecer, legales. */
.marca-logo {
  width: 280px;
  height: 76px;
  max-width: 100%;
  margin-bottom: var(--esp-4);
  -webkit-mask-image: url("img/galadsy-logo.png");
  mask-image: url("img/galadsy-logo.png");
}
/* ── estilos/componentes/fondo-galaxia.css ── */
/* Fondo galáctico de toda la plataforma (2026-10-06, CREATV Galadsy; base.html, .fondo-galaxia): nebulosas en el
   morado del logo que derivan despacio, un núcleo que gira, dos capas de estrellas que titilan y una retícula tenue.
   Todo son degradados (sin filter: blur), así el movimiento es barato de pintar. Sin movimiento con
   prefers-reduced-motion (base.css apaga todas las animaciones). */
.fondo-galaxia { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fondo-galaxia > span { position: absolute; will-change: transform; }

.galaxia-nebulosa { inset: -25%; }
.galaxia-nebulosa.n1 {
  background-image:
    radial-gradient(38% 22% at 22% 30%, var(--galaxia-1), transparent 70%),
    radial-gradient(30% 18% at 70% 62%, var(--galaxia-1-suave), transparent 70%);
  animation: galaxia-nebulosa-a 38s ease-in-out infinite alternate;
}
.galaxia-nebulosa.n2 {
  background-image:
    radial-gradient(34% 16% at 62% 34%, var(--galaxia-2), transparent 72%),
    radial-gradient(26% 14% at 34% 74%, var(--galaxia-2-suave), transparent 72%);
  transform: rotate(-22deg);
  animation: galaxia-nebulosa-b 46s ease-in-out infinite alternate;
}
.galaxia-nebulosa.n3 {
  background-image: radial-gradient(22% 10% at 82% 14%, var(--galaxia-3), transparent 72%);
  transform: rotate(-22deg);
  animation: galaxia-nebulosa-c 30s ease-in-out infinite alternate;
}

/* Núcleo: un remolino que gira muy despacio. */
.galaxia-nucleo {
  left: 50%; top: 42%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax;
  background-image: conic-gradient(from 0deg, transparent 0deg, var(--galaxia-velo-1) 40deg, transparent 90deg,
    var(--galaxia-velo-2) 180deg, transparent 230deg, var(--galaxia-velo-3) 300deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, currentColor 0%, transparent 60%);
  mask-image: radial-gradient(circle, currentColor 0%, transparent 60%);
  animation: galaxia-gira 160s linear infinite;
}

/* Cada capa de estrellas se desplaza exactamente un mosaico por vuelta: el bucle no salta. */
.galaxia-estrellas { left: 0; right: 0; bottom: 0; background-repeat: repeat; }
.galaxia-estrellas.e1 {
  top: -360px;
  background-image:
    radial-gradient(1px 1px at 20px 30px, var(--estrella), transparent),
    radial-gradient(1px 1px at 140px 90px, var(--estrella-tenue), transparent),
    radial-gradient(1.5px 1.5px at 260px 170px, var(--estrella-color), transparent),
    radial-gradient(1px 1px at 330px 40px, var(--estrella-tenue), transparent),
    radial-gradient(1px 1px at 90px 240px, var(--estrella-color), transparent),
    radial-gradient(1.5px 1.5px at 210px 310px, var(--estrella), transparent);
  background-size: 380px 360px;
  animation: galaxia-estrellas-1 140s linear infinite, galaxia-titila 6s ease-in-out infinite alternate;
}
.galaxia-estrellas.e2 {
  top: -600px;
  background-image:
    radial-gradient(2px 2px at 60px 80px, var(--estrella-color), transparent),
    radial-gradient(1.5px 1.5px at 420px 260px, var(--estrella), transparent),
    radial-gradient(2px 2px at 300px 480px, var(--estrella-tenue), transparent);
  background-size: 620px 600px;
  animation: galaxia-estrellas-2 90s linear infinite, galaxia-titila 4.5s ease-in-out infinite alternate-reverse;
}

.galaxia-reticula {
  inset: 0;
  background-image:
    linear-gradient(var(--reticula) 1px, transparent 1px),
    linear-gradient(90deg, var(--reticula) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 25%, currentColor 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 55% at 50% 25%, currentColor 15%, transparent 75%);
  animation: galaxia-reticula 20s linear infinite;
}

@keyframes galaxia-nebulosa-a { to { transform: translate(6%, 5%) scale(1.08); } }
@keyframes galaxia-nebulosa-b { to { transform: rotate(-16deg) translate(-7%, 6%) scale(1.05); } }
@keyframes galaxia-nebulosa-c { to { transform: rotate(-26deg) translate(-8%, 4%); opacity: .6; } }
@keyframes galaxia-gira { to { transform: rotate(360deg); } }
@keyframes galaxia-estrellas-1 { to { transform: translateY(360px); } }
@keyframes galaxia-estrellas-2 { to { transform: translateY(600px); } }
@keyframes galaxia-titila { from { opacity: .45; } to { opacity: 1; } }
@keyframes galaxia-reticula { to { background-position: 0 64px, 0 0; } }

/* Estrellas fugaces (2026-10-14): tres trazos que cruzan en diagonal, cada uno con su ritmo; casi todo el ciclo están
   apagados, así pasan de vez en cuando y no distraen. */
.galaxia-fugaz { top: 0; left: 0; width: 140px; height: 1.5px; border-radius: 999px; opacity: 0;
  background-image: linear-gradient(90deg, transparent, var(--estrella)); transform-origin: right center;
  animation: galaxia-fugaz 9s linear infinite; }
.galaxia-fugaz.f1 { top: 12%; left: 62%; animation-delay: 1.5s; }
.galaxia-fugaz.f2 { top: 34%; left: 85%; animation-duration: 13s; animation-delay: 6s; }
.galaxia-fugaz.f3 { top: 6%; left: 30%; animation-duration: 17s; animation-delay: 10s; width: 100px; }
@keyframes galaxia-fugaz {
  0% { opacity: 0; transform: rotate(-32deg) translateX(0); }
  2% { opacity: 1; }
  9% { opacity: 0; transform: rotate(-32deg) translateX(-420px); }
  100% { opacity: 0; transform: rotate(-32deg) translateX(-420px); }
}

/* La vaca zen al pie del menú lateral (2026-10-14): pequeña, flota y parpadea. Con el menú plegado no se ve
   (.sidebar-texto). */
.sidebar-zen { display: flex; align-items: center; gap: var(--esp-3); margin: 0 var(--esp-2) var(--esp-3); padding: var(--esp-3); border-radius: var(--radius); border: 1px solid var(--border-soft); background-image: radial-gradient(circle at 20% 50%, var(--galaxia-velo-1), transparent 70%); }
.sidebar-zen-vaca { position: relative; flex: 0 0 auto; width: 46px; aspect-ratio: 720 / 783; animation: vaca-flota 6s ease-in-out infinite; }
.sidebar-zen-vaca img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sidebar-zen-vaca .zen-cerrada { animation: vaca-parpadea 5.5s infinite; }
.sidebar-zen-frase { font-size: var(--t-chico); line-height: 1.35; color: var(--muted); }
.sidebar-plegada .sidebar-zen { display: none; }
/* ── estilos/componentes/nvp.css ── */
/* ============================================================
   NVP: el porcentaje de visitantes nuevos y su etapa del embudo
   (spec 2026-10-09-nvp-visitantes-nuevos §4). Uso: la macro `nvp(nuevos,
   visitantes)` de templates/_componentes.html, en Triple Whale, Meta,
   Experimentos y el Tablero. `.chip-nvp` es la pastilla con el % y la etapa
   (`.chip-nvp-tof|mof|bof`); `.chip-nvp-pocos` (menos de 50 visitantes: el %
   en gris y sin etapa) y `.chip-nvp-vacio` («—», sin datos). Los colores de la
   etapa solo distinguen, no califican: ninguna etapa es buena o mala por sí sola.
   ============================================================ */

.chip-nvp { display: inline-flex; align-items: baseline; gap: .3rem; padding: .05rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-pastilla); font-size: var(--t-chico); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help; }
.chip-nvp-etapa { font-weight: 700; font-size: var(--t-sobretitulo); letter-spacing: .04em; }
.chip-nvp-tof { border-color: var(--cian); }
.chip-nvp-tof .chip-nvp-etapa { color: var(--cian); }
.chip-nvp-mof { border-color: var(--accent-texto); }
.chip-nvp-mof .chip-nvp-etapa { color: var(--accent-texto); }
.chip-nvp-bof { border-color: var(--muted); }
.chip-nvp-bof .chip-nvp-etapa { color: var(--muted); }
.chip-nvp-pocos { color: var(--muted); border-style: dashed; }
.chip-nvp-vacio { color: var(--muted); border-color: transparent; padding-inline: 0; }
/* En una tarjeta de cifra (KPI) el chip va del tamaño de las otras cifras. */
.kpi-tile .chip-nvp { font-size: var(--t-base); }
/* ── estilos/componentes/cargando.css ── */
/* ============================================================
   Cargando: lo que ve la persona mientras algo llega por fetch (pedido de Daniel 2026-10-13: «Cargando tu
   rendimiento…» en gris no se notaba y «Ver más» solo se apagaba, sin decir que estaba trayendo algo). Uso: la macro
   `cargando(texto, detalle, esqueleto)` de templates/_componentes.html y, desde JS, la misma estructura
   (_tab_rendimiento.html: el panel la primera vez y al cambiar un filtro, y cada «Ver más» de la pestaña).
   `.cargando` = el aviso: un círculo que gira (`.cargando-giro`) y el texto, con role="status". `.cargando-grande`
   lo pone en una tarjeta; `.cargando-esqueleto` (> `.cargando-fila` > `.cargando-bloque`) dibuja debajo la forma
   de lo que viene, con el brillo `shimmer`. `.cargando-encima` es la versión que flota arriba de un contenido que
   se está reemplazando (el panel viejo queda atenuado con `[aria-busy="true"]` hasta que llega el nuevo).
   `.btn-cargando` = un botón ocupado: apagado, con el círculo antes de su texto y sin la opacidad de un botón
   apagado cualquiera (sigue legible: es el aviso). Con «reducir movimiento» (base.css) nada gira ni brilla, pero
   el texto sigue diciendo que carga. Solo tokens.
   ============================================================ */

.cargando { display: flex; align-items: center; gap: .7rem; color: var(--text); }
.cargando-giro {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent-texto);
  animation: girar .8s linear infinite;
}
.cargando-texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cargando-texto strong { font-weight: 600; }
.cargando-texto small { color: var(--muted); font-size: var(--t-chico); }

.cargando-grande {
  padding: var(--esp-5) var(--esp-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); justify-content: center;
}
.cargando-grande .cargando-giro { width: 1.9rem; height: 1.9rem; }
.cargando-grande .cargando-texto strong { font-size: 1.05rem; }

.cargando-esqueleto { display: grid; gap: var(--esp-3); margin-top: var(--esp-3); }
.cargando-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: var(--esp-3); }
.cargando-bloque {
  display: block; height: 4.5rem; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--panel-2) 30%, var(--panel-hover) 50%, var(--panel-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.cargando-bloque-alto { height: 12rem; }
.cargando-bloque-linea { height: 2.2rem; }

/* Un contenido que se está reemplazando: atenuado y sin clics, con el aviso pegado arriba mientras se desplaza. */
[aria-busy="true"] > .cargando-encima ~ * { opacity: .45; pointer-events: none; }
.cargando-encima {
  position: sticky; top: var(--esp-3); z-index: 3; width: fit-content; max-width: 100%;
  margin: 0 auto var(--esp-3); padding: .55rem 1rem; border: 1px solid var(--border);
  border-radius: var(--radius-pastilla); background: var(--panel-2); box-shadow: var(--shadow-soft);
}

.btn-cargando { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; cursor: progress; }
.btn-cargando:disabled { opacity: 1; cursor: progress; }
.btn-cargando::before {
  content: ""; flex: none; width: .9em; height: .9em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: girar .8s linear infinite;
}
/* ── estilos/pantallas/guia-estilos.css ── */
/* Guía de estilos — solo /admin/estilos (spec 2026-10-02-sistema-de-estilos §8).
   Muestras de los tokens y del marcado real de la base visual común. */
.guia-paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--esp-3, 12px); }
.guia-token { min-width: 0; overflow-wrap: anywhere; }
.guia-muestra { height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.guia-celular { width: 100%; max-width: 375px; border: 1px dashed var(--border); padding: var(--esp-3, 12px); border-radius: var(--radius); }
.guia-seccion { margin-bottom: var(--esp-6, 32px); min-width: 0; }
.guia-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3, 12px); }
.guia-campos { display: grid; gap: var(--esp-3, 12px); max-width: 100%; }
.guia-campos input, .guia-campos select, .guia-campos textarea { max-width: 100%; }
.guia-tabla { width: 100%; overflow-wrap: anywhere; }
.guia-tabla td, .guia-tabla th { text-align: left; }
.guia-tabla td:first-child { white-space: nowrap; }
.guia-fuente { font-family: var(--font-display); }
/* ── estilos/pantallas/experimentos.css ── */
/* ============================================================
   Experimentos: centro de resultados (E2, 2026-10-02; maqueta aprobada por Daniel:
   docs/superpowers/specs/2026-10-02-experimentos-maqueta.html). Uso: la pestaña #tab-experimentos
   (`.zona-exp`, armazón _tab_experimentos.html), el fragmento _exp_resultados.html, el panel de una pieza
   _exp_pieza.html (dialog #cr-panel) y la gestión _exp_gestionar.html. Clases cr-*; las exp-* viejas siguen en
   legado/ (las usan la gestión y «Nuevo experimento»).
   Paleta: la global de tokens.css (azul marino, azul eléctrico). Verde/rojo/ámbar (--ok/--error/--warn) solo
   en texto, trazos y fondos suaves de sus -fondo; --cian solo en texto, trazos SVG y sombras.
   En línea, en las plantillas, solo el largo de una barra (`--alto`, `--ancho`).
   ============================================================ */

/* Campos de presupuesto y edad de los formularios de Experimentos.
   2026-10-03: conservar sus tamaños al extraerlos sin duplicar estilos en línea. */
.exp-ancho-4 { width: 4rem; }
.exp-ancho-7 { width: 7rem; }
.exp-ancho-8 { width: 8rem; }

/* ---------- la pestaña: fondo con brillo, como Final edition ---------- */
.con-sidebar .zona-exp.tab-panel.activo {
  background: var(--fondo-escena), var(--bg);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.cr-sobretitulo {
  margin: 0 0 .3rem; font-size: var(--t-sobretitulo); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cian);
}
.cr-cabecera { position: relative; margin-bottom: var(--esp-4); border-bottom-color: var(--border-soft); }
.cr-cabecera::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: min(240px, 45%);
  background: linear-gradient(90deg, var(--accent-2), transparent); box-shadow: var(--brillo-sm);
}
.cr-cabecera h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); letter-spacing: -.02em; text-shadow: 0 0 28px var(--brillo); }
/* Un <a> con clase de botón no hereda el relleno ni la letra de `button` (legado/01): se los da aquí. */
.zona-exp a.btn-generar, .zona-exp a.btn-sm, .cr-panel a.btn-generar, .cr-panel a.btn-sm {
  justify-content: center; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600;
}
.zona-exp a.btn-generar:not(.btn-sm), .cr-panel a.btn-generar:not(.btn-sm) { padding: .62rem 1.1rem; font-size: .87rem; }

/* ---------- carga ---------- */
.cr-resultados { min-width: 0; }
.cr-cargando { margin: var(--esp-5) 0; color: var(--muted); }
.cr-resultados.cr-actualizando .cr-resultados-fragmento { opacity: .55; pointer-events: none; transition: opacity .2s ease; }

/* ---------- piezas comunes ---------- */
.cr-resultados-fragmento { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.cr-muted { color: var(--muted); }
.cr-mejor { color: var(--ok); }
.cr-peor { color: var(--error); }
.cr-neutro { color: var(--muted); }
.cr-cifra { font-variant-numeric: tabular-nums; }
.cr-moneda { font-size: .62em; font-weight: 500; color: var(--muted); }
.cr-vacio { margin: 0; padding: .5rem 0; color: var(--muted); font-size: .84rem; }
.cr-nota { margin: .6rem 0 0; color: var(--muted); font-size: var(--t-chico); line-height: 1.5; overflow-wrap: anywhere; }
.cr-tarjeta {
  min-width: 0; padding: var(--esp-3) var(--esp-4);
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-icono);
}
.cr-seccion { min-width: 0; }
.cr-seccion-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; margin: 0 0 .65rem; }
.cr-numero {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1;
  color: var(--accent-2); text-shadow: var(--brillo-sm); font-variant-numeric: tabular-nums;
}
.cr-seccion-cab h3 { margin: 0; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--text); }
.cr-cab-nota, .cr-seccion-cab .cr-metricas { margin-left: auto; }
.cr-cab-nota { color: var(--muted); font-size: var(--t-chico); }
a.cr-cab-nota { color: var(--accent-texto); text-decoration: none; }
a.cr-cab-nota:hover { text-decoration: underline; }

/* Chips (filtros, métricas): pastillas con borde azul, como la maqueta. */
.cr-chip {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; min-height: 32px; margin: 0;
  padding: .3rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-pastilla);
  background: var(--panel); color: var(--text); font-family: var(--font-body); font-size: var(--t-chico);
  font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cr-chip:hover { border-color: var(--accent-2); }
.cr-chip[aria-current="true"], .cr-chip.activo { background: var(--accent); border-color: var(--accent); color: var(--text); }
.cr-chip small { font-size: .9em; font-weight: 400; color: inherit; opacity: .82; }
.cr-chip-fijo { cursor: default; color: var(--muted); }
.cr-chip-fijo:hover { border-color: var(--border); }
.cr-chip-texto { min-width: 0; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.cr-chip-flecha { font-size: .7em; color: var(--muted); }

/* ---------- filtros ---------- */
.cr-filtros { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-width: 0; }
.cr-periodos {
  display: inline-flex; flex-wrap: wrap; gap: .2rem; max-width: 100%; padding: .2rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-pastilla); background: var(--panel);
}
.cr-periodos .cr-chip { min-height: 28px; padding: .2rem .7rem; border-color: transparent; background: transparent; }
.cr-periodos .cr-chip:hover { border-color: var(--border); }
.cr-periodos .cr-chip[aria-current="true"] { background: var(--accent); border-color: var(--accent); }
.cr-filtro { position: relative; display: inline-flex; align-items: center; max-width: 100%; min-width: 0; }
.cr-menu { min-width: 0; max-width: 100%; }
.cr-menu > summary { list-style: none; }
.cr-menu > summary::-webkit-details-marker { display: none; }
.cr-menu[open] > summary { border-color: var(--accent-2); }
.cr-filtro-activo .cr-chip { border-color: var(--accent-2); color: var(--accent-texto); }
.cr-chip-quitar {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: .15rem;
  border-radius: 50%; color: var(--muted); text-decoration: none; font-size: 1.05rem; line-height: 1;
}
.cr-chip-quitar:hover { color: var(--text); background: var(--panel-hover); }
.cr-menu-opciones {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column;
  min-width: 14rem; max-width: min(24rem, 86vw); max-height: 20rem; overflow-y: auto; padding: .35rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-icono); box-shadow: var(--shadow);
}
.cr-menu-opciones a {
  padding: .45rem .65rem; border-radius: var(--radius-sm); color: var(--text); font-size: var(--t-chico);
  text-decoration: none; overflow-wrap: anywhere;
}
.cr-menu-opciones a:hover { background: var(--panel-hover); }
.cr-menu-opciones a[aria-current="true"] { color: var(--accent-texto); font-weight: 600; }
.cr-estado-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-top: -.9rem; font-size: .76rem; }
.cr-estado-meta-errores summary { font-weight: 600; }
.cr-estado-meta-errores ul { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- 0 · Necesita tu decisión ---------- */
.cr-decisiones { padding: var(--esp-4); border-color: var(--accent-2); box-shadow: var(--shadow-glow); }
.cr-decisiones-vacia { border-color: var(--border-soft); box-shadow: none; }
.cr-decisiones-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.cr-decisiones-cab h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.cr-decisiones-cab .cr-muted { font-size: .78rem; }
.cr-cuenta { color: var(--accent-texto); }
.cr-decision-exp h4 {
  margin: .9rem 0 .15rem; color: var(--muted); font-size: var(--t-sobretitulo); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere;
}
.cr-decisiones .exp-propuestas { margin: 0; padding: 0; border: 0; background: none; }
.cr-decisiones .exp-propuestas-cab { color: var(--muted); font-size: .76rem; }
.cr-decisiones .exp-propuestas-cab strong { font-weight: 500; }
.cr-decisiones .exp-propuestas ul { margin-top: .35rem; gap: 0; }
.cr-decisiones .exp-propuesta { gap: .4rem .6rem; padding: .55rem 0; border-top: 1px solid var(--border-soft); font-size: .86rem; }
.cr-decisiones .exp-propuesta-que { min-width: 0; overflow-wrap: anywhere; }
.cr-decisiones .exp-propuesta-que small { font-size: .78rem; }
.cr-decisiones .tag-accion {
  padding: .12rem .55rem; border-radius: var(--radius-pastilla); font-size: .68rem;
  background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-texto);
}
.cr-decisiones .exp-propuesta-escalar .tag-accion, .cr-decisiones .exp-propuesta-activar .tag-accion { background: var(--ok-fondo); color: var(--ok); }
.cr-decisiones .exp-propuesta-pausar .tag-accion, .cr-decisiones .exp-propuesta-archivar .tag-accion { background: var(--error-fondo); color: var(--error); }
.cr-decisiones .exp-propuesta-rescatar .tag-accion { background: var(--warn-fondo); color: var(--warn); }
.cr-decisiones .btn-xs { min-height: 30px; padding: .25rem .8rem; border-radius: var(--radius-pastilla); font-size: .76rem; }
.cr-nada { margin: .55rem 0 0; color: var(--muted); font-size: .86rem; }
.cr-nada span { color: var(--ok); }
.cr-alertas-linea { margin: .65rem 0 0; color: var(--muted); font-size: var(--t-chico); }

/* ---------- 01 Resumen del periodo ---------- */
.cr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.cr-kpi {
  display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .7rem .85rem .6rem;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-icono);
}
.cr-kpi-destacado { border-color: var(--accent-2); box-shadow: var(--shadow-glow); }
.cr-kpi-etiqueta { color: var(--muted); font-size: .74rem; overflow-wrap: anywhere; }
.cr-kpi .cr-cifra {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; line-height: 1.15; color: var(--text);
  overflow-wrap: anywhere;
}
.cr-kpi-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: .4rem; min-height: 24px; }
.cr-kpi-pie small { min-width: 0; overflow: hidden; font-size: .74rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.cr-spark { flex: 0 1 72px; width: 72px; min-width: 32px; height: 24px; overflow: visible; }
.cr-spark.cr-sin-tendencia { visibility: hidden; }
.cr-spark-linea { fill: none; stroke: var(--accent-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cr-kpi-destacado .cr-spark-linea { stroke: var(--cian); }

/* ---------- 02 Día a día (y la gráfica de la pieza) ---------- */
.cr-metricas { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.cr-leyenda-barra {
  display: inline-flex; align-items: center; min-height: 28px; padding: .2rem .7rem; border-radius: var(--radius-pastilla);
  background: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); font-size: var(--t-chico);
}
.cr-chip-metrica { min-height: 28px; padding: .2rem .7rem; }
.cr-chip-metrica.activo { background: transparent; border-color: var(--cian); color: var(--cian); box-shadow: var(--brillo-sm); }
.cr-grafico-caja { padding: var(--esp-3); }
.cr-grafico { min-height: 120px; }
.cr-con-aviso { position: relative; }
.cr-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cr-barra-dia { fill: color-mix(in srgb, var(--accent) 72%, transparent); transition: fill .12s ease; }
.cr-barra-dia.activa { fill: var(--accent-2); }
.cr-linea { fill: none; stroke: var(--cian); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.cr-punto { fill: var(--cian); pointer-events: none; }
.cr-rejilla { stroke: var(--border-soft); stroke-dasharray: 3 4; }
.cr-rejilla-base { stroke: var(--border); stroke-dasharray: none; }
.cr-eje { fill: var(--muted); font-family: var(--font-body); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.cr-eje-titulo { font-size: 11px; font-weight: 600; }
.cr-eje-linea { fill: var(--cian); }
.cr-marca { stroke: var(--accent-2); stroke-width: 1.2; stroke-dasharray: 2 3; pointer-events: none; }
.cr-marca-punto { fill: var(--bg); stroke: var(--accent-2); stroke-width: 2; cursor: help; }
.cr-marca-punto:hover, .cr-marca-punto:focus { fill: var(--accent-2); outline: none; }
.cr-zona { fill: transparent; }
.cr-aviso {
  position: absolute; z-index: 5; max-width: 240px; padding: .4rem .55rem; pointer-events: none;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft);
  color: var(--text); font-family: var(--font-body); font-size: .76rem; font-weight: 400; line-height: 1.4;
  text-align: left; white-space: pre-line; font-variant-numeric: tabular-nums;
}
.cr-nota-marcas { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.cr-marca-muestra, .cr-promedio-muestra { display: inline-block; width: 16px; vertical-align: middle; border-top: 2px dashed var(--accent-2); }
.cr-promedio-muestra { border-top-color: var(--muted); }

/* ---------- 03 Dónde se cae la gente ---------- */
.cr-embudo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; align-items: start; margin: 0; padding: 0; list-style: none; text-align: center; }
.cr-embudo-paso { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cr-embudo-barra { position: relative; display: block; height: 96px; margin-bottom: .3rem; }
.cr-embudo-barra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--alto, 4%);
  border-radius: 4px 4px 2px 2px; background: var(--accent-2);
}
.cr-embudo-paso:nth-child(1) .cr-embudo-barra::after { background: color-mix(in srgb, var(--accent) 62%, var(--panel)); }
.cr-embudo-paso:nth-child(2) .cr-embudo-barra::after { background: color-mix(in srgb, var(--accent) 82%, var(--panel)); }
.cr-embudo-paso:nth-child(3) .cr-embudo-barra::after { background: var(--accent); }
.cr-embudo-paso.cr-caida .cr-embudo-barra::after { background: var(--error); box-shadow: 0 0 14px var(--error-fondo); }
.cr-embudo-paso.cr-sin-pixel .cr-embudo-barra::after { background: var(--border); }
.cr-embudo-paso .cr-cifra { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text); }
.cr-embudo-paso.cr-caida .cr-cifra { color: var(--error); }
.cr-embudo-etiqueta { color: var(--muted); font-size: .74rem; line-height: 1.3; overflow-wrap: anywhere; }
.cr-embudo-paso small { color: var(--text); font-size: .72rem; line-height: 1.3; }
.cr-embudo-paso.cr-sin-pixel { opacity: .6; }
.cr-embudo-paso.cr-sin-pixel small { color: var(--muted); }
.cr-frase { margin: .8rem 0 0; color: var(--text); font-size: .88rem; }

/* ---------- 04 Evolución por pieza ---------- */
.cr-evolucion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
.cr-evolucion-pieza {
  display: flex; flex-direction: column; align-items: stretch; gap: .3rem; width: 100%; padding: var(--esp-3) var(--esp-4);
  color: var(--text); font-family: var(--font-body); font-size: inherit; font-weight: 400; letter-spacing: normal;
  text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.cr-evolucion-pieza:hover, .cr-evolucion-pieza:focus-visible { border-color: var(--accent-2); box-shadow: var(--shadow-glow); }
.cr-evolucion-pieza:active { transform: none; }
.cr-tarjeta-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; min-width: 0; }
.cr-pieza-nombre { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cr-evolucion-pieza small { font-size: .72rem; }
.cr-evolucion-grafico { display: block; width: 100%; height: 56px; overflow: visible; }
.cr-promedio { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 4; pointer-events: none; }
.cr-evolucion-pieza .cr-linea { stroke: var(--accent-2); }
.cr-evolucion-pieza .cr-punto { fill: var(--accent-2); }
.cr-v-ganadora .cr-linea { stroke: var(--ok); }
.cr-v-ganadora .cr-punto { fill: var(--ok); }
.cr-v-perdiendo .cr-linea { stroke: var(--error); }
.cr-v-perdiendo .cr-punto { fill: var(--error); }
.cr-v-recuperandose .cr-linea { stroke: var(--warn); }
.cr-v-recuperandose .cr-punto { fill: var(--warn); }
.cr-v-neutra .cr-linea { stroke: var(--muted); }
.cr-v-neutra .cr-punto { fill: var(--muted); }
.cr-historia { color: var(--muted); font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
.cr-mas { margin-top: .6rem; }
.cr-mas > summary { margin-bottom: .6rem; color: var(--accent-texto); font-size: var(--t-chico); }

/* Veredicto: chip con texto (nunca solo color). */
.cr-veredicto {
  flex: 0 0 auto; display: inline-block; padding: .12rem .55rem; border-radius: var(--radius-pastilla);
  font-size: .7rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-texto);
}
.cr-veredicto.cr-v-ganadora { background: var(--ok-fondo); color: var(--ok); }
.cr-veredicto.cr-v-perdiendo { background: var(--error-fondo); color: var(--error); }
.cr-veredicto.cr-v-recuperandose { background: var(--warn-fondo); color: var(--warn); }
.cr-veredicto.cr-v-neutra { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }

/* ---------- 05 Ranking de piezas ---------- */
.cr-tabla-contenedor { padding: .3rem .6rem; overflow-x: auto; }
.cr-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cr-tabla th {
  padding: .5rem .45rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .72rem; font-weight: 500;
  letter-spacing: .02em; text-align: left; text-transform: none; white-space: nowrap;
}
.cr-tabla td, .cr-tabla tbody th { padding: .5rem .45rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.cr-tabla tbody th { color: var(--text); font-size: .8rem; font-weight: 500; white-space: normal; }
.cr-tabla tbody tr:last-child > * { border-bottom: 0; }
.cr-ranking tbody tr[data-cr-pieza] { cursor: pointer; transition: background .12s ease; }
.cr-ranking tbody tr[data-cr-pieza]:hover { background: var(--panel-hover); }
.cr-pieza-enlace {
  display: flex; align-items: center; gap: .55rem; min-width: 0; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font-family: var(--font-body); font-size: inherit; font-weight: 400; text-align: left; cursor: pointer;
}
.cr-pieza-enlace:active { transform: none; }
.cr-pieza-enlace:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }
.cr-mini, .cr-ranking img.cr-mini { flex: 0 0 auto; width: 34px; height: 34px; max-width: none; border-radius: 6px; object-fit: cover; background: var(--panel-2); }
.cr-mini-video { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-soft); color: var(--muted); font-size: .7rem; }
.cr-pieza-texto { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; }
.cr-pieza-texto .cr-veredicto { padding: .04rem .45rem; font-size: .64rem; }
.cr-ctr { display: inline-flex; align-items: center; gap: .45rem; }
.cr-ctr .cr-barra { flex: 0 0 auto; width: 48px; height: 6px; }
.cr-fila-perdiendo .cr-barra::after { background: var(--error); }
.cr-fila-ganadora .cr-roas { color: var(--ok); }
.cr-fila-perdiendo .cr-roas { color: var(--error); }

/* Barra horizontal: la pista es la caja, el largo es --ancho en ::after. */
.cr-barra {
  position: relative; display: block; height: 7px; overflow: hidden; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.cr-barra::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--ancho, 0%);
  border-radius: inherit; background: var(--accent-2);
}

/* ---------- 06 Quién compra y dónde lo ve ---------- */
.cr-desgloses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); }
.cr-desglose h4 { margin: 0 0 .6rem; color: var(--muted); font-size: .8rem; font-weight: 500; }
.cr-desglose h4 small { color: var(--muted-2); font-weight: 400; }
.cr-desglose .cr-tabla { font-size: .78rem; }
.cr-barras { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cr-barras-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .5rem; font-size: .78rem; }
.cr-barras-fila .cr-barra { grid-column: 1 / -1; }
.cr-barras-fila .cr-barra::after { background: var(--accent); }
.cr-barras-fila .cr-barra-mejor::after { background: var(--accent-2); box-shadow: var(--brillo-sm); }
.cr-barras-etiqueta { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.cr-dona-caja { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.cr-dona { flex: 0 0 auto; width: 104px; height: 104px; overflow: visible; }
.cr-dona-fondo { fill: none; stroke: var(--border-soft); stroke-width: 16; }
.cr-dona-arco { fill: none; stroke: var(--accent-2); stroke-width: 16; cursor: help; }
.cr-leyenda { display: flex; flex: 1 1 9rem; flex-direction: column; gap: .3rem; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: .76rem; }
.cr-leyenda li { display: flex; align-items: center; gap: .4rem; }
.cr-leyenda-texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cr-leyenda strong { white-space: nowrap; }
.cr-punto-leyenda { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.cr-serie-1 { color: var(--serie-1); stroke: var(--serie-1); }
.cr-serie-2 { color: var(--serie-2); stroke: var(--serie-2); }
.cr-serie-3 { color: var(--serie-3); stroke: var(--serie-3); }
.cr-serie-4 { color: var(--serie-4); stroke: var(--serie-4); }
.cr-serie-5 { color: var(--serie-5); stroke: var(--serie-5); }
.cr-serie-6 { color: var(--serie-6); stroke: var(--serie-6); }
.cr-serie-7 { color: var(--serie-7); stroke: var(--serie-7); }
.cr-serie-8 { color: var(--serie-8); stroke: var(--serie-8); }

/* ---------- 07 Experimentos ---------- */
.cr-experimentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); }
.cr-experimento {
  display: flex; flex-direction: column; gap: .45rem; color: var(--text); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cr-experimento:hover { border-color: var(--accent-2); }
.cr-experimento.cr-seleccionado { border-color: var(--accent-2); box-shadow: var(--shadow-glow); }
.cr-experimento-cab { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.cr-experimento-titulo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cr-experimento-titulo strong { font-weight: 600; overflow-wrap: anywhere; }
.cr-experimento-titulo small { color: var(--muted); font-size: .76rem; }
.cr-experimento-linea { color: var(--text); font-size: .78rem; overflow-wrap: anywhere; }
.cr-experimento > small { font-size: .74rem; overflow-wrap: anywhere; }
.cr-dona-tope { flex: 0 0 auto; width: 44px; height: 44px; }
.cr-dona-tope .cr-dona-fondo { stroke-width: 5; }
.cr-dona-tope .cr-dona-arco { stroke-width: 5; stroke-linecap: round; cursor: default; }
.cr-dona-tope .cr-dona-lleno { stroke: var(--warn); }
.cr-estado-cerrado .cr-dona-tope .cr-dona-arco { stroke: var(--muted); }
.cr-dona-texto { fill: var(--text); font-family: var(--font-body); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- gestión del experimento elegido ---------- */
.cr-gestion { padding: var(--esp-4); border-color: var(--accent-2); }
.cr-gestion-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 1rem; }
.cr-gestion-titulo { flex: 1 1 20rem; min-width: 0; }
.cr-gestion-cab h3 {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .45rem; font-family: var(--font-display);
  font-size: 1.15rem; overflow-wrap: anywhere;
}
.cr-gestion-cab h3 .semaforo { flex: 0 0 auto; }
.cr-gestion-etiquetas { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.cr-gestion-etiquetas .tag-estado { background: var(--panel-2); color: var(--text); border: 1px solid var(--border-soft); font-weight: 500; }
.cr-gestion .exp-parentesco { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .5rem 0 0; font-size: var(--t-chico); }
.cr-gestion .swap-card { margin-top: .8rem; background: var(--panel-2); }
.cr-gestion .tag-error { margin: .6rem 0 0; }

/* «Cómo decide el motor»: las reglas en palabras, en cuatro grupos (spec §4.7). */
.reglas-intro { margin: .4rem 0 .6rem; line-height: 1.5; }
.reglas-grupo { margin: .7rem 0; padding: .5rem .9rem .8rem; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); min-width: 0; }
.reglas-grupo legend { padding: 0 .4rem; color: var(--accent-texto); font-weight: 700; font-size: var(--t-chico); }
.reglas-grupo .reglas-grid { margin: .2rem 0 0; }
.reglas-grupo .regla { font-size: var(--t-chico); }

/* ---------- 08 y 09 ---------- */
.cr-aprendizajes .aprendizajes { margin-top: 0; padding-top: 0; border-top: 0; }
.cr-aprendizajes .aprendizajes > .panel-cabecera { margin-bottom: .6rem; padding-bottom: 0; border-bottom: 0; }
.cr-aprendizajes .aprendizajes .fe-titulo { display: none; }
.cr-historial > summary { font-family: var(--font-display); font-weight: 600; }
.cr-historial[open] > summary { margin-bottom: .9rem; }
.cr-historial + .cr-historial { margin-top: var(--esp-2); }

/* ---------- panel de una pieza: cajón a la derecha ---------- */
.cr-panel {
  width: min(560px, 100vw); max-width: 100vw; height: 100%; max-height: none; margin: 0 0 0 auto; padding: 0;
  border: 0; border-left: 1px solid var(--border); border-radius: 0; background: var(--fondo-escena), var(--bg);
  color: var(--text); box-shadow: var(--shadow); overflow-y: auto; overscroll-behavior: contain;
}
.cr-panel::backdrop { background: color-mix(in srgb, var(--bg) 72%, transparent); }
.cr-panel-cerrar {
  position: sticky; top: .6rem; z-index: 3; float: right; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: .6rem .6rem 0 0; padding: 0; border: 1px solid var(--border); border-radius: 50%;
  background: var(--panel); color: var(--text); font-family: var(--font-body); font-size: 1.35rem; font-weight: 400; line-height: 1;
}
.cr-panel-cerrar:hover { border-color: var(--accent-2); }
.cr-panel-cuerpo { padding: var(--esp-5); }
.cr-panel .cr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr-panel .cr-kpi .cr-cifra { font-size: 1.12rem; }
/* En tarjetas angostas (el panel, el celular) la tendencia va debajo del cambio: el cambio nunca se corta. */
.cr-panel .cr-kpi-pie { flex-direction: column; align-items: stretch; gap: .3rem; }
.cr-panel .cr-spark { flex: none; width: 100%; height: 20px; }
.cr-pieza-fragmento { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.cr-pieza-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding-right: 2.6rem; }
.cr-pieza-cab > div { min-width: 0; }
.cr-pieza-cab h3 { margin: 0 0 .25rem; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; }
.cr-pieza-cab p { margin: 0; }
.cr-pieza-cab .cr-muted { font-size: var(--t-chico); }
.cr-pieza-historia {
  margin: -.6rem 0 0; padding: .6rem .8rem; border-left: 2px solid var(--accent-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--panel); color: var(--text); font-size: .84rem;
}
.cr-pieza-arriba { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.cr-pieza-media video, .cr-pieza-media img {
  display: block; width: 100%; max-height: 340px; object-fit: contain; border-radius: var(--radius-icono);
  background: var(--bg); border: 1px solid var(--border-soft);
}
.cr-pieza-acciones { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; min-width: 0; }
.cr-pieza-acciones > a, .cr-pieza-acciones form button { justify-content: center; width: 100%; text-align: center; }
.cr-pieza-acciones form { margin: 0; }
.cr-pieza-seccion { min-width: 0; }
.cr-pieza-seccion h4 { margin: 0 0 .55rem; font-family: var(--font-display); font-size: .92rem; font-weight: 600; }
.cr-pieza-seccion h4 small { font-family: var(--font-body); font-weight: 400; }
.cr-pieza-seccion-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem; margin-bottom: .55rem; }
.cr-pieza-seccion-cab h4 { margin: 0; }
.cr-desgloses-pieza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-curva { display: block; width: 100%; height: auto; overflow: visible; }
.cr-curva-escalon { fill: color-mix(in srgb, var(--accent) 70%, transparent); cursor: help; }
.cr-curva-escalon:hover { fill: var(--accent-2); }
.cr-rankings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.cr-rankings li { display: flex; flex-direction: column; gap: .15rem; font-size: .8rem; }
.cr-diagnostico p { margin: 0 0 .45rem; font-size: .84rem; }
.cr-diagnostico .tag-estado { background: var(--error-fondo); color: var(--error); }
.cr-bitacora { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.cr-bitacora li { overflow-wrap: anywhere; }

/* ---------- anchos intermedios ---------- */
@media (max-width: 1100px) {
  .cr-desgloses, .cr-experimentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- celular (≤ 760 px): nada empuja la página de lado ---------- */
@media (max-width: 760px) {
  .cr-kpis, .cr-panel .cr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-kpi-pie { flex-direction: column; align-items: stretch; gap: .3rem; }
  .cr-spark { flex: none; width: 100%; height: 20px; }
  .cr-evolucion, .cr-experimentos, .cr-desgloses, .cr-desgloses-pieza { grid-template-columns: minmax(0, 1fr); }
  .cr-embudo { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
  .cr-embudo-barra { height: 72px; }
  .cr-filtro { position: static; }
  .cr-menu-opciones { left: 0; right: 0; min-width: 0; max-width: none; }
  .cr-chip-texto { max-width: 11rem; }
  .cr-cab-nota, .cr-seccion-cab .cr-metricas { flex-basis: 100%; margin-left: 0; }
  .cr-estado-meta { margin-top: -.6rem; }
  .cr-tabla-contenedor { overflow-x: visible; padding: .3rem; }
  .cr-ranking .cr-pieza-enlace { width: 100%; }
  .cr-panel { width: 100vw; border-left: 0; }
  .cr-panel-cuerpo { padding: var(--esp-4); }
  .cr-pieza-arriba { grid-template-columns: minmax(0, 1fr); }
  .cr-pieza-media video, .cr-pieza-media img { max-height: 300px; margin: 0 auto; }
  .cr-rankings { grid-template-columns: minmax(0, 1fr); }
  .cr-kpi .cr-cifra { font-size: 1.15rem; }
}
/* ── estilos/pantallas/experimento-nuevo.css ── */
/* «Nuevo experimento» (E3): pantalla propia a pantalla completa, sin el menú lateral; conserva los tokens azules globales.
   La salida es «← Volver a resultados» (.exp-volver). El paso «Cuánto» pide UN total y los días: lo grande es el máximo. */
body:has(#exp-nuevo) .sidebar, body:has(#exp-nuevo) .menu-movil { display: none; }
body.con-sidebar:has(#exp-nuevo) { padding-left: 0; }
body:has(#exp-nuevo) main { margin-left: 0; max-width: 1440px; width: 100%; }
#exp-nuevo { min-width: 0; padding: clamp(12px, 3vw, 40px); }
#exp-nuevo .exp-volver { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--accent-texto); font-weight: 600; text-decoration: none; }
#exp-nuevo .exp-volver:hover, #exp-nuevo .exp-volver:focus-visible { background: var(--panel-hover); color: var(--text); }
#exp-nuevo .exp-recorrido, #exp-nuevo .exp-atajos { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; }
#exp-nuevo .exp-recorrido span { color: var(--accent-texto); padding: 12px; border-bottom: 2px solid var(--border); }
#exp-nuevo .exp-pasos { max-width: none; }
#exp-nuevo .exp-pasos section { padding: 24px 0; }
#exp-nuevo .exp-atajos button { flex: 1 1 180px; display: grid; gap: 8px; text-align: left; padding: 18px; }
#exp-nuevo .exp-atajos strong { font-size: 1.2rem; }
#exp-nuevo .exp-atajos small { color: var(--muted); }
#exp-nuevo .exp-total-dias { align-items: end; }
#exp-nuevo [name=tope_total] { font-size: clamp(24px, 4vw, 40px); width: 100%; }
#exp-nuevo .exp-total-barra { display: block; width: 100%; margin: 12px 0 0; accent-color: var(--accent-2); }
#exp-nuevo .exp-resumen { display: grid; gap: 8px; margin: 20px 0; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
#exp-nuevo .exp-resumen p { margin: 0; }
#exp-nuevo .exp-maximo { color: var(--accent-texto); font-size: clamp(22px, 3.4vw, 38px); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
#exp-nuevo .exp-dia { color: var(--text); font-size: clamp(16px, 2vw, 22px); overflow-wrap: anywhere; }
#exp-nuevo .exp-anuncios { color: var(--muted); font-size: clamp(15px, 1.8vw, 18px); }
#exp-nuevo .exp-aviso-tope { color: var(--muted); font-size: var(--t-chico); line-height: 1.5; }
#exp-nuevo .exp-al-lanzar { color: var(--warn); font-weight: 600; overflow-wrap: anywhere; }
#exp-nuevo .exp-maximo:empty, #exp-nuevo .exp-dia:empty, #exp-nuevo .exp-anuncios:empty, #exp-nuevo .exp-aviso-tope:empty { display: none; }
#exp-nuevo .exp-aviso { margin: 0 0 8px; padding: 14px 16px; border: 1px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-fondo); color: var(--text); line-height: 1.5; }
#exp-nuevo .exp-ajuste { margin: 16px 0; }
#exp-nuevo .exp-reparto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; margin: 12px 0; }
#exp-nuevo .exp-nota p { margin: 0; }
#exp-nuevo .exp-nota p + p { margin-top: 8px; }
#exp-nuevo .exp-nota { margin: 16px 0 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-size: var(--t-chico); line-height: 1.6; }
#exp-nuevo .exp-cuadricula { max-width: 100%; overflow-x: auto; }
#exp-nuevo input { max-width: 100%; box-sizing: border-box; }
#exp-nuevo [hidden] { display: none !important; }
@media (max-width: 760px) { #exp-nuevo .exp-recorrido { gap: 4px; } #exp-nuevo .exp-recorrido span { flex: 1 1 40%; } #exp-nuevo .fe-opciones { flex-wrap: wrap; } #exp-nuevo .exp-resumen { padding: 16px; } }
/* ── estilos/pantallas/saldo.css ── */
/* Cobros: saldo prepagado (spec 2026-10-08 §7 y §9.4). Uso: Configuración › Saldo y recargas (_config_saldo.html y el
   fragmento _saldo_panel.html, clases saldo-*), el chip de la barra lateral (.sidebar-saldo, sobre .sidebar-gasto), la
   vuelta del pago (saldo_recarga.html, #recarga-vuelta) y el aviso de saldo insuficiente que pinta static/cobros.js
   (.aviso-sin-saldo) y /admin/cobros (admin_cobros.html, #admin-cobros y clases cobros-admin-*). Tonos: normal, aviso (bajo el umbral) y bloqueo (sin saldo), siempre con palabras además del color. */
.saldo-panel [hidden], #recarga-vuelta [hidden], .aviso-sin-saldo[hidden] { display: none !important; }

/* Chip de la barra lateral */
.sidebar-saldo { font-weight: 600; color: var(--text); }
.sidebar-saldo.saldo-aviso { border-color: var(--warn); background: var(--warn-fondo); }
.sidebar-saldo.saldo-bloqueo { border-color: var(--error); background: var(--error-fondo); }

/* Configuración › Saldo y recargas */
.saldo-panel { min-width: 0; }
.saldo-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); max-width: 720px; }
.saldo-panel h3 { margin: var(--esp-5) 0 var(--esp-2); }
.saldo-tile.saldo-aviso { border-color: var(--warn); }
.saldo-tile.saldo-bloqueo { border-color: var(--error); }
.saldo-tile.saldo-aviso small, .saldo-tile.saldo-bloqueo small { color: var(--text); }
.saldo-recarga { display: grid; gap: var(--esp-2); max-width: 520px; }
.saldo-montos { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.saldo-fila { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.saldo-fila input[type=number] { flex: 1 1 140px; min-width: 0; max-width: 220px; }
.saldo-nota { padding-top: 0; font-size: var(--t-chico); }
.saldo-cabecera { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; justify-content: space-between; margin-top: var(--esp-5); }
.saldo-cabecera h3 { margin: 0; }
.saldo-tabla-caja { max-width: 100%; overflow-x: auto; }
.saldo-detalle { display: block; color: var(--muted); font-size: var(--t-chico); overflow-wrap: anywhere; }
.saldo-monto-mas { color: var(--ok); }
.saldo-monto-menos { color: var(--text); }
.saldo-monto-cero { color: var(--muted); }
.saldo-mas { margin-top: var(--esp-2); }
.saldo-estado-aprobada { color: var(--ok); }
.saldo-estado-rechazada, .saldo-estado-anulada { color: var(--error); }
.saldo-estado-pendiente { color: var(--warn); }

/* Vuelta del pago */
.recarga-caja { display: grid; gap: var(--esp-3); max-width: 560px; padding: var(--esp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.recarga-texto { margin: 0; font-size: var(--t-titulo); line-height: 1.35; overflow-wrap: anywhere; }

/* Aviso de saldo insuficiente (cualquier fetch que reciba el 402) */
.flash.aviso-sin-saldo { position: fixed; z-index: 60; left: var(--esp-4); right: var(--esp-4); bottom: var(--esp-4); max-width: 640px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; box-shadow: var(--shadow);
  background: var(--panel-2); border: 1px solid var(--error); color: var(--text); }
.aviso-sin-saldo span { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.aviso-sin-saldo-enlace { font-weight: 700; }
.aviso-sin-saldo-cerrar { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--esp-2); line-height: 1.6; }

/* /admin/cobros: la tabla va en .admin-scroll (desplazamiento propio) y en el celular tablas.js la apila */
.cobros-admin-linea { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: flex-end; max-width: 520px; }
.cobros-admin-linea label { display: grid; gap: var(--esp-1); flex: 1 1 200px; min-width: 0; }
.cobros-admin-celda { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-1); }
.cobros-admin-num { width: 8.5rem; min-width: 8.5rem; }
.cobros-admin-tabla td { white-space: nowrap; }
.cobros-admin-tabla td:last-child { white-space: normal; min-width: 15rem; }
.cobros-admin-recarga summary { white-space: nowrap; }
.cobros-admin-perdida { color: var(--error); font-weight: 600; }

/* /admin/cobros, planes y suscripciones (planes 7/8): notas cortas bajo una cifra, casillas en línea, un pago
   pendiente por resolver y el formulario de un plan nuevo. Los formularios de acciones van dentro de un <details>
   de la última columna (cobros-admin-recarga), cada uno separado por una línea. */
.cobros-admin-nota { color: var(--muted); font-size: .8rem; white-space: normal; }
.cobros-admin-casilla { display: flex !important; align-items: center; gap: var(--esp-1); }
.cobros-admin-recarga .agencia-form + .agencia-form { border-top: 1px solid var(--border); padding-top: var(--esp-2); }
.cobros-admin-recarga .agencia-form p { margin: 0; }
.cobros-admin-pendiente { border-left: 3px solid var(--error); padding-left: var(--esp-2); }
.cobros-admin-nuevo { margin-top: var(--esp-3); }
.cobros-admin-junto { white-space: nowrap; }
/* La tabla de planes por proyecto envuelve el texto (ocho columnas con fechas largas): sin esto la columna de
   acciones quedaba fuera de la caja en un escritorio de 1366 px (visto en la captura del 2026-10-10). */
.cobros-admin-planes td { white-space: normal; }
.cobros-admin-planes td:last-child { min-width: 17rem; }
.cobros-admin-planes .agencia-form { grid-template-columns: minmax(0, 1fr); max-width: 100%; }
.cobros-admin-planes .agencia-form select, .cobros-admin-planes .agencia-form input[type="text"] { width: 100%; min-width: 0; }
/* ── estilos/pantallas/planes.css ── */
/* Planes (planes 6/8, spec 2026-10-09 §8). Uso: Configuración › Plan (_config_plan.html y el fragmento
   _plan_panel.html: ofertas .plan-oferta, medidores .plan-medidor con <progress class="plan-barra">, aviso de
   morosa .plan-aviso, historial .plan-pagos, cancelar .plan-cancelar) y el formulario de alta o cambio de
   tarjeta (plan_alta.html, #plan-alta: ciclos, casillas, pestañas Tarjeta / Nequi y el botón del widget de Wompi,
   hijo directo de .plan-form, que queda .plan-bloqueado hasta marcar las tres casillas). El saldo del plan en Configuración › Saldo es .saldo-plan. */
.plan-panel [hidden], #plan-alta [hidden] { display: none !important; }
.plan-panel { min-width: 0; }
.plan-panel h3 { margin: var(--esp-5) 0 var(--esp-2); }
/* Un <a class="btn-generar"> no hereda el relleno ni la letra de <button> (base visual): los enlaces-botón de aquí sí. */
.plan-panel a.btn-generar, #plan-alta a.btn-generar { font-family: var(--font-display); font-weight: 600; font-size: .87rem;
  padding: .65rem 1.15rem; border-radius: var(--radius-sm); }

/* Sin plan: las tarjetas de los planes */
.plan-ofertas { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); max-width: 900px; }
.plan-oferta { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--panel); min-width: 0; }
.plan-oferta h3 { margin: 0; font-family: var(--font-display); }
.plan-precio { margin: 0; color: var(--muted); }
.plan-precio strong { font-size: var(--t-cifra); color: var(--text); font-family: var(--font-display); }
.plan-anual { margin: 0; color: var(--muted); font-size: var(--t-chico); }
.plan-anual strong { color: var(--ok); }
.plan-beneficios { margin: var(--esp-2) 0; padding-left: var(--esp-5); display: grid; gap: var(--esp-1); }
.plan-suscribirme { align-self: flex-start; margin-top: auto; }

/* Con plan: cabecera, notas, medidores y ahorro */
.plan-cabecera { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; margin-top: var(--esp-3); }
.plan-cabecera h3 { margin: 0; }
.plan-estado-activa { color: var(--ok); }
.plan-estado-morosa { color: var(--error); }
.plan-estado-cancelada, .plan-estado-anulada, .plan-estado-manual { color: var(--warn); }
.plan-nota { max-width: 720px; overflow-wrap: anywhere; }
.plan-aviso { display: grid; gap: var(--esp-2); justify-items: start; max-width: 720px; }
.plan-aviso p { margin: 0; }
.plan-esperando { max-width: 720px; }
.plan-medidor { display: grid; gap: var(--esp-2); max-width: 720px; margin-top: var(--esp-4); padding: var(--esp-4);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.plan-medidor-linea { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: space-between; align-items: baseline; }
.plan-medidor-linea strong { font-size: var(--t-titulo); font-family: var(--font-display); }
.plan-medidor-detalle { margin: 0; color: var(--muted); font-size: var(--t-chico); overflow-wrap: anywhere; }
.plan-barra { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border: 0; border-radius: var(--radius-pastilla);
  background: var(--panel-2); overflow: hidden; }
.plan-barra::-webkit-progress-bar { background: var(--panel-2); border-radius: var(--radius-pastilla); }
.plan-barra::-webkit-progress-value { background: var(--accent-grad); border-radius: var(--radius-pastilla); }
.plan-barra::-moz-progress-bar { background: var(--accent-grad); border-radius: var(--radius-pastilla); }
.plan-barra-incluido::-webkit-progress-value { background: var(--ok); }
.plan-barra-incluido::-moz-progress-bar { background: var(--ok); }
.plan-ahorro { max-width: 720px; margin-top: var(--esp-4); }
.plan-ahorro p { margin: 0 0 var(--esp-1); }
.plan-tarjeta { display: grid; gap: var(--esp-2); justify-items: start; }
.plan-tarjeta p { margin: 0; }
.plan-pago-aprobado { color: var(--ok); }
.plan-pago-rechazado, .plan-pago-error, .plan-pago-anulado { color: var(--error); }
.plan-pago-pendiente { color: var(--warn); }
.plan-cancelar { margin-top: var(--esp-5); max-width: 720px; }
.plan-cancelar p { overflow-wrap: anywhere; }
.plan-cancelar-si { border-color: var(--error); }

/* Saldo partido (Configuración › Saldo) */
.saldo-tile.saldo-plan { border-color: var(--accent); }

/* Alta o cambio de tarjeta */
.plan-alta { display: grid; gap: var(--esp-4); max-width: 640px; min-width: 0; }
.plan-ciclos { flex-wrap: wrap; }
.plan-ciclos .cat-tab { text-decoration: none; }
.plan-ayuda { margin: 0; color: var(--muted); font-size: var(--t-chico); line-height: 1.45; overflow-wrap: anywhere; }
.plan-form { display: grid; gap: var(--esp-3); min-width: 0; }
.plan-form input[type=email] { max-width: 420px; width: 100%; }
.plan-casillas { display: grid; gap: var(--esp-3); margin: 0; padding: var(--esp-4); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--panel); min-width: 0; }
.plan-casillas legend { padding: 0 var(--esp-1); font-weight: 600; }
.plan-casillas label { display: flex; gap: var(--esp-2); align-items: flex-start; line-height: 1.45; }
.plan-casillas input[type=checkbox] { flex: 0 0 auto; margin-top: 3px; }
.plan-casillas span { min-width: 0; overflow-wrap: anywhere; }
.plan-medio { display: grid; gap: var(--esp-2); min-width: 0; }
.plan-medios-titulo { margin: var(--esp-3) 0 0; }
.plan-form > button.plan-bloqueado, .plan-form > .waybox-button.plan-bloqueado { opacity: 0.45; pointer-events: none; filter: grayscale(1); }
.plan-form > button { justify-self: start; }
.plan-widget-aviso { color: var(--warn); }
/* ── estilos/pantallas/triple-whale.css ── */
/* ============================================================
   Triple Whale: la conexión con varias tiendas (spec 2026-10-08 §6.2). Uso:
   _triple_whale_conectar.html dentro de «Ajustes» de #tab-rendimiento: tarjetas
   `.tw-tienda` (una por tienda conectada) en la rejilla `.tw-tiendas`, sus
   acciones y el selector «Cambiar país», más `.tw-campo`/`.tw-nota` de los
   formularios (antes eran estilos en línea), y la galería de tarjetas de
   análisis (spec 2026-10-08 tarjetas §2): `.tw-galeria` con un
   `article.tw-tarjeta` por anuncio (_tw_galeria.html), sus anillos `.tw-anillo`,
   cifras, razones y acciones, y «Ver como tabla» (`.tw-tabla-detalle`) y,
   dentro del detalle `.tw-analisis`, los ganchos nuevos y el copy para Meta
   (spec 2026-10-09 §5). Las reglas viejas de la pestaña (.tw-barra,
   .tw-aviso…) siguen en legado/06.
   ============================================================ */

.tw-conexion-titulo { margin: 0 0 .5rem; font-size: var(--t-base); }
.tw-tiendas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .7rem; margin: 0 0 .8rem; }
.tw-tienda { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); font-size: .84rem; }
.tw-tienda-error { border-color: var(--error); }
.tw-tienda-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.tw-tienda-nombre { font-size: .95rem; }
.tw-tienda-dato { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.tw-tienda-error-texto { margin: 0; overflow-wrap: anywhere; }
.tw-tienda-pais summary { cursor: pointer; }
.tw-tienda-form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0 0; }
.tw-tienda-form select { flex: 1 1 10rem; min-width: 0; }
.tw-tienda-acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.tw-tienda-acciones form.inline { margin: 0; }
.tw-campo { margin-top: .6rem; }
.tw-nota { padding-top: .3rem; font-size: .76rem; }

/* Galería de tarjetas (spec 2026-10-08 tarjetas §2): una tarjeta por anuncio con el anuncio real, cuatro anillos,
   cifras, razones y «Cómo mejorarlo». */
/* El bloque entero (chips + lote + rejilla) se reemplaza al cambiar de filtro: mientras llega, se ve atenuado con el
   aviso «Cargando…» arriba (componentes/cargando.css, `.cargando-encima`; desde 2026-10-13). */
.tw-galeria-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin: .8rem 0; }
.tw-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 34rem), 1fr)); gap: .9rem; }
.tw-tarjeta { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .9rem; min-width: 0; padding: .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.tw-tarjeta-perdedor { border-color: var(--error); }
.tw-tarjeta-ganador { border-color: var(--ok); }
.tw-tarjeta-medio { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
/* contain, no cover: un anuncio 1:1 o 4:5 se ve entero (con bandas), nunca recortado (revisión de la tarea 7). */
.tw-tarjeta-medio video, .tw-tarjeta-medio img { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; border-radius: var(--radius-sm); background: var(--fondo-video); }
.tw-tarjeta-sin-medio { display: flex; align-items: center; justify-content: center; aspect-ratio: 9 / 16; border-radius: var(--radius-sm); background: var(--panel-2); color: var(--muted); }
.tw-tarjeta-cuerpo { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.tw-tarjeta-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.tw-tarjeta-titulos { min-width: 0; }
.tw-sobretitulo { color: var(--muted); font-size: var(--t-sobretitulo); text-transform: uppercase; letter-spacing: .04em; }
.tw-tarjeta-nombre { display: block; overflow-wrap: anywhere; }
.tw-frase { margin: .2rem 0 0; font-family: var(--font-display); font-size: var(--t-titulo); line-height: 1.2; }
.tw-tarjeta-ganador .tw-frase { color: var(--ok); }
.tw-tarjeta-perdedor .tw-frase { color: var(--error); }
.tw-resultado { align-self: flex-start; padding: .2rem .6rem; border-radius: var(--radius-pastilla); background: var(--panel-2); font-size: var(--t-chico); white-space: nowrap; }
.tw-resultado-ganador { background: var(--ok-fondo); color: var(--ok); }
.tw-resultado-perdedor { background: var(--error-fondo); color: var(--error); }
.tw-anillos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; text-align: center; }
.tw-anillo { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; font-size: var(--t-chico); }
.tw-anillo svg { width: 3.6rem; height: 3.6rem; }
.tw-anillo-fondo { fill: none; stroke: var(--border); stroke-width: 3; }
.tw-anillo-valor { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.tw-anillo-alto .tw-anillo-valor { stroke: var(--ok); }
.tw-anillo-medio .tw-anillo-valor { stroke: var(--warn); }
.tw-anillo-bajo .tw-anillo-valor { stroke: var(--error); }
.tw-anillo text { fill: currentColor; font-size: 9px; }
.tw-anillo small { color: var(--muted); }
.tw-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: 0; padding-top: .5rem; border-top: 1px solid var(--border); }
.tw-cifras dt { color: var(--muted); font-size: var(--t-sobretitulo); text-transform: uppercase; }
.tw-cifras dd { margin: 0; }
.tw-tendencia-cansando { color: var(--warn); }
.tw-tendencia-mejorando { color: var(--ok); }
.tw-razones { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.tw-razon { padding: .15rem .55rem; border-radius: var(--radius-pastilla); font-size: var(--t-chico); }
.tw-razon-ok { background: var(--ok-fondo); color: var(--ok); }
.tw-razon-mal { background: var(--error-fondo); color: var(--error); }
.tw-texto-anuncio summary { cursor: pointer; color: var(--muted); }
.tw-copy { white-space: pre-line; overflow-wrap: anywhere; }
.tw-tarjeta-ia { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.tw-tarjeta-ia form { margin: 0; }
.tw-ia-frase { flex-basis: 100%; margin: 0; }
.tw-analisis-detalle { flex-basis: 100%; }
.tw-analisis { display: flex; flex-direction: column; gap: .4rem; padding: .6rem 0 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.tw-analisis h5 { margin: .4rem 0 0; }
.tw-analisis-lista { margin: 0; padding-left: 1.1rem; }
/* «Lo que funciona» y «Lo que falla» ya llevan ✓/✗: sin la viñeta de la lista (revisión final, D1). */
.tw-analisis-marcas { list-style: none; padding-left: 0; }
.tw-guardar-aprendizaje { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.tw-tarjeta-ia .tw-progreso { flex-basis: 100%; }
.tw-ver-mas { grid-column: 1 / -1; justify-self: center; }
.tw-tabla-detalle summary { cursor: pointer; }
@media (max-width: 760px) {
  .tw-tarjeta { grid-template-columns: minmax(0, 1fr); }
  .tw-tarjeta-medio video, .tw-tarjeta-medio img, .tw-tarjeta-sin-medio { max-height: 60vh; }
  .tw-anillos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   «Resultados de tu tienda» (spec 2026-10-08-tw-resultados-de-tu-tienda). Uso: _tw_resultados.html (la sección),
   _tw_dia.html (el detalle de un día) y el SVG que dibuja static/tw_resultados.js con clases `twr-*`.
   Colores solo con tokens; paletas validadas con la skill dataviz sobre --panel y --bg:
   ventas --serie-1, gasto --serie-2, anuncios nuevos --serie-3; canales Meta --serie-1, Google --serie-3,
   Snapchat --serie-4, TikTok --serie-5, otros --muted-2. Meses de arranque: rampa de azules (1 = el más viejo).
   ============================================================ */

.twr-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.twr-cab h3 { margin: 0 0 .15rem; }
.twr-nota { margin: 0; color: var(--muted); font-size: var(--t-chico); }
.twr-controles { display: flex; flex-wrap: wrap; gap: .4rem; }
.twr-interruptor { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-pastilla); background: var(--panel-2); color: var(--muted); font-size: var(--t-chico); cursor: pointer; }
.twr-interruptor input { margin: 0; accent-color: var(--accent); }

/* tarjetas */
.twr-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .5rem; margin-bottom: .75rem; }
.twr-tarjeta { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .6rem .7rem .35rem; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.twr-tarjeta:hover { background: var(--panel-hover); }
.twr-tarjeta:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 2px; }
.twr-tarjeta[aria-selected="true"] { border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2); }
.twr-tarjeta-k { overflow: hidden; color: var(--muted); font-size: .74rem; white-space: nowrap; text-overflow: ellipsis; }
.twr-tarjeta-v { overflow: hidden; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.twr-tarjeta-d { font-size: .74rem; }
/* NVP (spec 2026-10-09-nvp-visitantes-nuevos §4.1): las pestañas viven en `.twr-pestanas` (role="tablist") sin caja
   propia, así el NVP, que no se grafica y no es pestaña, es otra celda de la misma rejilla. */
.twr-pestanas { display: contents; }
.twr-tarjeta-fija { cursor: default; }
.twr-tarjeta-fija:hover { background: var(--panel-2); }
.twr-tarjeta-fija .chip-nvp { font-size: var(--t-base); }   /* del tamaño de las otras cifras */
.twr-spark { display: block; width: 100%; height: 26px; margin-top: .15rem; }
.twr-spark-linea { fill: none; stroke: var(--accent-texto); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.twr-bueno { color: var(--ok); }
.twr-malo { color: var(--error); }
.twr-neutro, .twr-gris { color: var(--muted); }

/* gráfica */
.twr-grafico { position: relative; padding: .55rem .5rem .4rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.twr-grafico-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; padding: 0 .35rem .25rem; }
.twr-leyenda { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .76rem; }
.twr-leyenda li { display: inline-flex; align-items: center; gap: .4rem; }
.twr-muestra { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--muted-2); }
.twr-muestra-linea { height: 3px; width: 14px; border-radius: 2px; background: var(--serie-1); }
.twr-muestra-previa { height: 0; width: 14px; border-radius: 0; border-top: 2px dashed var(--muted-2); background: transparent; }
.twr-muestra-raro { width: 10px; height: 10px; border-radius: 50%; border: 1.6px solid var(--ok); background: transparent; }
.twr-muestra-corta { width: 12px; }
.twr-modo { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-pastilla); background: var(--panel-2); }
.twr-modo[hidden] { display: none; }
.twr-modo button { padding: .2rem .65rem; border: 0; border-radius: var(--radius-pastilla); background: transparent; color: var(--muted); font-size: .76rem; cursor: pointer; }
.twr-modo button[aria-pressed="true"] { background: var(--accent); color: var(--text); }
.twr-svg { display: block; width: 100%; height: auto; font-family: var(--font-body); touch-action: pan-y; }
.twr-svg:focus { outline: none; }
.twr-svg:focus-visible:not(.twr-con-puntero) { outline: 2px solid var(--accent-texto); outline-offset: 2px; border-radius: 6px; }
.twr-rejilla { stroke: var(--border-soft); stroke-width: 1; }
.twr-base { stroke: var(--border); stroke-width: 1; }
.twr-eje { fill: var(--muted-2); font-size: 11px; }
.twr-eje-hoy { fill: var(--accent-texto); }
.twr-sel { fill: var(--accent-2); opacity: .14; }
.twr-barra { stroke: none; }
.twr-gasto, .twr-muestra.twr-gasto { fill: var(--serie-2); background: var(--serie-2); }
.twr-nuevos, .twr-muestra.twr-nuevos { fill: var(--serie-3); background: var(--serie-3); }
.twr-desconocida, .twr-muestra.twr-desconocida { fill: var(--muted-2); background: var(--muted-2); opacity: .55; }
.twr-c-meta { fill: var(--serie-1); background: var(--serie-1); }
.twr-c-google { fill: var(--serie-3); background: var(--serie-3); }
.twr-c-snapchat { fill: var(--serie-4); background: var(--serie-4); }
.twr-c-tiktok { fill: var(--serie-5); background: var(--serie-5); }
.twr-c-otros { fill: var(--muted-2); background: var(--muted-2); }
.twr-barra.twr-barra-hoy { fill: url(#twr-rayas); stroke: var(--serie-2); stroke-width: 1; }
.twr-rayas-linea { stroke: var(--serie-2); stroke-width: 2; }
.twr-area-ini { stop-color: var(--serie-1); stop-opacity: .32; }
.twr-area-fin { stop-color: var(--serie-1); stop-opacity: 0; }
.twr-area { fill: url(#twr-area); stroke: none; pointer-events: none; }
.twr-linea { fill: none; stroke: var(--serie-1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.twr-linea-hoy { stroke: var(--serie-1); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.twr-punto-hoy { fill: var(--bg); stroke: var(--serie-1); stroke-width: 2; }
.twr-previa { fill: none; stroke: var(--muted-2); stroke-width: 1.5; stroke-dasharray: 4 4; pointer-events: none; }
.twr-meta { stroke: var(--warn); stroke-width: 1.2; stroke-dasharray: 2 4; }
.twr-meta-texto { fill: var(--warn); font-size: 11px; }
.twr-raro-arriba, .twr-raro-abajo { fill: none; stroke-width: 1.6; }
.twr-raro-arriba { stroke: var(--ok); }
.twr-raro-abajo { stroke: var(--error); }
.twr-mejor { fill: var(--serie-1); stroke: var(--bg); stroke-width: 2; }
.twr-mejor-texto { fill: var(--text); font-size: 12px; font-weight: 600; }
.twr-cruz { stroke: var(--accent-texto); stroke-width: 1; opacity: 0; pointer-events: none; }
.twr-punto { fill: var(--serie-1); stroke: var(--text); stroke-width: 2; opacity: 0; pointer-events: none; }
.twr-cruz.twr-visible { opacity: .6; }
.twr-punto.twr-visible { opacity: 1; }
.twr-blanco { fill: transparent; cursor: pointer; }
.twr-sin-abrir .twr-blanco { cursor: default; }   /* hoy, un día sin copia o uno que el detalle no abre (PND-294) */
.twr-hoy { margin: .35rem .35rem 0; color: var(--muted); font-size: .76rem; }

/* el recuadro de cada día */
.twr-aviso { position: absolute; z-index: 3; min-width: 13rem; max-width: min(18rem, calc(100% - 8px)); padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); box-shadow: var(--shadow-soft); font-size: .78rem; pointer-events: none; }
.twr-aviso[hidden] { display: none; }
.twr-aviso-fecha { margin-bottom: .35rem; color: var(--muted); font-size: .74rem; }
.twr-aviso-fila { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .15rem 0; }
.twr-aviso-fila span { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); }
.twr-aviso-fila b { font-weight: 600; font-variant-numeric: tabular-nums; }
.twr-aviso-sep { margin: .35rem 0; border-top: 1px solid var(--border); }
.twr-aviso-pista { margin-top: .35rem; color: var(--accent-texto); font-size: .72rem; }

/* detalle del día */
.twr-dia { margin-top: .6rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); transition: opacity .15s; }
.twr-dia.twr-cargando { opacity: .55; }
.twr-dia-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.twr-dia-cab h4 { margin: 0 0 .1rem; font-size: 1rem; }
.twr-dia-cab h4::first-letter { text-transform: uppercase; }
.twr-dia-nav { display: flex; gap: .3rem; }
.twr-dia-nav .btn-sm { min-width: 2rem; font-size: 1rem; line-height: 1; }
.twr-dia-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.twr-dia-cifras div { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.twr-dia-cifras span, .twr-dia-cifras small { color: var(--muted); font-size: .74rem; }
.twr-dia-cifras small.twr-bueno { color: var(--ok); }
.twr-dia-cifras small.twr-malo { color: var(--error); }
.twr-dia-cifras strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.twr-dia-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.1rem; }
.twr-dia h5 { margin: 0 0 .45rem; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.twr-dia-canales { margin: 0; padding: 0; list-style: none; }
.twr-dia-canales li { display: grid; grid-template-areas: "canal gasto roas" "barra barra barra"; grid-template-columns: minmax(0, 1fr) auto 3.8rem; align-items: center; gap: .2rem .6rem; margin: .45rem 0; font-size: .8rem; }
.twr-dia-canal { grid-area: canal; }
.twr-dia-barra { grid-area: barra; }
.twr-dia-canales .twr-dia-num { grid-area: gasto; }
.twr-dia-canales .twr-dia-num.twr-gris { grid-area: roas; }
.twr-dia-canal { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.twr-dia-barra { height: 6px; overflow: hidden; border-radius: 3px; background: var(--panel); }
.twr-dia-barra i { display: block; height: 100%; border-radius: 4px; }
.twr-dia-num { text-align: right; font-variant-numeric: tabular-nums; }
.twr-dia-anuncios { margin: 0; padding: 0; list-style: none; counter-reset: twr-anuncio; }
.twr-dia-anuncios li { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--border-soft); font-size: .8rem; counter-increment: twr-anuncio; }
.twr-dia-anuncios li:first-child { border-top: 0; }
.twr-dia-anuncios li::before { content: counter(twr-anuncio); flex: none; width: 1rem; padding-top: .1rem; color: var(--muted); font-size: .72rem; }
.twr-dia-anuncio { display: flex; flex: 1; flex-direction: column; gap: .1rem; min-width: 0; }
.twr-dia-anuncio strong { display: -webkit-box; overflow: hidden; font-weight: 500; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.twr-dia-anuncio small, .twr-dia-valor small { color: var(--muted); font-size: .72rem; }
.twr-dia-valor { display: flex; flex: none; flex-direction: column; gap: .1rem; text-align: right; font-variant-numeric: tabular-nums; }
.twr-t-meta { color: var(--serie-1); }
.twr-t-google { color: var(--serie-3); }
.twr-t-snapchat { color: var(--serie-4); }
.twr-t-tiktok { color: var(--serie-5); }
.twr-t-otros { color: var(--muted); }
.twr-chip-nuevo { padding: 0 .4rem; border-radius: 6px; background: var(--ok-fondo); color: var(--ok); }
.twr-dia .twr-nota { margin-top: .45rem; }
.twr-dia [data-twr-ir] { margin-top: .4rem; }

/* lectura */
.twr-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 1rem 0 .5rem; color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.twr-titulo small { font-weight: 400; letter-spacing: 0; text-transform: none; }
.twr-lectura { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.twr-li { display: flex; align-items: flex-start; gap: .65rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); line-height: 1.45; }
.twr-li p { margin: 0; }
.twr-li-icono { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--panel-hover); color: var(--accent-texto); font-weight: 700; }
.twr-li-ok .twr-li-icono { background: var(--ok-fondo); color: var(--ok); }
.twr-li-aviso { border-color: var(--warn); }
.twr-li-aviso .twr-li-icono { background: var(--warn-fondo); color: var(--warn); }
.twr-li-acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }

/* tus creativos */
.twr-creativos { padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.twr-cr-fila { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: .6rem; margin: .35rem 0; font-size: .8rem; }
.twr-cr-et { color: var(--muted); }
.twr-cr-barra { display: flex; gap: 2px; height: 16px; }
.twr-cr-barra span { display: block; height: 100%; min-width: 3px; border-radius: 3px; }
.twr-mes-1 { background: color-mix(in srgb, var(--serie-1) 30%, var(--panel)); }
.twr-mes-2 { background: color-mix(in srgb, var(--serie-1) 47%, var(--panel)); }
.twr-mes-3 { background: color-mix(in srgb, var(--serie-1) 64%, var(--panel)); }
.twr-mes-4 { background: color-mix(in srgb, var(--serie-1) 82%, var(--panel)); }
.twr-mes-5 { background: var(--accent-texto); }
.twr-cr-leyenda { display: grid; gap: .25rem; margin: .55rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .78rem; }
.twr-cr-leyenda li { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; }
.twr-cr-leyenda strong { color: var(--text); font-weight: 500; }
.twr-cr-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--border-soft); }
.twr-cr-cifras div { display: flex; flex-direction: column; min-width: 0; }
.twr-cr-cifras span, .twr-cr-cifras small { color: var(--muted); font-size: .74rem; }
.twr-cr-cifras strong { font-size: 1.1rem; }

/* tabla */
.twr-tabla { margin-top: .8rem; }
.twr-tabla summary { cursor: pointer; color: var(--muted); font-size: var(--t-chico); }
.twr-tabla .tw-tabla-scroll { max-height: 22rem; overflow-y: auto; margin-top: .4rem; }

/* celular */
@media (max-width: 760px) {
  .twr-dia-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .twr-dia-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twr-cr-cifras { grid-template-columns: minmax(0, 1fr); }
  .twr-cr-fila { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}
@media (max-width: 480px) {
  .twr-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ganchos nuevos y copy para Meta (spec 2026-10-09 §5), dentro del detalle `.tw-analisis` (_tw_analisis.html):
   `.tw-copy-nuevo` (título y texto con «Copiar»), `.tw-ganchos` (los ganchos de Claude), `.tw-ganchos-probar` (el
   botón con su precio), `.tw-variantes`/`.tw-variante` (cada variante de la última tanda: estado, código, video) y
   `.tw-tandas-anteriores`. */
.tw-copy-nuevo { display: flex; flex-direction: column; gap: .35rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); }
.tw-copy-campo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.tw-copy-texto { margin: 0; white-space: pre-line; }
.tw-ganchos { display: flex; flex-direction: column; gap: .5rem; }
.tw-gancho { min-width: 0; }
.tw-gancho p { margin: .2rem 0; }
.tw-ganchos-probar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .3rem 0 0; }
.tw-variantes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .6rem; margin-top: .4rem; }
.tw-variante { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); }
.tw-variante-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; }
.tw-variante code { overflow-wrap: anywhere; }
.tw-variante video { display: block; width: 100%; max-height: 22rem; border-radius: var(--radius-sm); background: var(--fondo-video); }
.tw-variante-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; font-size: .82rem; }
.tw-tandas-anteriores ul { margin: .3rem 0 0; padding-left: 1.1rem; overflow-wrap: anywhere; }
/* ── estilos/pantallas/meta.css ── */
/* ============================================================
   Meta: «Elegir cuentas de Meta» (spec 2026-10-08 meta rendimiento §8). Uso: el selector (#meta-cuentas,
   _meta_cuentas.html) que la pestaña Rendimiento abre dentro de «Ajustes» (_tab_rendimiento.html). Abierto se
   separa de lo que sigue con su propia línea. La pestaña «Meta» se jubiló el 2026-10-09 (spec 2026-10-09 R1) y con
   ella su gráfico «Día a día» (`.tb-grafico`, `.tb-barra`…, meta_rendimiento/grafico.py), la miniatura de su
   tabla de anuncios (`.meta-mini`) y el KPI del NVP (`.meta-kpi-nvp`): Rendimiento dibuja los suyos con
   pantallas/rendimiento.css y tw_resultados.js. Desde la integración con main (2026-10-10) también: el
   «Diagnóstico», los «Segmentos» y la «Evaluación con IA» de Meta rendimiento E2, que Rendimiento incluye tal cual.
   ============================================================ */

.meta-cuentas:not([hidden]):not(:empty) { margin: 0 0 1.4rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.meta-cuentas .tb-seccion { margin-top: 0; padding-top: 0; border-top: 0; }
.meta-cuentas select { min-width: 10rem; }
/* «Diagnóstico» (E2, _meta_diagnostico.html), agrupado por problema desde 2026-10-13 (pedido de Daniel: cinco tarjetas
   repetían el mismo consejo con las cifras enterradas en la prosa). Uso: un bloque por tipo de recomendación, uno
   debajo del otro; el borde izquierdo dice la prioridad (alta = error, media = aviso, baja = acento) y la etiqueta lo
   repite en palabras, para que no dependa del color. Dentro, una fila por cuenta, campaña o segmento: lo que la nombra,
   la cifra con su barra (<meter>, sin estilos en línea), la parte del gasto y lo que está en juego por día, con
   columnas fijas a la derecha para que se alineen fila con fila y con el encabezado; el enlace al Administrador va
   fuera del <summary> (un enlace dentro de un botón no se anuncia bien). Al abrir la fila sale el texto completo. En
   el celular el encabezado se esconde, cada cifra dice qué es (.meta-diag-sufijo) y el enlace baja. Los nombres de
   Meta son largos: se parten antes de empujar la página. «Segmentos» (_meta_segmentos.html): una tabla compacta por
   dimensión, dos por fila en pantallas anchas; la fila de un segmento caro lleva el fondo de aviso. */
.meta-diag-resumen { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .1rem 0 .7rem; color: var(--muted); font-size: var(--t-chico); }
.meta-diag-conteo::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; border-radius: 50%; background: var(--accent); }
.meta-diag-conteo-alta::before { background: var(--error); }
.meta-diag-conteo-media::before { background: var(--warn); }
.meta-diag-lista { display: grid; gap: .9rem; margin-top: .4rem; }
.meta-diag { display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: .9rem 1rem .6rem; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); background: var(--panel); overflow-wrap: anywhere; }
.meta-diag-alta { border-left-color: var(--error); }
.meta-diag-media { border-left-color: var(--warn); }
.meta-diag-baja { border-left-color: var(--accent); }
.meta-diag-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; }
.meta-diag-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; min-width: 0; }
.meta-diag-titulo { margin: 0; font-size: 1rem; line-height: 1.3; }
.meta-diag-total { font-size: .95rem; }
.meta-diag-consejo { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.meta-diag-filas { display: flex; flex-direction: column; min-width: 0; }
.meta-diag-fila { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: .4rem .8rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--border-soft); }
.meta-diag-fila > details { min-width: 0; }
.meta-diag-encabezado { padding: 0 0 .35rem; border-top: 0; color: var(--muted-2); font-size: var(--t-sobretitulo); line-height: 1.3; }
.meta-diag-encabezado .meta-diag-celdas > :first-child { padding-left: 1.1rem; }
.meta-diag-celdas { display: grid; grid-template-columns: minmax(7rem, 15rem) minmax(0, 1fr); gap: .3rem .9rem; align-items: center; min-width: 0; }
.con-gasto .meta-diag-celdas { grid-template-columns: minmax(7rem, 15rem) minmax(0, 1fr) 5.5rem; }
.con-impacto .meta-diag-celdas { grid-template-columns: minmax(7rem, 15rem) minmax(0, 1fr) 7.5rem; }
.con-gasto.con-impacto .meta-diag-celdas { grid-template-columns: minmax(7rem, 15rem) minmax(0, 1fr) 5.5rem 7.5rem; }
summary.meta-diag-celdas { list-style: none; cursor: pointer; }
summary.meta-diag-celdas::-webkit-details-marker { display: none; }
.meta-diag-etiqueta { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; min-width: 0; padding-left: 1.1rem; font-weight: 600; font-size: .9rem; }
.meta-diag-etiqueta::before { content: "›"; position: absolute; left: .15rem; top: -.05rem; color: var(--muted); font-size: 1.05rem; line-height: 1.2; }
details[open] > summary .meta-diag-etiqueta::before { transform: rotate(90deg); }
.meta-diag-etiqueta small { color: var(--muted); font-weight: 400; }
.meta-diag-etiqueta small:not(.tag-estado) { flex-basis: 100%; }
.meta-diag-cifra { display: flex; align-items: center; gap: .6rem; min-width: 0; font-size: .88rem; }
.meta-diag-cifra small { color: var(--muted); }
.meta-diag-barra { flex: 0 0 6rem; width: 6rem; height: .45rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 3px; background: var(--border); overflow: hidden; }
.meta-diag-barra::-webkit-meter-bar { height: .45rem; border: 0; border-radius: 3px; background: var(--border); }
.meta-diag-barra::-webkit-meter-optimum-value { border-radius: 3px; background: var(--accent-2); }
.meta-diag-barra::-moz-meter-bar { border-radius: 3px; background: var(--accent-2); }
.meta-diag-alta .meta-diag-barra::-webkit-meter-optimum-value { background: var(--error); }
.meta-diag-alta .meta-diag-barra::-moz-meter-bar { background: var(--error); }
.meta-diag-media .meta-diag-barra::-webkit-meter-optimum-value { background: var(--warn); }
.meta-diag-media .meta-diag-barra::-moz-meter-bar { background: var(--warn); }
.meta-diag-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .9rem; }
.meta-diag-encabezado .meta-diag-num { white-space: normal; font-size: inherit; }
.meta-diag-sufijo { display: none; color: var(--muted); font-weight: 400; }
.meta-diag-ir { justify-self: end; text-decoration: none; white-space: nowrap; }
.meta-diag-detalle { display: flex; flex-direction: column; gap: .35rem; padding: .55rem 0 .2rem 1.1rem; }
.meta-diag-detalle p { margin: 0; font-size: .86rem; line-height: 1.45; }
.meta-diag-porque { color: var(--muted); }
.meta-diag-porque span { font-weight: 600; }
.meta-diag-mas > summary { padding: .5rem 0 .3rem 1.1rem; border-top: 1px solid var(--border-soft); color: var(--accent-texto); font-size: .86rem; }
.meta-diag-acciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.meta-diag-acciones a { text-decoration: none; }
@media (max-width: 640px) {
  .meta-diag-encabezado { display: none; }
  .meta-diag-fila { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .meta-diag-celdas, .con-gasto .meta-diag-celdas, .con-impacto .meta-diag-celdas, .con-gasto.con-impacto .meta-diag-celdas { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding-left: 1.1rem; }
  .meta-diag-etiqueta { flex: 1 1 100%; margin-left: -1.1rem; }
  .meta-diag-cifra { flex: 1 1 100%; flex-wrap: wrap; gap: .25rem .6rem; }
  .meta-diag-num { flex: none; text-align: left; white-space: normal; }
  strong.meta-diag-num { order: 1; }
  span.meta-diag-num { order: 2; }
  .meta-diag-sufijo { display: inline; }
  .meta-diag-ir { justify-self: start; margin-left: 1.1rem; padding: 0; border: 0; background: none; color: var(--accent-texto); font-size: .84rem; }
}
.meta-seg-bloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1rem 1.4rem; }
.meta-seg-bloque { min-width: 0; }
.meta-seg-bloque h4 { margin: 0 0 .4rem; font-size: .9rem; }
.meta-seg-cuenta { margin: .6rem 0 .3rem; color: var(--muted); font-size: .8rem; }
.meta-seg-tabla tr.meta-seg-caro td { background: var(--warn-fondo); }
.meta-seg-tabla .tag-estado { white-space: normal; }   /* «Caro en <cuentas>» se parte: si no, ensancha la tabla */

/* «Evaluación con IA» (E2, _meta_evaluar.html y _meta_evaluacion.html): el botón con su precio y, al lado, qué alcance
   evalúa. La evaluación reusa las clases de Triple Whale (.tw-patrones, .tw-ideas, .tw-angulo, .tw-analizados…) y suma
   el plan: pasos con su número en un círculo (el número también lo dice la lista), la acción en palabras, los objetos
   como etiquetas que se parten antes de empujar la página y el enlace al Administrador al pie. Las anteriores, una por
   línea, se abren debajo de su botón con una raya a la izquierda. */
.meta-ia-pedir { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .4rem 0 .8rem; }
.meta-eval { margin-top: .8rem; min-width: 0; overflow-wrap: anywhere; }
.meta-eval h4 { margin: 1.1rem 0 .5rem; font-size: .9rem; }
.meta-eval-cab { margin: 0 0 .4rem; color: var(--muted); }
.meta-eval-resumen { margin: .3rem 0 .6rem; font-size: .95rem; line-height: 1.55; }
.meta-eval-cifras { margin: .3rem 0 .6rem; }
.meta-eval-causas { margin: 0; padding-left: 1.1rem; font-size: .86rem; line-height: 1.5; }
.meta-eval-causas li + li { margin-top: .3rem; }
.meta-eval-causas small { display: block; color: var(--muted); }
.meta-eval-nota { margin: -.2rem 0 .6rem; font-size: .82rem; }
.meta-eval-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.meta-eval-paso { display: flex; gap: .7rem; align-items: flex-start; min-width: 0; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.meta-eval-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: var(--sobre-accent); font-size: .85rem; font-weight: 700; }
.meta-eval-paso-cuerpo { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
.meta-eval-paso-cuerpo > strong { font-size: .93rem; line-height: 1.35; }
.meta-eval-paso-cuerpo p { margin: 0; font-size: .86rem; line-height: 1.45; }
.meta-eval-paso-cuerpo p span { font-weight: 600; }
.meta-eval-paso-cuerpo a { text-decoration: none; }
.meta-eval-impacto { font-weight: 600; }
.meta-eval-objetos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; max-width: 100%; }
.meta-eval-objetos li { max-width: 100%; padding: .15rem .55rem; border-radius: var(--radius-sm); background: var(--panel-hover); font-size: .8rem; }
.meta-eval-objetos small { margin-right: .2rem; color: var(--muted); }
.meta-eval-anuncios, .meta-ia-anteriores { margin-top: 1.1rem; }
.meta-eval-anuncios summary, .meta-ia-anteriores summary { cursor: pointer; }
.meta-eval-anuncios .tw-analizados { margin-top: .6rem; }
.meta-ia-lista { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.meta-ia-lista > li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.meta-ia-lista .btn-xs { max-width: 100%; white-space: normal; text-align: left; }
.meta-ia-anterior { flex-basis: 100%; min-width: 0; padding: .1rem 0 .4rem .8rem; border-left: 2px solid var(--border); }
/* ── estilos/pantallas/rendimiento.css ── */
/* ============================================================
   Rendimiento: la pestaña única de Triple Whale + Meta (spec 2026-10-09 §5). Uso: _tab_rendimiento.html (el armazón
   y «Ajustes», `.rend-ajustes`), _rend_panel.html (la línea de origen de las ventas bajo Resultados, `.rend-origen`)
   y _meta_secciones.html y _meta_conjuntos_filas.html (la fuente del ROAS de cada fila, `.rend-fuente`). El resto del
   panel reutiliza las clases de Triple Whale (.tw-barra, .tw-tabla, .tw-anillo…; desde E2 tarea 4 «Tus anuncios» es
   UNA galería de .tw-tarjeta con los anuncios de las dos fuentes: las .rend-tarjeta de Meta de E1 se fueron; aquí
   solo `.tw-medio-miniatura`, la miniatura chica de Meta), del
   Tablero (.tb-seccion, .kpi-tile…) y de Meta (.meta-cuentas). Las tablas se desplazan dentro de .tw-tabla-scroll:
   nada empuja la página de lado en el celular. Solo tokens.
   ============================================================ */

/* «Ajustes»: un <details> con el borde y el fondo de una tarjeta; abierto, las dos conexiones una debajo de otra. */
.rend-ajustes { margin: 0 0 1.2rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.rend-ajustes > summary { cursor: pointer; font-weight: 600; }
.rend-ajustes[open] > summary { margin-bottom: .8rem; }
.rend-ajustes-meta { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.rend-ajustes-meta .meta-cuentas:not([hidden]) { margin-top: .8rem; }

/* De dónde sale cada venta (R8) y desde cuándo cuentan todas las fuentes (R7), bajo las tarjetas de Resultados. */
.rend-origen { margin: .4rem 0 0; color: var(--muted); font-size: var(--t-chico); overflow-wrap: anywhere; }

/* La fuente de una cifra en una fila (Triple Whale | Meta), chica bajo el número. */
.rend-fuente { display: block; color: var(--muted); font-size: var(--t-sobretitulo); text-transform: uppercase; letter-spacing: .04em; }

/* La miniatura de Meta de un anuncio de fuente Meta sin análisis (la galería única de «Tus anuncios», E2 tarea 4) llega
   de 64 px: dentro del recuadro 9:16 de la tarjeta se ve a su tamaño, centrada, y nunca agrandada (se vería borrosa). */
.tw-tarjeta-medio img.tw-medio-miniatura { object-fit: scale-down; }

/* «Mejores imágenes» / «Mejores videos» (spec 2026-10-13, _rend_destacados.html): tarjetas livianas con el medio de la
   galería (.tw-tarjeta-medio, 9:16) arriba y sus cifras (.tw-cifras) abajo, en una rejilla que en el celular queda de a
   una sin empujar la página. */
.rend-destacadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .9rem; }
.rend-destacada { display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.rend-destacada-cuerpo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
/* En el celular, de a dos como las demás galerías de tarjetas (skill ui): de a una, 12 tarjetas 9:16 eran muy largas. */
@media (max-width: 760px) {
  .rend-destacadas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .rend-destacada { padding: .6rem; }
  /* «13,633.78 USD» se partía dentro del número (el celular rompe palabras largas): solo en el espacio. */
  .rend-destacada .tw-cifras dd { overflow-wrap: normal; word-break: normal; font-size: var(--t-chico); }
}
/* ── estilos/pantallas/crear.css ── */
/* Crear: el corazón de cada tarjeta (2026-10-08), para separar las versiones que se van a usar. */
.generado-fav-form { position: absolute; right: .45rem; top: .4rem; margin: 0; z-index: 1; }
.generado-fav { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: var(--velo-media); color: var(--sobre-media); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.generado-fav:hover { background: var(--velo-media-fuerte); }
.generado-fav.activo { color: var(--error); }
.generado-fav:focus-visible { outline: 2px solid var(--sobre-media); outline-offset: 2px; }
.generado-fav-form ~ .generado-tipo { max-width: calc(100% - 3.6rem); } /* que el corazón no tape la etiqueta del formato */
/* ── estilos/pantallas/sprints.css ── */
/* Referencias de campaña y filtros de revisión; campos de la Base visual común. */
.sprint-link-campo { width: 22rem; max-width: 100%; min-width: 0; }
.sprint-aviso { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.sprint-filtros { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; margin-bottom: 1rem; }
.sprint-filtros > label { min-width: 0; }
.sprint-filtros select { width: 100%; max-width: 100%; }
/* Lote 8: filtros de revisión en celular. */
@media (max-width: 760px) {
  .sprint-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sprint-filtros > label:first-child { grid-column: 1 / -1; }
}
/* ── estilos/pantallas/portada.css ── */
/* Portada CREATV Galadsy (templates/index.html, 2026-10-10). Distribución de klarna.com, no sus colores: tarjeta grande
   con el título a la izquierda y la vaca a la derecha, fila de cifras, título centrado, los pasos como lista grande con
   la pieza al lado (fija al bajar), lo que ya no necesitas, vitrina, planes, cadena, cierre y la tecnología al final.
   .landing-cta y .landing-empezar siguen en legado/02. */

/* Las piezas de la vitrina y de los pasos llevan un video o una foto de fondo. */
.landing-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; display: block; }

/* Lema y bajada (banner y cierre) */
.landing-lema { font-size: clamp(3rem, 8vw, 6.5rem); line-height: 1; letter-spacing: -0.035em; margin: 0 0 var(--esp-4); max-width: none; }
.landing-degradado { background-image: var(--degradado-lema); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-bajada { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.85rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 var(--esp-5); max-width: 24ch; }

/* Encabezados de sección: la misma letra del título principal. */
.landing-seccion-cabecera { margin-bottom: var(--esp-5); max-width: 60ch; }
.landing-etiqueta { display: inline-block; font-family: var(--font-display); font-size: var(--t-sobretitulo); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-texto); margin-bottom: var(--esp-3); }
h2.landing-titulo { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: var(--text); text-transform: none; margin: 0 0 var(--esp-3); display: block; }
h2.landing-titulo::before { content: none; }
.landing-seccion-sub { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.5; }


/* Vitrina: una cinta que corre de derecha a izquierda. La lista va dos veces: correr la mitad (más medio espacio)
   cierra el bucle sin salto. */
.landing-vitrina { margin: 0 0 3.5rem; }
.landing-vitrina-carril {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, currentColor 6%, currentColor 94%, transparent);
  mask-image: linear-gradient(to right, transparent, currentColor 6%, currentColor 94%, transparent);
}
.landing-vitrina-pista { display: flex; gap: var(--esp-4); width: max-content; margin: 0; padding: var(--esp-2) 0; list-style: none; animation: portada-vitrina 60s linear infinite; }
.landing-vitrina-carril:hover .landing-vitrina-pista { animation-play-state: paused; }
@keyframes portada-vitrina { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--esp-2))); } }
.landing-vitrina-pieza { position: relative; flex: 0 0 auto; height: 356px; aspect-ratio: 9/16; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.landing-vitrina-pieza .generado-tipo { position: absolute; top: .6rem; left: .6rem; }

/* Planes */
.landing-planes { margin: 0 0 4.5rem; scroll-margin-top: 90px; }
.planes-grilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--esp-4); }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-5) 1.2rem 1.2rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--panel-velo); transition: transform .2s, border-color .2s; }
.plan:hover { transform: translateY(-4px); border-color: var(--resalte-borde); }
.plan p { margin: var(--esp-2) 0 1.2rem; color: var(--muted); font-size: .88rem; line-height: 1.5; flex: 1; }
.plan-cifra { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; letter-spacing: -0.04em; line-height: 1; }
.plan-cifra-texto { font-size: 1.55rem; letter-spacing: -0.02em; }
.plan-unidad { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-texto); }
.plan-boton { text-decoration: none; display: flex; justify-content: center; padding: .7rem 1rem; font-size: .9rem; }
.plan-destacado { border-color: var(--resalte-borde-fuerte); background-image: linear-gradient(180deg, var(--resalte-fondo), transparent 60%); box-shadow: var(--shadow-glow); }
.plan-cinta { position: absolute; top: -.7rem; left: 1.2rem; padding: .2rem .6rem; border-radius: var(--radius-pastilla); background: var(--accent-grad); color: var(--text); font-size: .7rem; font-weight: 600; }
.plan-custom { background-image: linear-gradient(160deg, var(--galaxia-velo-2), transparent 55%); }

/* Cadena Referencia → Crear → Editar → Lanzar → Escalar: un brillo la recorre, eslabón por eslabón. */
.landing-cadena { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--esp-3) var(--esp-4); margin: 0 0 4.5rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2.6vw, 1.8rem); letter-spacing: -0.02em; }
.cadena-eslabon { padding: .45rem 1rem; border-radius: var(--radius-pastilla); border: 1px solid var(--border); background: var(--panel-velo); animation: portada-cadena 5s ease-in-out infinite; animation-delay: calc(var(--i) * .6s); }
.cadena-flecha { color: var(--accent-texto); }
@keyframes portada-cadena {
  0%, 30%, 100% { border-color: var(--border); box-shadow: none; }
  12% { border-color: var(--resalte-borde-fuerte); box-shadow: var(--brillo-md); }
}

/* Cierre y tecnología */
.landing-final { text-align: center; margin: 0 0 4rem; padding: 3.5rem 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--resalte-borde); background: var(--panel-velo-2); background-image: radial-gradient(ellipse at 50% 0%, var(--galaxia-2-suave), transparent 65%); }
.landing-final .landing-bajada { margin-left: auto; margin-right: auto; max-width: none; }
.landing-final .landing-cta { justify-content: center; }
h2.landing-lema { display: block; color: var(--text); text-transform: none; font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 700; }
h2.landing-lema::before { content: none; }
.landing-tecnologia { text-align: center; max-width: 62ch; margin: 3.5rem auto 0; }
h2.landing-titulo-chico { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.landing-tecnologia .landing-seccion-sub { font-size: .95rem; }
.landing-modelos { margin: var(--esp-4) 0 0; font-weight: 300; font-size: .72rem; letter-spacing: .08em; color: var(--muted-2); }

@media (prefers-reduced-motion: reduce) {
  .landing-vitrina-carril { overflow-x: auto; }
}
@media (max-width: 1000px) {
  .planes-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-custom { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .planes-grilla { grid-template-columns: 1fr; }
  .landing-vitrina-pieza { height: 268px; }
}


/* Lo que ya no necesitas: tachado, con «Solo Galadsy.» al final. */
.landing-sin-nada { text-align: center; margin: 0 auto 5rem; max-width: 60rem; }
.landing-tachados { list-style: none; margin: var(--esp-5) 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-3) var(--esp-6); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2.4rem); letter-spacing: -0.02em; color: var(--muted-2); }
.landing-tachados s { text-decoration-color: var(--accent-2); text-decoration-thickness: .12em; }
.landing-solo { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 4.4vw, 3.2rem); letter-spacing: -0.03em; background-image: var(--degradado-lema); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Cabecera de la portada: enlaces a las secciones y «Iniciar sesión» en pastilla. */
.header-portada { display: flex; gap: var(--esp-5); margin-left: var(--esp-5); }
.header-portada a { color: var(--text); text-decoration: none; font-weight: 500; font-size: .95rem; opacity: .85; }
.header-portada a:hover { opacity: 1; color: var(--accent-texto); }
.header-entrar { margin-left: auto; text-decoration: none; border-radius: var(--radius-pastilla); padding: .55rem 1.2rem; font-size: .92rem; }
.header-entrar + .idioma-enlaces { margin-left: var(--esp-4); }

.portada-pildora { border-radius: var(--radius-pastilla); padding: .85rem 1.5rem; }


/* Cifras: título con una palabra resaltada a la izquierda, cuatro números a la derecha. */
.portada-cifras { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-6); margin: 0 0 6rem; padding: 0 var(--esp-4); }
.portada-cifras-titulo { margin: 0; display: block; text-transform: none; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.1; max-width: 18ch; }
.portada-cifras-titulo::before { content: none; }
.portada-cifras-titulo mark { background: var(--accent); color: var(--text); padding: 0 .2em; border-radius: 6px; }
.portada-cifras-lista { display: flex; flex-wrap: wrap; gap: var(--esp-6) clamp(var(--esp-5), 4vw, 4rem); margin: 0; }
.portada-cifras-lista div { text-align: center; }
.portada-cifras-lista dt { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 4.4vw, 3.6rem); letter-spacing: -0.04em; line-height: 1; }
.portada-cifras-lista dd { margin: var(--esp-2) 0 0; color: var(--muted); font-size: .88rem; max-width: 16ch; }

/* Título centrado de sección */
.portada-centro { text-align: center; max-width: 52rem; margin: 0 auto var(--esp-7); }
h2.portada-titulo { display: block; margin: 0 0 var(--esp-4); text-transform: none; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.04em; }
h2.portada-titulo::before { content: none; }
.portada-centro-sub { margin: 0 auto; color: var(--muted); font-size: 1.1rem; line-height: 1.55; max-width: 46rem; }


@media (max-width: 760px) {
  .header-portada { display: none; }
  .header-entrar { padding: .45rem .9rem; font-size: .85rem; }
  .portada-cifras { flex-direction: column; align-items: flex-start; }
  .portada-cifras-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}

/* Banner a pantalla completa (2026-10-10): la vaca de borde a borde y de la cabecera al final de la pantalla; el
   titular en Unbounded, en blanco, a la izquierda sobre un velo; «Run more GALADSY» es el botón. En el celular la foto es
   un recorte vertical centrado en la vaca y el texto va abajo. */
body.portada main { padding-top: 0; }
.portada-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--esp-6); text-align: left; width: 100vw; margin: 0 0 var(--esp-7) calc(50% - 50vw); min-height: calc(100svh - 84px); padding: var(--esp-7) 6vw; }
.portada-hero-foto, .portada-hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada-hero-foto { z-index: -2; }
.portada-hero-foto img { object-fit: cover; object-position: 15% 45%; }
.portada-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--velo-hero); }
.portada-hero-abajo { margin: 0; }
.portada-promesa { margin: 0 0 var(--esp-4); font-family: var(--font-titular); font-weight: 800; font-size: clamp(2.2rem, 3.7vw, 5.4rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--text); text-shadow: 0 4px 30px var(--sombra-media); }
.portada-promesa > span { display: block; white-space: nowrap; }
/* Letras que se mueven al pasar el mouse (index.html las envuelve; transición, no animación). */
.portada-promesa .palabra { display: inline-block; white-space: nowrap; }
.portada-promesa .letra { display: inline-block; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), color .3s; }
.portada-promesa .letra:hover { transform: translateY(-.14em) rotate(-8deg) scale(1.08); color: var(--cian); }
.portada-hero-sub { margin: 0; max-width: 34ch; color: var(--text); font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1.5; opacity: .9; }
.portada-pildora { border-radius: var(--radius-pastilla); padding: .85rem 1.5rem; }
.portada-cta { font-family: var(--font-titular); font-weight: 700; letter-spacing: .01em; font-size: 1rem; padding: .95rem 1.8rem; box-shadow: var(--shadow-glow); }


@media (max-width: 760px) {
  .portada-hero { min-height: calc(100svh - 110px); align-items: center; justify-content: space-between; text-align: center; padding: var(--esp-6) var(--esp-5); }
  .portada-hero::after { background-image: var(--velo-hero-centro); }
  .portada-hero-foto img { object-position: 50% 58%; }
  .portada-promesa { max-width: none; }
  .portada-promesa > span { white-space: normal; }
  .portada-hero-sub { margin: 0 auto; }
  .portada-hero-abajo { justify-content: center; }
  .portada-promesa { font-size: clamp(1.9rem, 8.6vw, 3.2rem); }
}

/* Login (2026-10-14): la vaca surfeando de fondo a pantalla completa; la caja a la derecha (la vaca está a la
   izquierda) y una frase abajo a la izquierda. En el celular, la caja abajo y la vaca arriba. */
.login-foto, .login-foto img { position: fixed; inset: 0; width: 100%; height: 100%; }
.login-foto { z-index: -1; }
.login-foto img { object-fit: cover; object-position: 30% 50%; }
.login-foto::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, transparent 40%, var(--sombra-media)); }
.login-escena { display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-6); min-height: calc(100svh - 160px); }
.login-escena .login-caja { margin: 0; background: var(--panel-velo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.login-lema { position: fixed; left: 5vw; bottom: 6vh; margin: 0; max-width: 18ch; font-family: var(--font-titular); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--text); text-shadow: 0 4px 24px var(--sombra-media); }
@media (max-width: 760px) {
  .login-foto img { object-position: 50% 30%; }
  .login-foto::after { background-image: linear-gradient(to bottom, transparent 30%, var(--sombra-media) 70%); }
  .login-escena { align-items: flex-end; justify-content: center; min-height: calc(100svh - 150px); padding-top: 50svh; }
  .login-lema { position: static; display: none; }
}

/* Anuncios automáticos (segunda pantalla): el texto arriba y, debajo, la vaca zen pequeña entre las cuatro
   herramientas (dos a cada lado); flota y parpadea. En el celular, la vaca arriba de la lista. */
.portada-zen { margin: 0 0 7rem; }
.portada-zen-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) minmax(0, 1fr); align-items: center; gap: clamp(var(--esp-5), 3vw, var(--esp-7)); }
.portada-zen-vaca { position: relative; aspect-ratio: 720 / 783; width: 100%; animation: vaca-flota 6s ease-in-out infinite; }
.portada-zen-vaca::before { content: ""; position: absolute; inset: 18% 6% 0; z-index: -1; border-radius: 50%; background-image: radial-gradient(circle, var(--galaxia-2), transparent 68%); filter: blur(12px); }
.portada-zen-vaca img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.portada-zen-vaca .zen-cerrada { animation: vaca-parpadea 5.5s infinite; }
.portada-zen-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4); }
.portada-zen-lista li { display: grid; gap: var(--esp-1); padding: var(--esp-4) var(--esp-5); border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel-velo); }
.portada-zen-lista strong { font-family: var(--font-titular); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--accent-texto); }
.portada-zen-lista span { color: var(--muted); line-height: 1.5; font-size: .95rem; }
@keyframes vaca-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes vaca-parpadea { 0%, 86%, 100% { opacity: 0; } 88%, 95% { opacity: 1; } }

/* Cierre: «ADS» de GALADSY en blanco y brillante, como «Run more». */
.lema-brillo { color: var(--text); text-shadow: 0 0 18px var(--brillo), 0 0 42px var(--brillo); }

/* Login: «Why Run when you can Fly?» como título de la caja. */
.login-titulo { margin: 0 0 var(--esp-2); font-family: var(--font-titular); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.08; letter-spacing: -0.025em; }
.login-entrar { margin: 0 0 var(--esp-1); font-weight: 600; color: var(--text); }

/* Conexiones reales: nombres en pastillas que brillan al pasar. */
.portada-conexiones { text-align: center; max-width: 64rem; margin: 0 auto 7rem; }
.portada-conexiones-lista { list-style: none; margin: var(--esp-6) 0 var(--esp-5); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-3); }
.portada-conexiones-lista li { padding: .7rem 1.3rem; border-radius: var(--radius-pastilla); border: 1px solid var(--border); background: var(--panel-velo); font-family: var(--font-titular); font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; transition: border-color .25s, box-shadow .25s, transform .25s; }
.portada-conexiones-lista li:hover { border-color: var(--resalte-borde-fuerte); box-shadow: var(--shadow-glow); transform: translateY(-2px); }

/* Planes: tres columnas (100, 500 y a medida). */
.planes-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 62rem; margin: 0 auto; }
.planes-tres .plan-custom { grid-column: auto; }

@media (max-width: 760px) {
  .portada-zen-cuerpo { grid-template-columns: 1fr; }
  .portada-zen-vaca { order: -1; width: 190px; justify-self: center; }
  .planes-tres { grid-template-columns: 1fr; }
}

/* El flujo en tarjetas (2026-10-14): seis tarjetas en fila con su número, su ícono en un círculo que brilla y una
   flecha hacia la siguiente; en pantallas medianas, de a tres; en el celular, una debajo de otra. */
.portada-flujo { margin: 0 0 7rem; }
.flujo-fila { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--esp-5); }
.flujo-tarjeta { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--esp-3); padding: var(--esp-6) var(--esp-4) var(--esp-5); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--panel-velo); transition: transform .25s, border-color .25s, box-shadow .25s; }
.flujo-tarjeta:hover { transform: translateY(-4px); border-color: var(--resalte-borde-fuerte); box-shadow: var(--shadow-glow); }
.flujo-tarjeta:not(:last-child)::after { content: "→"; position: absolute; right: calc(-1 * var(--esp-5)); top: 4.2rem; width: var(--esp-5); text-align: center; color: var(--accent-texto); font-size: 1.2rem; }
.flujo-paso-num { position: absolute; top: var(--esp-3); left: var(--esp-4); font-family: var(--font-titular); font-weight: 700; font-size: .8rem; color: var(--muted-2); }
.flujo-icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--cian); background-image: radial-gradient(circle, var(--resalte-fondo), transparent 75%); border: 1px solid var(--resalte-borde); box-shadow: var(--brillo-md); }
.flujo-icono svg { width: 28px; height: 28px; }
.flujo-tarjeta h3 { margin: 0; font-family: var(--font-titular); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.flujo-tarjeta p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }

/* Maximiza tus resultados: el texto a la izquierda y el tablero de ingresos (ilustrativo) a la derecha. */
.portada-maximiza { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(var(--esp-6), 5vw, 5rem); margin: 0 0 7rem; }
.portada-maximiza .portada-titulo, .portada-maximiza .portada-centro-sub { text-align: left; margin-left: 0; }
.portada-maximiza-lista { list-style: none; margin: var(--esp-5) 0 0; padding: 0; display: grid; gap: var(--esp-3); }
.portada-maximiza-lista li { display: flex; align-items: center; gap: var(--esp-3); font-weight: 500; }
.portada-maximiza-lista li::before { content: "✦"; color: var(--cian); }
.portada-maximiza-imagen { margin: 0; }
.portada-maximiza-imagen img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.portada-maximiza-imagen figcaption { margin-top: var(--esp-2); text-align: right; color: var(--muted-2); font-size: .72rem; }

@media (max-width: 1100px) {
  .flujo-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flujo-tarjeta:nth-child(3n)::after { content: none; }
}
@media (max-width: 760px) {
  .flujo-fila { grid-template-columns: 1fr; gap: var(--esp-6); }
  .flujo-tarjeta:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: calc(-1 * var(--esp-6)); transform: translateX(-50%); }
  .portada-maximiza { grid-template-columns: 1fr; }
  .portada-maximiza .portada-titulo, .portada-maximiza .portada-centro-sub { text-align: center; margin-left: auto; }
  .portada-maximiza-lista { justify-items: center; }
}