/* ============================================================
   REPLIKA — App Shell · Dashboard v0.1
   Dark-first · monocromo · acento por inversión
   Depende de tokens.css (fuente única de verdad)
   ============================================================ */

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

/* Sin sombras en toda la app: look plano y limpio (sobre todo en tema claro).
   Se conserva únicamente el anillo de foco por teclado (accesibilidad). */
*:not(:focus-visible) { box-shadow: none !important; }

html { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: auto 1fr;
  transition: background var(--dur-base), color var(--dur-base);
}

/* Scrollbar temática en toda la app — sin la pista blanca ni las flechas nativas del SO */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }

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

/* Sin selección ni cursor de texto sobre la interfaz —
   solo los chats y los campos de escritura son seleccionables */
body { user-select: none; cursor: default; }
input, textarea { user-select: text; cursor: text; }
.msg-user p, .msg-agent .msg-body p, .cw-bbl,
.prompt-text, .pc-analysis { user-select: text; cursor: text; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* El atributo hidden debe ocultar la imagen (si no, `img{display:block}` lo pisa
   y deja una caja vacía, p.ej. el logo del Document Builder). */
img[hidden] { display: none; }
button { font-family: inherit; }

svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- Utilidades ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.no-scroll { overflow: hidden; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  background: var(--accent-bg); color: var(--accent-fg);
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-weight: 550; font-size: var(--fs-body-s);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.skip-link:focus-visible { transform: none; }

.overline {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.mono-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

:is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent; border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }

/* ---- Medidor de créditos ---- */
.meter {
  height: 3px; border-radius: var(--radius-full);
  background: var(--border-subtle);
  overflow: hidden;
}
.meter-fill {
  display: block; height: 100%; width: 0;
  background: var(--text);
  border-radius: var(--radius-full);
  transition: width 900ms var(--ease-out-cine);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-w);
  height: 100dvh;
  position: sticky; top: 0;
  display: flex; flex-direction: column;
  background: var(--bg-subtle);
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
  transition: width var(--dur-base) var(--ease-out-cine),
              background var(--dur-base), border-color var(--dur-base);
  z-index: 90;
}

/* Etiquetas que desaparecen al colapsar */
.sb-label {
  transition: opacity var(--dur-fast) var(--ease-out-soft);
  white-space: nowrap;
}

/* ---- Cabecera ---- */
.sb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px 14px;
  min-height: 62px;
}
.brand { display: flex; align-items: center; min-width: 0; }
/* Desplegado: wordmark completo · Colapsado: solo el ícono "re" */
/* Logos con archivo blanco/negro real por tema (app.js los intercambia
   vía data-src-dark/light) — sin filter: infalible en cualquier equipo */
.brand-icon { display: none; border-radius: 8px; flex: none; }
.brand-word { height: 39px; width: auto; }

/* ---- Nueva creación ---- */
.sb-new { padding: 4px 12px 14px; }
.btn-new {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent-bg); color: var(--accent-fg);
  border: none; border-radius: var(--radius-md);
  padding: 11px 14px;
  font-weight: 550; font-size: var(--fs-body-s); letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
}
.btn-new:hover { transform: translateY(-1px); opacity: 0.92; }
.btn-new:active { transform: none; }
.btn-new svg { width: 15px; height: 15px; stroke-width: 2; }

/* ---- Navegación ---- */
.sb-nav {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: 2px 12px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* Desvanece el borde inferior: si el contenido rebasa, la sección siguiente
     no asoma como una línea cortada — se disuelve limpio. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}

.sb-section {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 16px 10px 7px;
}

.sb-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-s);
  color: var(--text-muted);
  margin-bottom: 1px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.sb-item:hover { background: var(--surface-hover); color: var(--text); }
.sb-item.is-active { background: var(--surface); color: var(--text); font-weight: 500; }
.sb-item.is-active::before {
  content: ""; position: absolute; left: -12px; top: 20%; bottom: 20%;
  width: 2px; border-radius: var(--radius-full);
  background: var(--text);
}
.sb-item svg { color: inherit; opacity: 0.85; }

/* ---- Recientes ---- */
.sb-recents { display: flex; flex-direction: column; }
.sb-recents-list { display: flex; flex-direction: column; }
.sb-recent {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  color: var(--text-faint);
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.sb-recent:hover { background: var(--surface-hover); color: var(--text-secondary); }
.sb-recents-empty {
  padding: 4px 10px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-faint);
  opacity: .6;
}

/* ---- Pie: créditos + usuario ---- */
.sb-foot {
  border-top: 1px solid var(--border-subtle);
  padding: 14px 12px 12px;
}

/* ---- Plan card — vidrio translúcido premium ---- */
.plan-card {
  position: relative;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--text) 9%, transparent),
    color-mix(in srgb, var(--text) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 16px 16px 14px;
  margin-bottom: 10px;
  overflow: hidden;
}
/* Brillo superior — el borde de luz del vidrio */
.plan-card::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(to right, transparent,
    color-mix(in srgb, var(--text) 38%, transparent), transparent);
}
.plan-top { display: flex; justify-content: space-between; align-items: baseline; }
.plan-name { font-weight: 600; font-size: 1.05rem; letter-spacing: var(--tracking-snug); }
.plan-tag {
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em;
  border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  color: var(--text-muted);
}
.plan-frames { display: flex; align-items: baseline; gap: 7px; margin: 12px 0 10px; }
.plan-frames .frames-sym { font-size: 0.9rem; }
.plan-frames .frames-n {
  font-size: 1.55rem;
  line-height: 1;
}
.plan-frames .frames-total {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--text-muted);
}
.plan-card .meter { height: 4px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.plan-card .meter-fill { background: var(--text); }
/* línea de avatares en la tarjeta del plan */
.plan-avatars {
  display: flex; align-items: center; gap: 6px; margin: 11px 0 0;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--text-muted);
}
.plan-avatars-ic { display: inline-flex; }
.plan-avatars-ic svg { width: 13px; height: 13px; }
.plan-avatars #planAvatars { color: var(--text-secondary); font-weight: 550; }
.plan-upgrade {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 13px; padding: 8px 12px;
  background: var(--accent-bg); color: var(--accent-fg);
  border-radius: var(--radius-md);
  font-size: 0.82rem; font-weight: 550;
  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
}
.plan-upgrade .frames-sym { font-size: 0.72rem; }
.plan-upgrade:hover { transform: translateY(-1px); opacity: 0.88; }

/* Símbolo de frames — pulso lento, con peso */
.frames-sym { display: inline-block; }
.plan-frames .frames-sym {
  animation: frame-pulse 3.4s var(--ease-in-out-cine) infinite;
}
@keyframes frame-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.86); }
}

.sb-user {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 4px 2px;
}
.sb-user-open {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
  background: none; border: 0; cursor: pointer;
  padding: 4px 6px; margin: -4px -6px;
  border-radius: var(--radius-md);
  text-align: left; color: inherit;
  transition: background var(--dur-fast);
}
.sb-user-open:hover { background: var(--surface-hover); }
.sb-avatar { border-radius: var(--radius-full); flex: none; }
.sb-user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-user-name { font-size: 0.84rem; font-weight: 500; line-height: 1.3; }
.sb-user-mail {
  font-size: 0.72rem; color: var(--text-faint); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Toggle de tema: muestra el ícono contrario al modo activo */
.ic-sun { display: none; }
[data-theme="light"] .ic-sun { display: block; }
[data-theme="light"] .ic-moon { display: none; }

/* ============================================================
   SIDEBAR COLAPSADO (rail de íconos) — solo desktop
   ============================================================ */
@media (min-width: 961px) {
  html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-w-rail); }

  html[data-sidebar="collapsed"] .sb-label {
    opacity: 0; pointer-events: none; position: absolute;
  }
  html[data-sidebar="collapsed"] .brand-word { display: none; }
  html[data-sidebar="collapsed"] .brand-icon { display: block; }
  html[data-sidebar="collapsed"] .sb-head {
    flex-direction: column; gap: 10px; padding-bottom: 8px;
  }
  html[data-sidebar="collapsed"] .sb-new { padding-inline: 14px; }
  /* En el rail el boton es un cuadrado, no una pastilla estirada: mide y se
     redondea igual que el icono de marca y el de plegar, para que los tres
     formen una columna de piezas identicas. El ancho salia de los 68px del
     rail menos su relleno (39px) y el alto del relleno vertical (37px). */
  html[data-sidebar="collapsed"] .btn-new {
    width: 34px; height: 34px;
    padding: 0;
    margin-inline: auto;
    border-radius: 8px;
  }
  html[data-sidebar="collapsed"] .sb-item { justify-content: center; padding: 10px 0; }
  html[data-sidebar="collapsed"] .sb-item.is-active::before { left: -14px; }

  /* En el rail, el pill "BETA" descuadraría la fila; se convierte en un punto
     de acento sobre la esquina del icono → la fila queda alineada como las
     demás pero se conserva la señal de "beta". */
  html[data-sidebar="collapsed"] .sb-badge {
    position: absolute; top: 7px; left: calc(50% + 5px);
    margin: 0; padding: 0;
    width: 6px; height: 6px;
    border-radius: var(--radius-full);
    background: var(--accent-bg);
    color: transparent; font-size: 0; line-height: 0; overflow: hidden;
  }
  html[data-sidebar="collapsed"] .sb-section { visibility: hidden; height: 10px; padding: 6px 0; }
  html[data-sidebar="collapsed"] .sb-foot { padding-inline: 8px; }
  html[data-sidebar="collapsed"] .sb-user { justify-content: center; padding-inline: 0; }

  /* Tooltip en el rail */
  html[data-sidebar="collapsed"] :is(.sb-item, .btn-new)::after {
    content: attr(data-label);
    position: absolute; left: calc(100% + 14px); top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 6px 11px;
    font-size: 0.78rem; font-weight: 450; letter-spacing: -0.01em;
    white-space: nowrap;
    box-shadow: var(--shadow-pop);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease-out-soft),
                transform var(--dur-fast) var(--ease-out-soft);
    pointer-events: none;
    z-index: 100;
  }
  html[data-sidebar="collapsed"] :is(.sb-item, .btn-new):hover::after {
    opacity: 1; visibility: visible;
    transform: translateY(-50%) translateX(0);
  }
  html[data-sidebar="collapsed"] .btn-new { position: relative; }
}

/* ============================================================
   TOPBAR
   ============================================================ */
.app-main { display: flex; flex-direction: column; min-width: 0; position: relative; }

/* Fondo rotativo de la pantalla de inicio del Agent X (solo estado vacío) */
.agent-bg {
  position: absolute; top: var(--topbar-h); left: 0; right: 0; bottom: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out-soft);
}
.app-main.agent-home-bg .agent-bg { opacity: 1; }
/* Al salir del Agent el fondo se apaga EN EL ACTO. Con el fundido de 0.6s (más
   el de 1.4s de la capa) la imagen se quedaba viéndose por detrás de la sección
   a la que acabas de entrar, y parecía un fallo de la transición. */
.app-main:not(.agent-home-bg) .agent-bg { transition: none; visibility: hidden; }
.app-main:not(.agent-home-bg) .agent-bg-layer { transition: none; opacity: 0; }
.agent-bg-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s var(--ease-out-soft);
  transform: scale(1.04);
}
.agent-bg-layer.is-on { opacity: 1; }
.agent-bg-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 0%, color-mix(in srgb, var(--bg) 40%, transparent) 55%, color-mix(in srgb, var(--bg) 88%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 72%, transparent));
}
/* El contenido va por encima del fondo */
.content { position: relative; z-index: 1; }
/* Texto del saludo legible sobre el fondo (las imágenes son oscuras) */
.app-main.agent-home-bg .greeting-h { color: #fff; }
.app-main.agent-home-bg .greeting-sub { color: rgba(255,255,255,.82); }
.app-main.agent-home-bg .greeting-row .gen-title-ic { color: #fff; }

/* Chips y botones de acción: contraste garantizado sobre cualquier fondo
   (glass oscuro + texto claro). Los chips activos conservan su acento. */
.app-main.agent-home-bg .chip:not(.is-active) {
  background: rgba(16,16,20,.46);
  border-color: rgba(255,255,255,.24);
  color: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
.app-main.agent-home-bg .chip:not(.is-active):hover {
  background: rgba(16,16,20,.64);
  border-color: rgba(255,255,255,.44);
  color: #fff;
}
.app-main.agent-home-bg .chip svg { opacity: 1; }
.app-main.agent-home-bg .pc-orb-ic,
.app-main.agent-home-bg .agent-newproj .pc-orb-ic {
  background: rgba(16,16,20,.5);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
.app-main.agent-home-bg .pc-orb:hover .pc-orb-ic,
.app-main.agent-home-bg .agent-newproj:hover .pc-orb-ic {
  background: rgba(16,16,20,.66);
  border-color: rgba(255,255,255,.46);
}
.app-main.agent-home-bg .pc-orb-label { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* En modo claro el velo de .agent-bg-scrim usa --bg (papel), así que la foto
   queda casi blanca: el texto blanco de arriba se volvía ilegible (1.07:1).
   Sobre ese fondo lavado mandan los colores de tinta, y el "cristal" de chips
   y orbes se invierte a claro. */
[data-theme="light"] .app-main.agent-home-bg .greeting-h { color: var(--text); }
[data-theme="light"] .app-main.agent-home-bg .greeting-sub { color: var(--text-muted); }
[data-theme="light"] .app-main.agent-home-bg .greeting-row .gen-title-ic { color: var(--text); }
[data-theme="light"] .app-main.agent-home-bg .chip:not(.is-active) {
  background: rgba(255,255,255,.72);
  border-color: rgba(10,10,11,.16);
  color: var(--text);
}
[data-theme="light"] .app-main.agent-home-bg .chip:not(.is-active):hover {
  background: rgba(255,255,255,.9);
  border-color: rgba(10,10,11,.3);
  color: var(--text);
}
[data-theme="light"] .app-main.agent-home-bg .pc-orb-ic,
[data-theme="light"] .app-main.agent-home-bg .agent-newproj .pc-orb-ic {
  background: rgba(255,255,255,.78);
  border-color: rgba(10,10,11,.16);
  color: var(--text);
}
[data-theme="light"] .app-main.agent-home-bg .pc-orb:hover .pc-orb-ic,
[data-theme="light"] .app-main.agent-home-bg .agent-newproj:hover .pc-orb-ic {
  background: rgba(255,255,255,.94);
  border-color: rgba(10,10,11,.3);
}
[data-theme="light"] .app-main.agent-home-bg .pc-orb-label {
  color: var(--text);
  text-shadow: 0 1px 8px rgba(255,255,255,.75);
}

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 clamp(18px, 3vw, 36px);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle); /* mismo tono que el sidebar — solo el centro es pantalla */
  position: sticky; top: 0; z-index: 50;
  transition: background var(--dur-base);
}

.topbar-burger { display: none; }

.topbar-crumb {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-body-s); font-weight: 500;
}
.crumb-sep { color: var(--text-faint); font-weight: 400; }

.search-btn {
  margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  min-width: min(320px, 30vw);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 0.84rem; color: var(--text-faint);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.search-btn:hover { border-color: var(--border); color: var(--text-muted); }
.search-btn svg { width: 14px; height: 14px; }
.search-btn span { flex: 1; text-align: left; }
.search-btn kbd,
.palette-head kbd {
  font-family: var(--font-mono); font-size: 0.62rem;
  border: 1px solid var(--border-subtle);
  border-radius: 5px; padding: 2px 6px;
  color: var(--text-faint);
}

.topbar-right { display: flex; align-items: center; gap: 12px; }
.credits-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  color: var(--text-muted);
  animation: pill-glow 7s var(--ease-in-out-cine) infinite;
}

/* Brillo periódico del saldo — el borde respira como si estuviera activo */
@keyframes pill-glow {
  0%, 78%, 100% {
    border-color: var(--border-subtle);
    box-shadow: 0 0 0 0 transparent;
  }
  86% {
    border-color: color-mix(in srgb, var(--text) 60%, transparent);
    box-shadow: 0 0 14px -3px color-mix(in srgb, var(--text) 38%, transparent);
  }
  94% {
    border-color: var(--border-subtle);
    box-shadow: 0 0 0 0 transparent;
  }
}
.credits-pill .frames-sym { font-size: 0.62rem; }
.credits-pill .digits { font-size: 0.92rem; color: var(--text-secondary); }

/* Numerales digitales — Doto (dot-matrix) solo para cifras de saldo */
.digits {
  font-family: "Doto", var(--font-mono);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ============================================================
   CONTENIDO
   ============================================================ */
.content {
  flex: 1;
  display: flex; flex-direction: column;
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  /* En variables para que los bloques a sangre (el banner de Avatar) puedan
     cancelarlo exactamente; si se copiaba el valor a mano, cualquier ajuste
     del padding dejaba el bloque descuadrado. */
  --content-pad-x: clamp(18px, 3vw, 36px);
  --content-pad-t: clamp(20px, 3.5vh, 40px);
  padding: var(--content-pad-t) var(--content-pad-x) 0;
}
.content:focus { outline: none; }

/* Secciones sin resultados aún: centrado vertical real — el padding-bottom
   iguala al padding-top (por defecto es 0) para que justify-content:center
   quede simétrico. Se activa/desactiva desde showView() */
.content.is-centered { padding-bottom: clamp(20px, 3.5vh, 40px); justify-content: center; }

/* ---- Saludo ---- */
.greeting-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0 8px; }
.greeting-row .gen-title-ic { width: 44px; height: 44px; flex: none; }
.greeting-row .gen-title-ic svg { width: 22px; height: 22px; }
/* mismo porte que el resto de títulos de sección (ver .gen-title) */
.greeting-h {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin: 0;
}
.greeting-sub { color: var(--text-muted); font-size: var(--fs-body); max-width: 52ch; }

/* ============================================================
   AGENTE REPLIKA V1 — chat
   ============================================================ */
.agent {
  flex: 1;
  display: flex; flex-direction: column;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* Estado vacío: saludo + composer centrados (tipo ChatGPT nuevo chat) */
.agent.is-empty { justify-content: center; gap: 30px; padding-bottom: 8vh; }
.agent.is-empty .agent-thread { display: none; }
.agent.is-empty .composer { position: static; background: none; padding: 0; }
.agent:not(.is-empty) .agent-home { display: none; }
.agent:not(.is-empty) .chips { display: none; }

.agent-home {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 6px;
}
/* ---- Hilo de mensajes ---- */
.agent-thread {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 22px;
  padding: 14px 0 26px;
}

/* ============================================================
   CHATS — controles en la topbar + panel lateral (drawer)
   ============================================================ */
.chat-ctrls { display: inline-flex; align-items: center; gap: 8px; }
.chat-ctrls[hidden] { display: none; }
.chat-ctrl {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); background: transparent;
  color: var(--text-muted); font: inherit; font-size: 0.78rem; font-weight: 550; cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.chat-ctrl:hover { color: var(--text); border-color: var(--border); }
.chat-ctrl svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chat-ctrl-new { background: var(--accent-bg); color: var(--accent-fg); border-color: transparent; }
.chat-ctrl-new:hover { opacity: .92; color: var(--accent-fg); }

.chat-rail-backdrop { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.42); }
.chat-rail-backdrop[hidden] { display: none; }
.chat-rail {
  position: absolute; top: var(--topbar-h); bottom: 0; left: 0; width: min(320px, 82vw);
  z-index: 41; display: flex; flex-direction: column; gap: 12px; padding: 16px 12px;
  background: color-mix(in srgb, var(--text) 6%, var(--bg));
  border-right: 1px solid var(--border);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
  transform: translateX(-102%); transition: transform var(--dur-base) var(--ease-out-soft);
}
.chat-rail.is-open { transform: translateX(0); }
.chat-rail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.chat-rail-home {
  display: inline-flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  padding: 7px 9px; border-radius: 10px; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast);
}
.chat-rail-home:hover { background: var(--surface); }
.chat-rail-home-ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--accent-bg); color: var(--accent-fg); }
.chat-rail-home-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.chat-rail-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); opacity: .8; padding: 4px 6px 0; }
.chat-rail-close { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 8px; }
.chat-rail-close:hover { color: var(--text); background: var(--surface); }
.chat-rail-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chat-rail-new {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 9px 12px; border-radius: 12px; border: 1px dashed var(--border);
  background: transparent; color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 550; cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.chat-rail-new:hover { border-color: var(--text-muted); background: var(--surface); }
.chat-rail-new svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chat-rail-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; }
.chat-rail-empty { color: var(--text-faint); font-size: 0.8rem; text-align: center; padding: 20px 8px; }
.chat-rail-empty[hidden] { display: none; }
.chat-rail-item {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 9px 30px 9px 11px; border-radius: 10px; cursor: pointer;
  transition: background var(--dur-fast);
}
.chat-rail-item:hover { background: var(--surface); }
.chat-rail-item.is-current { background: color-mix(in srgb, var(--text) 9%, transparent); }
.chat-rail-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-rail-item-title { font-size: 0.84rem; color: var(--text); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-rail-item-prev { font-size: 0.74rem; color: var(--text-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-rail-item-proj { align-self: flex-start; margin-top: 3px; font-size: 0.6rem; padding: 1px 7px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--border-subtle); color: var(--text-muted); }
.chat-rail-item-del {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; display: grid; place-items: center; opacity: 0;
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 7px;
  transition: opacity var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.chat-rail-item:hover .chat-rail-item-del { opacity: 1; }
.chat-rail-item-del:hover { color: #e2606f; background: var(--surface); }
.chat-rail-item-del svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Escritorio: el panel de chats queda FIJO (no drawer) y el chat se corre a la
   derecha para dejarle sitio. La topbar no necesita los controles ni el cierre. */
@media (min-width: 900px) {
  .app-main.has-chat-rail .chat-rail {
    width: 264px; transform: none; box-shadow: none;
    border-right: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--text) 3%, var(--bg));
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .app-main.has-chat-rail .chat-rail-backdrop { display: none !important; }
  .app-main.has-chat-rail > .content { padding-inline-start: calc(264px + 30px); }
  .app-main.has-chat-rail .chat-ctrls { display: none; }
  .chat-rail-close { display: none; }
}

.msg { animation: rise var(--dur-base) var(--ease-out-cine); }

.msg-user {
  align-self: flex-end;
  max-width: 76%;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-sm);
  padding: 11px 16px;
}
.msg-user p { line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word; }
.msg-tag {
  display: block;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 5px;
}

.msg-agent {
  align-self: flex-start;
  display: flex; gap: 13px;
  max-width: 90%;
}
.msg-avatar {
  width: 26px; height: 26px;
  border-radius: 8px;
  filter: var(--logo-filter);
  flex: none;
  margin-top: 3px;
}
.msg-body { padding-top: 3px; }
.msg-body p { line-height: 1.65; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: break-word; }

/* Indicador de escritura */
.typing { display: inline-flex; gap: 5px; padding: 10px 2px; }
.typing span {
  width: 5px; height: 5px; border-radius: var(--radius-full);
  background: var(--text-faint);
  animation: typing-dot 1.1s var(--ease-in-out-cine) infinite;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* ---- Composer ---- */
.composer {
  position: sticky; bottom: 0;
  z-index: 10;
  padding: 10px 0 32px;
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.composer-box {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 14px 14px 12px 20px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.composer-box:focus-within { border-color: var(--border-strong); }

.composer-box textarea {
  width: 100%;
  background: transparent; border: none; outline: none; resize: none;
  color: var(--text);
  font-family: inherit; font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1.55;
  min-height: 36px; max-height: 170px;
  padding: 6px 0;
}
.composer-box textarea::placeholder { color: var(--text-faint); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* Barra de controles bajo el textarea: adjuntar, modo, avatar, modelo, enviar */
.composer-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* Botón + de adjuntar */
.composer-attach {
  width: 34px; height: 34px; flex: none;
  align-self: flex-end;
  margin-bottom: 4px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.composer-attach:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.composer-attach svg { width: 14px; height: 14px; stroke-width: 2; }

/* Adjuntos — pills sobre el composer; mismo ancho y alineación que la caja del composer */
.attach-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 7px;
  width: min(860px, 100%);
  margin-inline: auto;
  padding: 0 4px 10px;
}
.attach-strip[hidden] { display: none; }
.att-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 4px 6px 4px 4px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  max-width: 220px;
  animation: rise var(--dur-fast) var(--ease-out-cine);
}
.att-thumb {
  width: 24px; height: 24px; flex: none;
  border-radius: var(--radius-full);
  object-fit: cover;
}
.att-ic {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-hover);
  border-radius: var(--radius-full);
  color: var(--text-muted);
}
.att-ic svg { width: 12px; height: 12px; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Referencias de escenario: se distinguen de las sueltas con el borde de acento,
   porque el motor las lee como entorno y no como sujeto. */
.att-pill.is-scene {
  border-color: color-mix(in srgb, var(--accent-bg) 55%, var(--border-subtle));
  color: var(--text);
}
.att-pill.is-scene .att-thumb { border-radius: var(--radius-sm); }
/* Avatar adjunto (composer de vídeo): la miniatura va redonda, como en el
   selector, para distinguirlo de una referencia suelta de un vistazo. */
.att-pill.is-avatar { border-color: var(--border); color: var(--text); }
.att-pill.is-avatar .att-thumb { border-radius: var(--radius-full); }
.att-x {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: none;
  border-radius: var(--radius-full);
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.att-x:hover { color: var(--text); background: var(--surface-hover); }
.att-x svg { width: 10px; height: 10px; stroke-width: 2.2; }

/* Modo activo dentro del composer */
.composer-mode {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-end;
  margin-bottom: 5px;
  background: var(--accent-bg); color: var(--accent-fg);
  border: none; border-radius: var(--radius-full);
  padding: 6px 12px;
  font-family: inherit; font-size: 0.78rem; font-weight: 550; letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--dur-fast);
}
.composer-mode:hover { opacity: 0.85; }
.composer-mode svg { width: 11px; height: 11px; stroke-width: 2.2; }
.composer-mode[hidden] { display: none; }

/* ---- Selector de modelo — integrado en el composer ---- */
.model-picker { position: relative; align-self: flex-end; margin-bottom: 8px; margin-left: auto; }
.composer-bar .ava-picker { align-self: flex-end; margin-bottom: 8px; }

.model-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--text-faint);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.model-btn:hover { color: var(--text-secondary); background: var(--surface-hover); }
.model-btn svg { width: 10px; height: 10px; stroke-width: 2; }
.model-auto {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 1px 6px;
  font-size: 0.52rem;
}
.model-auto[hidden] { display: none; }

.model-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  min-width: 150px;
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: 4px;
  z-index: 60;
  animation: palette-in var(--dur-fast) var(--ease-out-cine);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.model-menu[hidden] { display: none; }
.model-menu li {
  display: grid;
  grid-template-columns: 16px auto 1fr auto;
  align-items: center; gap: 8px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.model-menu li:hover { background: var(--surface-hover); }
.model-name { font-size: 0.76rem; font-weight: 500; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; }
/* Etiqueta "NEW" de un modelo recién llegado: blanca, cursiva, inclinada. */
.model-new {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 5px; transform: skewX(-8deg);
  background: var(--accent-bg); color: var(--accent-fg);   /* blanco en oscuro; negro en tema claro para que se vea */
  font-size: 0.6rem; font-weight: 800; font-style: italic; letter-spacing: .02em;
  vertical-align: 1px;
}

/* El modelo en uso: fila marcada + nombre en negrita, no solo un punto */
.model-menu li.is-selected {
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.model-menu li.is-selected:hover {
  background: color-mix(in srgb, var(--text) 11%, transparent);
}
.model-menu li.is-selected .model-name { font-weight: 650; }

/* Leyenda del modelo — estilo digital, como las cifras del saldo */
.model-desc {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
  justify-self: end;
  padding-left: 14px;
}

/* Logos de los modelos — monocromo, blancos sobre dark vía filtro */
.model-logo {
  width: 15px; height: 15px; flex: none;
  justify-self: center;
  filter: var(--logo-filter);
  opacity: 0.92;
}
.model-logo-sm { width: 12px; height: 12px; }
.model-logo-sym {
  display: inline-grid; place-items: center;
  filter: none;
  font-size: 0.66rem;
  color: var(--text-secondary);
}

/* Íconos de proporción — rectángulo a escala real de cada aspecto */
.model-aspect-ic {
  width: 16px; height: 16px; flex: none;
  justify-self: center;
  filter: none;
  color: var(--text-muted);
}
.model-menu li:hover .model-aspect-ic,
.model-menu li.is-selected .model-aspect-ic { color: var(--text-secondary); }
/* Marcador del seleccionado — punto a la derecha, misma columna en todas las filas */
.model-menu li::after {
  content: "";
  justify-self: end;
  width: 14px; height: 14px;
  display: grid; place-items: center;
  color: var(--text);
}
.model-menu li.is-selected::after {
  content: "";
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
}

.composer-send {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent-fg);
  border: none; border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
}
.composer-send svg { width: 16px; height: 16px; stroke-width: 2; }
.composer-send:hover:not(:disabled) { transform: translateY(-1px); }
.composer-send:disabled { opacity: 0.3; cursor: default; }

/* ---- Chips de capacidades ---- */
.chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 8px 15px;
  font-size: 0.84rem; color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.chip:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border); }
.chip svg { width: 14px; height: 14px; opacity: 0.8; }

/* Chip seleccionado — resalta por inversión */
.chip.is-active,
.chip.is-active:hover {
  background: var(--accent-bg);
  color: var(--accent-fg);
  border-color: var(--accent-bg);
}
.chip.is-active svg { opacity: 1; }

/* ============================================================
   MODO PROMPT CREATOR — el chat del agente se convierte en un
   generador de prompts profesionales (imagen / video).
   Al activarse, el acento es "glass": blanco translúcido con
   desenfoque, sin morados ni degradados.
   ============================================================ */
.agent {
  position: relative;
  /* Relleno/borde translúcido derivado del texto → blanco glass en tema oscuro,
     glass neutro en tema claro; nunca color de marca */
  --pc-glass:   color-mix(in srgb, var(--text) 9%, transparent);
  --pc-glass-2: color-mix(in srgb, var(--text) 15%, transparent);
  --pc-line:    color-mix(in srgb, var(--text) 22%, transparent);
}

/* ---- Entrada al Prompt Creator: ORBE flotante. Icono grande protagonista,
   animación en loop (destello del ícono + halo tipo sonar). Sin "Activar". ---- */
/* Va en la fila de acciones, junto a "Crear un proyecto nuevo": icono redondo
   a la izquierda + nombre a la derecha (como el texto del otro botón). */
.pc-orb {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.agent.is-prompt .pc-orb { display: none; }   /* en el workbench se sale con "Salir" */
.pc-orb-ic {
  position: relative;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
  transition: transform var(--dur-base) var(--ease-out-soft), background var(--dur-fast), border-color var(--dur-fast);
}
/* Halo tipo sonar en loop — SOLO en el Prompt Creator (su sello distintivo) */
.pc-orb .pc-orb-ic::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text) 32%, transparent);
  animation: pcSonar 3s var(--ease-out-cine) infinite;
}
@keyframes pcSonar {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.pc-orb:hover .pc-orb-ic,
.agent-newproj:hover .pc-orb-ic {
  transform: scale(1.06);
  background: color-mix(in srgb, var(--text) 12%, transparent);
  border-color: color-mix(in srgb, var(--text) 30%, transparent);
}
.pc-orb:active .pc-orb-ic,
.agent-newproj:active .pc-orb-ic { transform: scale(.97); }

.pc-orb-svg { width: 26px; height: 26px; overflow: visible; }
.pc-orb-svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pc-orb-svg .pc-star { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: center; }
.pc-star-main { animation: pcBreathe 3.2s ease-in-out infinite; }
.pc-spark1 { animation: pcTwinkle 2.1s ease-in-out infinite; }
.pc-spark2 { animation: pcTwinkle 2.1s ease-in-out 1s infinite; }
@keyframes pcBreathe { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes pcTwinkle { 0%,100% { transform: scale(.45); opacity: .2; } 50% { transform: scale(1); opacity: 1; } }

/* El nombre igual que el texto de "Crear un proyecto nuevo" */
.pc-orb-label {
  font-family: var(--font-sans);
  font-size: 0.86rem; font-weight: 500; letter-spacing: normal; text-transform: none;
  color: var(--text); white-space: nowrap;
  transition: color var(--dur-fast);
}

@media (prefers-reduced-motion: reduce) {
  .pc-orb-ic::after, .pc-star-main, .pc-spark1, .pc-spark2 { animation: none; }
}
@media (max-width: 640px) {
  .pc-orb-ic { width: 50px; height: 50px; }
  .pc-orb-svg { width: 28px; height: 28px; }
}

/* Toggle de activación (arriba del composer) */
.prompt-switch { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.prompt-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem; font-weight: 550;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.prompt-toggle:hover { color: var(--text); border-color: var(--border); }
.prompt-toggle .pt-ic svg {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.prompt-toggle .pt-state {
  font-size: 0.7rem; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-muted);
}
/* Activo — glass blanco translúcido con leve halo */
.agent.is-prompt .prompt-toggle {
  border-color: var(--pc-line);
  background: var(--pc-glass-2);
  color: var(--text);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
              0 0 26px -10px color-mix(in srgb, var(--text) 16%, transparent);
}
.agent.is-prompt .prompt-toggle .pt-state {
  font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  background: color-mix(in srgb, var(--text) 18%, transparent); color: var(--text);
}

/* Intro del modo (reemplaza el saludo normal cuando el hilo está vacío) */
.prompt-intro { display: none; margin-top: 4px; }
.agent.is-prompt .agent-home .greeting-row,
.agent.is-prompt .agent-home .greeting-sub { display: none; }
.agent.is-prompt .prompt-intro { display: block; animation: rise var(--dur-slow) var(--ease-out-cine); }
.pi-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.pi-badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Píldora de cristal para el badge */
.agent.is-prompt .pi-badge {
  padding: 5px 13px 5px 10px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
  color: var(--text);
}
.prompt-intro-h {
  font-size: clamp(1.6rem, 3.2vw, 2.15rem); font-weight: 600;
  letter-spacing: var(--tracking-tight); line-height: 1.1;
  color: var(--text);
  max-width: 18ch;
}
.prompt-intro-sub { margin-top: 11px; color: var(--text-muted); max-width: 44ch; line-height: 1.5; }

/* El composer se vuelve una CONSOLA DE CRISTAL iluminada por un halo neutro:
   el resplandor la separa del fondo casi negro y hace que el desenfoque lea
   como vidrio esmerilado. Sin color ni degradados de marca. */
.agent.is-prompt .composer-box {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 30px 60px -34px rgba(0,0,0,.85),
    0 0 64px -16px color-mix(in srgb, var(--text) 12%, transparent);
}
.agent.is-prompt .composer-box:focus-within {
  border-color: color-mix(in srgb, var(--text) 26%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
    0 30px 60px -34px rgba(0,0,0,.85),
    0 0 78px -14px color-mix(in srgb, var(--text) 17%, transparent);
}

/* Chips de herramientas ocultos; controles de prompt SOLO en modo prompt.
   Filas limpias con micro-etiquetas monoespaciadas — sin caja pesada. */
.agent.is-prompt .chips { display: none; }
.prompt-controls {
  display: none;
  flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 20px; margin-top: 18px;
}
.agent.is-prompt .prompt-controls { display: flex; }
.pc-group { display: inline-flex; align-items: center; gap: 11px; flex-wrap: wrap; justify-content: center; }
.pc-lbl {
  font-family: var(--font-mono);
  font-size: 0.58rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted); opacity: .72;
}
.pc-div { display: none; }

.pc-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  align-self: flex-start;   /* compacto: no se estira a lo ancho del panel */
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pc-target, .pc-vmodel {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 96px;   /* dos mitades iguales → control equilibrado */
  padding: 6px 13px; border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--text-muted);
  font-size: 0.8rem; font-weight: 550; cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.pc-vmodel.is-active {
  background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 14%, transparent);
}
.pc-vmodel:hover { color: var(--text); }
.pw-field[hidden] { display: none; }
.pc-target svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc-target:hover { color: var(--text); }
.pc-target.is-active {
  background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 14%, transparent);
}
/* Cuadrícula 3×3 simétrica (9 estilos) */
.pc-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 7px; }
.pc-style {
  padding: 7px 10px; border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--text) 11%, transparent); background: transparent;
  color: var(--text-muted); font-size: 0.78rem; cursor: pointer; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.pc-style:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 22%, transparent); }
.pc-style.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 20%, transparent);
  background: color-mix(in srgb, var(--text) 9%, transparent);
}

/* Selector de aspecto — mismos ratios que la herramienta de imágenes */
.pc-aspects { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 7px; }
.pc-aspect {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 6px; border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--text) 11%, transparent); background: transparent;
  color: var(--text-muted); font-size: 0.74rem; font-weight: 550; cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.pc-aspect svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pc-aspect-auto { font-size: 0.6rem; line-height: 1; opacity: .85; }
.pc-aspect:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 22%, transparent); }
.pc-aspect.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 20%, transparent);
  background: color-mix(in srgb, var(--text) 9%, transparent);
}

/* Selector de plano — tipo de encuadre (3×3 como los estilos) */
.pc-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 7px; }
.pc-shot {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 5px 8px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 11%, transparent); background: transparent;
  color: var(--text-muted); font-size: 0.76rem; line-height: 1.14; cursor: pointer;
  text-align: center; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.pc-shot:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 22%, transparent); }
.pc-shot.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 20%, transparent);
  background: color-mix(in srgb, var(--text) 9%, transparent);
}

/* ===== WORKBENCH a dos columnas — diagramación propia del Prompt Creator.
   En modo prompt se oculta el chat (saludo + composer) y aparece un panel
   con brief a la izquierda y resultado a la derecha. ===== */
/* El workbench usa todo el ancho util: encerrarlo en 940px dejaba dos franjas
   vacias enormes en pantallas grandes. Tambien se levanta el tope de 1360 de
   .content, que era el otro recorte. */
.agent.is-prompt { max-width: none; }
.content:has(> .agent.is-prompt) { max-width: none; }
/* En modo prompt no hay composer que separar del borde: ese 8vh solo provocaba
   scroll en pantallas de 900px. */
.agent.is-prompt.is-empty { padding-bottom: 0; }
/* Las columnas se deciden por el ancho REAL del panel, no por el de la ventana:
   el rail de chats se come casi 300px y una consulta de ventana se equivocaba. */
#promptWorkbench { container-type: inline-size; }
.agent.is-prompt .agent-home,
.agent.is-prompt .composer,
.agent.is-prompt .agent-actions { display: none; }
#promptWorkbench { display: none; }
.agent.is-prompt #promptWorkbench { display: block; animation: rise var(--dur-slow) var(--ease-out-cine); padding: 6px 0 24px; }

.pw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pw-head-actions { display: inline-flex; align-items: center; gap: 8px; }

/* Referencias del composer de video (imagen/video/audio/avatar) */
.vd-refs { display: inline-flex; align-items: center; gap: 6px; }
.vd-refs[hidden] { display: none; }
.vd-refs-div { width: 1px; height: 22px; background: var(--border-subtle); margin: 0 3px; }
.pw-exit {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); background: transparent;
  color: var(--text-muted); font-size: 0.78rem; font-weight: 550; cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.pw-exit:hover { color: var(--text); border-color: var(--border); }
.pw-exit svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

/* Tres columnas: brief - ajustes - resultado. El contenido se reparte a lo
   ancho en vez de apilarse, y las tres cajas comparten alto. */
.pw-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.2fr);
  gap: 14px; align-items: stretch;
}
/* El area de texto se come el alto sobrante del panel para no dejar hueco */
.pw-brief .pw-textarea { flex: 1 1 auto; }
.pw-opts { gap: 16px; justify-content: flex-start; }
.pw-panel {
  display: flex; flex-direction: column; gap: 13px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 20px; padding: 18px;
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
              0 26px 54px -32px rgba(0,0,0,.8);
}
.pw-textarea {
  width: 100%; min-height: 132px; resize: vertical;
  background: transparent; border: 0; outline: none;
  color: var(--text); font-family: var(--font-sans);
  font-size: 0.98rem; line-height: 1.55;
}
.pw-textarea::placeholder { color: var(--text-muted); }
.pw-field { display: flex; flex-direction: column; gap: 9px; }
.pw-generate {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 16px; border: 0; border-radius: var(--radius-full);
  background: var(--accent-bg); color: var(--accent-fg);
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.pw-generate:hover { opacity: .92; }
.pw-generate:active { transform: scale(.985); }
.pw-generate svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Panel de salida: la altura la fija el formulario (columna izquierda).
   min-height:0 + overflow:hidden evitan que el prompt largo empuje la rejilla;
   el texto se desplaza dentro con su propia barra. */
.pw-output { min-height: 0; overflow: hidden; contain: size; }
.pw-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; }
.pw-head-right { display: inline-flex; align-items: center; gap: 10px; }
.pw-engine {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); opacity: .7;
}
.pw-copy[hidden] { display: none; }
.pw-output-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

/* Resultado: barra fija arriba, texto que baja con scroll */
.pw-result { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pw-result-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px; margin-right: -6px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent;
}
.pw-result-scroll::-webkit-scrollbar { width: 9px; }
.pw-result-scroll::-webkit-scrollbar-track { background: transparent; }
.pw-result-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 9px; border: 2px solid transparent; background-clip: padding-box;
}
.pw-result-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text) 32%, transparent); background-clip: padding-box;
}
.pw-result-scroll .prompt-text {
  margin: 0; padding: 2px 2px 6px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.8rem; line-height: 1.62;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
  -webkit-user-select: text; user-select: text;
}
.pw-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--text-muted); text-align: center; padding: 24px 12px;
}
.pw-empty svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.pw-empty p { font-size: 0.85rem; max-width: 22ch; line-height: 1.5; }
.pw-wait { flex: 1; display: flex; align-items: center; justify-content: center; }

/* Tarjetas del prompt dentro del panel derecho: el panel ya es el marco */
.pw-output-body .pc-analysis { font-size: 0.84rem; margin: 0 0 4px; }
.pw-output-body .prompt-card {
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pw-output-body .prompt-card-head { padding: 8px 10px; }
.pw-output-body .prompt-text { padding: 11px 12px; font-size: 0.78rem; }

/* Sin sitio para tres columnas: el resultado baja y ocupa la fila entera. */
@container (max-width: 1150px) {
  .pw-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pw-output { grid-column: 1 / -1; min-height: 240px; max-height: 46vh; }
}
@container (max-width: 660px) {
  .pw-grid { grid-template-columns: 1fr; }
  .pw-brief .pw-textarea { min-height: 132px; }
}
@media (max-width: 720px) {
  .agent.is-prompt { max-width: 100%; }
}

/* Tarjeta de prompt en el hilo */
.pc-analysis { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 10px; }
.pc-analysis b { color: var(--text); font-weight: 600; }
.prompt-card {
  border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.prompt-card + .prompt-card { margin-top: 10px; }
.prompt-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.prompt-card-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: .13em; color: var(--text-muted);
}
.prompt-card-label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prompt-copy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); background: var(--bg);
  color: var(--text-muted); font-size: 0.74rem; font-weight: 550; cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.prompt-copy:hover { color: var(--text); border-color: var(--border); }
.prompt-copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prompt-copy.is-copied {
  color: var(--text); border-color: var(--pc-line);
  background: var(--pc-glass-2);
}
.prompt-text {
  margin: 0; padding: 13px 14px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.82rem; line-height: 1.55;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
  -webkit-user-select: text; user-select: text;
}
.prompt-neg .prompt-text { color: var(--text-muted); }
.prompt-params { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pc-param {
  font-size: 0.7rem; padding: 3px 9px; border-radius: var(--radius-full);
  background: var(--surface); border: 1px solid var(--border-subtle); color: var(--text-muted);
}

@media (max-width: 640px) {
  .prompt-intro-h { font-size: 1.5rem; }
  .prompt-controls { gap: 8px; }
}

/* ---- Herramientas — reservado: lo usan las vistas de cada tool ---- */
.tools { margin-bottom: clamp(36px, 5vh, 56px); }
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tool-card {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px 20px 18px;
  box-shadow: var(--shadow-elev);
  transition: background var(--dur-fast), border-color var(--dur-fast),
              transform var(--dur-base) var(--ease-out-soft);
}
.tool-card:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  transform: translateY(-2px);
}
.tool-card h3 {
  font-size: var(--fs-h3); font-weight: 600;
  letter-spacing: var(--tracking-snug); line-height: 1.2;
}
.tool-desc { font-size: 0.84rem; color: var(--text-muted); line-height: 1.55; flex: 1; }
.tool-go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-secondary);
  transition: gap var(--dur-fast) var(--ease-out-soft);
}
.tool-go svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out-soft); }
.tool-card:hover .tool-go svg { transform: translateX(3px); }

/* ---- Tarjetas con vídeo (home) ----
   El vídeo manda: va arriba, redondeado, y debajo solo título y una línea.
   Sin caja alrededor. El alto del vídeo se ajusta al alto de la pantalla
   para que las 6 herramientas quepan enteras en la primera vista. */
.tool-card.is-media {
  gap: 0; padding: 0;
  background: none; border: 0; box-shadow: none;
}
.tool-card.is-media:hover { background: none; transform: none; }
.tool-media {
  position: relative; overflow: hidden;
  /* alto libre = pantalla - barra - banner (mismo clamp que .home-hero) - títulos y huecos */
  height: clamp(110px, calc((100dvh - var(--topbar-h) - clamp(220px, 30vh, var(--hero-max, 320px)) - 310px) / 2), var(--tool-max, 230px));
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  margin-bottom: 11px;
}
.tool-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease-out-soft);
}
.tool-card.is-media:hover .tool-media video { transform: scale(1.04); }
.tool-card.is-media:hover .tool-media { border-color: var(--border); }
.tool-card.is-media h3 { font-size: 0.98rem; display: flex; align-items: center; gap: 8px; }
.tool-card.is-media .tool-desc {
  margin-top: 3px; font-size: 0.8rem; line-height: 1.45; flex: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1180px) { .tool-media { height: auto; aspect-ratio: 16 / 9; } }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.section-head h2 {
  font-size: var(--fs-h2); font-weight: 600;
  letter-spacing: var(--tracking-snug);
}

/* Primera pantalla: banner + herramientas llenan el viewport,
   así "De la comunidad" queda por debajo del pliegue. */
.home-fold {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-h) - clamp(20px, 3.5vh, 40px));
}

/* ============================================================
   MURO DE LA COMUNIDAD — masonry de imágenes/videos (home)
   ============================================================ */
.wall-head { flex-direction: column; align-items: flex-start; gap: 3px; margin-top: clamp(28px, 4vh, 52px); }
.section-sub { font-size: 0.86rem; color: var(--text-muted); }
/* Masonry por columnas (JS reparte cada tarjeta en la columna más corta,
   así todas terminan a la misma altura y no quedan huecos al fondo). */
.wall {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 14px;
}
.wall-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.home { padding-bottom: clamp(24px, 4vh, 48px); }
.wall-item {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-elev);
  transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-out-soft);
}
.wall-item:hover { border-color: var(--border); transform: translateY(-2px); }
.wall-media { position: relative; width: 100%; overflow: hidden; background: var(--surface); }
.wall-media img, .wall-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-vbadge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(0,0,0,.5); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wall-vbadge svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.wall-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; }
.wall-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wall-avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0;
}
.wall-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wall-name { font-size: 0.77rem; font-weight: 550; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-date { font-size: 0.66rem; color: var(--text-faint); }
.wall-like {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 4px 7px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text-muted); font: inherit; font-size: 0.76rem; font-weight: 550; cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.wall-like:hover { color: var(--text); background: var(--surface-hover); }
.wall-like:active { transform: scale(.9); }
.wall-like svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.wall-like.is-liked { color: #f2536d; }
.wall-like.is-liked svg { fill: #f2536d; stroke: #f2536d; }

/* Cargar más: vistazo desenfocado de las próximas piezas + botón encima */
.wall-more-zone { position: relative; margin: 0 0 clamp(36px, 5vh, 56px); }
.wall-more-zone[hidden] { display: none; }
.wall-peek {
  column-count: 4; column-gap: 14px;
  max-height: 220px; overflow: hidden;
  filter: blur(7px); opacity: .5; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 12%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0, #000 12%, transparent 96%);
}
.wall-peek .wall-item { margin: 0 0 14px; break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 1180px) { .wall-peek { column-count: 3; } }
@media (max-width: 820px)  { .wall-peek { column-count: 2; } }
@media (max-width: 460px)  { .wall-peek { column-count: 1; } }
.wall-more {
  position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 14px 36px -10px rgba(0,0,0,.7), 0 0 0 7px color-mix(in srgb, var(--bg) 55%, transparent);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.wall-more:hover { background: var(--surface-hover); border-color: var(--text-muted); transform: translateX(-50%) translateY(-1px); }
.wall-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Indicador "baja y explora" — solo en Inicio, arriba del todo */
.home-explore {
  position: fixed; bottom: 12px; left: calc(50% + var(--sidebar-w) / 2); z-index: 30;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 17px; border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 550; cursor: pointer;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.6);
  transform: translateX(-50%);
  transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft), background var(--dur-fast);
}
.home-explore:hover { background: color-mix(in srgb, var(--surface) 96%, transparent); }
.home-explore svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.home-explore.is-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); }
/* Centrado sobre el área de contenido (a la derecha del sidebar) */
html[data-sidebar="collapsed"] .home-explore { left: calc(50% + var(--sidebar-w-rail) / 2); }
@media (max-width: 960px) { .home-explore { left: 50%; } }
@media (max-width: 640px) { .home-explore { bottom: 82px; } }

/* Lightbox del muro */
.wall-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 3vh, 36px);          /* deja hueco para la X que asoma en la esquina */
  background: rgba(0,0,0,.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade var(--dur-fast) var(--ease-out-soft);
}
.wall-modal[hidden] { display: none; }
/* Marco que se ajusta a la caja: da el contexto para anclar la X a su esquina */
.wall-modal-frame {
  position: relative; display: flex;
  width: min(1360px, 100%); max-height: min(95vh, 980px);
}
.wall-modal-box {
  position: relative; display: flex; gap: 0;
  width: 100%; max-height: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}
/* X de cerrar: pegada a la esquina superior derecha del modal (asoma un poco fuera).
   Uso offsets en px (no translate) para que asome de forma simétrica sobre la esquina. */
.wall-modal-close {
  position: absolute; top: -18px; right: -18px; z-index: 210;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16); border-radius: 50%;
  background: rgba(18,18,22,.82); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.7);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.wall-modal-close:hover { background: rgba(30,30,36,.98); border-color: rgba(255,255,255,.34); }
.wall-modal-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wall-modal-media {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: #0a0a0c; max-height: min(95vh, 980px);
}
.wall-modal-media img, .wall-modal-media video { max-width: 100%; max-height: min(95vh, 980px); display: block; object-fit: contain; }
.wall-modal-side {
  flex: none; width: 360px; display: flex; flex-direction: column; gap: 18px;
  padding: 22px; overflow-y: auto; border-left: 1px solid var(--border-subtle);
}
.wall-modal-user { display: flex; align-items: center; gap: 9px; }
.wall-modal-user .wall-meta { flex: 1; min-width: 0; }
.wall-modal-likehost { flex: none; }
.wall-modal-block { display: flex; flex-direction: column; gap: 7px; }
.wall-modal-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.wall-modal-prompt {
  font-size: 0.86rem; line-height: 1.55; color: var(--text);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle);
  border-radius: 12px; padding: 11px 13px;
}
.wall-modal-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.wall-ref { width: 62px; height: 62px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-subtle); }
.wall-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Copiar prompt (bajo el texto del prompt) */
.wall-copy-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px; padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--border-subtle); background: transparent;
  color: var(--text-muted); font: inherit; font-size: 0.76rem; font-weight: 550; cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.wall-copy-btn:hover { color: var(--text); background: var(--surface-hover); border-color: var(--border); }
.wall-copy-btn.is-done { color: #34c759; border-color: color-mix(in srgb, #34c759 45%, transparent); }
.wall-copy-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Modelo + aspecto usados en la generación */
.wall-modal-gen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wall-modal-modelpill, .wall-modal-aspectpill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: var(--bg-subtle);
  font-size: 0.8rem; font-weight: 550; color: var(--text);
}
.wall-modal-modelpill img { width: 15px; height: 15px; border-radius: 4px; object-fit: contain; }
.wall-modal-aspectpill { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); letter-spacing: .04em; }
/* Recrear — CTA a ancho completo, pegado abajo del panel */
.wall-recreate-btn {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 12px; border: 0;
  background: var(--text); color: var(--bg); font: inherit; font-size: 0.86rem; font-weight: 650; cursor: pointer;
  transition: transform var(--dur-fast), opacity var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.6);
}
.wall-recreate-btn:hover { opacity: .92; box-shadow: 0 14px 32px -12px rgba(0,0,0,.7); }
.wall-recreate-btn:active { transform: translateY(1px); }
.wall-recreate-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wall-like-lg { font-size: 0.82rem; padding: 6px 10px; border: 1px solid var(--border-subtle); }
.wall-like-lg svg { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .wall-modal-box { flex-direction: column; max-height: 100%; overflow-y: auto; }
  .wall-modal-media { max-height: 52vh; }
  .wall-modal-media img, .wall-modal-media video { max-height: 52vh; }
  .wall-modal-side { width: 100%; border-left: 0; border-top: 1px solid var(--border-subtle); }
  /* En móvil la caja llena la pantalla: la X va DENTRO de la esquina para no cortarse */
  .wall-modal { padding: 12px; }
  .wall-modal-close { top: 8px; right: 8px; }
}
/* ============================================================
   CONFIGURACIÓN — panel central
   ============================================================ */
.home[hidden], .agent[hidden], .settings[hidden], .avatar-view[hidden], .img-view[hidden],
.cover-view[hidden], .workflow-view[hidden], .document-view[hidden], .video-view[hidden] { display: none; }

/* INVARIANTE: oculto manda SIEMPRE en la vista de Cover Art.
   Esta seccion lleva clases de estado (is-picked, is-short, is-editing) que
   NO se quitan al cambiar de herramienta, porque son las que devuelven el
   paso en el que estabas al volver. Varias de ellas declaran `display`, y con
   la misma especificidad que la regla de arriba ganaban por ir despues en la
   hoja: al generar una portada y saltar a otra seccion, el paso 3 se quedaba
   flotando encima. El !important corta la clase entera de fallo de una vez,
   en lugar de ir persiguiendo cada regla nueva con un :not([hidden]).
   Si anades una clase de estado a .cover-view, esto ya te cubre. */
.cover-view[hidden] { display: none !important; }

/* Cover Art / Workflow / Document / Video — mismo ancho centrado que Avatar */
.cover-view, .workflow-view, .document-view, .video-view {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  padding-bottom: 48px;
}
/* Video lleva nueve controles en una fila (modelo + calidad aparte): con 860
   el nombre del modelo quedaba en "Seed…". */
.video-view { max-width: 960px; }
.video-view .gen-box, .video-view .vd-banner { width: min(960px, 100%); }
/* Cover Art va a sangre: sin el tope de 860 ni el de 1360 de .content, para
   que la portada y el compositor ocupen de lado a lado. */
.cover-view {
  padding-bottom: 0;
  max-width: none;
  container: coverview / inline-size;
  animation: rise var(--dur-slow) var(--ease-out-cine);
}
.content:has(> .cover-view:not([hidden])) { max-width: none; }
/* Workflow Studio necesita más ancho: grid de 2 columnas + canvas */
.workflow-view { max-width: 1080px; }

/* ============================================================
   GEN-* — chrome compartido por Cover / Workflow / Document / Video
   (mismo lenguaje visual que Imagen Premium, sin duplicar CSS)
   ============================================================ */
.gen-hero {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 22px;
  padding: 28px 0 34px;
}
.gen-hero[hidden] { display: none; }

/* ---- Título de sección, uno solo para toda la app ----
   El patrón es el de Imagen Premium: pastilla con el icono de la herramienta +
   el nombre. Antes convivían tres tamaños distintos (.iv-title, .gen-title y
   .settings-head), y cada sección se veía de un porte. */
.gen-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.gen-title-ic {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.gen-title-ic svg { width: 22px; height: 22px; color: var(--text); }
.gen-title h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.gen-hero-sub { color: var(--text-muted); font-size: 0.92rem; white-space: nowrap; }

/* ============================================================
   COVER ART CREATOR — layout de dos columnas (portada | formulario)
   ============================================================ */
/* ---- Cabecera de la herramienta: identidad a la izquierda, acciones a la
   derecha, separada del cuerpo por una línea. Todo con tokens, así que sirve
   igual en oscuro y en claro. ---- */
.cvx-head {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 20px; flex-wrap: wrap;
  padding: 2px 0 12px;
  margin-bottom: 12px;
}
.cvx-head-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* misma pastilla y mismo porte que el resto de secciones (ver .gen-title) */
.cvx-appic {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-subtle);
}
.cvx-appic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cvx-title-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cvx-head h1 {
  font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600;
  letter-spacing: var(--tracking-tight); line-height: 1;
}
.cvx-sub {
  color: var(--text-muted); font-size: var(--fs-body-s);
  margin-top: 6px; text-align: center;
}
/* Descargar: vive DENTRO de la portada, esquina inferior derecha, y solo
   existe cuando hay resultado (esta dentro de .cv-results). */
.cvx-dl {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: none; border-radius: var(--radius-full);
  background: rgba(8,8,10,.62); color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
}
.cvx-dl:hover:not(:disabled) { background: rgba(8,8,10,.85); transform: translateY(-1px); }
.cvx-dl:disabled { opacity: 0; pointer-events: none; }
.cvx-dl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---- Cuerpo: la portada manda. Ocupa el centro lo más grande que quepa sin
   provocar scroll, y todos los controles bajan a un compositor corrido, como
   en Imagen Premium. ---- */
.cover-view {
  /* El lado del cuadrado lo manda el alto libre, no el ancho de la columna:
     se descuenta todo lo que va fijo encima y debajo (barra superior, cabecera,
     franja de datos, compositor y aires) para que la portada llene el resto
     sin obligar a hacer scroll. */
  --cvb-chrome: 479px;
  --cvb-size: min(680px, 100%, calc(100dvh - var(--cvb-chrome)));
}
.cvb-body {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  padding-bottom: 18px;
}
.cvb-body > .cvx-stage { width: var(--cvb-size); max-width: 100%; flex: none; }

/* Marco de la vista previa: borde discontinuo mientras no hay resultado */
.cvx-stage {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px dashed var(--border);
  background: var(--bg-subtle);
  display: grid; place-items: center;
}
.cvx-stage.has-result { border-style: solid; background: var(--surface); }
/* Marcador de la portada vacia: solo el logotipo, en marca de agua. */
/* Sin padding: el logotipo va centrado y al 35,7%, así que el relleno no le
   aportaba nada y en cambio encogía la caja de referencia — el mismo
   porcentaje daba menos píxeles aquí que en el lienzo de carga, y los dos
   logotipos no llegaban a coincidir. */
.cvx-empty { display: grid; place-items: center; }
.cvx-empty[hidden] { display: none; }
.cvx-empty-logo {
  /* un 15% mas pequeno que la primera version (42% / 260px) */
  width: min(35.7%, 221px); height: auto;
  opacity: 1;
  user-select: none; -webkit-user-drag: none;
}

/* Franja bajo la portada: tamano de salida a la izquierda, etiqueta parental
   a la derecha. Del mismo ancho que el cuadrado. */
/* Va centrada bajo la portada, no estirada de punta a punta: asi se lee como
   pie del cuadrado y no como una barra suelta. */
.cvb-meta {
  width: min(100%, 960px);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3vw, 34px); flex-wrap: wrap;
  margin-top: -2px;
}
.cvb-meta-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cvx-size-picker { position: relative; }
.cvb-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-family: inherit; font-size: 0.8rem; font-weight: 500;
  color: var(--text-secondary); cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.cvb-chip:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); }
.cvb-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cvb-size { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.01em; }
.cvb-chip-chev { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.6; }
/* Se abre hacia ARRIBA: la franja vive al pie de la portada y esta seccion no
   tiene scroll, asi que hacia abajo se saldria de la pantalla. */
.cvx-size-menu { left: 0; right: auto; bottom: calc(100% + 8px); top: auto; min-width: 210px; }
.cvb-pa { gap: 10px; }
.cvb-pa-t { font-size: 0.8rem; color: var(--text-secondary); }
.cvb-pa.is-on .cvb-pa-t { color: var(--text); }

/* ---- Compositor: titulo y artista arriba, concepto debajo y una sola barra
   de pastillas con todo lo demas. Mismo lenguaje que el de Imagen. ---- */
.cvb-composer {
  width: min(100%, 960px);
  /* la barra decide si va en una fila mirando SU ancho, no el de la ventana */
  container: covercomp / inline-size;
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.cvb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cvb-inp { position: relative; display: block; min-width: 0; }
.cvb-inp input,
.cvb-inp textarea {
  width: 100%;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: inherit; font-size: 0.92rem; color: var(--text);
  transition: border-color var(--dur-fast);
}
/* El concepto arranca en una linea y crece con lo que escribes (lo lleva
   cvAutogrow, igual que en Imagen). Sin transicion de alto: la barra de
   redimensionar del navegador tiene que seguir al raton sin arrastre. */
.cvb-area textarea {
  padding: 10px 60px 10px 14px; resize: vertical; line-height: 1.5;
  height: 42px; min-height: 42px;
  transition: border-color var(--dur-fast);
}
.cvb-area .cvx-count { top: 50%; bottom: auto; transform: translateY(-50%); }
.cvb-area.is-tall .cvx-count { top: auto; bottom: 9px; transform: none; }
/* --text-faint se queda en 3.5:1 sobre la superficie oscura; con --text-muted
   el marcador de posicion pasa de 4.5:1 en los dos temas. */
.cvb-inp input::placeholder,
.cvb-inp textarea::placeholder { color: var(--text-muted); }
.cvb-inp input:focus,
.cvb-inp textarea:focus { outline: none; border-color: var(--border-strong); }
.cvx-count {
  position: absolute; right: 13px; bottom: 10px;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted);
  pointer-events: none;
}
.cvb-inp:not(.cvb-area) .cvx-count { top: 50%; bottom: auto; transform: translateY(-50%); }
.cvx-strip { width: 100%; margin: 0; padding: 0; }

/* Las pastillas van siempre pegadas con el mismo hueco; solo ceden ancho los
   desplegables de genero y mood. Si la columna se estrecha de verdad, la barra
   pasa a dos filas antes que salirse. */
.cvb-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 8px; }
/* Con sitio de sobra van todas en una linea y son los desplegables los que
   ceden ancho; por debajo de eso la barra pasa a dos filas antes que salirse. */
@container covercomp (min-width: 700px) {
  .cvb-bar { flex-wrap: nowrap; }
}
.cvb-bar > * { flex: none; }
.cvb-add {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted); cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.cvb-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.cvb-add:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); }
.cvb-sel { position: relative; display: inline-flex; flex: 0 1 auto; min-width: 86px; }
.cvb-sel select {
  width: 100%; appearance: none; -webkit-appearance: none;
  /* NO transparent: el panel desplegable lo dibuja el navegador tomando el
     color de fondo del propio <select>, y con transparente Chrome lo saca en
     blanco — ilegible sobre el tema oscuro. Se le da el mismo color que tiene
     detras (el del compositor), asi que cerrado se ve exactamente igual. */
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 7px 27px 7px 13px;
  font-family: inherit; font-size: 0.78rem; color: var(--text);
  cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cvb-sel select:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.cvb-sel select:focus { outline: none; border-color: var(--border-strong); }
.cvb-sel select.is-empty { color: var(--text-muted); }
.cvx-chev {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; pointer-events: none;
  fill: none; stroke: var(--text-muted); stroke-width: 1.8;
}
.cvb-send { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.cvb-generate {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 20px;
  background: var(--accent-bg); color: var(--accent-fg);
  border: none; border-radius: var(--radius-full);
  font-family: inherit; font-size: 0.84rem; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
}
.cvb-generate:hover:not(:disabled) { transform: translateY(-1px); }
.cvb-generate:disabled { opacity: 0.32; cursor: default; }
.cvb-generate svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.cvb-generate .digits { font-size: 0.78rem; opacity: 0.75; }
/* ---- Con sitio de sobra, el campo de concepto arranca mas alto ----
   Aqui vivia una rejilla de dos columnas que ponia el compositor AL LADO de
   la vista previa. La vista previa ya no esta en el paso 1, asi que la rejilla
   se fue con ella: lo que queda es solo el respiro del textarea. */
@container coverview (min-width: 980px) {
  .cvb-composer .cvb-area textarea { min-height: 92px; max-height: min(52vh, 460px); }
  .cvb-composer .cvb-area .cvx-count { top: auto; bottom: 9px; transform: none; }
}

@media (max-width: 860px) {
  /* En una columna el compositor crece: la portada cede alto y ya se permite
     desplazar, como en el resto de secciones estrechas. */
  .cover-view { --cvb-size: min(560px, 100%); }
  .cvb-fields { grid-template-columns: 1fr; }
  .cvb-bar { flex-wrap: wrap; }
  .cvb-send { margin-left: 0; flex: 1 1 100%; }
  .cvb-generate { flex: 1 1 auto; justify-content: center; }
}

.cv-layout {
  display: grid;
  /* Formulario de ancho FIJO → su altura es estable; el JS fija --cv-left-w
     = esa altura para que la portada cuadrada quede de la misma dimensión.
     (Si el form fuera flexible, estrecharlo lo haría más alto y el ajuste
     entraría en bucle.) */
  grid-template-columns: var(--cv-left-w, 460px) 460px;
  justify-content: center;
  gap: 34px;
  align-items: start;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 48px;
}
.cv-left { min-width: 0; }

/* Stage: portada cuadrada que contiene la referencia o el carrusel */
.cv-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.85);
  background: var(--surface);
}
.cv-cover, .cv-results { position: absolute; inset: 0; }
.cv-cover[hidden], .cv-results[hidden] { display: none; }
.cv-cover img, .cv-slide img:not(.pa-mark) { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Carrusel de versiones generadas */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.cv-slide { position: absolute; inset: 0; animation: fade var(--dur-base) var(--ease-out-soft); }
.cv-slide.is-loading {
  background: linear-gradient(110deg, var(--surface) 40%, var(--surface-hover) 50%, var(--surface) 60%);
  background-size: 220% 100%;
  animation: iv-shimmer 1.6s linear infinite;
}
.cv-slide-sym {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-muted); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.045em;
  animation: frame-pulse 1.5s var(--ease-in-out-cine) infinite;
}

/* ---- Cargador de generacion (Imagen, Cover Art y Video) ----
   El clip es 16:9 y la caja puede ser 1:1, 9:16 o lo que toque: se recorta con
   object-fit para llenarla sin deformarse, con el logotipo encima. */
.gen-loader {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
  pointer-events: none;
}
/* Lienzo del núcleo: ocupa la tarjeta entera, por debajo del logotipo */
.gen-nucleus {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background: var(--bg-subtle);
}
.gen-loader video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* nunca negro: si aún no hay fotograma, se ve la superficie de la tarjeta */
  background: var(--bg-subtle);
}
/* selector con peso suficiente: .cv-slide img y .iv-gen img estiran cualquier
   imagen al 100% de la tarjeta y se comian el logotipo */
.gen-loader img.gen-loader-logo {
  position: relative;
  width: min(24%, 108px); height: auto;
  max-width: 108px;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.55));
}
/* Cover Art: el logotipo mientras genera debe verse EXACTAMENTE igual que el
   del lienzo vacío, porque ocupan el mismo sitio y el usuario pasa de uno al
   otro. Misma expresión que .cvx-empty-logo, y ambas cajas de referencia son
   ya el cuadrado del lienzo (ver .cvx-empty, sin padding). */
.cv-slide .gen-loader img.gen-loader-logo { width: min(35.7%, 221px); max-width: 221px; }
/* ---- Galería de portadas creadas ---- */
.cvb-gal-n {
  min-width: 18px; padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--surface-hover);
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 0.66rem;
}
.cvg-lb {
  position: fixed; inset: 0; z-index: 6400;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(6, 6, 8, 0.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: fade var(--dur-base) var(--ease-out-soft);
}
.cvg-box {
  width: min(980px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cvg-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.cvg-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.cvg-x {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.cvg-x:hover { color: var(--text); border-color: var(--border-strong); }
.cvg-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* el ÚNICO scroll de la galería */
.cvg-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  padding: 16px 18px 18px;
}
.cvg-cell {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0; border: 0; background: transparent;
  color: var(--text-secondary); cursor: pointer; text-align: left;
}
.cvg-cell img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  transition: border-color var(--dur-fast) var(--ease-out-cine),
              transform var(--dur-fast) var(--ease-out-cine);
}
.cvg-cell:hover img { border-color: var(--border-strong); transform: translateY(-2px); }
.cvg-cap {
  font-size: 0.78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Flechas de navegación */
.cv-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(8,8,10,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-full);
  color: #fff; cursor: pointer;
  opacity: 0.72; transition: opacity var(--dur-fast) var(--ease-out-soft), background var(--dur-fast);
}
.cv-stage:hover .cv-nav { opacity: 1; }
.cv-nav:hover { background: rgba(8,8,10,.85); opacity: 1; }
.cv-nav:disabled { opacity: 0 !important; pointer-events: none; }
.cv-nav svg { width: 20px; height: 20px; stroke-width: 2.2; }
.cv-nav-prev { left: 10px; }
.cv-nav-next { right: 10px; }
.cv-nav:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }

.cv-counter {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em;
  background: rgba(8,8,10,.7); color: var(--ink-100);
  padding: 4px 9px; border-radius: var(--radius-full);
}
.cv-counter[hidden] { display: none; }

/* Botón de descarga — sólido y bien visible sobre el cover */
.cv-dl {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px 9px 13px;
  background: #fff; color: #000;
  border: none; border-radius: var(--radius-full);
  cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.6);
  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
}
.cv-dl:hover { transform: translateY(-1px); }
.cv-dl:active { transform: translateY(0); }
.cv-dl svg { width: 16px; height: 16px; stroke-width: 2.2; }
.cv-dl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 1180px) {
  .cv-layout { grid-template-columns: 1fr; gap: 22px; }
  /* width:100% evita que el grid item colapse a shrink-to-fit (~2px) por el
     aspect-ratio del stage → así SÍ se ve la portada de referencia (SouCream) */
  .cv-left { width: 100%; max-width: 380px; margin-inline: auto; }
}

/* Grid de resultados (masonry) */
.gen-gridwrap { padding: 6px 0 18px; }
.gen-gridwrap[hidden] { display: none; }
.gen-gridwrap > .overline { margin-bottom: 12px; }
.gen-grid { columns: 4 190px; column-gap: 12px; }
.gen-grid-square { columns: 4 170px; }

.gen-tile {
  position: relative;
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  animation: rise var(--dur-base) var(--ease-out-cine);
}
.gen-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms var(--ease-out-cine); }
.gen-tile:hover img { transform: scale(1.03); }
.gen-tile.is-loading {
  background: linear-gradient(110deg, var(--surface) 40%, var(--surface-hover) 50%, var(--surface) 60%);
  background-size: 220% 100%;
  animation: iv-shimmer 1.6s linear infinite;
}
.gen-tile-sym {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--text-muted);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.045em;
  animation: frame-pulse 1.5s var(--ease-in-out-cine) infinite;
}
.gen-tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 10px 8px;
  background: linear-gradient(to top, rgba(8,8,10,.85), transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-soft);
}
.gen-tile:hover .gen-tile-cap { opacity: 1; }
.gen-tile-cap p {
  font-size: 0.72rem; line-height: 1.4; color: var(--ink-100);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gen-tile-cap span { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.1em; color: var(--ink-300); }
.gen-tile-badge {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.1em;
  background: rgba(8,8,10,.7); color: var(--ink-100);
  padding: 3px 8px; border-radius: var(--radius-full);
}

/* Composer genérico (mismo shell que Imagen Premium) */
.gen-composer {
  position: sticky; bottom: 0;
  z-index: 10; /* position:sticky abre su propio stacking context — sin esto, el fan de cards (z-index 1-3) lo tapa */
  padding: 10px 0 32px;
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.gen-box {
  display: flex; flex-direction: column; gap: 10px;
  width: min(860px, 100%);
  margin-inline: auto;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 12px 10px 16px;
  transition: border-color var(--dur-fast);
}
.gen-box:focus-within { border-color: var(--border-strong); }
/* Arrastrando un archivo encima del composer: el borde discontinuo dice
   "suelta aquí" sin mover nada de sitio (nada de recolocar la caja al vuelo,
   que hace fallar la puntería justo cuando hay que soltar). */
.gen-composer.is-drop .gen-box {
  border-color: var(--text-secondary);
  border-style: dashed;
  background: var(--surface);
}
.gen-box textarea, .gen-box input[type="text"] {
  width: 100%;
  background: transparent; border: none; outline: none; resize: none;
  color: var(--text);
  font-family: inherit; font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1.55;
  max-height: 120px;
  padding: 2px 4px 0;
}
.gen-box textarea::placeholder, .gen-box input::placeholder { color: var(--text-faint); }

.gen-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* De borde a borde. Aquí son ocho controles y "Generar video" es ancho: los
   pills van más ajustados y el botón estira hasta el borde con lo que sobre.
   Si aun así la fila se parte, el botón llena la suya en vez de quedar suelto
   a la izquierda. */
.gen-bar--wide { justify-content: flex-start; gap: 6px; flex-wrap: nowrap; }
.gen-bar--wide .cbar-spacer { display: none; }
/* Igual que en Imagen: la fila no se parte y ceden solo las etiquetas de texto
   variable (modelo, avatar, escenario). */
.gen-bar--wide > * { flex: none; }
.gen-bar--wide > .vd-model-picker:has(#vdModelBtn) { flex: 0 1 auto; min-width: 104px; }
.gen-bar--wide > .ava-picker,
.gen-bar--wide > .iv-scene-btn { flex: none; min-width: 0; }
.gen-bar--wide #vdModelBtn, .gen-bar--wide .ava-select-main, .gen-bar--wide .ava-pill { min-width: 0; }
/* El boton no puede salirse de su picker cuando la fila aprieta: antes la
   flecha se montaba encima del pill de Avatar. */
.gen-bar--wide .vd-model-picker > #vdModelBtn { max-width: 100%; box-sizing: border-box; }
.gen-bar--wide #vdModelBtn > svg { flex: none; }
#vdResBtn { gap: 5px; }
#vdModelLabel, #vdSceneLabel {
  display: inline-block; min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gen-bar--wide .gen-pill { padding: 7px 11px; }
.gen-bar--wide .ava-pill { padding: 4px 10px 4px 3px; font-size: 0.75rem; }
.gen-bar--wide .ava-pill .ava-select-ic { width: 19px; height: 19px; }
.gen-bar--wide .ava-pill .ava-select-ic svg { width: 11px; height: 11px; }
/* Anclado al borde derecho con su margen automático, del ancho de su leyenda:
   ya no estira, así que tampoco hace falta centrar el texto ni agrandarlo. */
.gen-bar--wide .gen-generate { flex: none; margin-left: auto; }

.gen-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 7px 13px;
  font-family: inherit; font-size: 0.8rem; font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.gen-pill:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.gen-pill svg { width: 12px; height: 12px; }
.gen-pill .frames-sym { font-size: 0.62rem; }
.gen-pill.is-active, .gen-pill.is-active:hover {
  background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg);
}
.gen-pill-static { cursor: default; color: var(--text-muted); }
.gen-pill-static:hover { background: transparent; border-color: var(--border); color: var(--text-muted); }

.gen-count {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px 6px;
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-muted);
}
.gen-count button {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: transparent; border: none;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.gen-count button:hover { background: var(--surface-hover); color: var(--text); }

.gen-generate {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-bg); color: var(--accent-fg);
  border: none; border-radius: var(--radius-md);
  padding: 9px 18px;
  font-family: inherit; font-size: 0.88rem; font-weight: 550;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
}
.gen-generate:hover:not(:disabled) { transform: translateY(-1px); opacity: 0.92; }
.gen-generate:disabled { opacity: 0.3; cursor: default; }
.gen-generate .digits { font-size: 0.72rem; opacity: 0.85; }

/* ============================================================
   COVER ART CREATOR — campos del wizard
   ============================================================ */
.cv-box { max-width: 100%; }
.cv-row { display: flex; gap: 10px; }
.cv-field { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.cv-field-sm { flex: 0 0 180px; }
.cv-field-l {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  color: var(--text-faint);
}
/* Cajas de texto visibles — TÍTULO, ARTISTA, CONCEPTO, GÉNERO por igual.
   La especificidad extra (.cv-box …) vence a `.gen-box input[type=text]`
   que dejaba los inputs transparentes/sin borde. */
.cv-box .cv-field input,
.cv-box .cv-field select,
.cv-box .cv-field textarea {
  width: 100%;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  color: var(--text);
  font-family: inherit; font-size: 0.86rem; line-height: 1.5;
  max-height: none;
  outline: none;
  transition: border-color var(--dur-fast);
}
.cv-box .cv-field input::placeholder,
.cv-box .cv-field textarea::placeholder { color: var(--text-faint); }
.cv-box .cv-field input:focus,
.cv-box .cv-field select:focus,
.cv-box .cv-field textarea:focus { border-color: var(--border-strong); }
/* GÉNERO: flecha claramente visible para cambiar opciones */
.cv-box .cv-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px;
  padding-right: 36px;
}
.cv-box .cv-field select:hover { border-color: var(--border-strong); }
.cv-moodrow { display: flex; flex-direction: column; gap: 6px; }
.cv-mood { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-mood .gen-pill { padding: 5px 11px; font-size: 0.76rem; }

/* Referencias · Avatar — misma fila de herramientas que Imagen Premium */
.cv-refs { display: flex; flex-direction: column; gap: 8px; }
.cv-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-refs .attach-strip { margin: 0; }

/* El concepto (textarea) hereda el look de la caja, con altura cómoda */
.cv-box textarea#cvPrompt { min-height: 44px; }

/* Campo con botón "×" para borrar el texto (título, artista, concepto) */
.cv-clear-wrap { position: relative; }
.cv-clear-wrap input, .cv-clear-wrap textarea { padding-right: 34px; }
.cv-clear {
  position: absolute; top: 7px; right: 7px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: transparent; border: none; border-radius: var(--radius-full);
  color: var(--text-faint); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cv-clear:hover { background: var(--surface-hover); color: var(--text); }
.cv-clear[hidden] { display: none; }
.cv-clear svg { width: 12px; height: 12px; stroke-width: 2; }
/* En el textarea, la X se ancla arriba a la derecha */
.cv-clear-area { top: 8px; }

/* Fila de controles: género (compacto) + mood */
.cv-controls { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cv-field-inline { flex: 0 0 176px; }
.cv-controls .cv-moodrow { flex: 1; min-width: 220px; }

/* Toggle Parental Advisory */
.cv-adv { display: flex; }
.cv-toggle {
  display: inline-flex; align-items: center; gap: 11px;
  background: transparent; border: none; cursor: pointer;
  padding: 3px 2px;
  font-family: inherit; font-size: 0.82rem; color: var(--text-secondary);
  text-align: left;
}
.cv-toggle-track {
  position: relative; flex: none;
  width: 38px; height: 22px;
  background: var(--border); border-radius: var(--radius-full);
  transition: background var(--dur-fast);
}
.cv-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--text-muted); border-radius: var(--radius-full);
  transition: transform var(--dur-base) var(--ease-out-soft), background var(--dur-fast);
}
.cv-toggle.is-on .cv-toggle-track { background: var(--accent-bg); }
.cv-toggle.is-on .cv-toggle-thumb { transform: translateX(16px); background: var(--accent-fg); }
.cv-toggle:hover { color: var(--text); }
.cv-toggle:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 3px; border-radius: var(--radius-sm); }
.cv-toggle-label { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cv-toggle.is-on .cv-toggle-label { color: var(--text); }

/* Sello Parental Advisory — negro/blanco icónico (chip del formulario) */
.pa-badge {
  display: inline-flex; align-items: center;
  background: #000; color: #fff;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.52rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.25);
  white-space: nowrap;
}

/* Sello Parental Advisory oficial (imagen real) superpuesto al cover */
.pa-mark {
  position: absolute; left: 5.5%; bottom: 5.5%;
  z-index: 3;
  width: 18.9%; min-width: 53px; max-width: 105px;
  height: auto; display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  pointer-events: none;
}

/* ============================================================
   WORKFLOW STUDIO
   ============================================================ */
.wf-head { text-align: center; margin: 8px 0 22px; }
/* el tamaño lo pone .gen-title (patrón único de toda la app); aquí solo el aire */
.wf-head h1 { margin: 8px 0 6px; }
.wf-head .gen-hero-sub { margin-inline: auto; }

/* ── WORKFLOWS — tarjetas 2 en 2, mismo contenido que la landing ── */
/* Tarjetas ~50% más pequeñas: 4 por fila en escritorio (antes 2), responsivo */
/* Tarjetas ~una cuarta parte más chicas que las originales, pero legibles:
   3 por fila en escritorio (antes 2), texto que cabe completo. */
.wfx-2col { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(14px, 1.6vw, 18px); margin-top: clamp(24px, 3vw, 34px); }
@media (max-width: 620px) { .wfx-2col { grid-template-columns: 1fr; } }
.wfx {
  position: relative; display: block;
  aspect-ratio: 1.75 / 1;
  background: #050506;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 70px -48px rgba(0,0,0,.9);
  cursor: pointer;
  transition: transform var(--dur-slow) var(--ease-out-cine), border-color var(--dur-base), box-shadow var(--dur-base);
}
.wfx:hover {
  border-color: var(--border-strong); transform: translateY(-8px) scale(1.012);
  box-shadow: 0 60px 110px -50px rgba(0,0,0,.96), 0 0 0 1px rgba(255,255,255,.05), 0 0 60px -20px rgba(120,140,220,.12);
}
.wfx .ph, .wfx-slide img { transition: transform 700ms var(--ease-out-cine); }
.wfx:hover .ph { transform: scale(1.07); }
.wfx:hover .wfx-slide img { transform: scale(1.08); }
.wfx-cap-t { transition: transform var(--dur-base) var(--ease-out-cine); }
.wfx:hover .wfx-cap-t { transform: translateY(-1px); }
@media (max-width: 560px) { .wfx { aspect-ratio: 16 / 10; } }

/* Media de fondo (llena toda la tarjeta) */
.wfx-vis { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #050506; }
.wfx-vis .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88); }

/* Overlay: pill arriba-izquierda, título + botón abajo-izquierda */
.wfx-info {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  padding: 14px;
  background: linear-gradient(to top, rgba(5,5,7,.88) 0%, rgba(5,5,7,.34) 46%, rgba(5,5,7,.06) 74%, transparent 100%);
}
.wfx-tag {
  align-self: flex-start; margin-bottom: auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(8,8,10,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-full);
  padding: 5px 12px 5px 6px;
}
.wfx-ico {
  width: 22px; height: 22px; flex: none;
  border-radius: 6px;
  background: rgba(255,255,255,.14);
  display: grid; place-items: center;
  color: #fff;
}
.wfx-ico svg { width: 13px; height: 13px; }
.wfx-name { color: #fff; font-weight: 600; font-size: 0.78rem; letter-spacing: -0.01em; line-height: 1.1; }
.wfx-idx, .wfx-desc { display: none; }
.wfx-title {
  color: #fff; font-size: clamp(1rem, 1.35vw, 1.3rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 10px;
  max-width: 100%; text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.wfx-go {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #08080a;
  border-radius: var(--radius-full);
  padding: 7px 13px;
  font-weight: 600; font-size: 0.76rem;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.wfx-go svg { width: 13px; height: 13px; }
.wfx:hover .wfx-go { transform: translateY(-1px); }
.wfx:hover .wfx-go svg { transform: translateX(3px); }

/* Ocultamos el chrome antiguo que ensuciaba el overlay */
.wfx .wfx-badge, .wfx .wfx-cap, .wfx .wfx-timeline, .wfx .wfx-grade,
.wfx .upc-lo, .wfx .upc-line, .wfx .upc-handle, .wfx .upc-range { display: none; }
/* Retratos: encuadre hacia la cabeza para no cortarla */
.wfx-grade-a { object-position: center 18%; filter: saturate(1.02) contrast(1.03); }
.wfx-grade-b { filter: saturate(.95) contrast(1.04); }
/* Modelos: sube el encuadre para mostrar la cara completa */
.wfx-grade-c { object-position: center 12%; filter: saturate(.96) contrast(1.03); }
/* Estudio de producto: zapato un poco "más lejos" (zoom-out) y centrado */
.wfx-grade-d { object-position: center 45%; filter: saturate(.96) contrast(1.04); transform: scale(0.84); }
.wfx:hover .wfx-grade-d { transform: scale(0.9); }
.wfx-slide { position: absolute; inset: 0; z-index: 1; }
.wfx-slide .ph { opacity: 0; transition: opacity 1s var(--ease-out-cine); }
.wfx-slide .ph.on { opacity: 1; }
.upc { position: absolute; inset: 0; z-index: 1; --p: 46%; }
.upc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upc .upc-hi { filter: saturate(1.04) contrast(1.04); }
.upc .upc-lo { image-rendering: pixelated; filter: saturate(.62) contrast(.95) brightness(.97); clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.upc-line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; z-index: 3; background: rgba(255,255,255,.92); transform: translateX(-1px); box-shadow: 0 0 12px rgba(0,0,0,.5); pointer-events: none; }
.upc-handle {
  position: absolute; top: 50%; left: var(--p); transform: translate(-50%, -50%); z-index: 4;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(8,8,10,.45); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6);
  display: grid; place-items: center;
  pointer-events: none;
}
.upc-handle svg { width: 16px; height: 16px; stroke: #fff; }
.upc-range { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.wfx-grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,6,.12) 0%, rgba(5,5,6,0) 32%, rgba(5,5,6,.55) 100%); z-index: 2; pointer-events: none; }
.wfx-badge {
  position: absolute; top: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(8,8,10,.6); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em;
  color: #fff;
}
.wfx-badge.tl { left: 12px; }
.wfx-badge.tr { right: 12px; }
.wfx-re {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 4px;
  background: #fff; color: #08080a;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.52rem; letter-spacing: -0.04em;
}
.wfx-cap { position: absolute; left: 14px; bottom: 13px; z-index: 5; max-width: 82%; }
.wfx-cap-over { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.wfx-cap-t { display: block; margin-top: 2px; color: #fff; font-weight: 600; font-size: 0.92rem; letter-spacing: -0.015em; text-shadow: 0 2px 14px rgba(0,0,0,.65); }
.wfx-timeline { position: absolute; left: 12px; right: 12px; bottom: 6px; z-index: 5; height: 2px; background: rgba(255,255,255,.2); border-radius: 2px; overflow: hidden; }
.wfx-timeline span { position: absolute; inset: 0; width: 40%; background: rgba(255,255,255,.85); animation: wfxTl 4s linear infinite; }
@keyframes wfxTl { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* ── CANVAS DIGITAL — teaser en Workflow Studio + editor de nodos ── */
.canvas-block { margin-top: clamp(40px, 5vw, 64px); }
.canvas-intro { max-width: 60ch; margin-bottom: clamp(18px, 2.4vw, 26px); }
.canvas-intro .overline { display: inline-flex; align-items: center; gap: 8px; }
.canvas-intro .overline .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 22%, transparent);
}
.canvas-intro h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: 12px; }
.canvas-intro p { color: var(--text-muted); margin-top: 10px; font-size: 0.92rem; line-height: 1.6; }

.canvas-wrap {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #08080b;
  box-shadow: 0 50px 110px -60px rgba(0,0,0,.95);
}
/* El canvas es una superficie oscura fija en los dos temas (fondo #08080b),
   así que su contenido usa la rampa de tinta directamente: con --text-muted /
   --border-subtle el texto se volvía oscuro sobre negro en modo claro. */
.canvas-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--ink-700);
  background: color-mix(in srgb, var(--ink-900) 70%, transparent);
  position: relative; z-index: 5;
}
.canvas-bar .cb-l { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em; color: var(--ink-300); }
.canvas-bar .cb-re {
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--ink-000); color: var(--ink-950);
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.5rem; letter-spacing: -0.04em;
}
.canvas-bar .cb-r { display: inline-flex; align-items: center; gap: 6px; }
.cb-chip {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.04em;
  color: var(--ink-300);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
}
.cb-chip.add { background: var(--ink-000); color: var(--ink-950); border-color: var(--ink-000); font-weight: 600; }
.cb-home {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  color: var(--ink-300);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.cb-home:hover { background: var(--ink-800); color: var(--ink-100); border-color: var(--ink-600); }
.cb-home svg { width: 12px; height: 12px; stroke-width: 2; }

/* Teaser clicable en Workflow Studio — abre el Canvas de pantalla completa.
   Lleva también la clase .canvas-wrap (borde/fondo/radius/position:relative);
   acá solo se resetean las propiedades de <button> que pisarían eso. */
.canvas-teaser { display: block; width: 100%; padding: 0; margin: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-out-soft); }
.canvas-teaser:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.canvas-teaser-grid {
  position: relative;
  aspect-ratio: 1200 / 460;
  background:
    radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.3px) -1px -1px / 28px 28px,
    #0a0a0e;
}
.ctg-node {
  position: absolute;
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
  border: 1px solid var(--ink-600);
  border-radius: 10px;
}
.ctg-node-1 { left: 6%; top: 14%; width: 20%; height: 34%; }
.ctg-node-2 { left: 6%; top: 56%; width: 20%; height: 32%; }
.ctg-node-3 { left: 30%; top: 18%; width: 13%; height: 64%; }
.ctg-node-4 { left: 47%; top: 12%; width: 27%; height: 62%; }
.ctg-node-5 { left: 78%; top: 26%; width: 18%; height: 46%; }
.canvas-teaser-cta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink-000); color: var(--ink-950);
  border-radius: var(--radius-full);
  padding: 12px 22px;
  font-weight: 600; font-size: 0.92rem;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.9);
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.canvas-teaser-cta svg { width: 15px; height: 15px; }
.canvas-teaser:hover .canvas-teaser-cta { transform: translate(-50%, -50%) translateY(-2px); }

/* Editor de nodos */
.canvas-grid {
  position: relative; width: 100%;
  aspect-ratio: 1200 / 680;
  background: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.3px) -1px -1px / 28px 28px, #0a0a0e;
  overflow: hidden;
}
.cn-tools {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 6;
  display: flex; flex-direction: column; gap: 2px;
  background: color-mix(in srgb, var(--ink-900) 82%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: 15px;
  padding: 5px;
  backdrop-filter: blur(10px);
}
.cn-tools button {
  width: 30px; height: 30px; border-radius: 9px;
  border: none; background: transparent; color: var(--text-muted);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.cn-tools button:hover { background: var(--ink-800); color: var(--text); }
.cn-tools button.on { background: var(--ink-000); color: var(--ink-950); }
.cn-tools button svg { width: 15px; height: 15px; }
.cn-tools .sep { height: 1px; background: var(--border-subtle); margin: 3px 5px; }

.cn-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.cn-wire { fill: none; stroke: #5b7cff; stroke-width: 1.8; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(91,124,255,.5)); }
.cn-wire-text { fill: none; stroke: #9d7bff; stroke-width: 1.8; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(157,123,255,.5)); }
.cn-dot { fill: #fff; filter: drop-shadow(0 0 5px rgba(255,255,255,.95)); }
.cn-dot.blue { fill: #cdd6ff; filter: drop-shadow(0 0 6px rgba(91,124,255,.95)); }
.cn-dot.viol { fill: #e2d6ff; filter: drop-shadow(0 0 6px rgba(157,123,255,.95)); }

.cn-node {
  position: absolute;
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
  border: 1px solid var(--ink-600);
  border-radius: 14px;
  z-index: 3;
  box-shadow: 0 28px 54px -22px rgba(0,0,0,.88);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.cn-node:hover { transform: translateY(-3px); border-color: var(--ink-400); }
.cn-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--ink-800);
  font-size: 0.64rem; color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: 0.02em;
  flex: none;
}
.cn-bar .cn-ico {
  width: 18px; height: 18px; flex: none;
  border-radius: 5px;
  background: var(--ink-800);
  display: grid; place-items: center;
  color: var(--text);
}
.cn-bar .cn-ico svg { width: 11px; height: 11px; }
.cn-fname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cn-bar .cn-badge {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 0.5rem; color: var(--text-muted);
  background: var(--ink-800);
  border-radius: 4px; padding: 2px 6px;
  flex: none;
}
.cn-pic { width: 100%; flex: 1; object-fit: cover; min-height: 0; display: block; }
.cn-img .cn-pic, .cn-gen .cn-pic, .cn-vid .cn-pic { flex: none; height: auto; }
.cn-img .cn-pic { aspect-ratio: 16 / 9; }
.cn-gen .cn-pic, .cn-vid .cn-pic { aspect-ratio: 4 / 3; }
.cn-text .cn-body {
  flex: 1; min-height: 0;
  padding: 10px 12px;
  font-size: 0.58rem; line-height: 1.45;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent);
  mask-image: linear-gradient(180deg, #000 84%, transparent);
}
.cn-text .cn-body b { display: block; color: var(--text); font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 7px; }
.cn-text .cn-body b:first-child { margin-top: 0; }
.cn-text .cn-body p { margin: 1px 0 0; color: var(--text-muted); }
.cn-gen { border-color: rgba(255,255,255,.42); box-shadow: 0 28px 54px -20px rgba(0,0,0,.88), 0 0 0 1px rgba(255,255,255,.14), 0 0 30px -10px rgba(255,255,255,.12); }
.cn-gen:hover { border-color: rgba(255,255,255,.62); }
.cn-controls { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-top: 1px solid var(--ink-800); }
.cn-ctl { font-family: var(--font-mono); font-size: 0.5rem; color: var(--text-muted); border: 1px solid var(--ink-700); border-radius: 5px; padding: 3px 7px; white-space: nowrap; }
.cn-run { margin-left: auto; font-family: var(--font-sans); font-size: 0.56rem; font-weight: 600; color: var(--ink-950); background: var(--ink-000); border-radius: 6px; padding: 4px 10px; }
.cn-tl { position: absolute; left: 9px; right: 9px; bottom: 42px; z-index: 4; height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.cn-tl i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.85); animation: cnTl 4s linear infinite; }
@keyframes cnTl { 0% { width: 8%; } 100% { width: 94%; } }

.cn-gentools {
  position: absolute; transform: translateX(-50%); z-index: 9;
  display: flex; gap: 2px;
  background: color-mix(in srgb, var(--ink-850) 92%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 4px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.8);
}
.cn-gentools button {
  width: 26px; height: 26px; border-radius: 7px;
  border: none; background: transparent; color: var(--text-muted);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.cn-gentools button:hover { background: var(--ink-800); color: var(--text); }
.cn-gentools .gt-sep { width: 1px; background: var(--border-subtle); margin: 3px 2px; }
.cn-gentools button svg { width: 13px; height: 13px; }
.cn-gentools button.play { color: var(--text); }
.cn-gentools button.play svg { fill: currentColor; stroke: none; }

.cn-conn {
  position: absolute; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #1c1c25, #0c0c12);
  border: 1.5px solid rgba(255,255,255,.22);
  display: grid; place-items: center;
  color: rgba(255,255,255,.92);
  z-index: 8;
  box-shadow: 0 5px 15px -4px rgba(0,0,0,.85);
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms;
}
.cn-conn::after { content: ""; position: absolute; inset: 7px; border-radius: 6px; background: #26262f; border: 1px solid rgba(255,255,255,.14); }
.cn-conn:hover { border-color: rgba(123,148,255,.95); box-shadow: 0 5px 16px -4px rgba(0,0,0,.85), 0 0 16px -2px rgba(91,124,255,.75); }
.cn-conn svg { position: relative; z-index: 2; width: 13px; height: 13px; }
.cn-conn.text { border-color: rgba(157,123,255,.45); }
.cn-conn.text::after { background: #2a2438; }
.cn-conn.text:hover { border-color: rgba(157,123,255,.95); box-shadow: 0 5px 16px -4px rgba(0,0,0,.85), 0 0 16px -2px rgba(157,123,255,.75); }

/* Posiciones de nodos, conectores y toolbar flotante — en clases, no en
   style="" inline: la CSP de la app (style-src sin unsafe-inline) bloquea
   los atributos style de HTML en silencio. */
.cn-node-char { left: 6%; top: 12%; width: 23%; }
.cn-node-prod { left: 6%; top: 54%; width: 23%; }
.cn-text { left: 30%; top: 20%; width: 13%; height: 52%; }
.cn-gen { left: 45%; top: 12%; width: 29%; }
.cn-vid { left: 75%; top: 28%; width: 23%; }
.cn-gentools { left: 59.5%; top: 7%; }
.cn-conn-1 { left: 29%; top: 30%; }
.cn-conn-2 { left: 29%; top: 72%; }
.cn-conn-3 { left: 30%; top: 44%; }
.cn-conn-4 { left: 43%; top: 47%; }
.cn-conn-5 { left: 45%; top: 38%; }
.cn-conn-6 { left: 74%; top: 38%; }
.cn-conn-7 { left: 75%; top: 52.5%; }

.cn-foot { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; border-top: 1px solid var(--border-subtle); }
.cn-foot span, .cn-foot-r { font-family: var(--font-mono); font-size: 0.58rem; color: var(--text-muted); }
.cn-foot-r { display: inline-flex; align-items: center; gap: 12px; }
.cn-mini {
  width: 46px; height: 26px;
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  background: radial-gradient(circle, rgba(255,255,255,.06) .5px, transparent 1px) 0 0 / 6px 6px;
}

@media (max-width: 720px) {
  .canvas-grid { aspect-ratio: 1200 / 900; }
  .cn-tools { display: none; }
  .cn-text .cn-body b { font-size: 0.44rem; }
  .cn-text .cn-body { font-size: 0.5rem; }
}

/* Modo Canvas — pantalla completa, sin sidebar ni topbar */
.canvas-view {
  position: fixed; inset: 0; z-index: 400;
  background: #08080b;
  display: flex; flex-direction: column;
}
.canvas-view[hidden] { display: none; }
.canvas-wrap-full { border: none; border-radius: 0; height: 100%; display: flex; flex-direction: column; box-shadow: none; }
.canvas-wrap-full .canvas-grid { flex: 1; aspect-ratio: auto; }
@media (max-width: 720px) { .canvas-wrap-full .canvas-grid { aspect-ratio: auto; } }

/* ============================================================
   DOCUMENT BUILDER
   ============================================================ */
.dc-types {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 24px;
}
.dc-type {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 9px 16px;
  font-family: inherit; font-size: 0.84rem; font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.dc-type svg { width: 15px; height: 15px; }
.dc-type:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border); }
.dc-type.is-active, .dc-type.is-active:hover { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); }

.dc-panel { display: grid; grid-template-columns: 1fr 300px; gap: 22px; margin-bottom: 30px; }
.dc-form { display: flex; flex-direction: column; gap: 16px; }
.dc-extra { display: flex; flex-direction: column; gap: 12px; }
.dc-extra[hidden] { display: none; }

/* Campos del Document Builder — mismo lenguaje oscuro que el resto de la app.
   (Antes heredaban el estilo blanco por defecto del navegador porque las
   reglas de campos están limitadas a `.cv-box`.) */
.dc-form .cv-field input,
.dc-form .cv-field select,
.dc-form .cv-field textarea {
  width: 100%;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--text);
  font-family: inherit; font-size: 0.86rem; line-height: 1.5;
  outline: none;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.dc-form .cv-field input::placeholder,
.dc-form .cv-field textarea::placeholder { color: var(--text-faint); }
.dc-form .cv-field input:hover,
.dc-form .cv-field select:hover,
.dc-form .cv-field textarea:hover {
  border-color: var(--border);
  background-color: var(--surface);
}
.dc-form .cv-field input:focus,
.dc-form .cv-field select:focus,
.dc-form .cv-field textarea:focus {
  border-color: var(--border-strong);
  background-color: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.dc-form .cv-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
  padding-right: 38px;
}
.dc-form .cv-field-l { margin-bottom: 1px; }

/* Fila de identidad: logo + marca/estudio */
.dc-brandrow { display: flex; align-items: flex-end; gap: 14px; }
.cv-field-logo { flex: 0 0 auto; }
.dc-logo {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background-color: var(--bg-subtle);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-faint);
  cursor: pointer; overflow: hidden;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}
.dc-logo:hover { border-color: var(--border-strong); background-color: var(--surface); color: var(--text-muted); }
.dc-logo.is-drop { border-color: var(--text); background-color: var(--surface-hover); }
.dc-logo.has-img { border-style: solid; }
.dc-logo-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dc-logo-img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.dc-logo-remove {
  display: block; margin-top: 6px;
  background: transparent; border: none; padding: 0;
  color: var(--text-faint); font: inherit; font-size: 0.7rem;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.dc-logo-remove:hover { color: var(--text); }

/* Logo cargado dentro de la vista previa del documento */
.dc-doc-brand img.dc-doc-logo {
  width: 18px; height: 18px; object-fit: contain;
  filter: none; border-radius: 4px;
}

.dc-preview {
  background: var(--ink-950);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  align-self: start;
}
.dc-doc { font-family: var(--font-sans); }
.dc-doc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dc-doc-brand { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--ink-300); }
.dc-doc-brand img { border-radius: 4px; }   /* icon-white.png: blanco real, sin invert */
.dc-doc-tag {
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em;
  border: 1px solid var(--ink-600); border-radius: var(--radius-full);
  padding: 3px 9px; color: var(--ink-300);
}
.dc-doc-title { font-size: 1.05rem; font-weight: 600; color: var(--ink-100); letter-spacing: var(--tracking-snug); margin-bottom: 4px; }
.dc-doc-meta { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-500); margin-bottom: 16px; }
.dc-doc-parties { display: flex; gap: 16px; margin-bottom: 18px; }
.dc-doc-party { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.dc-doc-party span { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; color: var(--ink-500); text-transform: uppercase; }
.dc-doc-party em { font-style: normal; font-size: 0.8rem; color: var(--ink-200); }
.dc-doc-sec { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--ink-400); margin: 14px 0 8px; }
.dc-doc-line { height: 7px; border-radius: 3px; background: var(--ink-800); margin-bottom: 6px; }
.dc-doc-line.short { width: 60%; }

/* --- Document Builder: generación real con Claude Sonnet 5 --- */
/* Barra de conexión de API key */
.dc-keybar {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 13px;
}
.dc-keybar.is-connected { flex-direction: row; align-items: center; justify-content: space-between; }
.dc-key-ok { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--text); }
.dc-key-ok svg { width: 15px; height: 15px; color: var(--success); }
.dc-key-change { background: transparent; border: none; color: var(--text-muted); font: inherit; font-size: 0.78rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dc-key-change:hover { color: var(--text); }
.dc-key-row { display: flex; gap: 8px; }
.dc-key-row input {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 11px; color: var(--text);
  font-family: var(--font-mono); font-size: 0.82rem; outline: none;
  transition: border-color var(--dur-fast);
}
.dc-key-row input:focus { border-color: var(--border-strong); }
.dc-key-save {
  background: var(--accent-bg); color: var(--accent-fg); border: none;
  border-radius: var(--radius-sm); padding: 9px 16px; font: inherit; font-weight: 600; font-size: 0.82rem;
  cursor: pointer; transition: opacity var(--dur-fast);
}
.dc-key-save:hover { opacity: 0.9; }
.dc-key-help { font-size: 0.72rem; color: var(--text-faint); line-height: 1.4; }

/* Documento generado (Markdown → HTML) */
.dc-doc-body { max-height: 62vh; overflow-y: auto; padding-right: 6px; }
.dc-doc-body h1 { font-size: 1.15rem; font-weight: 650; color: var(--ink-100); letter-spacing: var(--tracking-snug); margin: 6px 0 10px; }
.dc-doc-body h2 { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); margin: 18px 0 8px; }
.dc-doc-body h3, .dc-doc-body h4 { font-size: 0.86rem; font-weight: 600; color: var(--ink-200); margin: 14px 0 6px; }
.dc-doc-body p { font-size: 0.84rem; line-height: 1.6; color: var(--ink-200); margin: 0 0 9px; }
.dc-doc-body ul, .dc-doc-body ol { margin: 0 0 10px; padding-left: 20px; }
.dc-doc-body li { font-size: 0.84rem; line-height: 1.55; color: var(--ink-200); margin-bottom: 4px; }
.dc-doc-body strong { color: var(--ink-100); font-weight: 650; }
.dc-doc-body code { font-family: var(--font-mono); font-size: 0.78rem; background: var(--ink-800); padding: 1px 5px; border-radius: 4px; }
.dc-doc-body hr { border: none; border-top: 1px solid var(--border-subtle); margin: 14px 0; }

/* Estado de carga */
.dc-doc-status { display: flex; align-items: center; gap: 10px; padding: 26px 0; color: var(--text-muted); font-size: 0.86rem; }
.dc-spin {
  width: 15px; height: 15px; flex: none;
  border: 2px solid var(--border); border-top-color: var(--text);
  border-radius: var(--radius-full);
  animation: dcSpin 0.7s linear infinite;
}
@keyframes dcSpin { to { transform: rotate(360deg); } }
.dc-doc.is-loading { opacity: 0.9; }

/* Estado de error */
.dc-doc-error { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); padding: 8px 0; }
.dc-doc-error strong { color: var(--error); }
.dc-err-detail { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); word-break: break-word; }

/* Botón generando */
.gen-generate.is-busy { opacity: 0.55; cursor: default; }

.dc-listwrap[hidden] { display: none; }
.dc-listwrap > .overline { margin-bottom: 12px; }
.dc-list { display: flex; flex-direction: column; gap: 10px; }
.dc-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  animation: rise var(--dur-base) var(--ease-out-cine);
}
.dc-item-ic {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}
.dc-item-ic svg { width: 18px; height: 18px; }
.dc-item-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-item-name { font-size: 0.92rem; font-weight: 550; }
.dc-item-sub { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--text-faint); text-transform: uppercase; }
.dc-item-dl {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 6px 13px; font-size: 0.78rem; color: var(--text-secondary);
  background: transparent; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.dc-item-dl:hover { background: var(--surface-hover); color: var(--text); }
.dc-item-dl svg { width: 12px; height: 12px; }

/* ============================================================
   VIDEO
   ============================================================ */
.vd-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,.9);
  font-size: 1.1rem;
  background: rgba(8,8,10,.18);
  opacity: 0; transition: opacity var(--dur-fast);
}
.gen-tile .vd-play { opacity: 1; background: rgba(8,8,10,.28); }

/* Banner de video — mismo lenguaje visual que el panel de login (assets/login) */
.vd-banner {
  position: relative;
  width: min(860px, 100%);   /* mismo ancho que el composer (.gen-box) — simétrico */
  aspect-ratio: 16 / 7.2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 26px 54px -22px rgba(0,0,0,.8);
}
.vd-banner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-banner-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,8,10,.75), transparent 46%),
    linear-gradient(to bottom, rgba(8,8,10,.35), transparent 26%);
}
.vd-banner-brand { position: absolute; top: 16px; left: 18px; height: 20px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.vd-banner-cap {
  position: absolute; left: 18px; right: 18px; bottom: 14px;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  color: var(--ink-100); text-shadow: 0 1px 10px rgba(0,0,0,.6);
}

/* Selector de modelo (con logo) y duración (barra) del composer de Video —
   ambos van a la izquierda de la barra, así que el menú se ancla a la
   izquierda del botón (el menú de #modelMenu del agente se ancla a la
   derecha porque ese picker vive al final de su barra) */
.vd-model-picker, .vd-dur-picker { position: relative; }
.vd-model-picker .model-menu { left: 0; right: auto; }
.model-logo-sym svg { width: 13px; height: 13px; }

.vd-dur-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  width: 118px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: 10px 12px 11px;
  z-index: 60;
  animation: palette-in var(--dur-fast) var(--ease-out-cine);
}
.vd-dur-pop[hidden] { display: none; }
.vd-dur-val { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); text-align: center; margin-bottom: 7px; }
.vd-dur-pop input[type="range"] { width: 100%; accent-color: var(--text); cursor: pointer; }

@media (max-width: 860px) {
  .dc-panel { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .gen-grid { columns: 2 150px; }
  .gen-grid-square { columns: 2 140px; }
  .cv-row { flex-direction: column; }
}

/* ============================================================
   IMAGEN PREMIUM — generación con grid de resultados
   ============================================================ */
.img-view {
  flex: 1;
  display: flex; flex-direction: column;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

/* ---- Hero vacío ---- */
.iv-hero {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  /* Huecos ajustados: todo (título, baraja, chip de continuar y composer) tiene
     que caber en la primera pantalla, y cada píxel que se ahorra aquí se lo
     queda la baraja, que es lo que se mira. */
  gap: 20px;
  padding: 8px 0 16px;
}
.iv-hero[hidden] { display: none; }

/* Cabecera al 80% de su tamaño anterior (título 48→38.4px, icono 44→35px):
   ocupaba demasiado en el estado vacío y ese alto se lo queda la baraja. */
.iv-title { display: flex; align-items: center; gap: 11px; }
.iv-title-ic {
  width: 35px; height: 35px; flex: none;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.iv-title-ic svg { width: 18px; height: 18px; color: var(--text); }
.iv-title h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

/* Descripción bajo el título: cada span es una línea (display: block), así que
   el salto no depende de dónde caiga el texto al traducir. */
.iv-sub {
  margin-top: -12px;          /* el hero ya separa 20px; aquí basta con menos */
  text-align: center;
  max-width: 60ch;            /* margen para el alemán, que es el más largo */
  margin-inline: auto;
  color: var(--text-muted);
  font-size: 0.76rem;         /* 15.2px → 12.16px, el mismo -20% que el título */
  line-height: 1.55;
  text-wrap: balance;
}
.iv-sub span { display: block; }

@media (max-width: 640px) {
  /* En teléfono la descripción ocupa cuatro líneas y el composer ya se lleva
     un tercio del alto: dejándola, la baraja se quedaba en 146px. Como todo
     tiene que caber sin scroll, la descripción es lo que cede — el título ya
     dice qué herramienta es. */
  .iv-sub { display: none; }
}

/* ---- Grid de generaciones (masonry) ---- */
.iv-gridwrap { flex: 1; padding: 8px 0 20px; }
.iv-gridwrap[hidden] { display: none; }
.iv-gridhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.iv-grid { columns: 3 260px; column-gap: 12px; }

/* Tamaño de los módulos — 5 pasos (paso 2 = default, 30% más grande que antes) */
.iv-grid[data-ivsize="0"] { columns: 5 150px; }
.iv-grid[data-ivsize="1"] { columns: 4 195px; }
.iv-grid[data-ivsize="3"] { columns: 2 360px; }
.iv-grid[data-ivsize="4"] { columns: 1 560px; }

.iv-zoom {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-faint);
}
.iv-zoom > svg { width: 12px; height: 12px; flex: none; }
.iv-zoom > svg:last-child { width: 15px; height: 15px; }
.iv-zoom input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 150px; height: 16px;
  background: transparent;
  cursor: pointer;
}
.iv-zoom input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--border);
}
.iv-zoom input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px; height: 13px;
  margin-top: -5px;
  border-radius: var(--radius-full);
  background: var(--text);
  border: none;
  transition: transform var(--dur-fast);
}
.iv-zoom input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.iv-zoom input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--border);
}
.iv-zoom input[type="range"]::-moz-range-progress {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
}
.iv-zoom input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: var(--radius-full);
  background: var(--text);
  border: none;
}
.iv-zoom input[type="range"]:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 4px; border-radius: var(--radius-full); }

.iv-gen {
  position: relative;
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  animation: rise var(--dur-base) var(--ease-out-cine);
}
.iv-gen img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-out-cine), transform 1200ms var(--ease-out-cine);
}
/* Las de sesiones anteriores no tienen aspect-ratio fijado: la altura la pone
   la propia imagen, que en un masonry se ve mejor y respeta su proporcion. */
.iv-gen.is-hist img, .iv-gen.is-hist video { height: auto; }
.iv-gen.is-hist { animation: rise var(--dur-slow) var(--ease-out-cine) both; }

/* ---- "Continuar sesion": lo anterior no se muestra de entrada, se abre desde
   este boton. Tres miniaturas apiladas + el numero. ---- */
.iv-resume { display: flex; justify-content: center; padding: 4px 0 14px; }
.iv-resume[hidden] { display: none; }
.iv-resume-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 9px 18px 9px 10px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text); font-family: inherit; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out-cine),
              border-color var(--dur-fast), background var(--dur-fast), opacity var(--dur-fast);
}
.iv-resume-btn:hover { transform: translateY(-2px); border-color: var(--border-strong); background: var(--surface-hover); }
.iv-resume-btn.is-going { opacity: 0; transform: translateY(-8px) scale(.97); }

.iv-resume-stack { display: inline-flex; align-items: center; }
.iv-resume-th {
  position: relative;
  width: 30px; height: 30px; flex: none;
  border-radius: 9px; overflow: hidden;
  border: 1.5px solid var(--surface);
  background: var(--bg-subtle);
  margin-left: -11px;
  transition: transform var(--dur-base) var(--ease-out-cine), margin var(--dur-base) var(--ease-out-cine);
}
.iv-resume-th:first-child { margin-left: 0; }
.iv-resume-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* al pasar el raton la baraja se abre un poco: da la pista de que hay mas */
.iv-resume-btn:hover .iv-resume-th { margin-left: -5px; }
.iv-resume-btn:hover .iv-resume-th:first-child { margin-left: 0; }

.iv-resume-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; }
.iv-resume-txt strong { font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em; }
.iv-resume-n { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
.iv-resume-chev { display: grid; place-items: center; color: var(--text-muted); }
.iv-resume-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.iv-resume-btn:hover .iv-resume-chev { color: var(--text); }
.iv-gen:hover img { transform: scale(1.03); }

/* Estado generando: shimmer + ◆ pulsando */
.iv-gen.is-loading {
  background: linear-gradient(110deg, var(--surface) 40%, var(--surface-hover) 50%, var(--surface) 60%);
  background-size: 220% 100%;
  animation: iv-shimmer 1.6s linear infinite;
}
@keyframes iv-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -90% 0; }
}
.iv-gen-sym {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--text-muted);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  animation: frame-pulse 1.5s var(--ease-in-out-cine) infinite;
}

.iv-gen-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 10px 9px;
  background: linear-gradient(to top, rgba(8,8,10,.85), transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-soft);
}
.iv-gen:hover .iv-gen-cap { opacity: 1; }
.iv-gen-cap p {
  font-size: 0.72rem; line-height: 1.4;
  color: var(--ink-100);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.iv-gen-cap span {
  font-family: var(--font-mono);
  font-size: 0.52rem; letter-spacing: 0.1em;
  color: var(--ink-300);
}

.iv-gen:not(.is-loading) { cursor: pointer; }
.iv-gen:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }

/* Vista Favoritos */
.fav-view { padding-top: 8px; }
.fav-head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
  padding: 26px 0 6px; margin-bottom: 22px;
}
.fav-head .gen-title { justify-content: center; }
.fav-head .gen-hero-sub { white-space: normal; max-width: 640px; margin-top: 0; }
.fav-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 240px; text-align: center;
  color: var(--text-muted); font-size: 0.92rem;
  max-width: 420px; margin: 40px auto 0;
}
.fav-empty[hidden] { display: none; }
.fav-grid[hidden] { display: none; }

/* Barra de acciones del tile — like, descargar, recrear, referencia, eliminar */
.iv-gen-actions {
  position: absolute; top: 8px; right: 8px;
  z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft);
}
.iv-gen:hover .iv-gen-actions,
.iv-gen:focus-within .iv-gen-actions { opacity: 1; transform: none; }
.iv-act {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: rgba(8, 8, 10, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--ink-100);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.iv-act svg { width: 15px; height: 15px; stroke-width: 1.9; fill: none; }
.iv-act:hover { background: rgba(8, 8, 10, 0.85); border-color: var(--border-strong); transform: scale(1.06); }
.iv-act:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }
/* Like activo: corazón relleno rojo */
.iv-act-like.is-on { color: #ff4d5e; border-color: transparent; }
.iv-act-like.is-on svg { fill: #ff4d5e; }
/* Eliminar en hover: rojo */
.iv-act-del:hover { background: var(--error); color: #fff; border-color: transparent; }

/* ---- Detalle de generación: imagen + prompt, referencias y acciones ---- */
/* El marco se ajusta a la pieza: con una caja de ancho fijo, una imagen 1:1
   dejaba dos franjas negras a los lados. Ahora la columna del medio la mide la
   propia imagen (max-content) y solo la barra lateral es fija. */
.iv-detail-box {
  width: max-content;
  max-width: min(1760px, 96vw);
  height: auto;
  max-height: 92vh;
  display: grid; grid-template-columns: auto clamp(300px, 24vw, 380px);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  animation: palette-in var(--dur-base) var(--ease-out-cine);
}
.iv-detail-media {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  min-height: 0;
  overflow: hidden;
}
/* alto definido en vh (no en %) para que la columna pueda medirse a partir de
   la proporcion real del archivo; el tope de ancho evita que una 21:9 se salga */
.iv-detail-media img {
  width: auto; height: auto;
  max-height: 88vh;
  max-width: min(1378px, calc(96vw - clamp(300px, 24vw, 380px) - 2px));
  display: block;
}
.iv-detail-side {
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 20px 22px;
  overflow-y: auto;
  border-left: 1px solid var(--border-subtle);
}
.iv-detail-head {
  display: flex; align-items: center; justify-content: space-between;
}
.iv-detail-head h2 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-tight); }
.iv-detail-blockhead {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.iv-detail-block > .overline { margin-bottom: 8px; }
.iv-detail-blockhead .overline { margin-bottom: 0; }
.iv-detail-copy {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 3px 11px;
  font-family: inherit; font-size: 0.68rem; font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.iv-detail-copy:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.iv-detail-prompt {
  font-size: 0.82rem; line-height: 1.6;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.iv-detail-meta {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--text-muted);
}
.iv-detail-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-detail-ref { width: 56px; text-align: center; }
.iv-detail-ref img {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  display: block;
}
.iv-detail-ref span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.5rem; letter-spacing: 0.06em;
  color: var(--text-faint);
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iv-detail-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto;
}
.iv-detail-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-family: inherit; font-size: 0.84rem; font-weight: 550;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
}
.iv-detail-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.iv-detail-btn svg { width: 14px; height: 14px; }
.iv-detail-btn.is-primary {
  background: var(--accent-bg); color: var(--accent-fg);
  border-color: var(--accent-bg);
}
.iv-detail-btn.is-primary:hover { background: var(--accent-bg); color: var(--accent-fg); transform: translateY(-1px); opacity: 0.92; }

@media (max-width: 860px) {
  .iv-detail-box { width: min(96vw, 620px); grid-template-columns: 1fr; height: auto; max-height: 92vh; overflow-y: auto; }
  .iv-detail-media { max-height: 48vh; flex: none; }
  .iv-detail-media img { height: auto; width: 100%; max-width: 100%; max-height: 48vh; }
  .vd-detail-media video { height: auto; width: 100%; max-width: 100%; max-height: 48vh; }
  .iv-detail-side { border-left: none; border-top: 1px solid var(--border-subtle); }
}

/* ---- Composer de generación ---- */
.iv-composer {
  position: sticky; bottom: 0;
  z-index: 10; /* position:sticky abre su propio stacking context — sin esto, el fan de cards (z-index 1-3) lo tapa */
  padding: 10px 0 10vh;
  background: linear-gradient(to top, var(--bg) 50%, transparent);
}
.iv-box {
  display: flex; flex-direction: column; gap: 10px;
  width: min(860px, 100%);
  margin-inline: auto;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 12px 10px 16px;
  transition: border-color var(--dur-fast);
}
.iv-box:focus-within { border-color: var(--border-strong); }
.iv-box textarea {
  width: 100%;
  background: transparent; border: none; outline: none; resize: none;
  color: var(--text);
  font-family: inherit; font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1.55;
  max-height: 120px;
  padding: 2px 4px 0;
}
.iv-box textarea::placeholder { color: var(--text-faint); }

/* Input con X para borrar el texto */
.clearable-input { position: relative; }
/* La X se aparta del borde derecho para no chocar con la barra de scroll
   (10px) cuando el prompt es largo; el padding deja aire al texto tras la X */
.clearable-input textarea { padding-right: 42px; }
.input-clear {
  position: absolute; top: 3px; right: 13px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: transparent; border: none; border-radius: var(--radius-full);
  color: var(--text-faint);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.input-clear:hover { background: var(--surface-hover); color: var(--text); }

/* ---- Menciones en color dentro del prompt (composer de vídeo) ----
   Un textarea no admite estilos por trozo de texto. El truco es pintar el
   MISMO texto en una capa de debajo —ahí las @ van en azul— y dejar el
   textarea con el texto transparente y solo su cursor.
   Todo lo que afecte a la métrica (fuente, tamaño, interletraje, interlineado,
   ajuste de línea y padding) tiene que ser idéntico en las dos capas: si algo
   baila, el texto que se ve deja de coincidir con el que se escribe. */
.mention-back {
  position: absolute; inset: 0;
  overflow: hidden;
  padding: 2px 42px 0 4px;
  font-family: inherit; font-size: 0.95rem;
  letter-spacing: -0.01em; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: break-word;
  color: var(--text);
  pointer-events: none;
}
.mention-back mark { background: none; color: var(--mention); font-weight: 500; }
/* Solo donde existe la capa: el resto de cajas con X siguen igual.
   `display: block` mata el hueco de línea que un textarea (inline-block) deja
   bajo de sí: sin él la caja mide 7px más que el textarea y la capa, que se
   estira a la caja, se desincroniza al hacer scroll. */
.clearable-input:has(> .mention-back) textarea { display: block; color: transparent; caret-color: var(--text); }
.input-clear[hidden] { display: none; }
.input-clear svg { width: 11px; height: 11px; stroke-width: 2; }

/* La fila ocupa todo el ancho de la caja: el sobrante se reparte entre los
   controles en vez de quedar como un hueco al final, detrás de "Generar".
   Y nunca se parte: con el modelo de nombre largo + avatar + escenario no
   cabía y "Generar" se caía a una segunda fila. Ahora ceden las etiquetas
   variables (modelo, avatar, escenario) y solo cuando hace falta. */
.iv-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  /* Agrupados, no repartidos: con space-between el hueco sobrante se metía
     entre los controles y la fila cambiaba de aire según lo que hubiera puesto.
     Así la separación es siempre la misma y solo se mueve "Generar", que queda
     anclado al borde derecho con su margen automático. */
  justify-content: flex-start;
}
.iv-bar #ivGenerate { margin-left: auto; }
/* por defecto nadie encoge: los controles cortos conservan su medida */
.iv-bar > * { flex: none; }
/* los tres de texto variable sí, y para que puedan hacerlo toda la cadena
   necesita min-width: 0 (si no, el contenido impone su ancho mínimo) */
/* El escenario y el avatar llevan etiquetas cortas y no ceden: si falta sitio
   lo pone el nombre del modelo, que es el más largo y se reconoce por sus
   primeras palabras. */
/* min-width con suelo: sin él, al estrecharse el selector de modelo llegaba a
   encogerse hasta desaparecer de la barra. */
.iv-bar > .iv-model-picker:has(#ivModelBtn) { flex: 0 1 auto; min-width: 104px; }
.iv-bar > .ava-picker,
.iv-bar > .iv-scene-btn { flex: none; min-width: 0; }
.iv-bar #ivModelBtn, .iv-bar .ava-select-main, .iv-bar .ava-pill { min-width: 0; }
#ivModelLabel, #ivSceneLabel {
  display: inline-block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Por debajo de esto la caja del composer baja de ~700px y los ocho controles
   ya no caben en una fila por mucho que cedan: ahí sí se reparten. */
@media (max-width: 780px) {
  .iv-bar, .gen-bar--wide { flex-wrap: wrap; }
}
/* span inerte sin estilos propios; con space-between se llevaría un hueco */
.iv-bar .cbar-spacer { display: none; }

.iv-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  /* 11px y no 13: con el modelo de nombre largo, avatar y escenario a la vez
     esos 2px por lado son justo lo que evita que se recorte una etiqueta */
  padding: 7px 11px;
  font-family: inherit; font-size: 0.8rem; font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.iv-pill:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.iv-pill svg { width: 12px; height: 12px; }
.iv-pill .frames-sym { font-size: 0.62rem; }

.iv-model-picker { position: relative; }
.iv-model-menu { bottom: calc(100% + 8px); left: 0; right: auto; }

.iv-count {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px 6px;
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-muted);
}
.iv-count button {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: transparent; border: none;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.iv-count button:hover { background: var(--surface-hover); color: var(--text); }

.iv-generate {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-bg); color: var(--accent-fg);
  border: none; border-radius: var(--radius-md);
  padding: 9px 18px;
  font-family: inherit; font-size: 0.88rem; font-weight: 550;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
}
.iv-generate:hover:not(:disabled) { transform: translateY(-1px); opacity: 0.92; }
.iv-generate:disabled { opacity: 0.3; cursor: default; }
.iv-cost { font-size: 0.72rem; opacity: 0.85; }

@media (max-width: 720px) {
  .iv-grid { columns: 2 150px; }
}

/* ============================================================
   AVATAR — crea y registra tu avatar digital
   ============================================================ */
.avatar-view {
  width: 100%;
  margin-inline: auto;
}
/* Sin animación de entrada: la sección aparece de una. Cualquier fundido se
   percibe escalonado — el banner es negro sobre fondo negro (no se nota que
   está a media opacidad) mientras las tarjetas claras sí se ven aparecer. */
/* El asistente y el editor NO se topan: avatar-studio.css los diseña para
   ocupar todo el área de contenido (riel de pasos + etapa a pantalla completa). */
#avCreator, #avEditor { width: 100%; }

/* La biblioteca cabe en una pantalla: banner + tarjetas + avatares, sin scroll.
   El banner absorbe el espacio sobrante, así se adapta a cualquier alto. */
#avLib { display: flex; flex-direction: column; }
/* El Avatar Studio oculta la biblioteca con [hidden]; sin esto, el display:flex
   de arriba (más específico que la regla del navegador) la dejaba visible y el
   asistente aparecía debajo, fuera de pantalla. */
#avLib[hidden] { display: none; }
/* Solo se fuerza a una pantalla si hay alto suficiente; por debajo se deja
   crecer con scroll normal antes que recortar el banner. */
@media (min-width: 721px) and (min-height: 740px) {
  #avLib {
    /* alto exacto: pantalla − topbar − el padding sup./inf. de .content
       (la vista Avatar lleva .is-centered, que añade el de abajo) */
    /* Es el contenedor el que sube hasta la topbar, no el banner el que se sale
       por arriba: así el recorte vertical no tiene nada que cortar. El alto solo
       descuenta el padding de abajo, porque el de arriba ya lo cancela el
       margen negativo. */
    margin-top: calc(-1 * var(--content-pad-t, 40px));
    height: calc(100dvh - var(--topbar-h) - var(--content-pad-t, 40px));
    /* Solo se recorta en vertical, que es para lo que estaba el overflow. Con
       `hidden` también recortaba en horizontal y, como el banner se sale de
       esta caja para ir a sangre, le cortaba justo el ancho del padding por los
       lados: se veía metido dentro con franjas claras alrededor. */
    overflow: visible clip;
  }
  /* el bleed superior ya lo hace #avLib */
  #avLib > .av-hero { margin-top: 0; }
  /* el banner crece, pero con tope: si no, se come el alto y empuja las
     tarjetas demasiado abajo */
  #avLib .av-hero { flex: 1 1 300px; min-height: 200px; max-height: clamp(300px, 37vh, 410px); }
  #avLib .av-types { flex: 0 0 auto; height: clamp(178px, 26vh, 300px); }
  #avLib .av-type { aspect-ratio: auto; height: 100%; }
  #avLib .av-listwrap { flex: 0 0 auto; }
}

/* ---- Banner a sangre: copy a la izquierda, imagen del avatar a la derecha ----
   Sin borde ni esquinas: ocupa todo el ancho del área de contenido y sube hasta
   la topbar. El fondo es el negro de la propia imagen, así no hay costura. */
/* El banner va a sangre, pero en pantallas anchas .content se queda en 1360px
   y se centra: a los lados asomaba el fondo de la página. En oscuro no se veía
   (mismo negro) y en claro salían dos franjas blancas. Solo en esta vista se
   suelta el tope de ancho, y los bloques interiores lo recuperan por su cuenta
   para que conserven su medida de siempre. */
.content:has(> .avatar-view:not([hidden])) { max-width: none; }
/* Los bloques de abajo arrancan en la misma vertical que el titular del banner
   y llegan hasta el borde derecho del contenido: alineados con "Crea tu avatar
   digital" y algo más anchos que cuando iban centrados con un tope de 1288px.
   La sangría replica la del banner: éste mide 72px más que #avLib (se sale por
   el padding de .content), de ahí el +4.5px y el −908 en lugar de −980. */
#avLib { --av-indent: min(calc(6.3% + 4.5px), max(0px, (100% - 908px) * 0.5)); }
#avLib > *:not(.av-hero) {
  width: 100%;
  padding-left: var(--av-indent);
}

/* Recorta a la sección la capa de negro del banner (abajo). `clip` no crea
   contenedor de scroll: no toca al sticky ni al scroll vertical. */
.app-main { overflow-x: clip; }

.av-hero {
  position: relative;
  isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(300px, 38vh, 440px);
  /* rompe el padding de .content para ir de borde a borde. En móvil ese padding
     baja a 16px: con el valor copiado a mano el banner sobresalía 2px por lado
     y aparecía scroll horizontal. */
  margin: calc(-1 * var(--content-pad-t, 40px)) calc(-1 * var(--content-pad-x, 36px)) 22px;
  /* mismo negro que --ink-950 (el fondo de la app en oscuro); la propia imagen
     lleva ese suelo de negro, así no se nota dónde empieza */
  background: #08080A;
}
/* El margen negativo solo cancela el padding "normal" de .content. Cualquier
   estado que lo cambie (o un tope de ancho que no se haya soltado) dejaba
   asomar el fondo de la página a los lados: invisible en oscuro, dos franjas
   blancas en claro. Esta capa prolonga el mismo negro hasta donde lo recorta
   .app-main, sea cual sea el padding. */
.av-hero::before {
  content: "";
  position: absolute;
  inset: 0 -100vw;
  z-index: -1;
  background: #08080A;
  pointer-events: none;
}
/* Columna propia (no posicionada encima): el texto y la imagen se reparten el
   ancho, así es imposible que se pisen por mucho que crezca el copy. */
.av-hero-media {
  position: relative; z-index: 0;
  /* Puede encoger: el titular manda y va en una sola línea, así que si no cabe
     la imagen cede el ancho justo. Como es `contain`, se ve más pequeña pero
     nunca recortada. En pantallas anchas sobra sitio y conserva su 58%. */
  flex: 0 1 auto; align-self: stretch;
  width: 58%; padding-right: 3%;
}
.av-hero-media img {
  width: 100%; height: 100%; display: block;
  /* contain, no cover: la imagen entra ENTERA, no se recorta por ningún lado.
     El hueco que queda a la izquierda es del mismo negro (#08080A) que la
     imagen y que el fondo, así que no se ve. Sin ningún degradado. */
  object-fit: contain;
  /* apoyada abajo: todo el aire sobrante queda ARRIBA, sobre la cabeza, que
     es donde la imagen quedaba pegada al filo del banner */
  object-position: right bottom;
}
.av-hero-copy {
  position: relative; z-index: 1;
  /* min-content = lo que mide el titular sin partir (el resto del copy sí
     parte). Es lo que obliga a la imagen a cederle sitio cuando hace falta. */
  flex: 1 1 auto; min-width: min-content;
  /* Entrado a la derecha un 15% del ancho de esta columna. Va como padding y no
     como transform: con transform se movía también el borde derecho y el texto
     se metía sobre la imagen por debajo de 1600px. Así solo avanza el inicio.
     La columna mide ~42% del banner, luego 15% de ella = 6.3% del banner. */
  padding: clamp(16px, 2.8vh, 34px) clamp(18px, 3vw, 36px);
  /* El 6.3% se retira cuando el banner baja de ~1000px: ahí la columna ya no
     da de sí y la fila de garantías terminaba metiéndose bajo la imagen. */
  padding-left: calc(clamp(18px, 3vw, 36px) + min(6.3%, max(0px, (100% - 980px) * 0.5)));
}
/* Título de sección, mismo patrón que el resto de la app: pastilla con el icono
   de la herramienta + el titular. El banner es negro en los dos temas, así que
   la pastilla se fija con la rampa de tinta y no con los tokens que giran. */
.av-hero-title {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 clamp(10px, 1.8vh, 20px);
}
/* Exactamente la misma pastilla que en el resto de secciones. Va con la rampa
   de tinta en vez de con los tokens porque el banner es negro en los dos temas
   y, si girasen, en claro saldria un cuadro blanco sobre negro. */
.av-hero-title .gen-title-ic {
  background: var(--ink-850);
  border-color: var(--ink-700);
}
.av-hero-title .gen-title-ic svg { color: var(--ink-100); }
.av-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: #fff;
  margin: 0;
  white-space: nowrap;   /* siempre en una línea, junto al icono */
}
.av-sub { color: var(--text-muted); font-size: var(--fs-body); }
/* ocupa todo el ancho de la columna: no deja un hueco a la derecha */
.av-hero .av-sub {
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(0.9rem, 0.35vw + 0.5vh, 1.06rem);
  line-height: 1.55;
}

/* Garantías: las tres en una sola línea, separadas por filetes verticales.
   Sin caja ni fondo — no deben parecer botones. */
.av-hero-feats {
  list-style: none; margin: clamp(14px, 2.2vh, 24px) 0 0; padding: 0;
  display: flex; align-items: stretch; flex-wrap: nowrap;
}
.av-hero-feats li {
  display: flex; align-items: center; gap: 9px;
  min-width: 0;
  padding: 2px clamp(12px, 1.4vw, 22px);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.av-hero-feats li:first-child { padding-left: 0; border-left: 0; }
.av-hero-feats li:last-child { padding-right: 0; }
.av-feat-ic { display: inline-flex; flex: none; }
.av-feat-ic svg {
  width: 19px; height: 19px;
  fill: none; stroke: #fff;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.av-feat-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.av-feat-txt strong {
  font-size: clamp(0.82rem, 0.55vw, 0.94rem); font-weight: 600; color: #fff;
  white-space: nowrap;
}
.av-feat-txt span {
  font-size: clamp(0.72rem, 0.48vw, 0.82rem); color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .av-hero { flex-direction: column-reverse; min-height: 0; }
  .av-hero-media { width: 100%; height: 190px; padding-right: 0; align-self: auto; }
  /* aquí el bloque ya ocupa todo el ancho: entrarlo lo dejaría sin sitio */
  .av-hero-copy { max-width: none; min-width: 0; padding: 22px 20px 28px; padding-left: 20px; }
  /* en 375px no cabe en una línea ni al tamaño mínimo: aquí sí puede partir */
  .av-hero h1 { white-space: normal; }
  .av-hero .av-sub { max-width: none; }
  /* en móvil no caben las tres en línea: se apilan y el filete pasa a ser
     horizontal, sin cajas igualmente */
  .av-hero-feats { flex-direction: column; align-items: flex-start; }
  .av-hero-feats li {
    width: 100%;
    padding: 10px 0; border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .av-hero-feats li:first-child { padding-top: 0; border-top: 0; }
  .av-hero-feats li:last-child { padding-bottom: 0; }
  .gen-hero-sub { white-space: normal; }
}

/* Tipo de avatar: 4 tarjetas con foto, icono y flecha.
   Las fotos son recortes con transparencia, así que la tarjeta puede ser
   oscura en tema oscuro y clara en tema claro sin tocar los archivos. */
.av-types-lead { margin-bottom: 14px; }
.av-types {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 26px;
}
.av-type {
  position: relative;
  overflow: hidden;
  /* flex y no block: un <button> centra su contenido verticalmente, y el
     icono + texto tienen que quedar pegados arriba a la izquierda */
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  aspect-ratio: 253 / 275;
  padding: 20px 20px 0;
  border-radius: var(--radius-xl);
  /* Gris claro, no blanco puro: resalta contra el #08080A del fondo sin
     deslumbrar, y los sujetos (casi todos negros) recortan limpio encima. */
  background: linear-gradient(180deg, #E8E8E3 0%, #D9D9D3 100%);
  border: 0;   /* sin filo: la tarjeta se define solo por su color */
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.av-type:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #EFEFEA 0%, #E0E0DA 100%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}
.av-type-ic { position: relative; z-index: 2; display: block; }
.av-type-ic svg {
  width: 22px; height: 22px;
  fill: none; stroke: #17171a;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* la pata de perro se ve mejor rellena (los demás iconos quedan en contorno) */
#avTypeAnimal .av-type-ic svg { fill: #17171a; stroke: none; }
.av-type-t {
  position: relative; z-index: 2; display: block;
  margin-top: 10px;
  font-size: 1rem; font-weight: 600; letter-spacing: var(--tracking-snug);
  color: #17171a;
}
.av-type-d {
  position: relative; z-index: 2; display: block;
  margin-top: 2px; max-width: 18ch;
  font-size: 0.78rem; line-height: 1.35;
  color: rgba(23, 23, 26, 0.58);
}
/* Las fotos son recortes con transparencia: se colocan enteras (contain), NO
   se recortan. Van ancladas abajo a la derecha; el tamaño se da en alto y el
   ancho sale solo, así ninguna se corta por los bordes. */
.av-type-img {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  height: 88%; width: auto; max-width: 78%;
  object-fit: contain; object-position: right bottom;
}
/* Ajustes por tarjeta: el objeto va más arriba y no toca el borde inferior;
   objeto y outfit van algo más metidos hacia la izquierda */
#avTypeObjeto .av-type-img { height: 72%; bottom: 14%; right: 11%; max-width: 84%; }
#avTypeOutfit .av-type-img { right: 7%; }
#avTypeAnimal .av-type-img { height: 90%; }
.av-type-img[hidden] { display: none; }
.av-type-go {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  background: #17171a;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.av-type-go svg {
  width: 16px; height: 16px;
  fill: none; stroke: #fff;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.av-type:hover .av-type-go { transform: translateX(3px); }

/* En tema claro la sombra al pasar el ratón es más suave (el fondo es claro) */
[data-theme="light"] .av-type:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); }

/* Avatares registrados: caja con borde, como el resto de la biblioteca */
/* Sin caja: el bloque va suelto sobre el fondo, igual que el de los tipos de
   avatar. La sangría izquierda la sigue poniendo #avLib (alineación con el
   titular del banner), que gana por especificidad. */
.av-listwrap {
  border: 0;
  border-radius: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .av-types { grid-template-columns: repeat(2, 1fr); }
}
/* En tarjetas estrechas el sujeto se comía el texto: más alto y foto más baja */
@media (max-width: 720px) {
  .av-type { aspect-ratio: 1 / 1.28; padding: 16px 16px 0; }
  .av-type-img { height: 80%; max-width: 82%; }
  .av-type-d { font-size: 0.74rem; max-width: 15ch; }
  .av-type-go { right: 12px; bottom: 12px; width: 30px; height: 30px; }
}
/* En móvil la tarjeta mide ~166px: la descripción caería sobre la foto */
@media (max-width: 560px) {
  .av-type-d { display: none; }
}

/* Las 4 fotos */
.av-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 18px;
}
.av-slot {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.av-slot:hover { border-color: var(--border-strong); background: var(--surface); }
.av-slot.has-photo { border-style: solid; border-color: var(--border); }
.av-slot-ic { width: 20px; height: 20px; color: var(--text-faint); }
.av-slot-label {
  font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding-inline: 6px;
}
.av-slot-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.av-slot-img[hidden] { display: none; }
.av-slot.has-photo .av-slot-ic { display: none; }
.av-slot.has-photo .av-slot-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 6px 7px;
  background: linear-gradient(to top, rgba(8,8,10,.8), transparent);
  color: var(--ink-100);
  z-index: 1;
}
.av-slot-x {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: rgba(8,8,10,.65);
  border: none; border-radius: var(--radius-full);
  color: var(--ink-100);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.av-slot-x:hover { background: rgba(8,8,10,.9); }
.av-slot-x svg { width: 12px; height: 12px; stroke-width: 2; }
.av-slot-x[hidden] { display: none; }

/* Nombre + registrar */
.av-createrow {
  display: flex; gap: 10px;
}
.av-name {
  flex: 1;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 15px;
  color: var(--text);
  font-family: inherit; font-size: 0.92rem; letter-spacing: -0.01em;
  outline: none;
  transition: border-color var(--dur-fast);
}
.av-name::placeholder { color: var(--text-faint); }
.av-name:focus { border-color: var(--border-strong); }
.av-create {
  background: var(--accent-bg); color: var(--accent-fg);
  border: none; border-radius: var(--radius-md);
  padding: 12px 22px;
  font-family: inherit; font-size: 0.9rem; font-weight: 550;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
}
.av-create:hover:not(:disabled) { transform: translateY(-1px); opacity: 0.92; }
.av-create:disabled { opacity: 0.3; cursor: default; }

/* Avatares registrados — círculos uno al lado del otro */
/* margin-bottom: 1px y no 12: la píldora del contador mide 31px y centra el
   rótulo, dejando ya 15px por debajo del texto. Con 12 el hueco real hasta las
   fichas era de 27px, frente a los 16px que hay entre "ELIGE EL TIPO…" y sus
   tarjetas. Así los dos bloques respiran igual. */
.av-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1px; }
.av-listhead .overline { margin-bottom: 0; }
.av-count {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: var(--tracking-snug);
  color: var(--text-secondary); padding: 4px 11px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: var(--surface);
}
.av-count-ic { display: inline-flex; color: var(--text-muted); }
.av-count-ic svg { width: 13px; height: 13px; }
.av-count.is-full { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.av-count.is-full .av-count-ic { color: var(--warning); }
.av-listwrap .overline { margin-bottom: 12px; }

/* Fichas horizontales: miniatura + nombre + estado + eliminar */
.av-rail {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.av-tile {
  position: relative;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 11px;
  width: 244px; padding: 9px 36px 9px 9px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  animation: rise var(--dur-base) var(--ease-out-cine);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.av-tile:hover { border-color: var(--border); background: var(--surface-hover); }
/* Caja que recorta la miniatura: permite ampliar la foto dentro sin desbordar */
.av-tile-thumb {
  flex: none; display: block; position: relative;
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-subtle);
}
.av-tile-thumb img {
  width: 100%; height: 100%; display: block;
  /* Las fotos de avatar son verticales (4:5) y la cara ocupa la parte alta:
     se ancla arriba y se amplía sobre ese punto para que se vea la cara. */
  object-fit: cover; object-position: center top;
  /* El punto de zoom más abajo baja la ventana visible: la cabeza sube dentro
     del cuadro y la mandíbula entra completa en vez de quedar al filo. */
  transform: scale(1.5);
  transform-origin: 50% 42%;
}
/* Miniatura reencuadrada a mano: se muestra tal cual, el zoom ya lo eligió
   quien la recortó (y llega cuadrada, así que cover no recorta nada). */
.av-tile-thumb.is-exact img {
  object-position: center center;
  transform: none;
}
.av-tile.is-training .av-tile-thumb { opacity: 0.55; }
.av-tile-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.av-tile-name {
  font-size: 0.86rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.av-tile-state {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.av-tile-state.is-training { color: var(--warning); }
.av-tile-del {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.av-tile-del:hover { color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }
.av-tile-del svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.av-empty { font-size: 0.86rem; color: var(--text-faint); }
.av-empty[hidden] { display: none; }

/* Pop-up de creación — abre al elegir Persona u Objeto */
.av-modal {
  position: fixed; inset: 0; z-index: 150;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.av-modal[hidden] { display: none; }
.av-modal-box {
  width: min(640px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 24px 24px 28px;
  animation: palette-in var(--dur-base) var(--ease-out-cine);
}
.av-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.av-modal-head h2 {
  font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-tight);
}

.ava-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 4px 12px 4px 4px;
  font-family: inherit; font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.ava-pill img {
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  /* igual que en la biblioteca: anclado arriba para no cortar la cabeza */
  object-fit: cover; object-position: center top;
}
.ava-pill:hover { background: var(--surface-hover); color: var(--text); }
.ava-pill.is-active {
  background: var(--accent-bg); color: var(--accent-fg);
  border-color: var(--accent-bg);
}

/* Botón "seleccionar avatar" del composer — abre un menú con los avatares registrados.
   El pill envuelve dos botones: el principal (abre el menú) y una "x" que solo
   aparece con un avatar activo, para quitarlo sin tener que reabrir el menú. */
.ava-picker { position: relative; }
.ava-select-main {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: none; padding: 0;
  font: inherit; color: inherit;
  cursor: pointer;
}
.ava-select-ic {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--surface-hover);
  color: var(--text-faint);
  overflow: hidden;
}
.ava-select-ic svg { width: 13px; height: 13px; }
.ava-select-ic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ava-select.is-active .ava-select-ic { background: color-mix(in srgb, var(--accent-fg) 20%, transparent); color: var(--accent-fg); }
.ava-select-chev {
  width: 9px; height: 9px; stroke-width: 2.2;
  color: var(--text-faint);
  transition: transform var(--dur-fast);
}
.ava-select-main[aria-expanded="true"] .ava-select-chev { transform: rotate(180deg); }

.ava-select-x {
  width: 18px; height: 18px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: none; border-radius: var(--radius-full);
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.ava-select-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.15); }
.ava-select-x[hidden] { display: none; }
.ava-select-x svg { width: 9px; height: 9px; stroke-width: 2.4; }

/* Escenario: mismo pill que el selector de avatar, pero abre el explorador de
   archivos en vez de un menú. Ajustado para que la barra quepa en una fila. */
.iv-scene-btn {
  flex: none; white-space: nowrap;
  gap: 6px;
  padding: 4px 10px 4px 3px;
  font-size: 0.75rem;
}
.iv-scene-btn .ava-select-ic { width: 19px; height: 19px; }
.iv-scene-btn .ava-select-ic svg { width: 11px; height: 11px; }

/* El nombre del avatar no puede decidir si la barra cabe en una fila: se corta
   con puntos suspensivos y el nombre completo queda en el title del pill. */
#ivAvatarSelectLabel,
#vdAvatarSelectLabel {
  display: inline-block;
  max-width: 92px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}
.iv-scene-btn.is-active {
  background: var(--accent-bg); color: var(--accent-fg);
  border-color: var(--accent-bg);
}
.iv-scene-btn.is-active .ava-select-ic {
  background: color-mix(in srgb, var(--accent-fg) 20%, transparent);
  color: var(--accent-fg);
}

.ava-menu { left: 0; right: auto; min-width: 220px; }
/* Menú de menciones (@) del composer de vídeo: nace donde está el cursor de
   lectura —arriba a la izquierda de la caja—, no en la esquina de los pills. */
.vd-mention-menu { left: 0; right: auto; min-width: 240px; max-height: 240px; }
.ava-menu-thumb {
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  object-fit: cover;
  justify-self: center;
}

/* Selección múltiple: las miniaturas se solapan como fichas apiladas y el
   contorno del color de fondo las separa sin ocupar ancho extra. */
.ava-select-ic.is-stack {
  width: auto; min-width: 22px;
  display: flex; align-items: center;
  background: none; overflow: visible;
}
.ava-select-ic.is-stack img {
  width: 22px; height: 22px; flex: none;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--bg);
  margin-left: -9px;
}
.ava-select-ic.is-stack img:first-child { margin-left: 0; }
.ava-select.is-active .ava-select-ic.is-stack { background: none; }

/* Tope alcanzado: el resto queda a la vista pero sin poder añadirse */
.ava-menu .is-blocked { opacity: 0.38; cursor: not-allowed; }
.ava-menu .is-blocked:hover { background: transparent; }

.ava-menu-create { border-top: 1px solid var(--border-subtle); margin-top: 4px; padding-top: 8px; }
.ava-menu-create .model-name { color: var(--text-muted); font-weight: 500; }
.ava-menu-create:hover .model-name { color: var(--text); }

@media (max-width: 720px) {
  .av-grid { grid-template-columns: repeat(2, 1fr); }
  .av-types { gap: 12px; }
  .av-createrow { flex-direction: column; }
}

/* ============================================================
   INICIO — banner de novedades + herramientas
   ============================================================ */
.home {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-bottom: 40px;
}

.home-hero {
  position: relative;
  height: clamp(220px, 30vh, var(--hero-max, 320px));
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  margin-bottom: clamp(28px, 4.5vh, 44px);
  background: var(--ink-950);   /* fondo oscuro: nada de flash mientras carga */
  isolation: isolate;
}
/* Cada novedad ocupa todo el marco. El cambio entre banners es un crossfade
   (fundido de opacidad); no hay deslizamiento. */
.home-slide {
  position: absolute; inset: 0;
  display: block;
  opacity: 0; visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 820ms var(--ease-out-soft), visibility 0s linear 820ms;
}
.home-slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 820ms var(--ease-out-soft);
}
.home-slide[inert] { pointer-events: none; }
/* Capa de media a tamaño completo (imagen centrada, object-fit: cover). El
   banner activo hace un Ken Burns tipo Netflix: zoom lento + deriva lateral.
   Arranca a escala 1 (imagen completa, sin zoom) y termina con un leve zoom
   desplazado; al ser escala >= 1 nunca deja bordes. */
.home-slide-media {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.home-slide.is-active .home-slide-media {
  animation: heroKen var(--ken-dur, 11s) var(--ease-out-cine) forwards;
}
@keyframes heroKen {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.05) translateX(-1.5%); }
}
/* Al pausar (hover / foco), el Ken Burns también se detiene, en sintonía con la barra */
.home-hero.is-paused .home-slide.is-active .home-slide-media { animation-play-state: paused; }
/* Poster fijo detrás del video: se ve mientras carga y, sobre todo, cuando
   iOS bloquea el autoplay (Modo de Bajo Consumo). Así NUNCA aparece el botón
   de play — o hay movimiento, o hay una imagen fija, nunca un control. */
.home-banner-poster,
.home-slide-pic {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.home-banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* Arranca invisible (esto también oculta el botón de play nativo de iOS,
     que vive dentro del elemento). Solo se muestra al empezar a reproducir. */
  opacity: 0;
  transition: opacity 700ms var(--ease-out-soft);
  pointer-events: none;   /* solo video de fondo: sin controles ni foco */
}
.home-banner-img.is-playing { opacity: 1; }
/* Los banners sin poster (el del Agent X va solo con video) se ven desde el
   principio: parados muestran su primer fotograma en vez de un rectangulo
   negro, y al arrancar siguen sin corte. Los controles nativos ya los tapa la
   regla de tokens.css, asi que no hace falta esconder el elemento. */
.home-banner-img:not([poster]) { opacity: 1; }
/* Oculta cualquier control nativo que algún navegador intente pintar sobre el video */
.home-banner-img::-webkit-media-controls,
.home-banner-img::-webkit-media-controls-enclosure,
.home-banner-img::-webkit-media-controls-panel,
.home-banner-img::-webkit-media-controls-start-playback-button,
.home-banner-img::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

/* ---- Splash de arranque del estudio (logo replika) ---- */
.app-boot {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 480ms var(--ease-out-soft);
  /* RED DE SEGURIDAD — no quitar.
     Este panel tapa el estudio entero, y quien lo retira es app.js. Si ese
     script no llega a ejecutarse (red que falla, respuesta a medias, error de
     carga), la app se queda inservible detrás de un logo que late para
     siempre, sin forma de salir salvo recargar. Esta animación lo retira sola
     a los 4s: llega mucho después del arranque normal (1,6s como máximo), así
     que no interfiere, y solo actúa cuando algo ha ido mal.
     visibility en vez de opacity para que además deje de recibir clics. */
  animation: bootFailSafe 480ms var(--ease-out-soft) 4000ms forwards;
}
@keyframes bootFailSafe { to { opacity: 0; visibility: hidden; } }
/* el camino normal manda sobre la red: app.js pone is-hidden y funde con la
   transición, sin esperar a los 4s */
.app-boot.is-hidden { animation: none; opacity: 0; pointer-events: none; }
.app-boot-logo {
  width: clamp(116px, 15vw, 160px); height: auto;
  filter: var(--logo-filter);
  animation: bootPulse 1.5s var(--ease-in-out-cine) infinite;
}
@keyframes bootPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.015); }
}
/* La transición del banner es un deslizamiento horizontal con paralax (JS) */
.home-banner-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(8,8,10,.82) 8%, rgba(8,8,10,.35) 52%, transparent 78%),
    linear-gradient(to top, rgba(8,8,10,.55), transparent 45%);
}
.home-banner-txt {
  position: absolute; left: clamp(20px, 3.5vw, 40px); right: 24%;
  bottom: clamp(20px, 3.5vh, 34px);
  color: var(--ink-100);
}
.home-banner-txt .overline { color: var(--ink-300); }
.home-banner-txt h1 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.12;
  margin: 10px 0 8px;
  max-width: 22ch;
  white-space: pre-line; /* respeta el salto de línea del texto (\n) */
}
.home-banner-sub {
  font-size: 0.9rem;
  color: var(--ink-200);
  max-width: 44ch;
  margin-bottom: 14px;
}
.home-banner-cta {
  display: inline-block;
  font-size: 0.86rem; font-weight: 550;
  color: var(--ink-000);
  border-bottom: 1px solid color-mix(in srgb, var(--ink-000) 45%, transparent);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast);
}
.home-slide:hover .home-banner-cta { border-color: var(--ink-000); }

/* ---- Chip "oficial" con el logo del modelo en cada novedad ---- */
.home-banner-badge {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  margin-bottom: 12px;
  padding: 4px 10px 4px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-950) 52%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink-000) 20%, transparent);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  backdrop-filter: blur(9px) saturate(1.1);
  color: var(--ink-000);
  font-size: 0.73rem; font-weight: 600; letter-spacing: .015em;
}
/* Logo del modelo SIN tile de fondo: el SVG (monocromo oscuro) se fuerza
   a blanco con filter para que se lea directo sobre el badge oscuro */
.home-banner-badge .badge-logo {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
}
.home-banner-badge .badge-logo img {
  width: 16px; height: 16px; display: block;
  filter: brightness(0) invert(1);
}
.home-banner-badge .badge-name { white-space: nowrap; }
.home-banner-badge .badge-official {
  display: inline-flex; align-items: center; gap: 3px;
  padding-left: 8px; margin-left: 1px;
  border-left: 1px solid color-mix(in srgb, var(--ink-000) 18%, transparent);
  color: var(--ink-200); font-weight: 550;
}
.home-banner-badge .badge-check { width: 13px; height: 13px; }
.home-banner-badge .badge-check circle { fill: #3b82f6; stroke: none; }
.home-banner-badge .badge-check path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Entrada del texto al activarse la novedad ---- */
.home-slide.is-active .home-banner-txt > * { animation: heroTextIn 680ms var(--ease-out-cine) both; }
.home-slide.is-active .home-banner-txt > *:nth-child(1) { animation-delay: 120ms; }
.home-slide.is-active .home-banner-txt > *:nth-child(2) { animation-delay: 190ms; }
.home-slide.is-active .home-banner-txt > *:nth-child(3) { animation-delay: 260ms; }
.home-slide.is-active .home-banner-txt > *:nth-child(4) { animation-delay: 330ms; }
.home-slide.is-active .home-banner-txt > *:nth-child(5) { animation-delay: 400ms; }
@keyframes heroTextIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Puntos de navegación + barra de progreso (5s) ---- */
.home-hero-dots {
  position: absolute; z-index: 3;
  right: clamp(16px, 3vw, 26px); bottom: clamp(14px, 3vh, 20px);
  display: flex; gap: 7px;
}
.home-hero-dot {
  position: relative; overflow: hidden;
  width: 22px; height: 4px; padding: 0; border: 0; cursor: pointer;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-000) 26%, transparent);
  transition: width var(--dur-fast), background var(--dur-fast);
}
.home-hero-dot:hover { background: color-mix(in srgb, var(--ink-000) 42%, transparent); }
.home-hero-dot.is-active { width: 34px; }
.home-hero-dot.is-active::after {
  content: ""; position: absolute; inset: 0; width: 0;
  background: var(--ink-000);
  /* la duración la fija el JS por slide: vídeo = su duración real, imagen = 10s */
  animation: heroDot var(--dot-dur, 10s) linear forwards;
}
.home-hero.is-paused .home-hero-dot.is-active::after { animation-play-state: paused; }
@keyframes heroDot { from { width: 0; } to { width: 100%; } }

@media (max-width: 640px) {
  /* En teléfono el banner deja de ser un overlay: la media va ARRIBA
     (16/10 completa, sin texto encima) y el texto DEBAJO, dentro de la
     misma tarjeta. Nada se corta y el video/imagen se ve limpio.
     Los banners inactivos siguen apilados en absolute para el crossfade. */
  .home-hero { height: auto; }
  .home-slide { display: flex; flex-direction: column; }
  .home-slide.is-active { position: relative; inset: auto; }
  .home-slide-media {
    position: relative; inset: auto; flex: none;
    width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  }
  /* el Ken Burns escala el contenedor de la media y sangraría sobre el
     texto que ahora vive debajo — en teléfono la media queda quieta */
  .home-slide.is-active .home-slide-media { animation: none; }
  /* Los artes son franjas ultra-anchas con el sujeto a la DERECHA del
     centro (fueron diseñados para el overlay de desktop con texto a la
     izquierda). En el recorte 16/10 del teléfono, el encuadre se corre
     hacia el sujeto para que no se corte. El video (fútbol) va centrado. */
  /* 100% = borde derecho del arte pegado al borde del recorte: la imagen
     corrida al máximo a la izquierda sin dejar hueco */
  .home-slide-pic { object-position: 100% 50%; }
  .home-banner-scrim { display: none; }
  .home-banner-txt { position: static; padding: 14px 16px 4px; }
  .home-banner-txt .overline { font-size: 0.6rem; letter-spacing: .15em; }
  .home-banner-txt h1 {
    font-size: 1.16rem; margin: 8px 0 6px; max-width: none;
    white-space: normal; text-wrap: balance;   /* sin saltos manuales: 2 líneas parejas */
  }
  .home-banner-sub {
    font-size: 0.84rem; line-height: 1.45; max-width: none;
    text-wrap: pretty;   /* sin viudas tipo "estudio." colgando solo */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.9em;   /* 2 líneas fijas: la tarjeta no salta de alto entre banners */
    margin-bottom: 10px;
  }
  .home-banner-badge { font-size: 0.66rem; padding: 3px 9px 3px 4px; margin-bottom: 9px; }
  .home-banner-badge .badge-logo { width: 18px; height: 18px; }
  .home-hero-dots { position: static; justify-content: center; padding: 12px 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  /* sin Ken Burns: imagen fija, solo fundido de opacidad */
  .home-slide.is-active .home-slide-media { animation: none !important; transform: none !important; }
  .home-slide.is-active .home-banner-txt > * { animation: none !important; }
  .home-hero-dot.is-active::after { animation: none; width: 100%; }
}

.tool-ic {
  width: 46px; height: 46px; padding: 11px; box-sizing: border-box;
  border-radius: 13px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--border-subtle);
  color: var(--text);
  margin-bottom: 6px;
}

.settings {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding-bottom: 48px;
  animation: rise var(--dur-slow) var(--ease-out-cine);
}

.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin: 8px 0 26px;
}
/* Mismo porte que el resto de secciones (ver .gen-title) */
.settings-head h1 {
  font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600;
  letter-spacing: var(--tracking-tight); line-height: 1;
  margin-right: auto;
}

.set-group { margin-bottom: 26px; }
.set-group > .overline { margin-bottom: 10px; }

.set-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 6px 20px;
  box-shadow: var(--shadow-elev);
}

.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.set-row:last-child { border-bottom: none; }

.set-profile { gap: 14px; justify-content: flex-start; }
.set-avatar { border-radius: var(--radius-full); flex: none; }
.set-card-ic {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}
.set-card-ic svg { width: 22px; height: 22px; }
.set-profile-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.set-name { font-weight: 550; font-size: 0.98rem; letter-spacing: -0.01em; }
.set-mail {
  font-size: 0.8rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.set-plan-pill {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  background: var(--accent-bg); color: var(--accent-fg);
  border-radius: var(--radius-full);
  padding: 4px 11px;
  flex: none;
}

.set-lbl { font-size: 0.92rem; color: var(--text-secondary); }
.set-lbl-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-hint { font-size: 0.76rem; color: var(--text-faint); }
.set-val { display: inline-flex; align-items: baseline; gap: 5px; font-size: 0.92rem; }
.set-val .digits { font-size: 1.02rem; }
.set-val .frames-sym { font-size: 0.68rem; }
.set-dim { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.72rem; }

/* Fila de saldo: label + valor en la línea de arriba, la barra ocupa toda la fila debajo */
.set-row-balance { flex-wrap: wrap; row-gap: 10px; }
.set-row-balance .meter { flex-basis: 100%; height: 5px; }

.set-select {
  appearance: none;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit; font-size: 0.86rem; letter-spacing: -0.01em;
  padding: 8px 34px 8px 12px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  transition: border-color var(--dur-fast);
}
.set-select:hover { border-color: var(--border-strong); }

.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.seg button {
  background: transparent; border: none;
  font-family: inherit; font-size: 0.82rem; font-weight: 500;
  color: var(--text-muted);
  padding: 7px 16px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.seg button.is-active { background: var(--text); color: var(--bg); }

.set-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: inherit; font-size: 0.84rem; font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.set-btn:hover { border-color: var(--border-strong); background: var(--surface-hover); }

.set-danger {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--error);
  font-family: inherit; font-size: 0.84rem; font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.set-danger:hover { border-color: var(--error); background: color-mix(in srgb, var(--error) 8%, transparent); }

/* ---- Insignia de "verificado" (admin) al lado del nombre ---- */
.verified-badge { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.verified-badge[hidden] { display: none; }
.verified-badge svg { width: 16px; height: 16px; }
.verified-badge svg .vb-seal { fill: var(--accent-bg); }   /* sello dentado (medalla) */
.verified-badge svg .vb-star { fill: var(--accent-fg); }   /* estrella central */
/* Nombre + verificado en el rail y el menú móvil */
.sb-user-name-row, .mnav-user-name-row { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sb-user-name-row .sb-user-name,
.mnav-user-name-row .mnav-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-name-row .verified-badge svg { width: 14px; height: 14px; }   /* rail: un punto más pequeño */

/* Nombre + verificado + pill ADMIN en el panel de cuenta */
.set-name-row { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.set-name-row .set-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.set-admin-pill {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; font-weight: 600;
  background: var(--accent-bg); color: var(--accent-fg);
  border-radius: var(--radius-full);
  padding: 3px 8px; flex: none;
}

/* ---- Botón secundario (lo usa el editor del perfil) ---- */
.set-btn-ghost {
  background: transparent; border: none;
  color: var(--text-muted);
  font-family: inherit; font-size: 0.84rem; font-weight: 500;
  padding: 8px 14px; cursor: pointer; border-radius: var(--radius-md);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.set-btn-ghost:hover { color: var(--text); background: var(--surface-hover); }

@media (max-width: 640px) {
  .set-row { flex-wrap: wrap; }
  .settings-head { margin: 4px 0 20px; }
  .set-card { padding: 4px 16px; }

  /* Perfil (Cuenta y Pagos): avatar + nombre/mail + pill en la 1ª línea;
     el botón de acción baja a todo el ancho. Así el nombre no se parte en
     3 líneas ni el email se corta en pantallas de 375px. */
  .set-profile { flex-wrap: wrap; row-gap: 13px; }
  .set-profile-meta { flex: 1 1 auto; }
  .set-profile .set-name { font-size: 1rem; white-space: normal; }
  .set-profile .set-mail { white-space: normal; }        /* email en 2 líneas antes que cortado */
  .set-profile .set-btn {
    flex-basis: 100%;                                     /* acción a lo ancho, debajo */
    text-align: center; padding: 11px 16px; font-size: 0.9rem;
  }

  /* Preferencias/Datos: etiqueta arriba, control a lo ancho y tocable debajo */
  .set-row .set-select { flex-basis: 100%; padding-top: 11px; padding-bottom: 11px; }
  .set-row .seg { flex-basis: 100%; }
  .set-row .seg button { flex: 1; padding-top: 10px; padding-bottom: 10px; }
}

/* ============================================================
   PLANES — los 3 tiers, mismo contenido que la landing
   ============================================================ */
.plans-view {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  padding-bottom: 48px;
  animation: rise var(--dur-slow) var(--ease-out-cine);
}

.plans-view .settings-head { position: relative; justify-content: center; text-align: center; gap: 14px; }
/* .settings-head h1 lleva margin-right:auto para Ajustes, donde el título va a
   la izquierda y el aspa a la derecha. Aquí la cabecera está centrada, así que
   ese margen automático se quedaba con todo el hueco libre y desplazaba el
   título (y su rombo) hacia la izquierda. */
.plans-view .settings-head h1 { margin-right: 0; }
/* Rombo de créditos junto al título de Planes (el ◆ es la moneda de la app) */
/* pastilla igual que la del resto de secciones */
.plans-title-ic {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text);
}
.plans-title-ic svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.plans-view .settings-head #plansClose {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
}

.plans-sub {
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 56ch;
  margin: -14px auto 28px;
  text-align: center;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) {
  .plans-grid { grid-template-columns: 1fr; }
}

.pcard {
  display: flex; flex-direction: column; gap: 16px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-elev);
  transition: transform var(--dur-base) var(--ease-out-soft), border-color var(--dur-fast);
}
.pcard:hover { transform: translateY(-3px); }

.pcard-feat {
  border-color: var(--border-strong);
  background: linear-gradient(160deg, var(--surface-hover), var(--surface));
}

.pcard-current { border-color: var(--accent-bg); }

.pcard-tier {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary);
}
.pcard-tag {
  font-size: 0.58rem; letter-spacing: 0.1em;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  padding: 3px 9px;
  color: var(--text-muted);
}
.pcard-tag-current { color: var(--accent-bg); border-color: var(--accent-bg); }

.pcard-price {
  font-size: 2.2rem; font-weight: 650; letter-spacing: var(--tracking-tight);
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
}
.pcard-price small { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }

.pcard-desc { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; min-height: 42px; }

.pcard-list { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 0.88rem; }
.pcard-list li { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--text-secondary); }
.pcard-list li .frames-sym { font-size: 0.7rem; color: var(--text-muted); }
.pcard-list li .pcard-avic { display: inline-flex; color: var(--text-muted); }
.pcard-list li .pcard-avic svg { width: 15px; height: 15px; }

.pcard-btn {
  margin-top: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit; font-size: 0.86rem; font-weight: 550;
  padding: 11px 18px;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast);
}
.pcard-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.pcard-btn:disabled { cursor: default; opacity: 0.55; }
.pcard-btn-primary {
  background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg);
}
.pcard-btn-primary:hover { opacity: 0.9; background: var(--accent-bg); }

/* ============================================================
   COMMAND PALETTE (⌘K)
   ============================================================ */
.palette {
  position: fixed; inset: 0; z-index: 150;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: min(16vh, 140px) 20px 20px;
}
.palette[hidden] { display: none; }

.palette-box {
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: palette-in var(--dur-base) var(--ease-out-cine);
}
@keyframes palette-in {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.palette-head {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.palette-head svg { width: 16px; height: 16px; color: var(--text-faint); }
.palette-head input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--text);
  font-family: inherit; font-size: 0.95rem; letter-spacing: -0.01em;
}
.palette-head input::placeholder { color: var(--text-faint); }

.palette-list {
  list-style: none;
  max-height: 320px; overflow-y: auto;
  padding: 8px;
}
.palette-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.palette-list li[hidden] { display: none; }
.palette-list li:hover,
.palette-list li.is-selected { background: var(--surface-hover); color: var(--text); }
.palette-list li .mono-tag { min-width: 52px; }
.palette-empty { padding: 20px 16px; font-size: 0.88rem; color: var(--text-faint); }

/* ============================================================
   SCRIM (drawer móvil)
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 80;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-soft);
}
html[data-sidebar-mobile="open"] .scrim { opacity: 1; }

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(18px);
  animation: rise var(--dur-slow) var(--ease-out-cine) forwards;
}
.stagger > * {
  opacity: 0; transform: translateY(18px);
  animation: rise var(--dur-slow) var(--ease-out-cine) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 90ms; }
.stagger > *:nth-child(2) { animation-delay: 160ms; }
.stagger > *:nth-child(3) { animation-delay: 230ms; }
.stagger > *:nth-child(4) { animation-delay: 300ms; }
.stagger > *:nth-child(5) { animation-delay: 370ms; }
.stagger > *:nth-child(6) { animation-delay: 440ms; }
.stagger > *:nth-child(7) { animation-delay: 510ms; }
.stagger > *:nth-child(8) { animation-delay: 580ms; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1; transform: none; animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  body { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; left: 0; top: 0;
    width: min(300px, 84vw);
    transform: translateX(-102%);
    transition: transform var(--dur-base) var(--ease-out-cine);
    box-shadow: none;
  }
  html[data-sidebar-mobile="open"] .sidebar {
    transform: none;
    box-shadow: var(--shadow-pop);
  }
  .sb-collapse { display: none; }

  .topbar-burger { display: grid; }
  .search-btn { min-width: 0; }
  .search-btn span { display: none; }
  .search-btn kbd { display: none; }
  .search-btn { padding: 8px; border: none; background: transparent; }
}

@media (max-width: 620px) {
  .tools-grid { grid-template-columns: 1fr; }
  .topbar-crumb .mono-tag { display: none; }
  .crumb-sep { display: none; }
}

/* ============================================================
   SOPORTE — chatbot flotante (heredado de la landing)
   ============================================================ */
.cw-wrap {
  position: fixed; bottom: 22px; right: 22px; z-index: 120;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}

.cw-btn {
  position: relative;
  width: 54px; height: 54px;
  background: none; border: none; padding: 0;
  cursor: pointer;
  display: grid; place-items: center;
  pointer-events: auto;
  overflow: visible;
  transition: transform 0.22s var(--ease-out-soft);
}
.cw-btn:hover { transform: scale(1.08); }
.cw-btn .cw-bot-ic {
  width: 48px; height: 48px; object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(255,255,255,.3)) drop-shadow(0 3px 7px rgba(0,0,0,.5));
}
[data-theme="light"] .cw-btn .cw-bot-ic {
  filter: invert(1) drop-shadow(0 2px 6px rgba(10,10,11,.25));
}

/* Señal saliendo de la antena */
.cw-signal {
  position: absolute; left: 50%; top: -9px;
  transform: translateX(-50%);
  width: 30px; height: 20px;
  pointer-events: none; overflow: visible;
  color: var(--text);
  z-index: 2;
}
.cw-wv {
  transform-origin: 14px 14px;
  animation: cwWave 2s ease-in-out infinite;
  opacity: 0;
}
.cw-wv2 { animation-delay: 0.28s; }
@keyframes cwWave {
  0%        { opacity: 0; transform: scale(.45); }
  28%       { opacity: .95; transform: scale(1); }
  62%, 100% { opacity: 0; transform: scale(1.18); }
}

.cw-panel {
  width: 296px; height: 396px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  overflow: hidden;
  pointer-events: none;
  transform-origin: bottom right;
  transform: scale(.94) translateY(10px);
  opacity: 0;
  transition: transform 0.32s var(--ease-out-cine), opacity 0.32s var(--ease-out-cine);
}
.cw-panel.open { transform: none; opacity: 1; pointer-events: auto; }

.cw-header {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.cw-hinfo { display: flex; align-items: center; gap: 10px; }
.cw-avatar {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: linear-gradient(160deg, var(--ink-700), var(--ink-900));
  display: grid; place-items: center; flex: none; overflow: hidden;
}
.cw-avatar .cw-bot-ic { width: 26px; height: 26px; object-fit: contain; }
.cw-hname { font-size: 0.86rem; font-weight: 600; letter-spacing: -0.012em; }
.cw-hstatus {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-top: 1px;
}
.cw-sdot {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--success); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);
}

.cw-msgs {
  flex: 1; overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 9px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.cw-msg { max-width: 86%; animation: rise 0.25s var(--ease-out-cine); }
.cw-msg.bot { align-self: flex-start; }
.cw-msg.usr { align-self: flex-end; }
.cw-bbl {
  padding: 9px 13px;
  font-size: 0.82rem; line-height: 1.55;
  overflow-wrap: break-word;
}
.cw-msg.bot .cw-bbl {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 4px 14px 14px 14px;
}
.cw-msg.usr .cw-bbl {
  background: var(--accent-bg); color: var(--accent-fg);
  border-radius: 14px 14px 4px 14px;
}
.cw-msg.cw-typing .cw-bbl { display: inline-flex; gap: 5px; padding: 12px 14px; }
.cw-msg.cw-typing .cw-bbl span {
  width: 5px; height: 5px; border-radius: var(--radius-full);
  background: var(--text-faint);
  animation: typing-dot 1.1s var(--ease-in-out-cine) infinite;
}
.cw-msg.cw-typing .cw-bbl span:nth-child(2) { animation-delay: 0.18s; }
.cw-msg.cw-typing .cw-bbl span:nth-child(3) { animation-delay: 0.36s; }

.cw-chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  align-self: flex-start; max-width: 100%;
  animation: rise 0.3s var(--ease-out-cine);
}
.cw-chip {
  font-family: inherit; font-size: 0.76rem; line-height: 1.2;
  padding: 8px 12px;
  border-radius: 13px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer; text-align: left;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.cw-chip:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }

.cw-foot {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px;
  border-top: 1px solid var(--border-subtle);
}
.cw-in {
  flex: 1;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  color: var(--text);
  font-family: inherit; font-size: 0.82rem;
  outline: none;
  transition: border-color var(--dur-fast);
}
.cw-in::placeholder { color: var(--text-faint); }
.cw-in:focus { border-color: var(--border-strong); }
.cw-go {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  background: var(--accent-bg); color: var(--accent-fg);
  border: none; cursor: pointer;
  display: grid; place-items: center; flex: none;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.cw-go svg { width: 15px; height: 15px; stroke-width: 2; }
.cw-go:hover:not(:disabled) { transform: scale(1.06); }
.cw-go:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 420px) {
  .cw-panel { width: calc(100vw - 32px); height: min(480px, 70dvh); }
  .cw-wrap { right: 14px; bottom: 14px; }
}

/* ============================================================
   FAVORITOS · PROYECTOS · HISTORIAL — controles compartidos
   ============================================================ */

/* Cabecera con botón de acción a la derecha */
.rk-head { position: relative; }
.rk-clear-btn {
  position: absolute; top: 26px; right: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  padding: 8px 15px; font: inherit; font-size: 0.8rem; font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.rk-clear-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border); }
.rk-clear-btn.rk-primary {
  background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); font-weight: 600;
}
.rk-clear-btn.rk-primary:hover { opacity: 0.9; }

/* Toast mínimo */
.rk-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 10px 18px; font-size: 0.84rem; font-weight: 500;
  box-shadow: var(--shadow-pop); z-index: 3000;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.rk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---- Proyectos: grid de tarjetas ---- */
.prj-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px; margin-top: 22px;
}
.prj-grid[hidden] { display: none; }
.prj-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.prj-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.prj-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.prj-cover { aspect-ratio: 4 / 3; background: var(--bg-subtle); overflow: hidden; }
.prj-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prj-cover.is-empty { display: grid; place-items: center; color: var(--text-faint); }
.prj-cover.is-empty svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.prj-card-body { padding: 12px 14px 14px; }
.prj-card-name { font-size: 0.9rem; font-weight: 600; color: var(--text); margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prj-card-meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); margin: 0; }
.prj-card-acts {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 6px;
  opacity: 0; transition: opacity var(--dur-fast);
}
.prj-card:hover .prj-card-acts, .prj-card:focus-within .prj-card-acts { opacity: 1; }
.prj-mini {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(10,10,11,0.6); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  color: #fff; cursor: pointer; transition: background var(--dur-fast);
}
.prj-mini svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.prj-mini:hover { background: rgba(10,10,11,0.85); }
.prj-mini-del:hover { background: #b0243a; border-color: #b0243a; }

/* ---- Proyectos: detalle ---- */
.prj-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none; color: var(--text-muted);
  font: inherit; font-size: 0.82rem; cursor: pointer; padding: 0; margin-bottom: 14px;
  transition: color var(--dur-fast);
}
.prj-back:hover { color: var(--text); }
.prj-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.prj-items { margin-top: 20px; }
.prj-items[hidden] { display: none; }
.prj-items .iv-gen { aspect-ratio: 1 / 1; }
.prj-item-ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--bg-subtle); color: var(--text-faint); }
.prj-item-ph svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* ---- Selector flotante "Añadir a proyecto" ---- */
.prj-menu {
  position: absolute; z-index: 3200; min-width: 190px; max-width: 260px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.prj-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: transparent; border: none; border-radius: var(--radius-sm);
  padding: 9px 11px; font: inherit; font-size: 0.84rem; color: var(--text);
  cursor: pointer; text-align: left; width: 100%;
  transition: background var(--dur-fast);
}
.prj-menu-item:hover { background: var(--surface-hover); }
.prj-menu-item > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prj-menu-count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); flex: none; }
.prj-menu-div { height: 1px; background: var(--border-subtle); margin: 4px 2px; }
.prj-menu-new { color: var(--text-muted); font-weight: 500; }

/* ---- Historial: lista ---- */
.hist-list { margin-top: 22px; display: flex; flex-direction: column; }
.hist-day {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); margin: 18px 0 8px;
}
.hist-day:first-child { margin-top: 0; }
.hist-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 4px; border-bottom: 1px solid var(--border-subtle);
}
.hist-row:hover { background: var(--surface); }
/* Fallback de media rota: llena y centra el ícono sin romper el contenedor */
.rk-media-fallback { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-faint); }
.rk-media-fallback svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hist-row.is-openable { cursor: pointer; border-radius: 10px; }
.hist-row.is-openable:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 40%, transparent); outline-offset: -2px; }
/* Tarjeta de proyecto reabrible: cursor + realce sutil al pasar */
.prj-items .iv-gen.is-openable { cursor: pointer; }
.prj-items .iv-gen.is-openable:hover { border-color: color-mix(in srgb, var(--text) 26%, transparent); }
.prj-items .iv-gen.is-openable:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 40%, transparent); outline-offset: 2px; }
.hist-thumb {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--bg-subtle); overflow: hidden;
  display: grid; place-items: center; color: var(--text-faint);
}
.hist-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hist-thumb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hist-thumb-document, .hist-thumb-video { color: var(--text-muted); }
.hist-body { flex: 1; min-width: 0; }
.hist-title { font-size: 0.88rem; color: var(--text); margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-sub { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-acts { flex: none; display: flex; gap: 4px; opacity: 0.55; transition: opacity var(--dur-fast); }
.hist-row:hover .hist-acts { opacity: 1; }
.hist-act {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: none; border-radius: var(--radius-full);
  color: var(--text-muted); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast);
}
.hist-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hist-act:hover { background: var(--surface-hover); color: var(--text); }
.hist-del:hover { color: #d24; }

@media (max-width: 560px) {
  .rk-clear-btn { position: static; margin-top: 4px; }
  .rk-head { align-items: center; }
}

/* ---- Modal in-page (crear/renombrar/confirmar) ---- */
.rk-modal {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(6, 6, 8, 0.62); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--dur-fast);
}
.rk-modal.is-on { opacity: 1; }
.rk-modal-box {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: 22px 22px 18px;
  transform: translateY(8px) scale(0.98); transition: transform var(--dur-fast);
}
.rk-modal.is-on .rk-modal-box { transform: none; }
.rk-modal-title { font-size: 1.02rem; font-weight: 650; color: var(--text); margin: 0 0 6px; letter-spacing: var(--tracking-snug); }
.rk-modal-msg { font-size: 0.86rem; line-height: 1.5; color: var(--text-muted); margin: 0 0 4px; }
.rk-modal-input {
  width: 100%; margin-top: 12px;
  background-color: var(--bg-subtle); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 11px 13px;
  color: var(--text); font-family: inherit; font-size: 0.9rem; outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.rk-modal-input::placeholder { color: var(--text-faint); }
.rk-modal-input:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--focus-ring); }
.rk-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.rk-modal-btn {
  border-radius: var(--radius-full); padding: 9px 18px;
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast);
}
.rk-modal-cancel { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.rk-modal-cancel:hover { background: var(--surface-hover); color: var(--text); }
.rk-modal-ok { background: var(--accent-bg); border: 1px solid var(--accent-bg); color: var(--accent-fg); }
.rk-modal-ok:hover { opacity: 0.9; }
.rk-modal-ok.is-danger { background: #c0293e; border-color: #c0293e; color: #fff; }
.rk-modal-ok.is-danger:hover { background: #a82335; }

/* Favoritos: recorta captions largos para que no parezcan un bloque roto */
.fav-grid .iv-gen-cap p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}

/* ---- Chip de "proyecto activo" en la topbar (siempre visible) ---- */
.active-prj-chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius-full); padding: 3px 4px 3px 3px;
  max-width: 320px; min-width: 0;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.active-prj-chip[hidden] { display: none; }
/* Estado apagado: "Sin proyecto" en gris, borde punteado */
.active-prj-chip:not(.is-on) .active-prj-open strong { color: var(--text-faint); font-weight: 500; }
/* Estado encendido: borde sólido + punto verde pulsante */
.active-prj-chip.is-on { border-style: solid; border-color: var(--border-strong); }
.active-prj-chip.is-on .active-prj-open::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--success, #4ade80);
  animation: prjPulse 2.2s ease-in-out infinite;
}
@keyframes prjPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.active-prj-chev { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--text-faint); stroke-width: 2; }
.active-prj-open {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--text); font: inherit; font-size: 0.8rem;
  padding: 4px 6px 4px 8px; border-radius: var(--radius-full);
  transition: background var(--dur-fast);
}
.active-prj-open:hover { background: var(--surface-hover); }
.active-prj-open svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--text-muted); stroke-width: 1.7; }
.active-prj-pre { color: var(--text-muted); flex: none; white-space: nowrap; }
.active-prj-open strong { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.active-prj-x {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  background: transparent; border: none; border-radius: var(--radius-full);
  color: var(--text-faint); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast);
}
.active-prj-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.active-prj-x:hover { background: var(--surface-hover); color: var(--text); }

@media (max-width: 760px) {
  .active-prj-chip { max-width: 170px; }
  .active-prj-pre { display: none; }
}

/* ---- Botón "Crear proyecto" dentro del Agent ---- */
.agent-actions { display: flex; justify-content: center; align-items: center; gap: 18px; }
/* Solo en el estado inicial (como los chips); oculto durante el chat activo */
.agent:not(.is-empty) .agent-actions { display: none; }
/* Misma familia que el Prompt Creator: círculo glass + texto, sin píldora */
.agent-newproj {
  display: inline-flex; align-items: center; gap: 11px;
  background: none; border: 0; padding: 0;
  color: var(--text); font: inherit; cursor: pointer;
}
.agent-newproj .pc-ic-svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Textarea de descripción dentro del modal */
.rk-modal-area { resize: vertical; min-height: 76px; line-height: 1.5; }

/* Descripción del proyecto en la tarjeta */
.prj-card-desc {
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; margin: 0 0 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Botón "Continuar" en la tarjeta y detalle del proyecto */
.prj-continue {
  margin-top: 11px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-bg); color: var(--accent-fg);
  border: none; border-radius: var(--radius-full);
  padding: 8px 15px; font: inherit; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.prj-continue:hover { opacity: 0.9; transform: translateY(-1px); }
.prj-continue svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }

/* Tarjeta de Conversación del proyecto — el chat del Agent visto como su propio
   elemento (reemplaza al botón "Continuar este proyecto"). */
.prj-convo {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin: 4px 0 22px; padding: 14px 16px; text-align: left;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 16px; cursor: pointer; font: inherit;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.prj-convo:hover {
  border-color: color-mix(in srgb, var(--text) 24%, transparent);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  transform: translateY(-1px);
}
.prj-convo-ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; color: var(--accent-fg);
  background: var(--accent-bg);
}
.prj-convo-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prj-convo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prj-convo-title { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.prj-convo-preview { font-size: 0.82rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prj-convo-meta { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-top: 2px; }
.prj-convo-arrow { flex: none; color: var(--text-muted); transition: transform var(--dur-fast); }
.prj-convo:hover .prj-convo-arrow { transform: translateX(3px); color: var(--text); }
.prj-convo-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Selector del chip: proyecto actual marcado, salir en rojo suave */
.prj-menu-item.is-current { background: var(--surface-hover); font-weight: 600; }
.prj-menu-item.is-current .prj-menu-count { color: var(--success, #4ade80); }
.prj-menu-exit { color: #e2606f; }
.prj-menu-exit:hover { color: #ef8791; }

/* ---- Acciones rápidas dentro del "Detalle de generación" ---- */
.iv-detail-quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 2px 0 6px;
}
.iv-detail-qbtn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bg-subtle); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 11px 6px;
  color: var(--text-muted); font: inherit; font-size: 0.68rem; font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.iv-detail-qbtn:hover { background: var(--surface-hover); border-color: var(--border); color: var(--text); }
.iv-detail-qbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* "Me gusta" marcado: corazón relleno en rojo */
.iv-detail-qbtn.is-on { color: #e2506a; border-color: rgba(226,80,106,0.35); }
.iv-detail-qbtn.is-on svg { fill: currentColor; stroke: currentColor; }

/* ============================================================
   VIDEO — tiles reales, badge, popup de detalle y slider estético
   (reutiliza .iv-grid / .iv-gen / .iv-detail de Imagen Premium)
   ============================================================ */
.iv-gen video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1200ms var(--ease-out-cine);
}
.iv-gen:hover video { transform: scale(1.03); }
.vd-gen { background: #050506; }
.vd-tile-badge {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-full);
  background: rgba(8, 8, 10, 0.62); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18); pointer-events: none;
}
.vd-tile-badge svg { width: 12px; height: 12px; fill: #fff; margin-left: 1px; }

/* Detalle de video: media grande y contenida */
.vd-detail-media { background: #050506; display: flex; align-items: center; justify-content: center; }
.vd-detail-media video {
  width: auto; height: auto;
  max-height: 88vh;
  max-width: min(1378px, calc(96vw - clamp(300px, 24vw, 380px) - 2px));
  display: block; background: #050506;
}
@media (max-width: 900px) {
  .vd-detail-media { max-height: 52vh; }
  .vd-detail-media video { max-height: 52vh; }
}

/* Barra de segundos (duración) — estética de marca, no el range por defecto */
#vdDurationRange {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 16px; background: transparent; cursor: pointer; margin-top: 2px;
}
#vdDurationRange::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-full); background: var(--border); }
#vdDurationRange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -5.5px; border-radius: var(--radius-full);
  background: var(--text); border: 2px solid var(--bg-subtle);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); transition: transform var(--dur-fast);
}
#vdDurationRange:hover::-webkit-slider-thumb { transform: scale(1.15); }
#vdDurationRange::-moz-range-track { height: 4px; border-radius: var(--radius-full); background: var(--border); }
#vdDurationRange::-moz-range-progress { height: 4px; border-radius: var(--radius-full); background: var(--text-muted); }
#vdDurationRange::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: var(--radius-full);
  background: var(--text); border: 2px solid var(--bg-subtle); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
#vdDurationRange:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 4px; border-radius: var(--radius-full); }
/* Pop de duración un poco más ancho y aireado */
.vd-dur-pop { min-width: 168px; }

/* Menú de movimientos de cámara: 30+ opciones → scroll */
#vdMotionMenu { max-height: 340px; overflow-y: auto; }

/* ---- Video visible en portadas de proyecto e historial ---- */
.prj-cover { position: relative; }
.prj-cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.prj-cover .vd-tile-badge { top: 7px; left: 7px; width: 22px; height: 22px; }
.prj-cover .vd-tile-badge svg { width: 10px; height: 10px; }

/* Botón "cambiar portada" sobre la carpeta del proyecto */
.prj-cover-btn {
  position: absolute; bottom: 8px; right: 8px; z-index: 3;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(10, 10, 11, 0.6); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  color: #fff; cursor: pointer; opacity: 0;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.prj-card:hover .prj-cover-btn, .prj-card:focus-within .prj-cover-btn { opacity: 1; }
.prj-cover-btn:hover { background: rgba(10, 10, 11, 0.88); }
.prj-cover-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ============================================================
   MOBILE APP SHELL — barra inferior, safe-area, action sheet
   Solo teléfono (≤640px). El desktop no se toca.
   ============================================================ */
:root {
  --tabbar-h: 60px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* La barra de pestañas, el logo del header, el sheet y el menú móvil solo existen en móvil */
.tabbar { display: none; }
.topbar-logo { display: none; }
.create-sheet[hidden] { display: none; }
.mnav[hidden] { display: none; }

@media (max-width: 640px) {

  /* Primera pantalla en móvil: descuenta topbar + barra de pestañas */
  .home-fold {
    min-height: calc(100dvh - var(--topbar-h) - var(--safe-t) - var(--tabbar-h) - var(--safe-b) - 24px);
  }

  /* ---- Barra superior: respeta la muesca, una sola línea ---- */
  .topbar {
    height: calc(var(--topbar-h) + var(--safe-t));
    padding-top: var(--safe-t);
    padding-left: max(16px, var(--safe-l));
    padding-right: max(16px, var(--safe-r));
    gap: 10px;
  }
  .topbar-burger { display: none; }              /* lo reemplaza la pestaña "Menú" */
  .topbar-crumb { display: none; }               /* en móvil el header muestra el LOGO, no el nombre de vista */
  /* Selector de proyecto en móvil: píldora flotante bajo el topbar
     (en el topbar no cabe). Sigue apareciendo solo en las vistas de
     trabajo — el [hidden] por vista manda igual que en desktop. */
  .active-prj-chip {
    position: fixed;
    top: calc(var(--topbar-h) + var(--safe-t) + 8px);
    left: max(16px, var(--safe-l));
    z-index: 118;
    max-width: calc(100vw - 32px);
    background: color-mix(in srgb, var(--bg-subtle) 88%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
  .active-prj-pre { display: none; }   /* "Trabajando en:" no cabe a 375px */
  /* cuando la píldora está visible, el contenido baja para no quedar tapado */
  .topbar:has(#activePrjChip:not([hidden])) ~ .content { padding-top: 56px; }
  .topbar-logo {
    display: block; height: 32px; width: auto;   /* 21px originales +35% +15% */
    margin-right: auto;                          /* empuja los controles a la derecha */
  }

  /* ---- Contenido: fluye desde arriba, sin espacio muerto ---- */
  .content {
    --content-pad-x: max(16px, var(--safe-l));
    --content-pad-t: 14px;
    padding: var(--content-pad-t) var(--content-pad-x) calc(var(--tabbar-h) + var(--safe-b) + 14px);
  }
  .content.is-centered {                       /* mata el centrado vertical */
    justify-content: flex-start;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px);
  }

  /* ---- Composers fijos justo encima de la barra de pestañas.
     Si el teclado está abierto (--kb > 0), suben para quedar sobre él. ---- */
  .composer, .gen-composer, .iv-composer {
    bottom: max(calc(var(--tabbar-h) + var(--safe-b)), var(--kb, 0px));
    padding-top: 8px; padding-bottom: 10px;
    transition: bottom 0.18s var(--ease-out-soft);
  }
  /* Aquí sí se reparte en varias filas: en 375px no hay ancho para una sola y
     recortar todas las etiquetas dejaría los controles irreconocibles. */
  .iv-bar, .gen-bar--wide { flex-wrap: wrap; }

  /* ---- Agent estilo CHAT: saludo centrado arriba, chips y composer abajo ---- */
  .agent.is-empty {
    justify-content: flex-end;
    gap: 14px; padding-top: 0; padding-bottom: 0;
    min-height: calc(100dvh - var(--topbar-h) - var(--safe-t) - var(--tabbar-h) - var(--safe-b) - 30px);
  }
  .agent.is-empty .agent-home { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  .agent.is-empty .chips { order: 1; }
  .agent.is-empty .composer { order: 2; }
  /* Prompt Creator + Crear proyecto en móvil: dos TARJETAS integradas
     (mismo lenguaje que las tool-cards), no orbes flotando sueltos. */
  .agent.is-empty .agent-actions {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; padding: 0; width: 100%; margin: 0;
  }
  .agent.is-empty .agent-actions > button {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; min-height: 60px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
  }
  .agent.is-empty .agent-actions > button:active {
    transform: scale(0.985);
    transition: transform 90ms var(--ease-out-soft);
  }
  .agent.is-empty .agent-actions .pc-orb-ic {
    width: 34px; height: 34px; flex: none;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .agent.is-empty .agent-actions .pc-orb-svg,
  .agent.is-empty .agent-actions .pc-ic-svg { width: 20px; height: 20px; }
  .agent.is-empty .agent-actions .pc-orb-label {
    white-space: normal; text-align: left;
    font-size: 0.8rem; line-height: 1.25;
  }
  /* El icono de chat de la fila del saludo quedaba flotando a la
     izquierda del título centrado — en teléfono sobra. */
  .greeting-row .gen-title-ic { display: none; }
  .greeting-row { justify-content: center; }
  .greeting-h { font-size: clamp(1.3rem, 5.8vw, 1.55rem); text-wrap: balance; text-align: center; }
  .greeting-sub { font-size: var(--fs-body-s); text-wrap: balance; text-align: center; }
  .chips {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * max(16px, var(--safe-l)));
    padding: 2px max(16px, var(--safe-l)) 0;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  /* ---- Barra de pestañas inferior ---- */
  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    padding-left: var(--safe-l); padding-right: var(--safe-r);
    background: color-mix(in srgb, var(--bg-subtle) 90%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
    border-top: 1px solid var(--border-subtle);
  }
  .tab {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    color: var(--text-faint);
    font-size: 0.6rem; font-weight: 500; letter-spacing: 0.01em;
    padding: 7px 2px; min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-fast);
  }
  .tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.85; }
  .tab.is-active { color: var(--text); }
  .tab:active { opacity: 0.6; }

  /* Botón Menú (centro): fondo blanco tipo píldora que lo resalta.
     Inversión: pastilla en color de texto (blanco en dark) + contenido en color de fondo. */
  .tab-menu { position: relative; color: var(--bg); z-index: 0; }
  .tab-menu::before {
    content: "";
    position: absolute; z-index: -1;
    left: 8px; right: 8px; top: 6px; bottom: 8px;
    background: var(--text);
    border-radius: 14px;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--text) 55%, transparent);
  }
  .tab-menu.is-active { color: var(--bg); }
  .tab-menu:active::before { transform: scale(0.94); }

  /* ---- Sheet "Crear" (action sheet que sube) ---- */
  .create-sheet {
    position: fixed; inset: 0; z-index: 145;
    background: var(--scrim);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity 0.26s var(--ease-out-cine);
  }
  .create-sheet.open { opacity: 1; }
  .create-sheet-box {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 24px 24px 0 0;
    padding: 10px max(16px, var(--safe-l)) calc(20px + var(--safe-b));
    transform: translateY(100%);
    transition: transform 0.30s var(--ease-out-cine);
  }
  .create-sheet.open .create-sheet-box { transform: none; }
  .create-sheet-grab {
    width: 40px; height: 4px; border-radius: 999px;
    background: var(--border-strong);
    margin: 0 auto 14px;
  }
  .create-sheet-title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-tight); margin-bottom: 14px; }
  .create-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .create-tile {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 16px 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    color: var(--text); font-size: 0.72rem; font-weight: 500;
    cursor: pointer;
    transition: transform var(--dur-fast), border-color var(--dur-fast);
  }
  .create-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .create-tile:active { transform: scale(0.95); border-color: var(--border-strong); }

  /* ---- Menú móvil full-screen (#mobileNav) ---- */
  .mnav {
    position: fixed; inset: 0; z-index: 150;
    background: var(--scrim);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity 0.26s var(--ease-out-cine);
  }
  .mnav.open { opacity: 1; }
  /* Animación: la hoja SUBE desde abajo (tipo modal iOS) */
  .mnav-sheet {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    background: var(--bg-subtle);
    padding-top: var(--safe-t);
    transform: translateY(100%);
    transition: transform 0.40s var(--ease-out-cine);
  }
  .mnav.open .mnav-sheet { transform: none; }
  .mnav-head {
    flex: none;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--topbar-h);
    padding: 0 max(16px, var(--safe-l));
    border-bottom: 1px solid var(--border-subtle);
  }
  .mnav-logo { height: 31px; width: auto; }
  .mnav-x {
    width: 40px; height: 40px; margin-right: -8px;
    display: grid; place-items: center;
    background: none; border: none; color: var(--text-muted); cursor: pointer;
  }
  .mnav-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

  .mnav-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px max(16px, var(--safe-l)) 20px; }
  .mnav-user {
    display: flex; align-items: center; gap: 13px;
    padding: 2px 2px 18px; margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .mnav-avatar {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none;
    background: var(--surface); border: 1px solid var(--border-subtle);
  }
  .mnav-user-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mnav-user-name { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
  .mnav-user-mail { font-size: 0.8rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mnav-sec {
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-faint); margin: 18px 2px 10px;
  }
  .mnav-scroll > .mnav-sec:first-child { margin-top: 2px; }
  .mnav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mnav-tile {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 14px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    color: var(--text); font-size: 0.92rem; font-weight: 500;
    cursor: pointer; text-align: left;
    transition: transform var(--dur-fast), border-color var(--dur-fast);
  }
  .mnav-tile svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .mnav-tile:active { transform: scale(0.97); border-color: var(--border-strong); }

  .mnav-row {
    width: 100%;
    display: flex; align-items: center; gap: 13px;
    padding: 14px 6px;
    background: none; border: none;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text); font-size: 0.95rem; font-weight: 450;
    cursor: pointer; text-align: left;
  }
  .mnav-row svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; color: var(--text-muted); }
  .mnav-row:active { opacity: 0.6; }
  .mnav-logout { color: #e2506a; }
  .mnav-logout svg { color: #e2506a; }

  /* MasterCut en el menú: existe, pero se avisa que es de escritorio */
  .mnav-badge {
    margin-left: auto; flex: none;
    font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
    padding: 3px 9px;
  }

  .mnav-foot {
    flex: none;
    padding: 14px max(16px, var(--safe-l)) calc(16px + var(--safe-b));
    border-top: 1px solid var(--border-subtle);
  }
  .mnav-plan {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 13px 15px;
  }
  .mnav-plan-l { display: flex; flex-direction: column; gap: 3px; }
  .mnav-plan-name { font-size: 0.9rem; font-weight: 600; }
  .mnav-plan-frames { font-size: 0.82rem; color: var(--text-secondary); }
  .mnav-plan-frames .frames-sym { font-size: 0.6rem; }
  .mnav-plan-tot { color: var(--text-faint); }
  .mnav-recharge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--text); color: var(--bg);
    border: none; border-radius: var(--radius-full);
    padding: 9px 15px; font-size: 0.82rem; font-weight: 550; cursor: pointer;
  }
  .mnav-recharge .frames-sym { font-size: 0.62rem; }

  /* ---- FAB de soporte: oculto en móvil (se encimaba con los composers).
     El soporte puede reubicarse en el menú/drawer más adelante. ---- */
  .cw-wrap { display: none; }

  /* ---- Modales → hojas inferiores (bottom sheets) ---- */
  .av-modal { align-items: flex-end; padding: 0; }
  .av-modal-box {
    width: 100%; max-width: 100%; max-height: 92vh;
    border-radius: 22px 22px 0 0;
    padding-bottom: calc(24px + var(--safe-b));
    animation: sheet-up var(--dur-base) var(--ease-out-cine);
  }
  .palette { align-items: flex-end; padding: 0; }
  .palette-box {
    width: 100%; max-width: 100%; margin: 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: calc(12px + var(--safe-b));
    animation: sheet-up var(--dur-base) var(--ease-out-cine);
  }
}

@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ============================================================
   MOBILE · FASE 1 — Fundamentos táctiles (feel de app nativa iOS)
   Query OR: `(hover: none)` cubre CUALQUIER táctil (teléfono en
   vertical u horizontal, tablet); `(max-width: 640px)` garantiza
   el teléfono aunque el navegador no reporte el tipo de puntero.
   No afecta al desktop en ventana normal.
   ============================================================ */
@media (hover: none), (max-width: 640px) {

  /* Sin flash azul al tocar; sin retardo de 300ms en el doble toque */
  a, button, [role="button"], label, input, select, textarea,
  .tab, .chip, .tool-card, .mnav-tile, .create-tile {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Contenido y acciones que en desktop se revelan con hover:
     en táctil el hover no existe, así que SIEMPRE visibles
     (si no, en el teléfono son inaccesibles). */
  .gen-tile-cap,
  .iv-gen-cap,
  .iv-gen-actions,
  .prj-card-acts,
  .hist-acts,
  .av-circle-del,
  .prj-cover-btn,
  .cv-nav {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Feedback de pulsación tipo iOS: la superficie "se hunde" al tocar.
     Tarjetas grandes escalan; íconos y píldoras se atenúan. */
  .tool-card:active,
  .pcard:active,
  .wfx:active,
  .home-slide:active,
  .vd-banner:active,
  .av-type:active {
    transform: scale(0.985);
    transition: transform 90ms var(--ease-out-soft);
  }
  .icon-btn:active,
  .iv-act:active,
  .composer-send:active,
  .composer-attach:active,
  .search-btn:active,
  .credits-pill:active,
  .rk-clear-btn:active,
  .pcard-btn:active {
    opacity: 0.55;
    transition: opacity 60ms linear;
  }

  /* Área de toque ≥40px sin cambiar el visual: el dedo necesita más
     que la barrita de 4px del carrusel o el icono suelto del buscador. */
  .home-hero-dot { overflow: visible; }
  .home-hero-dot.is-active::after { border-radius: 999px; }
  .home-hero-dot::before {
    content: ""; position: absolute;
    left: -3px; right: -3px; top: -18px; bottom: -14px;
  }
  .search-btn { min-width: 42px; min-height: 42px; justify-content: center; }

  /* Legibilidad: el texto que SE LEE en el teléfono (prompts de tiles,
     historial, metas de proyecto) sube de ~8-11px a ≥11.5px. Los overlines
     decorativos se quedan como están. El clamp/ellipsis de cada clase
     protege el layout. */
  .gen-tile-cap p, .iv-gen-cap p { font-size: 0.8rem; }
  .gen-tile-cap span, .iv-gen-cap span, .gen-tile-badge { font-size: 0.62rem; }
  .hist-sub, .prj-card-meta, .dc-err-detail { font-size: 0.74rem; }
}

/* El hover de las tarjetas no debe "quedarse pegado" tras el toque
   (solo en táctil real; en desktop el hover sí debe seguir funcionando) */
@media (hover: none) {
  .tool-card:hover {
    transform: none;
    background: var(--surface);
    border-color: var(--border-subtle);
  }
}

@media (max-width: 640px) {
  /* iOS Safari NO hace zoom al enfocar si el campo mide ≥16px.
     El login ya lo hacía; aquí lo extendemos a todo el dashboard.
     `!important` porque debe vencer a los tamaños de cada componente
     (.iv-box textarea, .gen-box input…) — es una corrección transversal. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], input:not([type]), textarea, select {
    font-size: 16px !important;
  }

  /* Los paneles que scrollean no arrastran la página de fondo (rubber-band) */
  .mnav-scroll, .create-sheet-box, .av-modal-box, .palette-box, .content {
    overscroll-behavior: contain;
  }

  /* Targets táctiles cómodos (mínimo Apple HIG = 44px) en controles chicos */
  .icon-btn { min-width: 40px; min-height: 40px; }
}

/* ============================================================
   PERFIL DEL USUARIO  (#profileView)
   Diagramación editorial: banner ancho, identidad asimétrica,
   tarjeta de plan a la derecha, stats en tira y contenido en grilla.
   ============================================================ */
.pf-view { width: 100%; max-width: 1080px; margin: 0 auto; padding-bottom: 40px; }

/* --- Banner editable --- */
.pf-banner {
  position: relative;
  height: 236px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 12% -10%, color-mix(in srgb, var(--text) 16%, transparent), transparent 55%),
    linear-gradient(120deg, var(--surface-hover), var(--bg-subtle) 60%, var(--surface));
  border: 1px solid var(--border-subtle);
}
.pf-banner-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity var(--dur-base);
}
.pf-banner.has-img .pf-banner-media { opacity: 1; }
.pf-banner-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg) 55%, transparent));
  pointer-events: none;
}
.pf-banner-edit {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  color: var(--text); cursor: pointer;
  font-size: 0.78rem; font-weight: 500;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.pf-banner-edit:hover { background: color-mix(in srgb, var(--bg) 82%, transparent); transform: translateY(-1px); }
.pf-banner-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* --- Cuerpo --- */
.pf-shell { padding: 0 8px; }

.pf-id {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-end;
  gap: 20px;
  /* Debajo del banner, sin montarse: antes subía 56px y el nombre, la bio y la
     tarjeta de créditos quedaban sobre la imagen. */
  margin-top: 18px;
  padding: 0 6px;
  position: relative;
  z-index: 1;
}

/* Avatar con anillo que lo separa del banner */
.pf-avatar-wrap { position: relative; width: 128px; flex: none; }
.pf-avatar {
  width: 128px; height: 128px; border-radius: var(--radius-full);
  border: 5px solid var(--bg); background: var(--surface);
  object-fit: cover;
}
.pf-avatar-edit {
  position: absolute; right: 4px; bottom: 4px;
  width: 34px; height: 34px; border-radius: var(--radius-full);
  display: grid; place-items: center; cursor: pointer;
  background: var(--accent-bg); color: var(--accent-fg);
  border: 3px solid var(--bg);
  transition: transform var(--dur-fast);
}
.pf-avatar-edit:hover { transform: scale(1.06); }
.pf-avatar-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.pf-id-main { min-width: 0; padding-bottom: 4px; }
.pf-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-name {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.1;
}
.pf-name-row .pf-verified { width: 20px; height: 20px; }
.pf-role {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text-secondary);
}
.pf-handle { color: var(--text-faint); font-size: 0.9rem; margin-top: 2px; font-family: var(--font-mono); }
.pf-bio { color: var(--text-muted); font-size: 0.92rem; margin-top: 10px; max-width: 54ch; line-height: 1.5; }
.pf-bio.is-empty { color: var(--text-faint); font-style: italic; }

.pf-socials { display: flex; gap: 10px; margin-top: 12px; }
.pf-social {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.82rem; color: var(--text-secondary);
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.pf-social:hover { border-color: var(--border-strong); color: var(--text); }
.pf-social svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Lado derecho: plan activo + editar */
.pf-id-side { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 232px; flex: none; }
.pf-plan-card {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 13px 15px; background: var(--surface);
}
.pf-plan-top { display: flex; align-items: baseline; justify-content: space-between; }
.pf-plan-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.pf-plan-tag { font-size: 0.6rem; letter-spacing: 0.12em; color: var(--text-faint); font-family: var(--font-mono); }
.pf-plan-frames { font-size: 0.86rem; margin-top: 6px; display: flex; align-items: baseline; gap: 5px; }
.pf-plan-frames .frames-sym { color: var(--text-faint); }
.pf-plan-tot { color: var(--text-faint); font-size: 0.76rem; }
.pf-plan-card .meter { height: 4px; margin-top: 9px; background: color-mix(in srgb, var(--text) 14%, transparent); border-radius: var(--radius-full); overflow: hidden; }
.pf-plan-card .meter-fill { display: block; height: 100%; background: var(--text); border-radius: var(--radius-full); }
.pf-edit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius-full);
  background: var(--accent-bg); color: var(--accent-fg);
  border: 0; cursor: pointer; font-size: 0.85rem; font-weight: 600;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.pf-edit-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.pf-edit-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* --- Stats en vivo --- */
.pf-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 26px 6px 0;
}
.pf-stat {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--surface);
  cursor: pointer; text-align: left; color: inherit;
  transition: border-color var(--dur-fast), transform var(--dur-fast), background var(--dur-fast);
}
.pf-stat--static { cursor: default; }
.pf-stat:not(.pf-stat--static):hover { border-color: var(--border-strong); transform: translateY(-2px); background: var(--surface-hover); }
.pf-stat-n { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pf-stat-l { font-size: 0.76rem; color: var(--text-faint); letter-spacing: 0.01em; }

/* --- Pestañas --- */
.pf-tabs {
  display: flex; gap: 4px; margin: 28px 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.pf-tab {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: 12px 14px; color: var(--text-faint);
  font-size: 0.9rem; font-weight: 600;
  transition: color var(--dur-fast);
}
.pf-tab:hover { color: var(--text-secondary); }
.pf-tab.is-active { color: var(--text); }
.pf-tab.is-active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; background: var(--text); border-radius: var(--radius-full);
}

/* --- Filtro de creaciones --- */
.pf-filters {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px;
  margin: 18px 0 4px;
}
.pf-search { flex: 1 1 220px; min-width: 0; max-width: 320px; }
.pf-search-in {
  width: 100%; height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-family: inherit; font-size: 0.86rem;
  transition: border-color var(--dur-fast) var(--ease-out-cine);
}
.pf-search-in::placeholder { color: var(--text-muted); }
.pf-search-in:focus { outline: none; border-color: var(--border-strong); }
/* la X nativa del type=search desentona con el resto de la interfaz */
.pf-search-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip {
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit; font-size: 0.78rem;
  cursor: pointer; white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-out-cine),
    border-color var(--dur-fast) var(--ease-out-cine),
    background var(--dur-fast) var(--ease-out-cine);
}
.pf-chip:hover { color: var(--text-secondary); border-color: var(--border); }
.pf-chip.is-active {
  color: var(--bg); background: var(--text); border-color: var(--text);
}

@media (max-width: 640px) {
  .pf-filters { gap: 8px 10px; }
  .pf-search { flex-basis: 100%; max-width: none; }
  /* las pastillas se recorren en horizontal en vez de apilarse en tres filas */
  .pf-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
}

/* --- Grilla de contenido --- */
.pf-panel { margin: 20px 6px 0; }
.pf-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.pf-cell {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface); border: 1px solid var(--border-subtle);
  cursor: pointer; transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.pf-cell:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.pf-cell img, .pf-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-cell-ic { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-faint); }
.pf-cell-ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pf-cell-tag {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--text-secondary); font-family: var(--font-mono);
}
/* Tarjeta de proyecto (pestaña Proyectos) */
.pf-cell--prj { aspect-ratio: auto; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 130px; }
.pf-prj-name { font-weight: 600; font-size: 0.95rem; }
.pf-prj-meta { font-size: 0.76rem; color: var(--text-faint); margin-top: 3px; }

.pf-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 54px 20px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-xl);
  color: var(--text-faint);
}
.pf-empty-ic { width: 40px; height: 40px; opacity: 0.7; }
.pf-empty-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.pf-empty strong { color: var(--text-secondary); font-weight: 600; font-size: 1rem; }
.pf-empty span { font-size: 0.86rem; }

/* --- Editor inline (se despliega dentro del perfil, sin overlay) --- */
.pf-edit {
  margin: 18px 6px 0;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--surface); padding: 18px;
  animation: pfEditIn 0.24s var(--ease-out-cine, cubic-bezier(0.16,1,0.3,1));
}
@keyframes pfEditIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pf-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-field--wide { grid-column: 1 / -1; }
.pf-field > span { font-size: 0.76rem; color: var(--text-faint); font-weight: 500; letter-spacing: 0.01em; }
.pf-field input, .pf-field textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle);
  color: var(--text); font-size: 0.92rem; font-family: inherit; resize: none;
  transition: border-color var(--dur-fast);
}
.pf-field input:focus, .pf-field textarea:focus { outline: none; border-color: var(--border-strong); }
.pf-edit-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* --- Responsive --- */
@media (max-width: 860px) {
  .pf-id { grid-template-columns: auto 1fr; }
  .pf-id-side { grid-column: 1 / -1; width: 100%; flex-direction: row; align-items: center; }
  .pf-plan-card { flex: 1; }
  .pf-edit-btn { flex: none; }
}
@media (max-width: 560px) {
  .pf-banner { height: 168px; border-radius: var(--radius-lg); }
  .pf-id { margin-top: 14px; gap: 14px; }
  .pf-avatar, .pf-avatar-wrap { width: 96px; }
  .pf-avatar { height: 96px; }
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
  .pf-id-side { flex-direction: column; align-items: stretch; }
  .pf-tabs { overflow-x: auto; }
  .pf-edit-grid { grid-template-columns: 1fr; }
}

/* ---- Imagen Premium en pantallas cortas ----------------------------------
   Portátiles de 768–900px de alto: el composer reserva 10vh de espacio muerto
   bajo su caja y el título va a tamaño de escritorio. En vertical no sobra
   nada — el título, la baraja, el chip de "continuar sesión" y el composer
   tienen que caber sin scroll — así que ese margen se recorta y se lo queda la
   baraja, que es lo que se mira. Va al final del archivo a propósito: las
   media queries no suman especificidad, y las reglas base que sobrescribe
   están más arriba. */
@media (min-width: 641px) and (max-height: 900px) {
  .iv-composer { padding-bottom: 4vh; }
  .iv-title h1 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); }
  .iv-title-ic { width: 29px; height: 29px; }
  .iv-title-ic svg { width: 15px; height: 15px; }
  .iv-sub { font-size: 0.72rem; }
}

/* ============================================================
   COVER ART CREATOR — flujo por pasos
   Puerta de tipo (Single / EP / Álbum) + seis pasos. Los paneles
   se muestran de uno en uno; el lienzo y el composer no se
   duplican, se enseñan u ocultan según el paso.
   ============================================================ */
/* El display de .cvb-body gana al [hidden] del navegador, asi que ocultarlo
   con el atributo no bastaba: seguia ocupando su sitio bajo la puerta. */
.cvb-body[hidden] { display: none; }

.cvw-gate { max-width: 760px; margin: 8px auto 0; text-align: center; }
.cvw-gate[hidden] { display: none; }
.cvw-gate-q {
  margin: 0 0 18px;
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.cvw-types {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.cvw-type {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 16px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-cine),
              background var(--dur-fast) var(--ease-out-cine),
              transform var(--dur-fast) var(--ease-out-cine);
}
.cvw-type:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-hover); transform: translateY(-2px); }
.cvw-type-ic { width: 40px; height: 40px; display: grid; place-items: center; color: var(--text); }
.cvw-type-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.cvw-type-n { font-size: 1.05rem; font-weight: 600; }
.cvw-type-d { font-size: 0.78rem; color: var(--text-muted); }
/* Los no disponibles se ven, pero no engañan: apagados y sin cursor */
.cvw-type.is-soon { opacity: .45; cursor: not-allowed; }
.cvw-type.is-soon:hover { transform: none; }

/* ---- Barra de pasos ---- */
.cvw { max-width: 1248px; margin: 0 auto 14px; display: flex; align-items: flex-end; gap: 14px; }
.cvw[hidden] { display: none; }
.cvw-steps {
  display: flex; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-subtle);
}
.cvw-steps::-webkit-scrollbar { display: none; }
.cvw-step {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 11px;
  border: 0; background: transparent;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--text-muted);
  font-family: inherit; font-size: var(--fs-body-s); font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out-cine),
              border-color var(--dur-fast) var(--ease-out-cine);
}
.cvw-step i {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 0.64rem; font-style: normal;
}
.cvw-step:hover { color: var(--text-secondary); }
.cvw-step.is-active { color: var(--text); border-bottom-color: var(--text); }
.cvw-step.is-active i { background: var(--text); color: var(--bg); border-color: var(--text); }
.cvw-step.is-done i { background: var(--surface-hover); color: var(--text); }
/* Un paso al que todavía no se puede llegar no debe parecer pulsable */
.cvw-step:disabled { opacity: .38; cursor: not-allowed; }


/* ---- Acceso a la galeria de portadas ----
   Centrado bajo la puerta. Solo se ve ahi: en cuanto se elige tipo estas en
   el flujo y esto seria ruido. Y solo si hay algo que ver — de eso se ocupa
   cvSyncGallery, que le pone el [hidden] cuando la lista esta vacia. */
.cvw-gallery-row { display: flex; justify-content: center; margin-top: 26px; }
.cover-view.is-picked .cvw-gallery-row { display: none; }
.cvw-gallery {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: var(--surface); color: var(--text-secondary);
  font-family: inherit; font-size: 0.86rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out-cine);
}
.cvw-gallery:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.cvw-gallery[hidden] { display: none; }
.cvw-gallery svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.cvw-gallery-n {
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text);
}
/* ---- Empezar de nuevo ----
   Discreto y a la derecha: es una salida, no una accion del paso. Comparte
   la linea inferior con las pestanas para que el borde de la barra siga
   siendo una sola linea continua. */
.cvw-steps { flex: 1 1 auto; min-width: 0; }
.cvw-restart {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 6px;
  padding: 6px 13px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: 0.76rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.cvw-restart:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.cvw-restart svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 640px) {
  /* a 375px el texto no cabe junto a seis pestanas: queda el icono */
  .cvw-restart span { display: none; }
  .cvw-restart { padding: 6px; }
}
.cvw-hint { margin: 10px 2px 0; font-size: 0.84rem; color: var(--text-muted); }

/* ---- Paneles ---- */
/* El tope lo marca el bloque mas ancho del flujo, que son los borradores.
   Los demas (prompt 900, editar/exportar 860) traen el suyo mas estrecho, asi
   que subir este solo suelta a quien quiere ocuparlo. */
.cvw-panel { max-width: 1248px; margin: 0 auto; padding-bottom: 40px; }
.cvw-panel[hidden] { display: none; }
.cvw-lead { margin: 0 0 12px; color: var(--text-secondary); font-size: 0.92rem; }
.cvw-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cvw-promptbox textarea { min-height: 160px; resize: vertical; }

/* Borradores: tres, del mismo tamaño, cuadrados como la portada */
.cvw-drafts {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.cvw-draft {
  position: relative;
  padding: 0; border: 2px solid transparent; border-radius: var(--radius-lg);
  background: var(--bg-subtle); cursor: pointer; overflow: hidden;
  aspect-ratio: 1 / 1;
  transition: border-color var(--dur-fast) var(--ease-out-cine),
              transform var(--dur-fast) var(--ease-out-cine);
}
.cvw-draft img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvw-draft:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.cvw-draft.is-sel { border-color: var(--text); }
.cvw-draft-tag {
  position: absolute; left: 10px; top: 10px;
  padding: 3px 9px; border-radius: var(--radius-full);
  background: rgba(8,8,10,.72); color: var(--ink-100);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .1em;
}
.cvw-draft.is-sel .cvw-draft-tag { background: var(--text); color: var(--bg); }

/* Editar y Exportar: imagen a la izquierda, controles a la derecha */
.cvw-edit {
  display: grid; gap: clamp(16px, 2.4vw, 30px);
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: start;
}
.cvw-edit-pic {
  aspect-ratio: 1 / 1; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}
.cvw-edit-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvw-edit-side { min-width: 0; }
.cvw-apply { width: 100%; justify-content: center; }
.cvw-exports { display: flex; flex-direction: column; gap: 8px; }


@media (max-width: 860px) {
  .cvw-edit { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Paso 4 (Editar) y 6 (Exportar), a la escala del resto ---- */
.cvw-edit {
  max-width: 1040px;
  grid-template-columns: minmax(0, 560px) minmax(280px, 380px);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: center;              /* la columna de controles, a media portada */
}

/* El area de peticion heredaba el alto del compositor del paso 1 (42px fijos)
   y salia como una rendija con barra de scroll: no cabia ni el marcador de
   posicion. Aqui manda el contenido del paso, no aquel. */
#cvEditPrompt {
  height: auto;
  min-height: 132px;
  padding: 14px 16px;
  font-size: 1rem; line-height: 1.5;
  border-radius: var(--radius-lg);
  resize: vertical;
  overflow: auto;                   /* solo aparece la barra si de verdad se pasa */
}

.cvw-edit-side .cvw-lead { margin-bottom: 14px; }
.cvw-acts-col { flex-direction: column; gap: 10px; }
.cvw-acts-col > * { width: 100%; }
.cvw-apply { padding: 13px 22px; font-size: 0.96rem; }

/* Salida secundaria: misma medida que la accion principal pero en contorno,
   para que se lea como "sigue sin gastar" y no compita con ella. */
.cvw-skip {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: transparent; color: var(--text-secondary);
  font-family: inherit; font-size: 0.92rem; font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out-cine);
}
.cvw-skip:hover {
  background: var(--surface-hover); color: var(--text);
  border-color: var(--border-strong); transform: translateX(2px);
}
.cvw-skip svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Exportar: los botones de formato, a la misma altura de golpe */
.cvw-exports .avs-mini-btn { padding: 12px 18px; font-size: 0.82rem; }

/* "Descargar todo" cierra la lista y es la opcion por defecto de quien no
   quiere elegir: va en solido, separada de las tres de arriba por una linea. */
.cvw-ex-all {
  margin-top: 6px; padding: 13px 20px;
  border: 0; border-radius: var(--radius-full);
  background: var(--accent-bg); color: var(--accent-fg);
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
}
.cvw-ex-all:hover:not(:disabled) { transform: translateY(-1px); }
.cvw-ex-all:disabled { opacity: .5; cursor: default; }

@media (max-width: 860px) {
  .cvw-edit { grid-template-columns: minmax(0, 1fr); max-width: 460px; align-items: stretch; }
  #cvEditPrompt { min-height: 108px; }
}

/* ---- Paso 1: el brief, centrado y con cuerpo ----
   La barra de pasos tiene que quedarse anclada arriba, así que no vale centrar
   la sección entera. Lo que se hace es repartir el hueco sobrante con márgenes
   automáticos: la pista se lleva el de arriba y el compositor el de abajo, y el
   par queda centrado entre la barra y el pie. Sin esto el formulario flotaba
   pegado al techo con media pantalla vacía debajo. */
.app-main:has(.cover-view.is-short:not([hidden])) { height: 100dvh; }
.app-main:has(.cover-view.is-short:not([hidden])) > .content {
  min-height: 0;
  overflow: auto;      /* auto y no hidden: en ventanas bajas hay que poder ver el botón */
}
.cover-view.is-short {
  flex: 1 1 auto;
  /* SIN min-height: 0 a proposito. Con el, la seccion podia encogerse por
     debajo de su contenido: en pantallas bajas los hijos se desbordaban por
     abajo, el relleno inferior de .content se quedaba en el borde de la
     seccion y el ultimo boton acababa debajo de la barra de pestanas. Dejando
     el min-height automatico, la seccion crece cuando hace falta y .content
     desplaza con su relleno intacto; cuando sobra sitio, flex-grow la estira
     igual y los margenes automaticos siguen centrando. */
  display: flex; flex-direction: column;
}
.cover-view.is-short > .cvw { flex: 0 0 auto; }
/* Los pasos con panel (2) no tienen pista ni compositor visibles: el panel es
   todo el contenido, asi que el hueco se reparte a sus dos lados. */
.cover-view.is-short > .cvw-panel {
  margin-block: auto;
  /* width: 100% no sobra: como item de una columna flexible con margenes
     laterales automaticos, el panel se encogia a su ancho natural (577px en
     vez de sus 980) y la caja del prompt no llegaba a su medida. */
  width: 100%;
}
/* .is-picked le fija un margin-top a esta misma pista con la misma
   especificidad, y gana por orden: hay que subir la apuesta para que el
   reparto automatico del hueco funcione. */
.cover-view.is-picked.is-short > .cvw-hint { margin-top: auto; }
.cover-view.is-short > .cvb-body { margin-bottom: auto; padding-bottom: 0; }

/* ---- Y un compositor a la altura del resto de la sección ----
   Era el único bloque que se había quedado en la escala vieja, al lado de unas
   tarjetas de 289px y un titular de 48. Sube ~25%: ancho, campos, cuerpos de
   letra y el botón de generar. */
.cvb-composer {
  width: min(100%, 1040px);
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-xl);
}
.cvb-fields { gap: 13px; }
.cvb-composer .cvb-inp input,
.cvb-composer .cvb-inp textarea {
  padding: 13px 17px;
  font-size: 1.02rem;
  border-radius: var(--radius-lg);
}
.cvb-composer .cvb-area textarea {
  padding-right: 72px;
  height: 52px; min-height: 52px;
}
/* ---- Todas las pastillas de la barra, a la misma altura ----
   Cada control venia de un componente distinto y cada uno traia su propio
   relleno: Genero/Mood salian a 33px, Escenario a 39 y Avatar a 50, porque su
   pildora envuelve un boton que ya tenia relleno propio. En vez de perseguir
   rellenos, se fija la altura y se dejan los interiores estirarse. */
.cvb-composer .cvb-pick-btn,
.cvb-composer .iv-scene-btn,
.cvb-composer .ava-picker .ava-pill { height: 38px; }
.cvb-composer .ava-picker .ava-pill { padding-block: 0; }
.cvb-composer .ava-select-main,
.cvb-composer .ava-select-x { height: 100%; padding-block: 0; }
.cvb-composer .ava-select-main,
.cvb-composer .iv-scene-btn { font-size: 0.86rem; }
.cvb-composer .cvb-generate {
  padding: 12px 24px;
  font-size: 0.94rem;
}
.cvb-composer .cvb-generate svg { width: 19px; height: 19px; }
.cvb-composer .cvb-add { width: 38px; height: 38px; }

/* Con sitio de sobra el concepto arranca aún más alto: es el campo donde de
   verdad se escribe. */
@container coverview (min-width: 980px) {
  .cvb-composer .cvb-area textarea { min-height: 116px; }
}

@media (max-width: 860px) {
  /* En estrecho manda que quepa, no que luzca: vuelve a los tamaños compactos */
  .cvb-composer { padding: 12px; gap: 10px; border-radius: var(--radius-lg); }
  .cvb-composer .cvb-inp input,
  .cvb-composer .cvb-inp textarea { padding: 11px 14px; font-size: 0.94rem; }
  .cvb-composer .cvb-generate { padding: 10px 18px; font-size: 0.86rem; }
}


/* Las filas del desplegable nativo: el navegador respeta estos dos colores y
   sin ellos hereda los del sistema, que en oscuro se quedaban en gris claro
   sobre blanco. */
select option,
select optgroup {
  background-color: var(--surface);
  color: var(--text);
}


/* ---- Desplegables propios de Genero y Mood ----
   Mismo aspecto cerrado que las pastillas de siempre, pero el panel es del
   componente .model-menu: abre HACIA ARRIBA y lo pinta la app, no el sistema
   (el nativo salia con su borde y su fondo claros sobre el tema oscuro). */
.cvb-pick { position: relative; display: inline-block; min-width: 0; }
.cvb-pick-btn {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 11px 7px 13px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.78rem;
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cvb-pick-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.cvb-pick-btn.is-empty { color: var(--text-muted); }
.cvb-pick-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.cvb-pick-chev { flex: none; width: 14px; height: 14px; color: var(--text-faint); display: block; }
.cvb-pick-chev svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-out-cine);
}
.cvb-pick-btn[aria-expanded="true"] .cvb-pick-chev svg { transform: rotate(180deg); }

/* El menu: una sola columna, que aqui no hay iconos ni descripciones */
.cvb-pick-menu { left: 0; right: auto; min-width: 100%; max-height: 300px; }
/* Dos columnas: nombre y, a su lado, el marcador de seleccionado. Con una
   sola, el ::after del check caia a la fila de abajo. */
.cvb-pick-menu li { grid-template-columns: 1fr auto; gap: 10px; padding: 7px 10px; align-items: center; }
.cvb-pick-menu li:hover { background: var(--surface-hover); }
.cvb-pick-menu li.is-selected { background: var(--surface-hover); }
.cvb-pick-n { font-size: 0.8rem; color: var(--text); }
.cvb-pick-menu li.is-selected .cvb-pick-n { font-weight: 600; }

/* ---- Puerta: tarjetas con portada dentro ----
   Cada opción enseña una portada de verdad de fondo, no solo un icono de
   línea: la herramienta hace portadas y la puerta debería enseñarlas. Va de
   fondo y no como miniatura encima del texto porque así la tarjeta no crece
   —el encargo era justo el contrario— y el nombre se lee sobre la imagen.

   El bloque se dimensiona aquí entero —ancho de la puerta, tarjeta, cuerpos de
   letra y aires— para poder subirlo o bajarlo de una pieza. El titular y su
   icono quedan FUERA: son los mismos que en Imagen Premium, Workflow o Video,
   y ahí tienen que seguir pase lo que pase con las tarjetas. */
.cvw-gate { max-width: 900px; }
.cvw-gate-q { margin-bottom: 22px; }
.cvw-types { gap: 17px; grid-template-columns: repeat(auto-fit, minmax(213px, 1fr)); }

.cvw-type {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 9px;
  padding: 26px 18px 22px;
  /* Cuadradas, como la portada que representan. El alto sale del ancho, asi
     que las tres columnas dan tres cuadrados perfectos sin fijar pixeles. */
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  justify-content: flex-end;      /* el texto se apoya abajo, sobre la imagen */
}
.cvw-type-img { position: absolute; inset: 0; z-index: -1; display: block; }
.cvw-type-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: .34;
  transition: opacity var(--dur-base) var(--ease-out-cine),
              transform var(--dur-base) var(--ease-out-cine);
}
/* Velo de abajo arriba: sin él, el nombre se pierde sobre las zonas claras de
   la portada (la de Single es amarilla). */
.cvw-type-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    var(--surface) 12%,
    color-mix(in srgb, var(--surface) 72%, transparent) 48%,
    color-mix(in srgb, var(--surface) 46%, transparent) 100%);
}
.cvw-type:hover:not(:disabled) .cvw-type-img img { opacity: .5; transform: scale(1.04); }

/* Los iconos son los PNG de assets/ICONOS COVER ART: blancos sobre
   transparente, asi que en tema claro habria que buscarlos con lupa. Como solo
   hay un archivo por tipo (no la pareja claro/oscuro que usa el wordmark), se
   invierten por CSS. */
.cvw-type-ic { width: 64px; height: 64px; margin-bottom: 6px; }
.cvw-type-ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
[data-theme="light"] .cvw-type-ic img { filter: invert(1); }
.cvw-type-n { font-size: 1.46rem; }
.cvw-type-d { font-size: 1.14rem; }

@media (max-width: 560px) {
  /* A 375px tres columnas no caben con sus aires: pasan a dos y la tercera
     baja, que sigue siendo legible. */
  .cvw-types { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .cvw-type { padding: 18px 12px 15px; border-radius: var(--radius-lg); }
  .cvw-type-ic { width: 46px; height: 46px; margin-bottom: 4px; }
  .cvw-type-n { font-size: 1.14rem; }
  .cvw-type-d { font-size: 0.92rem; }
}

/* ---- El titular solo vive en la puerta ----
   "Cover Art Creator" tiene sentido mientras eliges qué vas a publicar: es la
   portada de la herramienta. En cuanto entras al flujo, la barra de pasos ya
   dice dónde estás, y repetir un titular de 3rem en cada paso solo empuja el
   contenido hacia abajo. */
.cover-view.is-picked > .cvx-head { display: none; }
.cover-view.is-picked > .cvw-hint { margin-top: 14px; }

/* ---- La puerta ----
   La pista se queda, pero con aire: pegada a las tarjetas parecía su pie de
   foto en vez de la guía del paso siguiente. */
.cover-view:not(.is-picked) > .cvw-hint { margin-top: 30px; }

/* Y la puerta es una pantalla corta —titular y tres tarjetas—, así que se
   centra en vertical en vez de quedarse arriba con media pantalla vacía
   debajo. En cuanto se elige tipo, el flujo vuelve a empezar arriba, que es
   donde tiene que estar una barra de pasos. */
.content:has(> .cover-view:not(.is-picked):not([hidden])) { justify-content: center; }
/* El aire de abajo solo se iguala al de arriba a partir de tablet. En móvil ese
   hueco es la barra de pestañas, y al sobrescribirlo las tarjetas se metían
   por debajo de ella. */
@media (min-width: 641px) {
  .content:has(> .cover-view:not(.is-picked):not([hidden])) {
    padding-bottom: var(--content-pad-t, 24px);
  }
}
.cover-view:not(.is-picked) > .cvw-gate { margin-top: 22px; }

/* ---- Todo el flujo, centrado ----
   Los paneles heredaban la alineación a la izquierda del compositor original.
   Con el titular y la barra de pasos centrados quedaba todo descuadrado: el
   texto pegado al borde y el contenido flotando. */
.cvw-panel { text-align: center; }
.cvw-lead {
  max-width: 62ch; margin: 0 auto 18px;
  text-align: center;
  font-size: 1.02rem;
}
.cvw-acts { justify-content: center; }
/* La fila del paso 2 mantiene las dos acciones juntas y centradas: "Rehacer"
   es secundaria y "Continuar" la salida, no hacen falta en esquinas opuestas. */
.cvw-acts-go { justify-content: center; gap: 12px; }

/* El campo del prompt no necesita los 980: a esa medida la linea es demasiado
   larga para releerse comodamente. */
.cvw-promptbox { max-width: 900px; margin-inline: auto; text-align: left; }
.cvw-promptbox textarea {
  min-height: 220px;
  padding: 15px 18px;
  font-size: 1.02rem; line-height: 1.55;
  border-radius: var(--radius-lg);
}
/* Las dos salidas del paso, a la escala del resto de la seccion */
.cvw-acts-go #cvProRebuild { font-size: 0.78rem; padding: 8px 16px; }
.cvw-next { padding: 12px 24px; font-size: 0.94rem; }
.cvw-next svg { width: 19px; height: 19px; }

/* Tres borradores cuadrados, centrados y con un tope para que no crezcan
   tanto que no quepan de un vistazo. */
.cvw-drafts {
  /* el bloque mas ancho del flujo: manda el tope del panel */
  max-width: 1248px; margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
/* La etiqueta ("Generando" / el numero) crece con la tarjeta */
.cvw-draft-tag { left: 14px; top: 14px; padding: 4px 11px; font-size: 0.68rem; }

/* Editar y Exportar: el bloque entero centrado y la portada a un tamaño que
   deja ver los controles sin bajar la vista. */
.cvw-edit { margin-inline: auto; justify-content: center; text-align: left; }
.cvw-exports { align-items: stretch; }

@media (max-width: 860px) {
  .cvw-drafts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .cvw-edit { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
}

/* ---- Barra de pasos: abre la sección ----
   Va a sangre, pegada bajo la barra superior y con los pasos centrados. Antes
   colgaba entre el titular y el formulario, donde no era ni titular ni control:
   arriba del todo funciona como el índice del asistente que es. */
.cover-view > .cvw {
  max-width: none;
  margin: calc(-1 * var(--content-pad-t, 24px)) calc(-1 * var(--content-pad-x, 24px)) 0;
  padding: 0 var(--content-pad-x, 24px);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}
.cover-view > .cvw .cvw-steps {
  max-width: 980px; margin-inline: auto;
  border-bottom: 0;               /* el borde ya lo pone la franja */
  justify-content: center;
}
/* Con la franja arriba, la cabecera necesita su propio aire */
.cover-view > .cvx-head { padding-top: clamp(18px, 3.5vh, 40px); }
/* La pista del paso baja junto al contenido y se centra con él */
.cover-view > .cvw-hint {
  max-width: 980px; margin: 0 auto 14px; padding: 0;
  text-align: center;
}

/* ---- Paso 1: una sola columna ----
   El compositor era la columna 2 de una rejilla cuya columna 1 era la vista
   previa. Al quitar la vista previa se quedaba pegado a la derecha con medio
   panel vacío al lado. Ahora el brief es lo único del paso y se centra. */
.cvb-body { align-items: center; }
.cvb-composer { margin-inline: auto; }

/* ---- Borradores generándose ----
   Los tres huecos existen desde el primer momento con el loader de la casa
   dentro: se ve cuántas vienen y que están en marcha, en vez de un panel
   vacío hasta que aparecen de golpe. */
.cvw-draft.is-loading {
  cursor: default;
  border-color: var(--border-subtle);
  background: var(--bg-subtle);
}
.cvw-draft.is-loading:hover { transform: none; border-color: var(--border-subtle); }
.cvw-draft.is-loading .cvw-draft-tag {
  background: rgba(8,8,10,.72); color: var(--ink-100);
  letter-spacing: .14em;
}

/* El botón que sale del paso 2 hacia los borradores. La alineación la manda la
   regla de centrado de más arriba: aquí solo queda el aire entre las dos. */
.cvw-acts-go { align-items: center; }
.cvw-next { flex: none; }
.cvw-next svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}


/* ============================================================
   PERFIL · pestana Workflows
   ============================================================ */
.pf-cell--wf { aspect-ratio: 4 / 3; }
.pf-cell--wf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0) 55%);
}
.pf-cell--wf .pf-wf-logo {
  width: 52%; height: auto; object-fit: contain;
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  opacity: .85;
}
.pf-wf-cap {
  position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 1;
  display: flex; flex-direction: column; gap: 2px; text-align: left;
}
.pf-wf-name { color: #fff; font-weight: 600; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-wf-meta { color: rgba(255,255,255,.6); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em; }

/* ============================================================
   DOCUMENT BUILDER · "muy pronto"
   El constructor sigue en el DOM (su JS lo necesita); mientras la seccion
   lleve .is-soon solo se ve esta pantalla. Lanzarlo = quitar la clase.
   ============================================================ */
.document-view.is-soon > :not(.dc-soon) { display: none !important; }
.dc-soon {
  min-height: calc(100vh - 220px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 40px 16px;
}
.dc-soon-ic {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border-subtle);
  color: var(--text);
}
.dc-soon-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dc-soon-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary);
}
/* El punto late despacio: "se esta haciendo", no "error". */
.dc-soon-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--text); animation: dcLatido 1.8s ease-in-out infinite; }
@keyframes dcLatido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
html.perf-lite .dc-soon-badge i { animation: none; }
.dc-soon-t { margin: 4px 0 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 650; letter-spacing: -0.03em; }
.dc-soon-p { margin: 0; max-width: 520px; color: var(--text-muted); line-height: 1.7; }
.dc-soon-list {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 620px;
}
.dc-soon-list li {
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-subtle);
  color: var(--text-faint); font-size: 0.8rem;
}

/* Pastilla "Pronto" junto al nombre de la herramienta (barra lateral y
   tarjeta del inicio). */
.soon-pill {
  display: inline-block; vertical-align: middle;
  margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2, rgba(127,127,127,.14)); border: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.tool-card h3 .soon-pill { font-size: 0.5rem; }

/* ============================================================
   CAMBIAR CONTRASEÑA — diálogo
   ============================================================ */
.pw-modal {
  position: fixed; inset: 0; z-index: 7000;
  display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 70%, #000);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pw-box {
  width: min(420px, 100%);
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.pw-title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 600; color: var(--text); }
.pw-field { display: flex; flex-direction: column; gap: 6px; }
.pw-lbl { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pw-input {
  height: 42px; padding: 0 14px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg); color: var(--text); font-family: inherit; font-size: 16px;
}
.pw-input:focus { outline: none; border-color: var(--text); }
.pw-err { margin: 0; font-size: 0.8rem; color: var(--error); }
.pw-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* ============================================================
   GENERACION REAL (Imagen Premium y Video) — fase y error de la tarjeta
   ============================================================ */
.gen-stage {
  position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; z-index: 2;
  text-align: center; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.7);
  pointer-events: none;
}
.iv-gen.is-error, .vd-gen.is-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 18px; text-align: center; border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
}
.gen-err-msg { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); max-width: 280px; }
.gen-err-x {
  height: 30px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: transparent; color: var(--text);
  font-family: inherit; font-size: 0.74rem; cursor: pointer;
}

/* ============================================================
   COMPOSERS — todos los botones de la barra con el MISMO porte
   (Imagen Premium y Video). Antes "+", "Escenario" y "Avatar" usaban
   otro estilo: letra más fina y gris, borde más tenue, icono dentro de
   un círculo con fondo y otra altura. Ahora todos copian al pill de
   modelo / formato / calidad.
   ============================================================ */
.iv-bar .iv-pill, .iv-bar .ava-pill, .iv-bar .iv-count,
.gen-bar .gen-pill, .gen-bar .ava-pill {
  height: 33px; box-sizing: border-box;
  border: 1px solid var(--border);
  font-size: 0.8rem; font-weight: 500;
  color: var(--text-secondary);
}
.iv-bar .ava-pill, .gen-bar .ava-pill { padding: 0 11px; gap: 7px; }
.iv-bar .iv-count { font-family: inherit; padding: 0 6px; }
.iv-bar .iv-count button { color: inherit; }
.iv-bar .ava-pill.ava-select, .gen-bar .ava-pill.ava-select { padding: 0; }
.ava-pill .ava-select-main { font: inherit; color: inherit; gap: 7px; padding: 0 11px; height: 100%; }
.iv-bar .ava-pill .ava-select-ic:has(> svg),
.gen-bar .ava-pill .ava-select-ic:has(> svg) {
  width: auto; height: auto; background: none; border: 0; border-radius: 0;
}
.iv-bar .ava-pill .ava-select-ic:has(> svg) svg,
.gen-bar .ava-pill .ava-select-ic:has(> svg) svg { width: 13px; height: 13px; }
.iv-bar .composer-attach, .gen-bar .composer-attach {
  width: 33px; height: 33px; box-sizing: border-box;
  border: 1px solid var(--border); color: var(--text-secondary);
}

/* ---- Tirador para estirar la caja del prompt (js/composer-resize.js) ----
   Esquina superior derecha de la caja. Solo aparece cuando el texto no
   cabe (o ya se estiró); se arrastra hacia arriba. */
.has-grip { position: relative; }
.prompt-grip {
  position: absolute; top: -11px; right: 22px; z-index: 3;
  width: 34px; height: 22px;
  display: none; place-items: center;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-muted);
  cursor: ns-resize; touch-action: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.prompt-grip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.has-grip.is-grip-on .prompt-grip { display: grid; }
.prompt-grip:hover, .has-grip.is-resizing .prompt-grip { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); }
.has-grip.is-resizing, .has-grip.is-resizing * { user-select: none; cursor: ns-resize; }

/* ============================================================
   PANTALLAS GRANDES (2K / 4K) — el inicio deja de ser una franja de
   1080 px en medio de un monitor enorme: crece con la ventana, el banner
   gana alto y los textos suben de tamaño en proporción.
   ============================================================ */
@media (min-width: 1900px) {
  .content { max-width: 1900px; }
  .home { max-width: clamp(1080px, 64vw, 1760px); --hero-max: 470px; --tool-max: 360px; }
  .home-banner-txt h1 { font-size: clamp(2rem, 1.55vw, 2.9rem); max-width: 26ch; }
  .home-banner-sub { font-size: clamp(0.9rem, 0.62vw, 1.15rem); }
  .home-banner-txt .overline { font-size: 0.78rem; }
  .home-banner-cta { font-size: 1rem; }
  .home .section-head h2 { font-size: 1.7rem; }
  .tool-card.is-media h3 { font-size: 1.12rem; }
  .tool-card.is-media .tool-desc { font-size: 0.9rem; }
  .tools-grid { gap: 18px; }
}

/* ---- Banners del inicio: texto a la IZQUIERDA, centrado en vertical ----
   El bloque se pega al margen izquierdo y queda a media altura del banner;
   el velo oscurece la izquierda, que es donde va el texto. */
@media (min-width: 641px) {
  .home-banner-txt {
    left: clamp(20px, 3.5vw, 40px); right: 24%;
    top: 50%; bottom: auto;
    transform: translateY(-50%);
    text-align: left;
  }
  .home-banner-scrim {
    background:
      linear-gradient(to right, rgba(8,8,10,.82) 8%, rgba(8,8,10,.35) 52%, transparent 78%),
      linear-gradient(to top, rgba(8,8,10,.4), transparent 45%);
  }
}