/* =========================================================
   CLIPPER MVP — UI SYSTEM REWORK
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Backgrounds */
  --bg-base: #09090b;
  --bg-surface: #111113;
  --bg-card: #18181b;
  --bg-card-hover: #1f1f23;
  --bg-input: #141416;
  --bg-input-dark: #0c0f15;
  --bg-secondary: #151922;
  --bg-subtle: rgba(255, 255, 255, 0.04);

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-accent: rgba(234, 88, 12, 0.42);

  /* Text */
  --text-primary: #f4f4f5;
  --text-secondary: #b4b7c2;
  --text-muted: #6e7485;

  /* Accent (Pro tier color — NO es color de marca) */
  --accent: #EA580C;
  --accent-hover: #C2410C;
  --accent-light: #FB923C;
  --accent-dim: rgba(234, 88, 12, 0.14);
  --accent-glow: rgba(234, 88, 12, 0.26);

  /* Chispa — tokens de marca (P2-P1) */
  --chispa-primary: #EA580C;           /* naranja fuego */
  --chispa-primary-hover: #C2410C;
  --chispa-accent: #F59E0B;            /* ámbar */
  --chispa-accent-hover: #D97706;
  --chispa-bg: #0D0D0D;                /* fondo oscuro de marca */
  --chispa-primary-dim: rgba(234, 88, 12, 0.14);
  --chispa-primary-glow: rgba(234, 88, 12, 0.32);
  --chispa-gradient: linear-gradient(135deg, #EA580C 0%, #F59E0B 100%);

  /* Status */
  --success: #22c55e;
  --success-dim: rgba(34, 197, 94, 0.12);
  --warning: #f59e0b;
  --warning-dim: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-dim: rgba(239, 68, 68, 0.12);

  /* Sizing */
  --sidebar-w: 280px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.22);
  --shadow-xl: 0 18px 48px rgba(0, 0, 0, 0.34);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* === Claude Design §B — tokens aditivos (no modifican existentes) === */

  /* Type scale formalizada */
  --font-display: 34px;
  --font-h1: 24px;
  --font-h2: 18px;
  --font-h3: 15px;
  --font-body: 14px;
  --font-small: 13px;
  --font-micro: 11px;
  --lh-display: 1.1;
  --lh-h1: 1.25;
  --lh-h2: 1.35;
  --lh-h3: 1.4;
  --lh-body: 1.55;
  --lh-small: 1.5;
  --lh-micro: 1.3;
  --letter-eyebrow: 0.10em;

  /* Mono unificado */
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 100ms;
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* Elevación adicional */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.34);
  --shadow-glow: 0 0 0 1px rgba(234, 88, 12, 0.32), 0 8px 32px rgba(234, 88, 12, 0.18);

  /* Espaciado base 4px grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* === G30 Mega Producciones — tokens (coord §14.2) ===
     Dark mode coherente con la app (operador 2026-05-03: la versión
     light original perdía la identidad naranja Chispa). Wizard pasos
     1-4+6 ahora usan los mismos tokens base que el editor paso 5
     (--mp-ed-*) + el resto de la app (--chispa-bg / --bg-card / etc).
     Prefijo --mp-* preservado para no romper las 147 referencias del CSS. */
  --mp-bg: #0D0D0D;
  --mp-card: #18181b;
  --mp-border: rgba(255, 255, 255, 0.08);
  --mp-border-hover: rgba(255, 255, 255, 0.16);
  --mp-text-pri: #f4f4f5;
  --mp-text-sec: #b4b7c2;
  --mp-text-mut: #6e7485;
  /* Escala warm invertida — antes light (50 más claro, 900 más oscuro);
     ahora dark (50 más oscuro / fondo, 900 más claro / texto). */
  --mp-warm-50: #0D0D0D;
  --mp-warm-100: #141416;
  --mp-warm-200: #18181b;
  --mp-warm-300: #1f1f23;
  --mp-warm-400: #27272a;
  --mp-warm-500: #6e7485;
  --mp-warm-600: #9ca3af;
  --mp-warm-700: #b4b7c2;
  --mp-warm-800: #d4d4d8;
  --mp-warm-900: #f4f4f5;
  --mp-accent: #EA580C;
  --mp-accent-hover: #F97316;
  --mp-accent-soft: rgba(234, 88, 12, 0.22);
  --mp-accent-text: #FB923C;
  --mp-accent-dim: rgba(234, 88, 12, 0.14);
  /* Semantic — dim background + light foreground sobre dark */
  --mp-warn-bg: rgba(245, 158, 11, 0.14);
  --mp-warn-text: #FCD34D;
  --mp-err-bg: rgba(239, 68, 68, 0.14);
  --mp-err-text: #FCA5A5;
  --mp-ok-bg: rgba(34, 197, 94, 0.14);
  --mp-ok-text: #86EFAC;
  --mp-info-bg: rgba(96, 165, 250, 0.14);
  --mp-info-text: #93C5FD;
  /* Shadows — opacas sobre fondo oscuro */
  --mp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --mp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.24);
  --mp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.42), 0 4px 8px rgba(0, 0, 0, 0.24);
  /* Editor dark mode (Chunk 3 — tokens definidos ya) */
  --mp-ed-bg: #09090b;
  --mp-ed-card: #18181b;
  --mp-ed-border: rgba(255, 255, 255, 0.08);
  --mp-ed-input: #141416;
  --mp-ed-text-pri: #f4f4f5;
  --mp-ed-text-sec: #b4b7c2;
  --mp-ed-text-mut: #6e7485;
  /* Clip palette (8) */
  --mp-clip-1: #EA580C;
  --mp-clip-2: #DB2777;
  --mp-clip-3: #CA8A04;
  --mp-clip-4: #16A34A;
  --mp-clip-5: #0891B2;
  --mp-clip-6: #7C3AED;
  --mp-clip-7: #BE185D;
  --mp-clip-8: #9A3412;
  /* Collaborator presence colors */
  --mp-presence-mine: #EA580C;
  --mp-presence-other: #0891B2;
}

/* =========================================================
   RESET
   ========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(234, 88, 12, 0.08) 0%, transparent 58%),
    radial-gradient(ellipse 35% 25% at 100% 100%, rgba(234, 88, 12, 0.06) 0%, transparent 58%),
    var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* =========================================================
   LAYOUT
   ========================================================= */

#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 180px), var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 18px 14px 0;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(234, 88, 12, 0.25), transparent);
  pointer-events: none;
}

.content {
  padding: 34px 42px;
  overflow-y: auto;
  min-width: 0;
}

.review-queue-shell.view.active {
  position: fixed;
  inset: 0 0 0 var(--sidebar-w);
  z-index: 4;
  display: block;
  overflow-y: auto;
  padding: 34px 42px;
  box-sizing: border-box;
  background: var(--bg-base);
}

.review-queue-shell .view-header {
  max-width: 1180px;
}

.review-queue-shell #rq-list,
.review-queue-shell #rq-empty,
.review-queue-shell #rq-loading {
  max-width: 1180px;
}

.rq-schedule-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(234, 88, 12, 0.22);
  border-radius: 8px;
  background: rgba(234, 88, 12, 0.06);
}

.rq-schedule-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.rq-schedule-head strong {
  display: block;
  color: var(--text-primary);
  font-size: 0.88rem;
}

.rq-schedule-head span:not(.rq-status-chip) {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.rq-schedule-panel label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rq-channel-hint {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.rq-channel-hint a {
  color: var(--accent-light);
  font-weight: 800;
  text-decoration: none;
}

.rq-status-chip {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 900;
  border: 1px solid transparent;
}

.rq-status-pending_review { color: #93c5fd; background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.24); }
.rq-status-approved_pending_schedule { color: #fed7aa; background: rgba(234, 88, 12, 0.16); border-color: rgba(234, 88, 12, 0.28); }
.rq-status-scheduled { color: #ddd6fe; background: rgba(124, 58, 237, 0.16); border-color: rgba(124, 58, 237, 0.28); }
.rq-status-uploading { color: #d1d5db; background: rgba(107, 114, 128, 0.16); border-color: rgba(107, 114, 128, 0.26); }
.rq-status-uploaded { color: #a7f3d0; background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.24); }
.rq-status-failed { color: #fecaca; background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.24); }
.rq-status-cancelled { color: #e5e7eb; background: rgba(156, 163, 175, 0.12); border-color: rgba(156, 163, 175, 0.22); }

/* =========================================================
   LOGO
   ========================================================= */

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.logo svg {
  color: var(--accent);
  flex-shrink: 0;
}

.logo h2 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.logo-badge {
  margin-left: auto;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  color: var(--accent-light);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

/* =========================================================
   SIDEBAR NAV
   ========================================================= */

/* =========================================================
   SIDEBAR NAV
   ========================================================= */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* U-64: spacing uniforme entre items del sidebar — los .nav-group con
   .nav-children colapsadas a veces aportan padding/margin invisibles que
   rompían el ritmo. Forzamos que el wrapper no añada espacio extra. */
.sidebar-nav .nav-group { padding: 0; margin: 0; gap: 4px; }
.sidebar-nav .nav-group:not(.open) .nav-children { display: none; max-height: 0; padding: 0; margin: 0; }
.sidebar-nav > .nav-item,
.sidebar-nav > .nav-group > .nav-item { margin: 0; }

.nav-section-label {
  display: block;
  padding: 14px 10px 8px;
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-section-spaced {
  margin-top: 10px;
}

.nav-section-admin {
  color: rgba(245, 158, 11, 0.55);
  border-top: 1px solid rgba(245, 158, 11, 0.12);
  margin-top: 14px;
  padding-top: 16px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  position: relative;
}

.nav-item:hover:not([disabled]) {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border);
}

.nav-item.active {
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.18), rgba(234, 88, 12, 0.10));
  border-color: var(--border-accent);
  color: var(--accent-light);
  box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.08);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 18%;
  width: 3px;
  height: 64%;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}

.nav-item[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
}

.nav-icon-wrapper {
  width: 24px;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-label {
  display: block;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Plan chip bar ── */
.plan-chip-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.plan-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #6b7280;
}
.plan-chip-dot.plan-free    { background: #6b7280; }
.plan-chip-dot.plan-creator { background: #3b82f6; }
.plan-chip-dot.plan-pro     { background: #9061f9; }
.plan-chip-dot.plan-studio  { background: #f59e0b; }
.plan-chip-name {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plan-chip-usage {
  margin-left: auto;
  font-size: 0.65rem;
  opacity: 0.7;
}

/* ── Server control bar ── */
.server-control-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
  border-radius: 0 0 var(--radius-sm) 0;
}

.server-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s;
}
.server-dot-unknown { background: var(--text-muted); }
.server-dot-running { background: var(--success); box-shadow: 0 0 6px rgba(34,197,94,0.6); animation: pulse-green 2s infinite; }
.server-dot-stopped { background: var(--danger); box-shadow: 0 0 4px rgba(239,68,68,0.5); }

@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.server-status-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.server-btns {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.server-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.server-btn:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-card-hover); }
.server-btn-start:hover { border-color: rgba(34,197,94,0.5); color: var(--success); }
.server-btn-restart:hover { border-color: rgba(245,158,11,0.5); color: var(--warning); }
.server-btn-stop:hover { border-color: rgba(239,68,68,0.5); color: var(--danger); }
.server-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.nav-chevron {
  font-size: 0.8rem;
  color: var(--text-muted);
  transform: rotate(0deg);
  transition: transform 0.22s ease, color 0.18s ease;
}

.nav-group.open .nav-chevron {
  transform: rotate(180deg);
  color: var(--accent-light);
}

/* hijos */

.nav-children {
  position: relative;
  margin-left: 12px;
  padding-left: 22px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition:
    max-height 0.28s ease,
    opacity 0.22s ease,
    transform 0.22s ease;
}

.nav-group.open .nav-children {
  max-height: 160px;
  opacity: 1;
  transform: translateY(0);
}

.nav-children::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 10px;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.nav-sub-item {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  column-gap: 12px;
  margin: 2px 0;
  padding: 8px 10px 8px 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: #9da3b3;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  position: relative;
}

.nav-sub-item:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-primary);
}

.nav-sub-item[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
}

.nav-sub-dot {
  width: 12px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  justify-self: center;
  transition: background 0.18s ease, width 0.18s ease;
}

.nav-sub-label {
  display: block;
  line-height: 1.2;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.nav-sub-item.active {
  color: var(--accent-light);
}

.nav-sub-item.active .nav-sub-dot,
.nav-sub-item:hover:not([disabled]) .nav-sub-dot {
  width: 14px;
  background: rgba(234, 88, 12, 0.45);
}

/* =========================================================
   HEADERS / VIEWS
   ========================================================= */

.view {
  display: none;
  animation: fadeInUp 0.22s ease-out;
}

.view.active {
  display: block;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

header {
  margin-bottom: 28px;
}

header h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin-bottom: 6px;
}

header h2 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

header p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* =========================================================
   CARDS
   ========================================================= */

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 100px), var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.card:hover {
  border-color: var(--border-hover);
}

.form-card {
  padding: 24px;
}

.search-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.progress-card {
  margin-top: 18px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

button {
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.88rem;
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.16s ease,
              border-color 0.16s ease,
              box-shadow 0.18s ease,
              color 0.16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

button:not(:disabled):active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.06s;
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  color: #fff;
  border: 1px solid transparent;
  padding: 10px 16px;
  box-shadow: 0 4px 18px rgba(234, 88, 12, 0.18);
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(234, 88, 12, 0.26);
}

.btn-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 9px 14px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

.btn-outlined {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 8px 13px;
  cursor: pointer;
}

.btn-outlined:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
  border-color: var(--border-hover);
}

.btn-large {
  min-height: 46px;
  padding: 12px 22px;
  font-size: 0.95rem;
}

.btn-danger {
  background: var(--danger-dim);
  border-color: rgba(239, 68, 68, 0.28);
  color: #ff8b8b;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.42);
}

.btn-success {
  background: rgba(34, 197, 94, 0.16) !important;
  color: #5eea8d !important;
  border-color: rgba(34, 197, 94, 0.42) !important;
}

.bg-success {
  background: linear-gradient(180deg, #22c55e, #16a34a) !important;
}

/* =========================================================
   FORMS
   ========================================================= */

input[type="text"],
input[type="password"],
select,
textarea,
.form-input,
.form-control {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 11px 13px;
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.14);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

textarea {
  resize: vertical;
}

.input-group {
  margin-bottom: 18px;
}

.input-group>label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

/* Variantes horizontales / compactas — uso estándar en toda la app */
.input-group--inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.input-group--inline > label {
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.input-group--compact {
  margin-bottom: 10px;
}

.form-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Desplegable de cuentas/canales coherente en toda la app. Añade un
   chevron sutil y reserva espacio a la derecha. Se aplica con class="account-selector"
   o desde populateAccountSelector(). */
.account-selector {
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 53%, calc(100% - 11px) 53%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
}

/* Estructuras estándar para modales (opcional; las modales existentes
   pueden migrar progresivamente sin romper nada). */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2,
.modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

.modal-body {
  padding: 18px 20px;
  max-height: calc(80vh - 140px);
  overflow-y: auto;
}

/* =========================================================
   HELPERS
   ========================================================= */

.hidden {
  display: none !important;
}

.mt-4 {
  margin-top: 16px;
}

.mt-6 {
  margin-top: 24px;
}

.mt-8 {
  margin-top: 32px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-3 {
  margin-bottom: 12px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-6 {
  margin-bottom: 24px;
}

.pt-6 {
  padding-top: 24px;
}

.text-muted {
  color: var(--text-muted);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-center {
  text-align: center;
}

.text-accent {
  color: var(--accent-light);
}

.text-danger {
  color: #ff8b8b;
}

.border-t {
  border-top: 1px solid var(--border);
}

.border-border {
  border-color: var(--border);
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2px 0;
}

.action-row {
  display: flex;
  gap: 12px;
}

/* =========================================================
   SEARCH / THEMES
   ========================================================= */

.themes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.theme-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 7px 13px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.theme-btn:hover {
  border-color: var(--border-accent);
  color: var(--accent-light);
  background: var(--accent-dim);
}

.theme-btn.compact {
  border-radius: var(--radius-md);
  padding: 7px 10px;
}

.search-bar {
  display: flex;
  gap: 10px;
}

.search-bar input {
  flex: 1;
}

/* =========================================================
   TABLES
   ========================================================= */

.results-container {
  margin-top: 20px;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.results-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 800;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}

.results-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.results-table tbody tr:last-child td {
  border-bottom: none;
}

.results-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* =========================================================
   BADGES
   ========================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1;
}

.badge-success {
  background: var(--success-dim);
  color: #5eea8d;
  border: 1px solid rgba(34, 197, 94, 0.26);
}

.badge-system {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  background: rgba(194, 65, 12, 0.15);
  color: #FB923C;
  border: 1px solid rgba(194, 65, 12, 0.3);
  white-space: nowrap;
}

.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  color: var(--accent-light);
  font-weight: 800;
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.age-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--success-dim);
  border: 1px solid rgba(34, 197, 94, 0.22);
  color: #62e792;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* =========================================================
   LOADERS / EMPTY
   ========================================================= */

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 28px;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.spinner {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.09);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.empty-state {
  text-align: center;
  padding: 56px 18px;
  color: var(--text-muted);
}

.empty-state svg {
  margin: 0 auto 14px;
  opacity: 0.34;
  display: block;
}

.empty-state p {
  font-size: 0.92rem;
}

/* =========================================================
   EMPTY STATE SYSTEM (Claude Design §C.4)
   Modificadores aditivos sobre .empty-state base
   ========================================================= */

.empty-state[data-curated] {
  padding: var(--sp-12) var(--sp-6);
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  color: var(--text-primary);
  animation: emptyStateIn var(--dur-base) var(--ease-out);
}

@keyframes emptyStateIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

.empty-state--icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-light);
  margin-bottom: var(--sp-2);
  flex-shrink: 0;
}

.empty-state--icon svg,
.empty-state--icon i {
  width: 44px;
  height: 44px;
  stroke-width: 1.5;
}

.empty-state--title {
  font-size: var(--font-h2);
  font-weight: 600;
  color: var(--text-primary);
  line-height: var(--lh-h2);
  margin: 0;
}

.empty-state--desc {
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  max-width: 380px;
  margin: 0;
}

.empty-state--actions {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-2);
}

.empty-state--actions .btn-link {
  background: transparent;
  border: none;
  color: var(--accent-light);
  font-size: var(--font-small);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.empty-state--actions .btn-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* =========================================================
   TOAST NOTIFICATIONS
   ========================================================= */

#toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 36px));
}

.toast {
  pointer-events: auto;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transform: translateX(40px) scale(0.96);
  transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.show {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.toast-success { border-left-color: var(--success); }
.toast-error   { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-info    { border-left-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.15s ease; transform: none !important; }
  button:not(:disabled):active { transform: none; }
}

/* =========================================================
   PROGRESS
   ========================================================= */

.progress-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.progress-header span:last-child {
  color: var(--accent-light);
  font-weight: 800;
}

.progress-bar-bg {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-input);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent), #FB923C);
  box-shadow: 0 0 16px var(--accent-glow);
  transition: width 0.28s ease;
}

/* =========================================================
   STEP INDICATOR
   ========================================================= */

.step-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.step span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 800;
}

.step.active {
  color: var(--accent-light);
}

.step.active span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.step-line {
  height: 1px;
  flex: 1;
  min-width: 18px;
  margin: 0 10px;
  background: var(--border);
}

/* =========================================================
   PROMPTS
   ========================================================= */

.prompts-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.prompt-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 90px), var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
  position: relative;
}

.prompt-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

.prompt-card.selected {
  border-color: var(--accent);
  background: rgba(234, 88, 12, 0.1);
  box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.3);
}

.prompt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.prompt-card-icon {
  font-size: 1.18rem;
  line-height: 1;
}

.prompt-card-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  transition: all 0.14s ease;
}

.prompt-card.selected .prompt-card-check {
  background: var(--accent);
  color: #fff;
}

.prompt-card-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.prompt-card-desc {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* =========================================================
   HISTORY
   ========================================================= */

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.history-card,
.clip-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 80px), var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: all 0.17s ease;
}

.history-card:hover,
.clip-card:hover {
  border-color: var(--border-hover);
}

.clip-card.selected {
  border-color: var(--accent);
  background: rgba(234, 88, 12, 0.08);
  box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.22);
}

/* ── Clip card row (download list) ── */
.clip-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  transition: border-color 0.15s, background 0.15s;
}

.clip-card-row:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

.clip-card-check-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.clip-card-check-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.clip-card-body {
  flex: 1;
  min-width: 0;
}

.clip-card-title {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.clip-card-reason {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}

.clip-card-tags {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.clip-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.08);
  text-transform: uppercase;
}

.clip-tag-highlight {
  background: rgba(234,88,12,0.12);
  color: var(--accent-light);
  border-color: rgba(234,88,12,0.28);
}

.clip-tag-dur {
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
}

.clip-score-badge {
  flex-shrink: 0;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid;
  text-align: center;
  letter-spacing: -0.02em;
}

.clip-dl-btn {
  flex-shrink: 0;
  padding: 7px 14px !important;
  font-size: 0.78rem !important;
  white-space: nowrap;
  text-decoration: none;
}

.clip-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.clip-header h4 {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.3;
}

.clip-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* =========================================================
   RANKING / CLIPS
   ========================================================= */

.clips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.ranking-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.render-action-bar {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* =========================================================
   SUCCESS / DOWNLOADS
   ========================================================= */

.success-action {
  margin-top: 18px;
  background: var(--success-dim);
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.success-action p {
  color: #73e89d;
  font-weight: 600;
}

.success-banner {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.09), rgba(34, 197, 94, 0.06));
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.success-banner h2 {
  font-size: 1.06rem;
  color: #68e594;
  margin-bottom: 2px;
}

.download-grid,
.downloads-list {
  display: grid;
  gap: 12px;
}

.download-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.download-item>div {
  flex: 1;
  min-width: 0;
}

.download-item strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.download-item small {
  font-size: 0.77rem;
  color: var(--text-muted);
}

.clip-select-check {
  accent-color: var(--accent);
}

/* =========================================================
   CODE / TEXTAREAS
   ========================================================= */

.code-box {
  position: relative;
  margin-top: 8px;
}

.code-box textarea {
  height: 280px;
  resize: none;
  background: #0b0d12;
  color: #b9ffb9;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.65;
  border-radius: var(--radius-md);
}

/* =========================================================
   LOGS
   ========================================================= */

.log-container {
  height: 68vh;
  display: flex;
}

#log-viewer {
  flex: 1;
  resize: none;
  background: #0b0d12;
  color: #49df83;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  overflow-y: auto;
}

/* =========================================================
   ACCORDION
   ========================================================= */

.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accordion-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion-header {
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.01);
  cursor: pointer;
  user-select: none;
  transition: background 0.16s ease;
}

.accordion-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.accordion-header h3 {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-primary);
}

.accordion-icon {
  color: var(--text-muted);
  transition: transform 0.22s ease;
}

.accordion-content {
  display: none;
  padding: 14px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.01);
}

.accordion-item.open .accordion-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

/* ── Channel cards (Mis Canales) ── */
.ch-channel-card {
  padding: 16px !important;
}

.ch-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ch-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ch-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim);
  color: var(--accent-light);
  font-weight: 800;
  font-size: 1.1rem;
  border: 1px solid var(--border-accent);
}

.ch-card-info {
  flex: 1;
  min-width: 0;
}

.ch-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ch-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ch-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ch-badge-yt {
  background: #ff000022;
  color: #ff6b6b;
  border: 1px solid #ff000044;
}

.ch-badge-watch {
  background: var(--accent-dim);
  color: var(--accent-light);
  border: 1px solid var(--border-accent);
}

.ch-badge-tiktok {
  background: #00f2ea22;
  color: #00c8b8;
  border: 1px solid #00f2ea44;
}

.ch-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ch-url-link {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: none;
}
.ch-url-link:hover { color: var(--accent-light); }

.ch-stat-pill {
  font-size: 0.68rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: 4px;
}

.ch-action-btn {
  padding: 5px 12px !important;
  font-size: 0.74rem !important;
  flex-shrink: 0;
}

/* Channel stats section */
.ch-stats-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.ch-stats-loading,
.ch-stats-error {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 4px 0;
}

.ch-stats-bar {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}

.ch-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
}
.ch-stat:last-child { border-right: none; }

.ch-stat-val {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.ch-stat-lbl {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ch-videos-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.ch-video-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.ch-video-row:last-child { border-bottom: none; }

.ch-video-thumb {
  width: 56px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--bg-subtle);
}

.ch-video-info {
  flex: 1;
  min-width: 0;
}

.ch-video-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.ch-video-title:hover { color: var(--accent-light); }

.ch-video-date {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.ch-video-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  flex-shrink: 0;
}

.ch-vstat {
  font-size: 0.7rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Vertical results rows */
.vertical-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
}

.vertical-result-title {
  font-size: 0.82rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vertical-result-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.accordion-item.open .accordion-icon {
  transform: rotate(180deg);
}

/* =========================================================
   VIDEO CARDS
   ========================================================= */

.video-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.video-mini-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.video-mini-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
}

.video-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #000;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
}

.video-info {
  padding: 11px 12px;
}

.video-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 7px;
  min-height: 2.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.73rem;
  color: var(--text-secondary);
}

/* =========================================================
   CHANNEL DETAIL
   ========================================================= */

#channel-detail header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 22px;
  margin-bottom: 24px;
}

#detail-channel-name {
  font-size: 1.8rem;
  letter-spacing: -0.05em;
}

#detail-channel-category {
  color: var(--accent-light);
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: -2px;
}

/* =========================================================
   MODALS
   ========================================================= */

.modal,
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.hidden,
.modal-overlay.hidden {
  display: none !important;
}

.modal-content,
.modal.card {
  width: 100%;
  max-width: 560px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: modalIn 0.2s ease-out;
}

.modal-content {
  padding: 24px;
}

/* Botón cerrar (×) genérico de modales (OAuth, publish, MFA) — antes sin estilo,
   salía como un glifo pelado arriba-izquierda (op 2026-05-21). */
.modal-card { position: relative; }
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.modal-close:hover {
  color: #fff;
  border-color: #EA580C;
  background: rgba(234, 88, 12, 0.14);
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   GLOW / EFFECTS
   ========================================================= */

.clip-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.clip-content {
  flex: 1;
}

.clip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.clip-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
}

.clip-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.clip-avg {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.82rem;
}

.clip-time {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.clip-btn {
  width: 100%;
  margin-top: 16px !important;
}

.glow-btn:hover {
  box-shadow: 0 0 26px rgba(234, 88, 12, 0.28);
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.11);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* =========================================================
   CLIPS GENERADOS
   ========================================================= */

.cg-tab-bar {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
  background: var(--bg-card);
}

.cg-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 12px 18px;
  transition: color 0.15s, border-color 0.15s;
}
.cg-tab:hover { color: var(--text-primary); }
.cg-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.cg-tab-panel { padding: 0; }

.cg-group { border-bottom: 2px solid var(--border); }
.cg-group:last-child { border-bottom: none; }

.cg-group-label {
  padding: 8px 16px 8px 20px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cg-channel-badge {
  font-size: 0.67rem;
  background: rgba(194,65,12,0.18);
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 7px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0;
  text-transform: none;
}

.cg-clip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
}
.cg-clip-row:last-child { border-bottom: none; }
.cg-clip-row:hover { background: rgba(255,255,255,0.04); }

.cg-clip-title {
  flex: 1;
  font-size: 0.83rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cg-clip-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* Platform toggle chips (YT / TK / IG) */
.cg-net-chips {
  display: flex;
  gap: 3px;
  align-items: center;
}
.cg-net-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.67rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  background: transparent;
  transition: all 0.12s;
  user-select: none;
  letter-spacing: 0.02em;
}
.cg-net-chip input { display: none; }
.cg-net-chip-yt:has(input:checked) { border-color: rgba(255,60,60,0.55); color: #ff7070; background: rgba(255,0,0,0.1); }
.cg-net-chip-tk:has(input:checked) { border-color: rgba(220,220,220,0.4); color: #ddd; background: rgba(255,255,255,0.07); }
.cg-net-chip-ig:has(input:checked) { border-color: rgba(255,120,70,0.5); color: #ff9870; background: rgba(255,80,20,0.09); }

.cg-dl-btn {
  padding: 3px 8px;
  font-size: 0.8rem;
  opacity: 0.7;
}
.cg-dl-btn:hover { opacity: 1; }

.cg-sel {
  padding: 3px 6px !important;
  font-size: 0.73rem !important;
  width: auto !important;
  min-width: 108px;
  max-width: 150px;
}

.cg-up-btn {
  padding: 4px 13px;
  font-size: 0.73rem;
  font-weight: 600;
  white-space: nowrap;
}

.cg-reup-btn {
  padding: 3px 7px;
  font-size: 0.8rem;
  opacity: 0.65;
}
.cg-reup-btn:hover { opacity: 1; }

.cg-sched-btn {
  padding: 3px 7px;
  font-size: 0.8rem;
  flex-shrink: 0;
  opacity: 0.65;
}
.cg-sched-btn:hover { opacity: 1; }

/* =========================================================
   PLANIFICADOR DE SUBIDAS — MODAL
   ========================================================= */

.modal.card.schedule-modal-card {
  width: min(920px, 95vw);
  max-width: min(920px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* Cabecera */
.sched-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}
.sched-modal-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.sched-modal-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.sched-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.15s;
}
.sched-close-btn:hover { color: var(--text-primary); }

/* Cuerpo: grid 2 columnas */
.sched-modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden; /* cada columna scrollea por separado */
  flex: 1;
  min-height: 0;
}

.sched-config-col {
  padding: 18px 22px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sched-preview-col {
  padding: 18px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Footer */
.sched-modal-footer {
  border-top: 1px solid var(--border);
  padding: 12px 22px;
  flex-shrink: 0;
}
.sched-footer-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.sched-error-banner {
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 10px;
}

/* Agrupación de campos */
.sched-field-group {
  margin-bottom: 14px;
}

.sched-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.sched-field-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.sched-input {
  width: 100%;
  font-size: 0.82rem !important;
  padding: 6px 10px !important;
}

/* Fila de 2 elementos: fecha + timezone */
.sched-row-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sched-tz-select { width: 150px !important; flex-shrink: 0; }

/* Grid de 3 columnas para espaciado */
.sched-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sched-unit-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sched-num { width: 72px !important; }
.sched-unit {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Ventanas horarias */
.sched-windows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
}

.sched-window-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.sched-window-check input { cursor: pointer; }

/* Checkboxes en fila */
.sched-checks-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Resumen de clips */
.sched-clips-summary {
  max-height: 72px;
  overflow-y: auto;
  background: var(--bg-sidebar);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.sched-clip-item {
  font-size: 0.77rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 0;
}

/* Botón preview */
.sched-preview-btn {
  margin-top: 4px;
  width: 100%;
  font-size: 0.8rem;
  padding: 8px 0;
}

/* Preview list (columna derecha) */
.sched-preview-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 12px 0;
}

.sched-preview-list {
  flex: 1;
  overflow-y: auto;
}

.sched-preview-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
}

.sched-gap {
  font-size: 0.67rem;
  color: var(--text-muted);
  padding-left: 10px;
  margin: 3px 0 2px;
}

.sched-preview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-sidebar);
}

.sched-preview-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  min-width: 86px;
  flex-shrink: 0;
}

.sched-preview-title {
  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.sched-preview-stats {
  font-size: 0.77rem;
  color: var(--text-muted);
  padding: 8px 10px;
  background: var(--bg-sidebar);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.sched-preview-stats.hidden { display: none; }

/* ── Cola de publicaciones (tab Programación) ── */

.sched-queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}

.sched-stats-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.sched-stat-pill {
  font-size: 0.71rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary);
}
.sched-stat-pill.sched-stat-pending   { background: rgba(194,65,12,0.15);  color: var(--accent); }
.sched-stat-pill.sched-stat-uploading { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.sched-stat-pill.sched-stat-uploaded  { background: rgba(34,197,94,0.15);   color: #22c55e; }
.sched-stat-pill.sched-stat-failed    { background: rgba(239,68,68,0.15);   color: #ef4444; }
.sched-stat-pill.sched-stat-cancelled { background: rgba(255,255,255,0.05); color: var(--text-muted); }

.sched-cancel-all-btn { font-size: 0.75rem; padding: 4px 12px; }

/* Alerta de cuota en la cola */
.sched-quota-banner {
  margin: 10px 20px 0;
  padding: 8px 12px;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: #f59e0b;
  font-weight: 600;
}

.sched-queue-list { }

.sched-queue-row {
  display: grid;
  grid-template-columns: 70px 1fr minmax(90px,130px) 116px auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.8rem;
  transition: background 0.1s;
}
.sched-queue-row:hover { background: rgba(255,255,255,0.025); }
.sched-row-cancelled { opacity: 0.38; }
.sched-row-uploaded  { opacity: 0.6; }
.sched-row-failed    { background: rgba(239,68,68,0.04); }
.sched-row-failed:hover { background: rgba(239,68,68,0.07); }

.sched-queue-time {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.sched-queue-time .sched-time-date {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-primary);
}
.sched-queue-time .sched-time-hour {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent);
}

.sched-queue-title   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-size: 0.81rem; }
.sched-queue-account { color: var(--text-muted); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status badges */
.sched-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 0.71rem;
  font-weight: 700;
  white-space: nowrap;
  width: fit-content;
}
.sched-badge-pending   { background: rgba(194,65,12,0.12);  color: #FB923C; border: 1px solid rgba(194,65,12,0.25); }
.sched-badge-uploading { background: rgba(245,158,11,0.12);  color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.sched-badge-uploaded  { background: rgba(34,197,94,0.12);   color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.sched-badge-failed    { background: rgba(239,68,68,0.12);   color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.sched-badge-cancelled { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.08); }

.sched-queue-error {
  font-size: 0.69rem;
  color: #f87171;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sched-cancel-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.71rem;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.sched-cancel-btn:hover { color: #f87171; border-color: rgba(239,68,68,0.5); }

.sched-queue-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 5px;
  background: rgba(194,65,12,0.1);
  border: 1px solid rgba(194,65,12,0.2);
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
  transition: background 0.12s;
}
.sched-queue-link:hover { background: rgba(194,65,12,0.2); }

/* ── Estado de cuota en el modal del scheduler ── */

.sched-account-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.sched-acct-ok {
  background: rgba(34,197,94,0.1);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.2);
}
.sched-acct-quota {
  background: rgba(245,158,11,0.1);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.25);
}
.sched-acct-dot { font-size: 0.6rem; }

/* ── Lista de cuentas YouTube (pestaña Redes Verticales) ── */

.yt-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.yt-account-name { font-size: 0.9rem; }
.yt-status-dot   { font-size: 1rem; flex-shrink: 0; }
.yt-dot-ok       { color: #22c55e; }
.yt-dot-quota    { color: #f59e0b; }
.yt-dot-inactive { color: var(--text-muted); }

.yt-auth-label {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.yt-auth-ok { background: rgba(34,197,94,0.12);  color: #22c55e; }
.yt-auth-no { background: rgba(255,255,255,0.06); color: var(--text-muted); }

.yt-quota-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  font-weight: 600;
  cursor: help;
}

.yt-check-btn {
  font-size: 0.75rem;
  padding: 4px 10px;
  white-space: nowrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
  :root {
    --sidebar-w: 244px;
  }

  .content {
    padding: 28px 26px;
  }
}

@media (max-width: 980px) {
  #app {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }

  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }

  .content {
    overflow: visible;
  }

  .review-queue-shell.view.active {
    position: static;
    inset: auto;
    padding: 28px 26px;
  }

  .grid-detail {
    grid-template-columns: 1fr !important;
  }

  .success-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-bar {
    flex-direction: column;
  }

  .action-row,
  .render-action-bar {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .content {
    padding: 22px 16px;
  }

  header h1 {
    font-size: 1.45rem;
  }

  .prompts-cards-grid,
  .clips-grid,
  .history-grid,
  .video-list-grid {
    grid-template-columns: 1fr;
  }

  .results-table {
    display: block;
    overflow-x: auto;
  }

  .step-indicator {
    flex-wrap: wrap;
    gap: 8px;
  }

  .step-line {
    display: none;
  }
}

/* =========================================================
   TIKTOK SHOP STYLES
   ========================================================= */

.tk-shop-workflow {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.preview-container-916 {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  background: #111;
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.tiktok-ui-simulation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  font-family: 'Inter', sans-serif;
}

.tt-sim-basket {
  position: absolute;
  bottom: 120px;
  left: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  padding: 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tt-sim-sidebar {
  position: absolute;
  bottom: 100px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.tt-sim-btn {
  font-size: 1.8rem;
  opacity: 0.8;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.tt-sim-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 20px 12px 12px;
}

.tt-sim-caption {
  font-size: 0.85rem;
  font-weight: 500;
  color: white;
  margin-bottom: 8px;
  max-width: 80%;
}

.tt-sim-music {
  font-size: 0.75rem;
  color: #ddd;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Draggable Overlays */
.tk-overlay {
  position: absolute;
  cursor: move;
  z-index: 20;
  transition: transform 0.05s linear;
}

.draggable-text {
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.2rem;
  white-space: nowrap;
  border: 2px dashed rgba(234, 88, 12, 0.5);
}

.draggable-arrow {
  width: 80px;
  height: 80px;
  border: 2px dashed rgba(234, 88, 12, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tk-overlay:hover {
  border-color: var(--accent);
}

.tk-overlay:active {
  cursor: grabbing;
  border-color: #fff;
}

/* Video Grid for History */
.tk-shop-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.tk-shop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-card);
}

.tk-shop-card video {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 9/16;
  object-fit: cover;
  background: #000;
}

.status-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: bold;
}

.status-pending { background: #333; color: #aaa; }
.status-rendering { background: var(--warning-dim); color: var(--warning); border: 1px solid var(--warning); }
.status-rendered { background: var(--success-dim); color: var(--success); border: 1px solid var(--success); }
.status-uploading { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent); }
.status-uploaded_private { background: #00f2ea22; color: #00f2ea; border: 1px solid #00f2ea; }
.status-failed { background: var(--danger-dim); color: var(--danger); border: 1px solid var(--danger); }

/* Preset chips */
.tk-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent-light);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.tk-preset-chip:hover {
  background: rgba(234, 88, 12, 0.25);
  border-color: var(--accent);
}
.tk-preset-del {
  margin-left: 2px;
  color: var(--text-muted);
  font-size: 0.6rem;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 50%;
  transition: color 0.1s;
}
.tk-preset-del:hover {
  color: var(--danger);
}
/* User bar in sidebar */
.user-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--border, #333);
  font-size: .82rem;
}
.user-bar-name { flex: 1; color: var(--text, #e0e0e0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-bar-logout, .user-bar-admin {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted, #888); font-size: 1rem; padding: 2px 4px;
  border-radius: 4px; transition: color .15s;
}
.user-bar-logout:hover { color: var(--danger, #e74); }
.user-bar-admin:hover  { color: var(--accent, #7c6af7); }

/* ══════════════════════════════════════════════════════════
   LIMPIEZA EDITORIAL — Editorial Cleanup
══════════════════════════════════════════════════════════ */

/* Badge NEW en el nav */
.nav-badge-new {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--accent, #7c6af7);
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: auto;
  text-transform: uppercase;
}

/* Zona de upload */
.editorial-upload-zone {
  border: 2px dashed var(--border, #333);
  border-radius: 10px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--bg-document, #1a1a2e);
}
.editorial-upload-zone:hover,
.editorial-upload-zone.drag-over {
  border-color: var(--accent, #7c6af7);
  background: rgba(124,106,247,0.07);
}

/* Barra de estadísticas */
.editorial-stats-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  min-width: 70px;
}
.stat-chip small { font-size: 0.68rem; font-weight: 400; opacity: 0.75; margin-top: 2px; }
.stat-chip-green  { background: rgba(34,197,94,0.15);  color: #22c55e; }
.stat-chip-red    { background: rgba(239,68,68,0.15);  color: #ef4444; }
.stat-chip-yellow { background: rgba(234,179,8,0.15);  color: #eab308; }
.stat-chip-blue   { background: rgba(59,130,246,0.15); color: #60a5fa; }

/* Timeline visual */
.editorial-timeline-visual {
  position: relative;
  height: 28px;
  background: var(--bg-document, #1a1a2e);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}
.tl-segment {
  position: absolute;
  top: 0;
  height: 100%;
  opacity: 0.85;
  cursor: pointer;
  transition: opacity .15s;
  min-width: 1px;
}
.tl-segment:hover { opacity: 1; filter: brightness(1.2); }

.editorial-timeline-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--text-muted, #888);
}
.tl-legend { display: flex; align-items: center; gap: 5px; }
.tl-legend::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
}
.tl-legend.tl-keep::before   { background: #22c55e; }
.tl-legend.tl-drop::before   { background: #ef4444; }
.tl-legend.tl-review::before { background: #eab308; }
.tl-legend.tl-dead::before   { background: #6b7280; }

/* Workspaces previos */
.editorial-ws-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 7px;
  border: 1px solid var(--border, #333);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background .15s;
}
.editorial-ws-item:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); }

/* Clip cards */
.editorial-clip-card {
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg-document, #1a1a2e);
  transition: border-color .2s;
}
.editorial-clip-card:hover { border-color: var(--accent, #7c6af7); }

.editorial-clip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.editorial-clip-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(124,106,247,0.2);
  color: var(--accent, #7c6af7);
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}
.editorial-clip-time { font-size: 0.78rem; color: var(--text-muted, #888); }
.editorial-clip-dur  { font-size: 0.78rem; color: var(--text-secondary, #aaa); font-weight: 600; }
.editorial-clip-reason { font-size: 0.78rem; color: var(--text-secondary, #aaa); margin-bottom: 8px; }
.editorial-clip-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Score pill */
.editorial-score-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  margin-left: auto;
}
.score-high { background: rgba(34,197,94,0.2);  color: #22c55e; }
.score-mid  { background: rgba(234,179,8,0.2);  color: #eab308; }
.score-low  { background: rgba(239,68,68,0.15); color: #ef4444; }

/* Tabla de segmentos */
.seg-row-keep   { background: rgba(34,197,94,0.04); }
.seg-row-drop   { background: rgba(239,68,68,0.04); }
.seg-row-review { background: rgba(234,179,8,0.04); }

.seg-label, .seg-action {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-block;
}
.label-keep      { background: rgba(34,197,94,0.2);  color: #22c55e; }
.label-highlight { background: rgba(16,185,129,0.2); color: #10b981; }
.label-noise     { background: rgba(239,68,68,0.2);  color: #ef4444; }
.label-dead      { background: rgba(107,114,128,0.2);color: #9ca3af; }
.label-review    { background: rgba(234,179,8,0.2);  color: #eab308; }

.action-keep   { background: rgba(34,197,94,0.15);  color: #22c55e; }
.action-drop   { background: rgba(239,68,68,0.15);  color: #ef4444; }
.action-review { background: rgba(234,179,8,0.15);  color: #eab308; }

/* --- PRODUCTION STEPPER --- */
.production-stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

.pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pipeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 1;
}

.step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  z-index: 2;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pipeline-step.active .step-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 0 0 4px var(--accent-dim);
}

.pipeline-step.active .step-label {
  color: var(--text-primary);
  font-weight: 700;
}

.pipeline-step.completed .step-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.pipeline-step.completed::after {
  background: var(--accent);
}

.pipeline-step.completed .step-label {
  color: var(--text-secondary);
}

.pipeline-step:hover .step-icon {
  transform: translateY(-2px);
  border-color: var(--accent-light);
}

/* ── Single Clip / Top5 ─────────────────────────────── */
.btn-ghost {
  background: transparent;
  color: #94a3b8;
  border: 1px solid #334155;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.15s;
}
.btn-ghost:hover {
  background: #1e293b;
  color: #e2e8f0;
}

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 18px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  color: #e2e8f0;
}
.mode-card:hover {
  border-color: var(--accent);
  background: #1e293b;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(234,88,12,0.15);
}
.mode-card-icon { font-size: 2.4rem; }
.mode-card-title { font-weight: 700; font-size: 1rem; color: #f1f5f9; }
.mode-card-desc { font-size: 0.76rem; color: #64748b; line-height: 1.4; }

.vertical-mode-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.vertical-mode-option {
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.vertical-mode-option:hover {
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(251, 146, 60, 0.08);
}

.vertical-mode-option.is-selected {
  border-color: #FB923C;
  background: rgba(251, 146, 60, 0.13);
  box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.18);
}

.vertical-mode-title {
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.2;
  color: #f8fafc;
}

.vertical-mode-meta {
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--text-muted);
}

.thumb-frame-btn {
  padding: 4px;
  aspect-ratio: 9 / 16;
  height: 120px;
  overflow: hidden;
  border-radius: 8px;
  flex: 0 0 auto;
}

.thumb-frame-btn.is-selected {
  border-color: #FB923C;
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.22);
}

.thumb-empty-state {
  width: 100%;
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
  background: var(--bg-input);
}

@media (max-width: 980px) {
  .vertical-mode-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .vertical-mode-toolbar {
    grid-template-columns: 1fr;
  }
}

.dropzone {
  border: 2px dashed #334155;
  border-radius: 12px;
  padding: 36px;
  text-align: center;
  cursor: pointer;
  color: #64748b;
  font-size: 0.88rem;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--accent);
  background: #0f172a;
  color: #e2e8f0;
}

.variant-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.15s;
  position: relative;
}
.variant-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(234,88,12,0.25);
}
.variant-card video {
  width: 100%;
  aspect-ratio: 9/16;
  background: #000;
  display: block;
}
.variant-card-body {
  padding: 10px 12px;
}
.variant-score {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accent-light);
}
.variant-label {
  font-size: 0.74rem;
  color: #94a3b8;
  margin-top: 2px;
}
.variant-select-btn {
  width: 100%;
  margin-top: 8px;
  padding: 7px;
  border-radius: 7px;
  border: 1px solid #334155;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.12s;
}
.variant-select-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

/* ── Tier feature locks (P2-J9) ──────────────────────────────────────────────*/
.nav-item.feature-locked,
.nav-sub-item.feature-locked {
    opacity: 0.55;
    cursor: pointer;
}
.nav-item.feature-locked:hover,
.nav-sub-item.feature-locked:hover {
    opacity: 0.75;
}
.plan-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .05em;
    vertical-align: middle;
    line-height: 1.6;
}
.plan-badge-creator { background: rgba(59,130,246,0.2); color: #93c5fd; }
.plan-badge-pro     { background: rgba(194,65,12,0.2); color: #FB923C; }
.plan-badge-studio  { background: rgba(234,179,8,0.2);  color: #fde68a; }

/* =========================================================
   GROWTH DASHBOARD v2 (2026-04-26) — hero metrics rediseño
   ========================================================= */

/* HERO: vistas semana como número masivo */
.gd-hero {
  position: relative;
  padding: 32px 36px 36px;
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(234, 88, 12, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(245, 158, 11, 0.10) 0%, transparent 60%),
    linear-gradient(135deg, rgba(234, 88, 12, 0.04), rgba(0, 0, 0, 0));
  border: 1px solid rgba(234, 88, 12, 0.22);
  overflow: hidden;
}
.gd-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}
.gd-hero-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
.gd-hero-value {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #FB923C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
  font-feature-settings: 'tnum' 1;
}
.gd-hero-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.gd-hero-delta {
  font-weight: 700;
  color: var(--text-secondary);
}
.gd-hero-delta.up    { color: #4ade80; }
.gd-hero-delta.down  { color: #f87171; }
.gd-hero-breakdown {
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* YPP card — barra alta + porcentaje grande */
.gd-ypp-card {
  margin-bottom: 16px;
  padding: 22px 24px;
}
.gd-ypp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.gd-ypp-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.gd-ypp-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.gd-ypp-percent {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--accent-light);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1;
  flex-shrink: 0;
}
.gd-ypp-bar-wrap {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
  height: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}
.gd-ypp-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C2410C 0%, #EA580C 50%, #F59E0B 100%);
  border-radius: var(--radius-full);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 24px rgba(234, 88, 12, 0.5);
  position: relative;
}
.gd-ypp-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  animation: gd-ypp-shimmer 2.4s ease-in-out infinite;
}
@keyframes gd-ypp-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.gd-ypp-detail {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
  margin-top: 4px;
}
.gd-tiktok-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.gd-tiktok-icon { font-size: 1rem; }
.gd-tiktok-value {
  font-weight: 800;
  color: var(--text-primary);
  font-feature-settings: 'tnum' 1;
  margin-left: auto;
}
.gd-tiktok-suffix { color: var(--text-muted); font-size: 0.76rem; }

/* KPIs secundarios — grid 3 cards */
.gd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.gd-kpi {
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.gd-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gd-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--border-accent);
}
.gd-kpi:hover::before { opacity: 1; }
.gd-kpi-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.gd-kpi-sub {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.7rem;
  margin-left: 2px;
}
.gd-kpi-value {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  font-feature-settings: 'tnum' 1;
  margin-bottom: 8px;
}
.gd-kpi-warning { color: #f59e0b; }
.gd-kpi-plan {
  text-transform: capitalize;
  background: linear-gradient(180deg, var(--text-primary), var(--accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gd-kpi-cta {
  margin-top: 6px;
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
}
.gd-kpi-cta:hover {
  background: var(--accent-dim);
  color: var(--accent-light);
  border-color: var(--border-accent);
}

/* Responsive: en móvil, hero un poco más compacto */
@media (max-width: 640px) {
  .gd-hero { padding: 22px 20px 24px; }
  .gd-ypp-card { padding: 18px; }
  .gd-ypp-header { flex-direction: column; gap: 8px; }
  .gd-ypp-percent { font-size: 1.7rem; }
}

/* =========================================================
   CLAUDE DESIGN — COMPONENTES NUEVOS (P1 + P2)
   Todos aditivos, sin tocar clases existentes.
   ========================================================= */

/* ---- Callouts (§C.1) ---- */
.callout {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.callout > svg, .callout > i { flex-shrink: 0; margin-top: 2px; }
.callout-title { font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-1); }
.callout--info    { border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.06); color: #93c5fd; }
.callout--success { border-color: rgba(34,197,94,0.3);  background: var(--success-dim);     color: #86efac; }
.callout--warning { border-color: rgba(245,158,11,0.3); background: var(--warning-dim);     color: #fbbf24; }
.callout--danger  { border-color: rgba(239,68,68,0.3);  background: var(--danger-dim);      color: #fca5a5; }

/* ---- Wizard stepper (§C.1) ---- */
.wizard-stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  margin-bottom: var(--sp-6);
}
.wizard-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: var(--font-small);
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.wizard-step--active {
  background: var(--accent-dim);
  border-color: var(--border-accent);
  color: var(--text-primary);
  box-shadow: var(--shadow-glow);
}
.wizard-step--done {
  background: var(--success-dim);
  border-color: rgba(34,197,94,0.3);
  color: #86efac;
}
.wizard-step--pending { opacity: 0.6; cursor: default; }
.wizard-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-micro);
  font-weight: 700;
  flex-shrink: 0;
}
.wizard-step--active .wizard-step-num { background: var(--accent); color: #fff; }
.wizard-step--done .wizard-step-num { background: var(--success); color: #fff; }
.wizard-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  animation: panelIn var(--dur-base) var(--ease-out);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wizard-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg-base);
  padding: var(--sp-4) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-6);
}

/* ---- IO Card (§C.1 — paso 2 wizard "Copia / Pega") ---- */
.io-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.io-card-side { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 200px; }
.io-card-side h4 {
  font-size: var(--font-h3); font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0;
}
.io-card-side textarea, .io-card-side .io-output {
  flex: 1;
  background: var(--bg-input-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--font-small);
  color: var(--text-primary);
  resize: vertical;
}
@media (max-width: 720px) {
  .io-card { grid-template-columns: 1fr; }
}

/* ---- Dashboard hero band + KPI cards (§C.2) ---- */
.hero-band {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-10);
  margin-bottom: var(--sp-6);
  position: relative;
  overflow: hidden;
}
.hero-band::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 360px; height: 360px;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.6;
}
.hero-band > * { position: relative; }
.hero-band-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: var(--sp-3);
}
.hero-band-metric {
  font-size: var(--font-display);
  line-height: var(--lh-display);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.hero-band-chip {
  display: inline-block;
  margin-left: var(--sp-3);
  padding: 4px 10px;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--accent-light);
  vertical-align: middle;
}
.hero-band-desc {
  margin-top: var(--sp-3);
  font-size: var(--font-body);
  color: var(--text-secondary);
  max-width: 640px;
}
.hero-band-actions { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.kpi-card:hover { border-color: var(--border-hover); }
.kpi-card-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.kpi-card-value {
  font-size: var(--font-h1);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kpi-card-delta { font-size: var(--font-small); display: flex; align-items: center; gap: 4px; }
.kpi-card-delta--up { color: var(--success); }
.kpi-card-delta--down { color: var(--danger); }
.kpi-card-delta--flat { color: var(--text-muted); }
.kpi-card-foot { font-size: var(--font-micro); color: var(--text-muted); margin-top: auto; }

.next-action-card {
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.next-action-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.next-action-body { flex: 1; }
.next-action-title { font-size: var(--font-h3); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.next-action-desc { font-size: var(--font-small); color: var(--text-secondary); }

.insight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.insight-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  font-size: var(--font-small);
  color: var(--text-secondary);
}
.insight-list li::before {
  content: '✨';
  font-size: var(--font-h3);
  line-height: 1;
}

/* ---- Modal system modifiers (§C.6) ---- */
.modal--sm   .modal-content { max-width: 400px; }
.modal--md   .modal-content { max-width: 560px; }
.modal--lg   .modal-content { max-width: 800px; }
.modal--full .modal-content { max-width: 100%; width: 100%; height: 100%; border-radius: 0; }
.modal--danger .modal-content { border-top: 3px solid var(--danger); }

/* ---- Sidebar search + command palette (§C.3) ---- */
.sidebar-search {
  margin: var(--sp-3) var(--sp-3) var(--sp-4);
  position: relative;
}
.sidebar-search input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-8);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-small);
  color: var(--text-primary);
  font-family: var(--font);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.sidebar-search input:focus { outline: none; border-color: var(--border-accent); }
.sidebar-search input::placeholder { color: var(--text-muted); }
.sidebar-search-icon {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.sidebar-search-kbd {
  position: absolute;
  right: var(--sp-2);
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  color: var(--text-muted);
  background: var(--bg-card);
  pointer-events: none;
}

.nav-group-collapsible .nav-section-label {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-group-collapsible .nav-section-label::after {
  content: '›';
  font-size: 1.2em;
  transition: transform var(--dur-base) var(--ease-out);
  color: var(--text-muted);
}
.nav-group-collapsible[data-expanded="true"] .nav-section-label::after {
  transform: rotate(90deg);
}
.nav-group-collapsible[data-expanded="false"] .nav-group-items {
  display: none;
}

/* Command palette overlay */
.command-palette {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 9999;
  animation: cpOverlayIn var(--dur-base) var(--ease-out);
}
.command-palette.is-open { display: flex; }
@keyframes cpOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.command-palette-panel {
  width: 100%;
  max-width: 580px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: cpPanelIn var(--dur-base) var(--ease-out);
}
@keyframes cpPanelIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.command-palette-input {
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-h2);
  color: var(--text-primary);
  font-family: var(--font);
  outline: none;
}
.command-palette-input::placeholder { color: var(--text-muted); }
.command-palette-results { max-height: 50vh; overflow-y: auto; padding: var(--sp-2); }
.command-palette-group-label {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.command-palette-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-body);
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-out);
}
.command-palette-item:hover,
.command-palette-item.is-active {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.command-palette-item-kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  color: var(--text-muted);
}
.command-palette-empty {
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-small);
}

/* ---- Dev-only wrapper (§C.3) ---- */
.dev-only { display: none !important; }
/* dev-only solo aparece si: estamos en dev (hostname local) Y el user es
   superadmin / operator. Cualquier otro role (free, creator, pro, studio,
   admin no-operator) NO debe ver el server control bar ni nada gateado. */
body.is-dev[data-user-role="superadmin"] .dev-only,
body.is-dev[data-user-is-operator="1"] .dev-only {
  display: block !important;
}

/* ---- Skeleton shimmer (§B.4) ---- */
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-subtle) 0%,
    var(--bg-card-hover) 50%,
    var(--bg-subtle) 100%
  );
  background-size: 200% 100%;
  animation: skelShimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}
@keyframes skelShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---- Lucide icon helper ---- */
.lucide-icon { display: inline-block; vertical-align: middle; stroke-width: 1.5; }

/* Iconos en el sidebar — alineación rigurosa horizontal y vertical.
   - Wrapper: 24x24 fijo, flex centrado, sin margin/padding.
   - SVG dentro: 18x18 fijo, sin transform, viewBox 24x24 estándar.
   - Item: flex con align-items center; gap fijo.
*/
.sidebar .nav-icon-wrapper {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-secondary);
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  position: relative;
  box-sizing: border-box !important;
}
.sidebar .nav-icon-wrapper > svg,
.sidebar .nav-icon-wrapper > i[data-lucide],
.sidebar .nav-icon-wrapper > svg.lucide {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  stroke-width: 1.8 !important;
  display: block !important;
  flex-shrink: 0 !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  vertical-align: baseline !important;
}
.sidebar .nav-icon-wrapper svg * { vector-effect: non-scaling-stroke; }
/* Item activo también colorea su icono */
.sidebar .nav-item.active .nav-icon-wrapper,
.sidebar .nav-item.is-active .nav-icon-wrapper { color: var(--accent); }
/* Item: flex horizontal, gap fijo, padding consistente */
.sidebar .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  width: 100%;
  text-align: left;
  box-sizing: border-box !important;
}
.sidebar .nav-sub-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 14px 6px 32px !important;
  box-sizing: border-box !important;
}
/* Chevron del nav-parent al final (no descoloca el icono) */
.sidebar .nav-item .nav-chevron { margin-left: auto; flex-shrink: 0; }
/* Badge del nav-item (cola revision) al final */
.sidebar .nav-item .nav-badge { margin-left: auto; flex-shrink: 0; }
/* Label flex 1 para que el chevron/badge quede pegado a la derecha */
.sidebar .nav-item .nav-label,
.sidebar .nav-sub-item .nav-sub-label { flex: 1; min-width: 0; }

/* ---- Sidebar mockup (mockup-sidebar.jsx · Claude Design) ---- */

/* Logo */
.sidebar .logo {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
}
.sidebar .logo h2 {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0;
}
.sidebar .logo .logo-mark {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  background: transparent;
}
.sidebar .logo .logo-mark svg {
  width: 28px; height: 28px;
  display: block;
}
/* Logo Operator: fondo oscuro técnico para que se lea el grid */
body[data-tier-logo="operator"] .sidebar .logo .logo-mark {
  background: #0D0D0D;
  border: 1px solid rgba(6, 182, 212, 0.3);
}
.sidebar .logo .logo-badge {
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 7px;
  border-radius: 4px;
  background: transparent;
  /* defaults — se sobrescriben por tier-mark-* clases */
  color: var(--chispa-accent);
  border: 1px solid var(--chispa-accent);
}
.sidebar .logo .tier-mark-free     { color: #F59E0B; border-color: #F59E0B; }
.sidebar .logo .tier-mark-creator  { color: #EA580C; border-color: #EA580C; }
.sidebar .logo .tier-mark-pro      {
  color: #F59E0B;
  border-color: transparent;
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(194,65,12,0.18));
  border: 1px solid rgba(245,158,11,0.45);
}
.sidebar .logo .tier-mark-studio   {
  color: #F59E0B;
  border-color: rgba(154,52,18,0.6);
  background: rgba(154,52,18,0.18);
}
.sidebar .logo .tier-mark-operator {
  color: #06B6D4;
  border-color: #06B6D4;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  letter-spacing: 0.10em;
  background: rgba(6,182,212,0.08);
}

/* Item activo: borde izquierdo + fondo accent-dim */
.sidebar .nav-item.active,
.sidebar .nav-item:not(.nav-parent).is-active {
  background: var(--accent-dim);
  color: var(--text-primary);
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}

/* Sub-label "operador" / "superadmin" + badge "PRO" en grupo */
.nav-section-label[data-group-sub]::before {
  content: '· ' attr(data-group-sub);
  margin-left: 6px;
  font-style: italic;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: lowercase;
  /* C-09 fix (2026-05-04): sub-label antes del chevron (= mismo orden que badge). */
  order: 1;
}
.nav-section-label[data-group-badge]::before {
  content: attr(data-group-badge);
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--chispa-accent);
  padding: 1px 5px;
  border: 1px solid var(--chispa-accent);
  border-radius: 3px;
  letter-spacing: 0.06em;
  /* C-09 fix (2026-05-04): badge debe ir ANTES del chevron, no después.
     Operador reportó "ESTUDIO ⌄ PRO" debe ser "ESTUDIO PRO ⌄". */
  order: 1;
}
/* P0-5: superadmin no recibe gates de plan, así que las etiquetas tier
   ("PRO"/"STUDIO") junto a títulos de sección son redundantes y
   contradicen el DoD-AUTO ("ningún badge PRO/STUDIO en sidebar"). */
body[data-user-role="superadmin"] .nav-section-label[data-group-badge]::before {
  display: none;
}

/* Chevron a la derecha en grupos colapsables */
.nav-group-collapsible .nav-section-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.nav-group-collapsible .nav-section-label::after {
  content: '›';
  margin-left: auto;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-out);
  /* C-09 fix (2026-05-04): chevron siempre al final tras texto + badge. */
  order: 3;
}
.nav-group-collapsible[data-expanded="true"] .nav-section-label::after {
  transform: rotate(90deg);
}

/* Plan chip footer card (mockup-sidebar §footer) */
.sidebar .plan-chip-card {
  margin: auto 14px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.plan-chip-card .plan-chip-row {
  display: flex; align-items: center; gap: 8px;
}
.plan-chip-card .plan-chip-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #3b82f6;
  flex-shrink: 0;
}
.plan-chip-card .plan-chip-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
}
.plan-chip-card .plan-chip-usage {
  margin-left: auto;
  font-size: 12px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.plan-chip-card .plan-chip-bar-track {
  height: 4px;
  background: var(--bg-input);
  border-radius: 999px;
  overflow: hidden;
}
.plan-chip-card .plan-chip-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-out);
}
.plan-chip-card .plan-chip-meta {
  font-size: 11px; color: var(--text-muted);
}
.plan-chip-card .plan-chip-cta,
.user-chip-card .plan-chip-cta {
  font-size: 12px; font-weight: 600;
  color: var(--accent-light);
  cursor: pointer;
  text-decoration: none;
  margin-top: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.plan-chip-card .plan-chip-cta:hover,
.user-chip-card .plan-chip-cta:hover { color: var(--accent); }
.plan-chip-card .plan-chip-cta.is-disabled,
.user-chip-card .plan-chip-cta.is-disabled,
.plan-chip-card .plan-chip-cta[aria-disabled="true"],
.user-chip-card .plan-chip-cta[aria-disabled="true"] {
  color: var(--text-muted);
  pointer-events: none;
}

/* El sidebar se vuelve flex column para que el plan chip quede al fondo */
.sidebar { display: flex; flex-direction: column; }
.sidebar .sidebar-nav { flex: 1 1 auto; overflow-y: auto; }

/* ============================================================
   ONBOARDING 3-STEP (mockup-onboarding-empty.jsx · Claude Design)
   Overlay full-screen con hero + 3 cards + footer
   ============================================================ */
.ob-overlay,
#onboarding-overlay.ob-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: radial-gradient(1200px 600px at 50% 0%, rgba(234,88,12,0.10), transparent),
              rgba(9,9,11,0.97) !important;
  z-index: 99999 !important;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  overflow-y: auto;
  animation: obFadeIn var(--dur-base) var(--ease-out);
  margin: 0 !important;
}
#onboarding-overlay[style*="display: flex"],
#onboarding-overlay[style*="display:flex"] {
  display: flex !important;
}
@keyframes obFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ob-panel {
  max-width: 980px;
  width: 100%;
}

.ob-hero {
  text-align: center;
  margin-bottom: 36px;
}
.ob-hero-emoji {
  font-size: 36px;
  margin-bottom: 12px;
}
.ob-hero-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.ob-hero-desc {
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.ob-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 920px;
  margin: 0 auto 32px;
}

.ob-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  transition: all var(--dur-base) var(--ease-out);
}
.ob-card--active {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
  opacity: 1;
}
.ob-card--pending {
  opacity: 0.65;
}
.ob-card--done {
  opacity: 1;
  border-color: var(--success);
}
.ob-card-progress {
  height: 4px;
  background: var(--bg-input);
  border-radius: 999px;
  margin-bottom: 18px;
  overflow: hidden;
}
.ob-card--active .ob-card-progress-fill {
  width: 40%;
  height: 100%;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.ob-card--done .ob-card-progress-fill {
  width: 100%;
  height: 100%;
  background: var(--success);
}
.ob-card-emoji {
  font-size: 32px;
  margin-bottom: 12px;
}
.ob-card-eyebrow {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ob-card-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.ob-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 18px;
}
.ob-card-cta {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.ob-card-cta:hover { background: var(--accent-hover); }
.ob-card-cta:disabled,
.ob-card--pending .ob-card-cta {
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: not-allowed;
}

.ob-footer {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
  align-items: center;
}
.ob-skip {
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  padding: 10px 14px;
}
.ob-skip:hover { color: var(--text-secondary); }
.ob-start {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.ob-start:hover { background: var(--accent-hover); }

@media (max-width: 760px) {
  .ob-cards { grid-template-columns: 1fr; gap: 12px; }
  .ob-hero-title { font-size: 22px; }
}

/* ============================================================
   DASHBOARD: SIMULAR COMO CREATOR (free user)
   Overlay sobre el dashboard real con blur de fondo. Click cierra
   el overlay y entra modo simulación con datos demo.
   ============================================================ */
.gd-sim-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(9, 9, 11, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: gdSimFade 240ms var(--ease-out);
}
body.gd-sim-overlay-open { overflow: hidden; }
@keyframes gdSimFade { from { opacity: 0; } to { opacity: 1; } }
.gd-sim-card {
  max-width: 480px;
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(234,88,12,0.08) 100%);
  border: 1px solid var(--border-accent);
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
              0 0 0 1px var(--accent-dim);
}
.gd-sim-icon { font-size: 36px; margin-bottom: 14px; }
.gd-sim-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.gd-sim-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 24px;
}
.gd-sim-cta {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--chispa-accent));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.4);
  transition: transform var(--dur-fast) var(--ease-out);
}
.gd-sim-cta:hover { transform: translateY(-1px); }
.gd-sim-secondary { margin-top: 18px; font-size: 12px; }
.gd-sim-secondary a { color: var(--accent-light); text-decoration: none; }
.gd-sim-secondary a:hover { color: var(--accent); }

/* Cuando overlay activo, el contenido detrás se difumina */
#gd-content-blurrable.gd-blurred {
  filter: blur(8px) saturate(0.7);
  pointer-events: none;
  user-select: none;
  transition: filter 240ms var(--ease-out);
}

/* La sección growth-dashboard necesita position relative para que el overlay
   absolute se posicione respecto a ella */
#growth-dashboard { position: relative; }

/* ============================================================
   GATING DEFENSIVO POR PLAN (CSS-only fallback)
   Si por timing JS el item no se oculta, este CSS lo hace.
   ============================================================ */
body[data-user-plan="free"] .sidebar-nav [data-min-plan="creator"],
body[data-user-plan="free"] .sidebar-nav [data-min-plan="pro"],
body[data-user-plan="free"] .sidebar-nav [data-min-plan="studio"],
body[data-user-plan="creator"] .sidebar-nav [data-min-plan="pro"],
body[data-user-plan="creator"] .sidebar-nav [data-min-plan="studio"],
body[data-user-plan="pro"] .sidebar-nav [data-min-plan="studio"] {
  display: none !important;
}
/* Tabs y otros componentes con data-min-plan fuera del sidebar */
body[data-user-plan="free"] .cg-tab[data-min-plan="creator"],
body[data-user-plan="free"] .cg-tab[data-min-plan="pro"],
body[data-user-plan="free"] .cg-tab[data-min-plan="studio"],
body[data-user-plan="creator"] .cg-tab[data-min-plan="pro"],
body[data-user-plan="creator"] .cg-tab[data-min-plan="studio"],
body[data-user-plan="pro"] .cg-tab[data-min-plan="studio"] {
  display: none !important;
}
/* Superadmin ve todo en navegación/controles, sin forzar visibles las .view inactivas. */
body[data-user-role="superadmin"] .sidebar-nav .nav-item[data-min-plan],
body[data-user-role="superadmin"] .sidebar-nav .nav-sub-item[data-min-plan] {
  display: flex !important;
}
body[data-user-role="superadmin"] .cg-tab[data-min-plan] {
  display: inline-flex !important;
}

/* Selector de idioma (i18n) en el sidebar — pill discreta minimalista */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 14px 14px 6px;
  padding: 0;
  background: transparent;
  border: none;
  align-self: flex-start;
}
.lang-switcher .lang-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--dur-fast) var(--ease-out);
  position: relative;
}
.lang-switcher .lang-btn + .lang-btn::before {
  content: '·';
  color: var(--text-muted);
  opacity: 0.4;
  margin-right: 8px;
  margin-left: 0;
  position: relative;
  left: -8px;
}
.lang-switcher .lang-btn:hover { color: var(--text-secondary); }
.lang-switcher .lang-btn[aria-current="true"] {
  color: var(--accent-light);
  font-weight: 700;
}

/* Teaser de upgrade en el sidebar — solo aparece cuando hay items ocultos por plan */
.sidebar-upgrade-teaser {
  margin: 18px 14px 4px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(234,88,12,0.10), rgba(245,158,11,0.04));
  border: 1px solid var(--border-accent);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-upgrade-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--chispa-accent);
}
.sidebar-upgrade-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.sidebar-upgrade-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.sidebar-upgrade-cta {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-light);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.sidebar-upgrade-cta:hover { color: var(--accent); }

/* ============================================================
   DASHBOARD V2 (mockup-dashboard.jsx · Claude Design §C.2)
   ============================================================ */

.gd-header-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.gd-header-v2 h1 {
  font-size: var(--font-h1);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.gd-header-v2 p {
  color: var(--text-secondary);
  font-size: var(--font-body);
  margin: 4px 0 0;
}
.gd-channel-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-small);
}
.gd-channel-pill-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
}
.gd-channel-pill select {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--font-small);
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

/* HERO BAND con YPP destacado */
.gd-hero-band {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(234,88,12,0.06) 100%);
  border: 1px solid var(--accent-dim);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 20px;
  box-shadow: 0 0 0 1px var(--accent-dim), 0 8px 32px rgba(234,88,12,0.10);
}
.gd-hero-band-eyebrow {
  font-size: var(--font-micro);
  font-weight: 600;
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.gd-hero-band-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gd-hero-band-metric {
  font-size: 38px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.gd-hero-band-metric-sub {
  color: var(--text-muted);
  font-size: 22px;
  font-weight: 400;
  margin-left: 6px;
}
.gd-hero-band-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 999px;
  font-size: var(--font-small);
  font-weight: 700;
}
.gd-hero-band .gd-ypp-bar-wrap {
  height: 8px;
  background: var(--bg-input);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}
.gd-hero-band .gd-ypp-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--chispa-accent));
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-out);
}
.gd-hero-band-desc {
  color: var(--text-secondary);
  font-size: var(--font-small);
  margin-bottom: 18px;
  line-height: 1.55;
}
.gd-hero-band-desc strong { color: var(--text-primary); }
.gd-hero-band-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* KPI ROW V2 */
.gd-kpi-row-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

/* P2-J15 — KPI grid de 6 cards (density pass dashboard Free simulación). */
.gd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1280px) {
  .gd-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .gd-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .gd-kpi-grid { grid-template-columns: 1fr; }
}
.gd-kpi-grid .gd-kpi-v2 { padding: 14px; }
.gd-kpi-grid .gd-kpi-num { font-size: 22px; }
.gd-kpi-grid .gd-kpi-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* P2-J15 — Mini-gráfica 4 semanas. */
.gd-trend-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.gd-trend-card .gd-secondary-eyebrow { margin-bottom: 10px; }
.gd-trend-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  font-size: var(--font-small);
  color: var(--text-secondary);
}
.gd-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gd-trend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.gd-trend-dot--yt { background: #ff0033; }
.gd-trend-dot--tt { background: #25f4ee; box-shadow: 0 0 10px rgba(37, 244, 238, 0.22); }
.gd-trend-dot--ig { background: linear-gradient(135deg, #f58529 0%, #dd2a7b 52%, #8134af 100%); }
.gd-chispa-impact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  margin: 0 0 10px;
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
}
.gd-chispa-impact[hidden] { display: none; }
.gd-chispa-impact-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
}
.gd-chispa-impact-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}
.gd-chispa-impact-delta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 900;
  color: #f59e0b;
  white-space: nowrap;
}
.gd-trend-chart-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.25);
  border-radius: 8px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.12);
}
.gd-trend-chart {
  width: 100%;
  height: 130px;
  display: block;
}
.gd-trend-axis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  padding: 0 8px;
}
.gd-trend-axis > span {
  flex: 1 1 0;
  text-align: center;
  white-space: nowrap;
  min-width: 0;
}
.gd-trend-axis > span:first-child { text-align: left; }
.gd-trend-axis > span:last-child { text-align: right; }

/* P2-J15 — Top 3 clips list. */
.gd-top-clips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gd-top-clips-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
}
.gd-top-clips-list .gd-top-clip-rank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}
.gd-top-clips-list .gd-top-clip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}
.gd-top-clips-list .gd-top-clip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  align-items: center;
}
.gd-top-clip-platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gd-top-clip-platform-chip--youtube {
  background: rgba(255, 0, 0, 0.12);
  color: #f87171;
  border: 1px solid rgba(255, 0, 0, 0.2);
}
.gd-top-clip-platform-chip--tiktok {
  background: rgba(234, 88, 12, 0.12);
  color: #FB923C;
  border: 1px solid rgba(234, 88, 12, 0.25);
}

/* P2-J15 — Card cadencia. */
.gd-cadence-card .gd-cadence-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gd-cadence-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
}
.gd-cadence-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}
.gd-cadence-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.gd-cadence-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* P2-J15 — Secondary row con 3 columnas (Top 3 + Cadencia + IA Pro). */
.gd-secondary-row--3col { grid-template-columns: 1.1fr 1fr 1fr; }
@media (max-width: 1100px) {
  .gd-secondary-row--3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .gd-secondary-row--3col { grid-template-columns: 1fr; }
  .gd-chispa-impact {
    align-items: flex-start;
    flex-direction: column;
  }
  .gd-chispa-impact-delta { font-size: 16px; }
}
.gd-kpi-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.gd-kpi-v2:hover { border-color: var(--border-hover); }
.gd-kpi-eyebrow {
  font-size: var(--font-micro);
  font-weight: 600;
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.gd-kpi-row-vals {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.gd-kpi-num {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.gd-kpi-delta {
  font-size: var(--font-small);
  color: var(--success);
  font-weight: 600;
}
.gd-kpi-delta--muted { color: var(--text-muted); font-weight: 500; }
.gd-kpi-delta--danger { color: var(--danger); }
.gd-kpi-foot {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.kpi-badges-footer {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-height: 20px;
}
.kpi-badges-footer .gd-creator-badge,
.kpi-badges-footer .gd-sim-badge {
  margin-left: 0;
}
.gd-kpi-foot--cta {
  color: var(--accent-light);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.gd-kpi-foot--cta:hover { color: var(--accent); }

/* NEXT ACTION CARD */
.gd-next-action {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 18px 22px;
  /* margin-top: separa visualmente la card cuando está al fondo del dashboard
     (post-2026-04-30 reorganización). margin-bottom mantenido para casos
     donde aún queda contenido debajo (defensivo). */
  margin-top: 28px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 0 0 1px var(--accent-dim);
}
.gd-next-action-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent-dim);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.gd-next-action-body { flex: 1; }
.gd-next-action-eyebrow {
  font-size: var(--font-micro);
  font-weight: 600;
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.gd-next-action-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.gd-next-action-desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
  line-height: 1.5;
}
.gd-next-action-dismiss {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.gd-next-action-dismiss:hover { color: var(--text-primary); }

/* SECONDARY ROW */
.gd-secondary-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
}
.gd-secondary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.gd-secondary-eyebrow {
  font-size: var(--font-micro);
  font-weight: 600;
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.gd-secondary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.gd-secondary-head .gd-secondary-eyebrow { margin-bottom: 0; }
.gd-pro-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--chispa-accent);
  padding: 2px 6px;
  border: 1px solid var(--chispa-accent);
  border-radius: 3px;
  letter-spacing: 0.06em;
}
.gd-insights-intro {
  font-size: var(--font-small);
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.gd-insights-list { display: flex; flex-direction: column; gap: 8px; }
.gd-insights-list .insight-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--font-small);
  color: var(--text-primary);
  line-height: 1.5;
}
.gd-insights-list .insight-row::before {
  content: '✨';
  color: var(--chispa-accent);
  flex-shrink: 0;
}
.gd-insights-foot {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Responsive dashboard */
@media (max-width: 900px) {
  .gd-kpi-row-v2 { grid-template-columns: 1fr; }
  .gd-secondary-row { grid-template-columns: 1fr; }
  .gd-hero-band { padding: 22px 20px; }
  .gd-hero-band-metric { font-size: 30px; }
  .gd-hero-band-metric-sub { font-size: 18px; }
  .gd-next-action { flex-wrap: wrap; }
}

/* ---- Onboarding (§C.5) overlay + cards ---- */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  z-index: 9000;
}
.onboarding-step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  transition: all var(--dur-base) var(--ease-out);
}
.onboarding-step-card--done    { border-color: rgba(34,197,94,0.3); background: var(--success-dim); }
.onboarding-step-card--active  { border-color: var(--border-accent); box-shadow: var(--shadow-glow); }
.onboarding-step-card--pending { opacity: 0.5; }
.upgrade-contextual-card {
  background: linear-gradient(135deg, var(--accent-dim), var(--bg-card));
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-top: var(--sp-6);
}

/* ---- AI mode card (§C.5 v2 — Pro/Studio modo A/B) ---- */
.ai-mode-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.ai-mode-card:hover { border-color: var(--border-hover); }
.ai-mode-card--selected {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: var(--shadow-glow);
}
.thumb-strip {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  overflow-x: auto;
}
.thumb-strip > div {
  flex-shrink: 0;
  width: 80px; height: 100px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}

/* ---- Segmented control (§C.5b — Settings modo IA) ---- */
.segmented-control {
  display: inline-flex;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2px;
}
.segmented-option {
  padding: var(--sp-2) var(--sp-4);
  background: transparent;
  border: none;
  font-size: var(--font-small);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: calc(var(--radius-md) - 2px);
  transition: all var(--dur-fast) var(--ease-out);
}
.segmented-option[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

.settings-block-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.settings-block-header .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.settings-block-header .tooltip-trigger {
  cursor: help;
  color: var(--text-muted);
}

/* ============================================================
   D28 · USER CHIP FOOTER (sidebar)
   Reemplaza plan-chip-bar + user-bar + server-control-bar antiguos.
   ============================================================ */

.user-chip-card {
  margin-top: auto;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  position: relative;
}

.user-chip-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.user-chip-trigger:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}
.user-chip-card.is-expanded .user-chip-trigger {
  border-color: var(--border-accent);
  background: var(--bg-card-hover);
}

.user-chip-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--chispa-accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.user-chip-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.user-chip-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip-role {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: lowercase;
}

/* P2-J13.b: tier badge inline junto al nombre dentro de .user-chip-name-row */
.user-chip-name-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.user-chip-tier {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Tamaño compacto para acompañar el nombre sin dominar visualmente */
  width: 18px;
  height: 18px;
  line-height: 0;
}
.user-chip-tier svg {
  width: 18px;
  height: 18px;
  display: block;
}
.user-chip-tier.tier-free    { color: #9ca3af; }
.user-chip-tier.tier-creator { color: #3b82f6; }
.user-chip-tier.tier-pro     { color: #9061f9; }
.user-chip-tier.tier-studio  { color: #f59e0b; }
.user-chip-tier.tier-operator{ color: #FB923C; }

.user-chip-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  animation: userChipExpand 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.user-chip-card.is-expanded .user-chip-panel {
  display: flex;
}
@keyframes userChipExpand {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .user-chip-panel { animation: none; }
}

.user-chip-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.user-chip-plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-chip-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.user-chip-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s, color 0.15s;
}
.user-chip-action:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.user-chip-action.user-chip-logout:hover {
  color: var(--danger);
}

.user-chip-panel .server-control-bar {
  margin: 0;
  padding: 8px 0;
  background: transparent;
  border: none;
}

/* ============================================================
   G27 · TipOverlay (highlight + popover + dim)
   Usado por el onboarding tier-aware para guiar al user a la acción
   correcta tras llegar a una vista. NO bloquea interacción.
   ============================================================ */
.tip-overlay-dim {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 11, 0.55);
  z-index: 9997;
  animation: tipDimFade 200ms cubic-bezier(0.4,0,0.2,1);
}
@keyframes tipDimFade { from { opacity: 0; } to { opacity: 1; } }

.tip-overlay-ring {
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(234,88,12,0.25),
              0 0 24px rgba(234,88,12,0.4);
  animation: tipRingPulse 1.6s ease-in-out infinite;
}
@keyframes tipRingPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(234,88,12,0.25), 0 0 24px rgba(234,88,12,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(234,88,12,0.15), 0 0 32px rgba(234,88,12,0.6); }
}

.tip-overlay-popover {
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: 10px;
  padding: 14px 16px 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: tipPopFade 240ms cubic-bezier(0.4,0,0.2,1);
}
@keyframes tipPopFade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tip-overlay-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}
.tip-overlay-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}
.tip-overlay-close:hover { color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) {
  .tip-overlay-ring { animation: none; }
  .tip-overlay-popover { animation: none; }
}

/* ============================================================
   TipOverlay v2 — D30.3 / G27 (clase JS estructurada)
   Sobreescribe los tokens legacy para la NUEVA estructura wrapper:
     .tip-overlay-root > .tip-overlay-dim + .tip-overlay-spotlight + .tip-overlay-popover
   ============================================================ */
.tip-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}
.tip-overlay-root .tip-overlay-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1999;
  pointer-events: auto;  /* clic en dim = skip-all */
  animation: tipDimFade 200ms cubic-bezier(0.4,0,0.2,1);
}
.tip-overlay-root .tip-overlay-spotlight {
  position: fixed;
  border: 2px solid var(--accent, #EA580C);
  border-radius: 8px;
  box-shadow: 0 0 0 8px rgba(234,88,12,0.18);
  pointer-events: none;
  z-index: 2000;
  transition: top 0.3s, left 0.3s, width 0.3s, height 0.3s;
}
.tip-overlay-root .tip-overlay-popover {
  position: fixed;
  width: auto;
  max-width: 320px;
  background: #18181b;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 2001;
  pointer-events: auto;
  display: block;
  animation: tipPopFade 240ms cubic-bezier(0.4,0,0.2,1);
}
.tip-overlay-step-indicator {
  font-size: 11px;
  font-weight: 700;
  color: #71717A;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tip-overlay-title {
  font-size: 16px;
  font-weight: 700;
  color: #F4F4F5;
  margin: 0 0 8px;
}
.tip-overlay-body {
  font-size: 13px;
  color: #b4b7c2;
  line-height: 1.55;
  margin: 0 0 16px;
}
.tip-overlay-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.tip-overlay-cta-skip-all {
  background: transparent;
  border: none;
  color: #71717A;
  font-size: 12px;
  cursor: pointer;
  margin-left: auto;
  padding: 6px 8px;
}
.tip-overlay-cta-skip-all:hover { color: #F4F4F5; }
@media (max-width: 640px) {
  .tip-overlay-root .tip-overlay-popover {
    max-width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tip-overlay-root .tip-overlay-dim,
  .tip-overlay-root .tip-overlay-popover { animation: none; }
  .tip-overlay-root .tip-overlay-spotlight { transition: none; }
}

/* ============================================================
   IATrainingChannelSelector — D30.5.5 / DEC-2026-04-30-02
   Componente "Cómo aprende tu IA" con 3 escenarios (0/1/≥2 canales).
   ============================================================ */
#ia-training-selector { display: none; }
#ia-training-selector.active { display: block; }
body.iats-open { overflow: hidden; }

.iats-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  animation: iatsFadeIn 200ms cubic-bezier(0.4,0,0.2,1);
}
@keyframes iatsFadeIn { from { opacity: 0; } to { opacity: 1; } }

.iats-card {
  width: 100%;
  max-width: 560px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: iatsCardPop 240ms cubic-bezier(0.4,0,0.2,1);
}
@keyframes iatsCardPop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.iats-icon {
  align-self: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.iats-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  text-align: left;
}
.iats-card .iats-icon + .iats-title { text-align: center; }

.iats-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.iats-card .iats-icon ~ .iats-desc { text-align: center; }

.iats-channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.iats-channel-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  transition: border-color 0.15s, background 0.15s;
}
.iats-channel-row:hover { border-color: var(--border-hover); }
.iats-channel-row--disabled { opacity: 0.6; cursor: not-allowed; }

.iats-channel-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  width: 100%;
}
.iats-channel-row--disabled .iats-channel-label { cursor: not-allowed; }

.iats-channel-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.iats-channel-checkmark {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  position: relative;
  transition: all 0.15s;
}
.iats-channel-checkbox:checked + .iats-channel-checkmark {
  background: var(--accent);
  border-color: var(--accent);
}
.iats-channel-checkbox:checked + .iats-channel-checkmark::after {
  content: '';
  position: absolute;
  left: 4px; top: 0px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.iats-channel-checkbox:focus-visible + .iats-channel-checkmark {
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.35);
}

.iats-channel-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-card);
  object-fit: cover;
}
.iats-channel-avatar--placeholder {
  display: grid;
  place-items: center;
  font-size: 16px;
}

.iats-channel-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.iats-channel-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iats-channel-platform {
  font-size: 12px;
  color: var(--text-muted);
}

.iats-warning {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

/* Sub-paso 2b · Hipótesis C — radio cards Modo IA A/B */
.iats-substep {
  margin-top: 18px;
  padding: 16px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}
.iats-substep-title {
  font-size: 14px;
  font-weight: 700;
  color: #F4F4F5;
  margin: 0 0 4px;
}
.iats-substep-desc {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
  margin: 0 0 12px;
}
.iats-mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .iats-mode-cards { grid-template-columns: 1fr; }
}
.iats-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 8px);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
}
.iats-mode-card:hover {
  border-color: rgba(234,88,12,0.35);
  background: rgba(234,88,12,0.04);
}
.iats-mode-card--selected {
  border-color: var(--accent, #EA580C);
  background: rgba(234,88,12,0.08);
}
.iats-mode-radio {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--accent, #EA580C);
}
.iats-mode-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.iats-mode-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #F4F4F5;
}
.iats-mode-card-desc {
  font-size: 12px;
  color: var(--text-muted, #b4b7c2);
  line-height: 1.45;
}

.iats-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.iats-actions--center { justify-content: center; flex-direction: column; align-items: stretch; }
.iats-actions--end { justify-content: flex-end; }

.iats-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s, opacity 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.iats-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.iats-btn:not(:disabled):hover { transform: translateY(-1px); }

.iats-btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--chispa-accent));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.30);
}
.iats-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.iats-btn--ghost:hover { color: var(--text-primary); border-color: var(--border-hover); }

.iats-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: iatsSpin 0.7s linear infinite;
}
@keyframes iatsSpin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .iats-card { padding: 22px 20px; }
  .iats-actions--end { flex-direction: column-reverse; align-items: stretch; }
  .iats-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .iats-backdrop, .iats-card { animation: none; }
  .iats-spinner { animation: none; }
  .iats-btn:not(:disabled):hover { transform: none; }
}

/* ============================================================
   SkipChannelModal — D30.4 / Q-CD-17 / Marketing §11.11
   Modal informativo "consecuencias de saltar conectar canal".
   NO alarmista: border-top ámbar, ❌ en gris medio (NO rojo).
   ============================================================ */
.skip-channel-modal-root {
  display: none;
}
.skip-channel-modal-root.active,
#skip-channel-modal-host:has(.skip-channel-modal-root) .skip-channel-modal-root {
  /* `.active` se aplica al root del modal cuando show() lo monta */
}
.skip-channel-modal-root {
  /* container raíz (cuando active) */
}
body.skip-channel-modal-open { overflow: hidden; }

.skip-channel-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2050;
  animation: scmFadeIn 180ms cubic-bezier(0.4,0,0.2,1);
}
@keyframes scmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.skip-channel-modal-card {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: 85vh;
  overflow-y: auto;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid #F59E0B;  /* ámbar — neutral importante, NO rojo */
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  z-index: 2051;
  animation: scmCardPop 240ms cubic-bezier(0.4,0,0.2,1);
}
@keyframes scmCardPop {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.skip-channel-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.skip-channel-modal-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: #F4F4F5;
  margin: 0;
  letter-spacing: -0.01em;
}
.skip-channel-modal-close {
  background: none;
  border: none;
  color: #71717A;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.skip-channel-modal-close:hover {
  color: #F4F4F5;
  background: rgba(255,255,255,0.06);
}

.skip-channel-modal-body {
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: #b4b7c2;
}

.skip-channel-modal-can-do,
.skip-channel-modal-cant-do {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skip-channel-modal-can-do li,
.skip-channel-modal-cant-do li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
}

.skip-channel-modal-can-do li {
  color: #F4F4F5;  /* texto en blanco normal */
}
.skip-modal-icon-ok {
  flex-shrink: 0;
  display: inline-block;
  width: 18px;
  text-align: center;
  filter: hue-rotate(-15deg) saturate(1.1);
}

.skip-channel-modal-cant-do-intro {
  font-weight: 600;
  color: #F4F4F5;
  margin: 16px 0 8px;
}

.skip-channel-modal-cant-do li {
  color: #b4b7c2;  /* texto secundario, NO rojo alarmista */
}
.skip-modal-icon-ko {
  flex-shrink: 0;
  display: inline-block;
  width: 18px;
  text-align: center;
  /* gris medio — NO rojo (Marketing valida "no alarmista") */
  filter: grayscale(0.7) brightness(0.85);
}

.skip-channel-modal-footer-note {
  font-size: 13px;
  color: #71717A;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1.55;
}

.skip-channel-modal-actions {
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.skip-channel-modal-cta-primary {
  background: linear-gradient(135deg, var(--accent), var(--chispa-accent));
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s;
  box-shadow: 0 4px 14px rgba(234,88,12,0.30);
}
.skip-channel-modal-cta-primary:hover { transform: translateY(-1px); }
.skip-channel-modal-cta-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.skip-channel-modal-cta-secondary:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Mobile ≤640px: card ocupa casi todo el ancho, arriba del viewport,
   botones full-width stack. */
@media (max-width: 640px) {
  .skip-channel-modal-card {
    top: 16px;
    transform: translateX(-50%);
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
  }
  .skip-channel-modal-actions {
    flex-direction: column-reverse;  /* secundario abajo, primario arriba */
    align-items: stretch;
  }
  .skip-channel-modal-cta-primary,
  .skip-channel-modal-cta-secondary {
    width: 100%;
    text-align: center;
  }
  @keyframes scmCardPopMobile {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translateX(-50%); }
  }
  .skip-channel-modal-card { animation: scmCardPopMobile 220ms cubic-bezier(0.4,0,0.2,1); }
}

@media (prefers-reduced-motion: reduce) {
  .skip-channel-modal-overlay,
  .skip-channel-modal-card { animation: none; }
  .skip-channel-modal-cta-primary:hover { transform: none; }
}

/* ============================================================
   D29 · DASHBOARD SIMULADO FREE→CREATOR
   Banner persistente top + badges Creator+ + comparativa banda inferior.
   ============================================================ */

/* Banner persistente arriba del dashboard simulado */
.gd-sim-active-banner {
    background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(234,88,12,0.10));
    border: 1px solid rgba(245,158,11,0.45);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: #fbbf24;
    line-height: 1.45;
}
.gd-sim-banner-emoji { font-size: 20px; flex-shrink: 0; }
.gd-sim-banner-text { flex: 1; }
.gd-sim-banner-text strong { color: var(--text-primary); font-weight: 700; }
.gd-sim-banner-cta {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--chispa-accent));
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    transition: transform 150ms cubic-bezier(0.4,0,0.2,1);
}
.gd-sim-banner-cta:hover { transform: translateY(-1px); }
.gd-sim-banner-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #fbbf24;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
}
.gd-sim-banner-close:hover { color: var(--text-primary); }

@media (max-width: 760px) {
    .gd-sim-active-banner { flex-wrap: wrap; }
    .gd-sim-banner-text { width: 100%; order: 2; }
    .gd-sim-banner-cta { order: 3; }
    .gd-sim-banner-close { order: 1; margin-left: auto; }
}

/* Mini-badges "Creator+" en cards Creator-only durante simulación */
.gd-creator-badge {
    display: inline-block;
    padding: 2px 7px;
    background: #3b82f6;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
}
/* Solo visible en simulación Creator */
body:not([data-gd-sim="creator"]) .gd-creator-badge { display: none; }

/* Badge "Simulación" — convive con Creator+ en el eyebrow */
.gd-sim-badge {
    display: inline-block;
    padding: 2px 7px;
    background: rgba(234, 88, 12, 0.18);
    color: #fb923c;
    border: 1px solid rgba(234, 88, 12, 0.45);
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
/* Solo visible en simulación */
body:not([data-gd-sim]) .gd-sim-badge { display: none; }

/* Comparativa Free vs Creator (banda inferior, solo en simulación) */
.gd-sim-comparison {
    display: none;
    flex-direction: column;
    gap: 18px;
    margin-top: 40px;
    padding: 24px 28px;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 3px solid #3b82f6;
    border-radius: 12px;
}
body[data-gd-sim="creator"] .gd-sim-comparison { display: flex; }

.gd-sim-cmp-row { display: flex; flex-direction: column; gap: 6px; }
.gd-sim-cmp-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.gd-sim-cmp-eyebrow--muted   { color: var(--text-muted); }
.gd-sim-cmp-eyebrow--creator { color: #3b82f6; }
.gd-sim-cmp-bullets {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.gd-sim-cmp-row:nth-child(2) .gd-sim-cmp-bullets { color: var(--text-primary); }

.gd-sim-cmp-cta {
    display: inline-block;
    align-self: flex-start;
    background: linear-gradient(135deg, var(--accent), var(--chispa-accent));
    color: #fff;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    margin-top: 6px;
    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.4);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gd-sim-cmp-cta:hover { transform: translateY(-1px); }

@media (max-width: 760px) {
    .gd-sim-comparison { padding: 18px 20px; }
    .gd-sim-cmp-cta { width: 100%; text-align: center; }
}

/* NoChannelLinkedAlert (D30.14) */
.app-alert-region {
    position: relative;
    z-index: 40;
}
.no-channel-alert,
.no-channel-alert-live {
    max-width: 1120px;
    margin: 0 auto 18px;
}
.no-channel-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: var(--surface-card, var(--bg-card));
    border: 1px solid rgba(234, 88, 12, 0.34);
    border-left: 4px solid #EA580C;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.no-channel-alert-copy {
    min-width: 0;
}
.no-channel-alert-copy h2 {
    font-size: 16px;
    line-height: 1.25;
    margin: 0 0 4px;
    color: var(--text-primary);
}
.no-channel-alert-copy p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}
.no-channel-alert-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.no-channel-alert-actions button {
    white-space: nowrap;
}
.no-channel-alert-never {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    padding: 8px 6px;
}
.no-channel-alert-never:hover { color: var(--text-primary); }
.no-channel-alert-live {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 8px 0 18px;
}

/* Mega Producciones placeholder (G30 P0) */
.mega-prod-placeholder-view {
    min-height: calc(100vh - 88px);
}
.mega-prod-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px 0 54px;
}
.mega-prod-header {
    max-width: 780px;
    margin-bottom: 24px;
}
.mega-prod-kicker {
    display: inline-block;
    color: #EA580C;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.mega-prod-header h1 {
    font-size: 34px;
    line-height: 1.08;
    margin: 0 0 12px;
    letter-spacing: 0;
}
.mega-prod-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.6;
}
.mega-prod-placeholder-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 24px;
    background: var(--surface-card, var(--bg-card));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}
.mega-prod-accepted h2 {
    font-size: 15px;
    margin: 0 0 14px;
    color: var(--text-primary);
}
.mega-prod-accepted ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.mega-prod-accepted li {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-secondary);
    font-size: 13px;
}
.mega-prod-waitlist {
    align-self: end;
}
.mega-prod-waitlist-btn {
    width: 100%;
    min-height: 44px;
}
.mega-prod-status {
    min-height: 20px;
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

@media (max-width: 760px) {
    .no-channel-alert {
        align-items: stretch;
        flex-direction: column;
    }
    .no-channel-alert-actions {
        flex-wrap: wrap;
    }
    .no-channel-alert-actions .btn-primary,
    .no-channel-alert-actions .btn-secondary {
        flex: 1 1 150px;
    }
    .mega-prod-header h1 { font-size: 26px; }
    .mega-prod-placeholder-card {
        grid-template-columns: 1fr;
        padding: 18px;
    }
    .mega-prod-accepted ul { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   G31 — Mis Canales rediseño + modal Publicar + sidebar pulse + tarjetas
   plataforma + estados de cuenta.
   ───────────────────────────────────────────────────────────────────────── */

.channels-header { margin-bottom: 16px; }
.channels-framing {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 720px;
}

.channels-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.channels-tab {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.channels-tab:hover { color: var(--text-primary); }
.channels-tab.is-active {
    color: var(--accent, #EA580C);
    border-bottom-color: var(--accent, #EA580C);
}
.channels-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0 6px;
    height: 18px;
    background: var(--accent, #EA580C);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.channels-pane { display: none; }
.channels-pane.is-active { display: block; }

.ch-empty-hero {
    text-align: center;
    padding: 28px 18px 16px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.06), rgba(234, 88, 12, 0.02));
    border: 1px solid rgba(234, 88, 12, 0.18);
    border-radius: 14px;
}
.ch-empty-illustration {
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    font-size: 56px;
    background: var(--accent, #EA580C);
    border-radius: 50%;
    color: #fff;
}
.ch-empty-hero h2 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ch-empty-sub {
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto 12px;
    line-height: 1.5;
}
.ch-empty-help {
    color: var(--accent-light, #FB923C);
    font-size: 0.9rem;
    text-decoration: none;
}
.ch-empty-help:hover { text-decoration: underline; }

.ch-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .ch-platform-grid { grid-template-columns: 1fr; }
}
.ch-platform-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.ch-platform-card[data-flag="off"] { opacity: 0.85; }
.ch-platform-card[data-flag="off"] .ch-platform-logo { opacity: 0.7; }
.ch-platform-logo {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: var(--bg-input);
    border-radius: 10px;
    font-size: 28px;
}
.ch-platform-title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 700;
}
.ch-platform-sub {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 0;
    flex: 1;
}
.ch-platform-pill {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ch-platform-cta { margin-top: 4px; align-self: flex-start; }
.ch-platform-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.ch-platform-status {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--bg-input);
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ch-platform-status--success { color: #4ade80; border-color: rgba(74, 222, 128, 0.24); }
.ch-platform-status--warning { color: #fbbf24; border-color: rgba(251, 191, 36, 0.28); }
.ch-platform-status--muted { color: var(--text-muted); }
.ch-platform-quota-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.ch-locked-state {
    max-width: 620px;
    margin: 0 auto;
    padding: 34px 18px;
    text-align: center;
}
.ch-locked-platforms {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-bottom: 18px;
    color: var(--text-muted);
    font-size: 30px;
    opacity: 0.5;
}
.ch-plan-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(234, 88, 12, 0.24);
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(234, 88, 12, 0.08);
    color: #fb923c;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ch-locked-state h2 {
    margin: 14px 0 8px;
    color: var(--text-primary);
    font-size: 20px;
}
.ch-locked-state p {
    max-width: 520px;
    margin: 0 auto 20px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}
.ch-locked-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ch-plan-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ch-plan-strip-main,
.ch-plan-strip-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ch-plan-strip-title {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}
.ch-plan-strip-sub {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.ch-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.ch-account-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ch-account-avatar-wrap { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.ch-account-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-input);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 14px;
}
.ch-account-platform-overlay {
    position: absolute;
    width: 14px;
    height: 14px;
    bottom: -2px;
    right: -2px;
    background: var(--bg-card);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
    border: 1px solid var(--border);
}
.ch-account-name { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; }
.ch-account-meta { color: var(--text-muted); font-size: 0.8rem; }
.ch-account-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-left: auto;
}
.ch-account-status--active   { color: #4ade80; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.24); }
.ch-account-status--expired  { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.24); }
.ch-account-status--revoked  { color: #f87171; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.24); }
.ch-account-actions { display: flex; gap: 8px; margin-left: 8px; }
.ch-account-actions button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
}
.ch-account-actions button:hover { color: var(--text-primary); border-color: var(--border-hover); }
.ch-account-helper {
    flex-basis: 100%;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 4px;
}
.ch-account-helper--alert  { color: #fbbf24; }
.ch-account-helper--danger { color: #f87171; }

.ch-metricas-empty {
    background: rgba(148, 163, 184, 0.04);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    /* U-06 (2026-05-05): separar h3/párrafo/botón. Antes: texto pegado al CTA. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.ch-metricas-empty h3,
.ch-metricas-empty p {
    margin: 0;  /* el spacing lo controla `gap` del flex column */
}
.ch-metricas-empty .btn-primary {
    margin-top: 6px;  /* extra breathing room antes del CTA principal */
}
.ch-schedule-list {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
}
.ch-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 0.86rem;
}
.ch-status-banner strong { color: var(--text-primary); }
.ch-status-banner--error { border-left-color: #f87171; }
.ch-schedule-note {
    border-left: 3px solid #4ade80;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(74, 222, 128, 0.08);
    color: #86efac;
    font-size: 0.84rem;
    font-weight: 600;
}
.ch-schedule-agenda {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ch-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding: 0 0 8px;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.ch-schedule-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ch-schedule-row:last-child { border-bottom: none; }
.ch-schedule-time {
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}
.ch-schedule-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ch-schedule-main strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ch-schedule-main span,
.ch-schedule-collab {
    color: var(--text-muted);
    font-size: 0.78rem;
}
.ch-mini-badge {
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 999px;
    padding: 3px 8px;
    background: rgba(245, 158, 11, 0.10);
    color: #fbbf24;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 800;
}
.ch-schedule-status {
    justify-self: end;
    border-radius: 999px;
    padding: 4px 9px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
}
.ch-schedule-status--ok { color: #4ade80; }
.ch-schedule-status--warn { color: #fbbf24; }
.ch-schedule-status--danger { color: #f87171; }
.ch-schedule-status--muted { color: var(--text-muted); }
.ch-schedule-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ch-schedule-view-toggle { display: inline-flex; gap: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); padding: 4px; }
.ch-schedule-view-toggle button { border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); padding: 7px 10px; cursor: pointer; }
.ch-schedule-view-toggle button.is-active { background: var(--accent); color: #fff; }
.ch-schedule-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-schedule-filter { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-secondary); padding: 8px 10px; cursor: pointer; }
.ch-schedule-filter::after { content: " v"; color: var(--text-muted); }
.ch-schedule-create.is-gated, .ch-filter-collab.is-gated { display: none; }
.ch-schedule-content { display: flex; flex-direction: column; gap: 14px; }
.ch-schedule-failed-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(239,68,68,0.24); border-radius: 8px; background: rgba(239,68,68,0.08); color: #fca5a5; padding: 10px 12px; }
.ch-schedule-failed-banner button { border: 0; background: transparent; color: #fecaca; cursor: pointer; font-weight: 800; }
.ch-schedule-next-pub { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(234,88,12,0.28); border-radius: 8px; background: rgba(234,88,12,0.08); padding: 12px; }
.ch-schedule-next-pub span { color: var(--accent-light); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.ch-schedule-next-pub strong { display: block; color: var(--text-primary); margin-top: 3px; }
.ch-schedule-next-pub p { margin: 3px 0 0; color: var(--text-muted); font-size: 0.84rem; }
.ch-schedule-next-actions { display: flex; gap: 8px; }
.ch-schedule-day-group { display: flex; flex-direction: column; gap: 0; }
.ch-schedule-day-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 0 0 8px; color: var(--text-muted); font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; }
.ch-schedule-row { grid-template-columns: 64px 44px minmax(0, 1.4fr) minmax(220px, 1fr) auto; border-left: 3px solid transparent; padding: 12px; }
.ch-schedule-row.is-publishing { border-left-color: var(--accent); background: rgba(234,88,12,0.04); }
.ch-schedule-row.is-failed { border-left-color: #f87171; background: rgba(239,68,68,0.04); }
.ch-schedule-row.is-cancelled { border-left-color: #9ca3af; opacity: 0.82; }
.ch-schedule-row-thumb { width: 40px; height: 56px; border-radius: 7px; background: linear-gradient(160deg, #111827, #0f172a 55%, rgba(234,88,12,0.35)); }
.ch-schedule-row-title { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ch-schedule-row-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.ch-schedule-row-title span { color: var(--text-muted); font-size: 0.8rem; }
.ch-schedule-row-error { color: #fca5a5; font-style: normal; font-size: 0.78rem; }
.ch-schedule-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.ch-schedule-status-badge, .ch-schedule-platform-chip, .ch-schedule-ab-chip, .ch-schedule-collab-chip, .ch-schedule-filter-pill { border-radius: 999px; padding: 4px 8px; background: var(--bg-input); color: var(--text-secondary); font-size: 11px; font-weight: 800; }
.ch-schedule-status--scheduled, .ch-schedule-status--queued { color: #86efac; }
.ch-schedule-status--cancelled { color: #d1d5db; }
.ch-schedule-status--publishing { color: #fbbf24; }
.ch-schedule-status--failed { color: #fca5a5; }
.ch-schedule-ab-chip { background: rgba(245,158,11,0.10); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
.ch-schedule-collab-chip { background: rgba(34,197,94,0.10); color: #86efac; border: 1px solid rgba(34,197,94,0.20); }
.ch-schedule-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ch-schedule-active-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-schedule-filter-pill button { border: 0; background: transparent; color: inherit; cursor: pointer; font-weight: 900; }
.ch-schedule-fullauto-note { border: 1px solid rgba(34,197,94,0.20); border-radius: 8px; background: rgba(34,197,94,0.06); color: #86efac; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ch-schedule-empty { border: 1px solid rgba(234,88,12,0.32); border-radius: 8px; background: rgba(234,88,12,0.08); padding: 32px; text-align: center; }
.ch-schedule-empty-icon { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 12px; display: grid; place-items: center; background: rgba(234,88,12,0.16); color: var(--accent-light); font-weight: 900; }
.ch-schedule-edit-card { max-width: 440px; }
.ch-schedule-edit-card label { display: grid; gap: 6px; margin-top: 10px; color: var(--text-secondary); }

.ch-oauth-explainer { max-width: 480px; }
.ch-oauth-lead { color: var(--text-secondary); margin: 8px 0 18px; line-height: 1.5; }
.ch-oauth-bullets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ch-oauth-bullet {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.45;
}
.ch-oauth-bullet-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 12px;
}
.ch-oauth-bullet--positive .ch-oauth-bullet-icon { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.ch-oauth-bullet--negative .ch-oauth-bullet-icon { background: rgba(148, 163, 184, 0.18); color: var(--text-muted); }
.ch-oauth-reversibility { color: var(--text-muted); font-size: 0.85rem; font-style: italic; margin: 0 0 18px; }
.ch-oauth-actions { display: flex; gap: 10px; justify-content: flex-end; }

.ch-publish-modal-card { max-width: 560px; width: 92vw; }
.ch-publish-sub { color: var(--text-muted); margin: 4px 0 16px; }
.ch-publish-clip-preview {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 0.88rem;
}
.ch-publish-section { margin-bottom: 16px; }
.ch-publish-section-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.ch-publish-section-help { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 10px; }
.ch-publish-targets { display: flex; flex-direction: column; gap: 8px; }
.ch-publish-target-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}
.ch-publish-target-row[data-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.ch-publish-target-row input[type="checkbox"] { margin: 0; }
.ch-publish-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    position: relative;
}
.ch-publish-field--toggle { flex-direction: row; align-items: center; gap: 8px; }
.ch-publish-field-label { font-size: 0.85rem; color: var(--text-muted); }
.ch-publish-counter { position: absolute; right: 0; top: 0; font-size: 0.75rem; color: var(--text-muted); }
.ch-publish-results {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
}
.ch-publish-result-row { display: flex; align-items: center; gap: 8px; }
.ch-publish-result-row[data-status="ok"] { color: #4ade80; }
.ch-publish-result-row[data-status="scheduled"] { color: #fbbf24; }
.ch-publish-result-row[data-status="error"] { color: #f87171; }
.ch-publish-result-row[data-status="pending"] { color: var(--text-muted); }
.ch-publish-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Shared plan-aware atoms (frontend/plans.js) */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--tier-ring, rgba(234, 88, 12, 0.2));
    border-radius: 999px;
    background: var(--tier-dim, rgba(234, 88, 12, 0.14));
    color: var(--tier-accent, var(--accent));
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.tier-badge svg { display: block; flex: 0 0 auto; }
.tier-badge--sm { padding: 4px 8px; font-size: 11px; gap: 6px; }
.tier-badge--md { padding: 5px 10px; font-size: 12px; }
.tier-badge--lg { padding: 7px 12px; font-size: 14px; gap: 9px; }
.tier-badge--pro,
.tier-badge--studio,
.tier-badge--operator {
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.08em;
}
.tier-badge--operator { color: #06B6D4; }

.current-plan-display {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.current-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.current-plan-badge svg {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}
.current-plan-badge span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.current-plan-renewal {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1;
}

.capacity-bar { min-width: 0; }
.capacity-bar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}
.capacity-bar__head strong {
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}
.capacity-bar[data-full="1"] .capacity-bar__head strong { color: var(--warning, #f59e0b); }
.capacity-bar__track {
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bg-input);
}
.capacity-bar__fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--capacity-color, var(--accent));
}
.capacity-bar[data-full="1"] .capacity-bar__fill { background: var(--warning, #f59e0b); }

/* ─────────────────────────────────────────────────────────────────────────
   P2-J13 — Sección "Mi perfil" 4 cards
   ───────────────────────────────────────────────────────────────────────── */

.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 880px;
}
.profile-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.profile-title-row h1 { margin-bottom: 0; }
.profile-card { padding: 22px 22px; }
.profile-card-title {
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.profile-card-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.profile-card-title-row .profile-card-title { margin: 0; }
.profile-card-cta {
    display: inline-block;
    margin-top: 12px;
    color: var(--accent-light, #FB923C);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}
.profile-card-cta:hover { text-decoration: underline; }

.profile-account-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.profile-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-input);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 28px;
    font-weight: 700;
    overflow: hidden;
}
.profile-avatar.has-photo { background: transparent; }
.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-avatar-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.profile-avatar-hint {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    max-width: 180px;
}

/* U-42 · Avatar cropper modal (canvas drag + zoom). */
.user-chip-avatar { overflow: hidden; }
.user-chip-avatar.has-photo { background: transparent; }
.user-chip-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.avatar-cropper-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}
.avatar-cropper-modal[hidden] { display: none; }
.avatar-cropper-panel {
    background: #18181b;
    border: 1px solid rgba(234, 88, 12, 0.35);
    border-radius: 16px;
    padding: 22px;
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    overflow-y: auto;
    color: #f4f4f5;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.avatar-cropper-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.avatar-cropper-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #f4f4f5;
}
.avatar-cropper-close {
    background: none;
    border: none;
    color: #71717a;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
}
.avatar-cropper-close:hover { color: #f4f4f5; background: rgba(255,255,255,0.06); }
.avatar-cropper-body {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
}
@media (max-width: 640px) {
    .avatar-cropper-body { grid-template-columns: 1fr; }
}
.avatar-cropper-stage {
    position: relative;
    width: 320px;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    background: #0b0b0d;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.avatar-cropper-stage:active { cursor: grabbing; }
#avatar-cropper-canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.avatar-cropper-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* círculo central limpio + degradado oscuro alrededor para indicar el crop. */
    background: radial-gradient(circle at center, transparent 0 49%, rgba(0,0,0,0.58) 50% 100%);
    border-radius: 12px;
}
.avatar-cropper-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.avatar-cropper-zoom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #d4d4d8;
    font-size: 0.85rem;
}
.avatar-cropper-zoom input[type="range"] {
    width: 100%;
    accent-color: #ea580c;
}
.avatar-cropper-hint {
    font-size: 0.78rem;
    color: #a1a1aa;
    margin: 0;
}
.avatar-cropper-previews {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}
.avatar-cropper-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    overflow: hidden;
    background: #0b0b0d;
}
.avatar-cropper-preview canvas {
    display: block;
}
.avatar-cropper-error {
    color: #f87171;
    font-size: 0.82rem;
    margin: 0;
}
.avatar-cropper-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 14px;
}
.profile-fields {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.profile-field-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
}
.profile-field-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.profile-field-status {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.profile-field-status[data-status="ok"]    { color: #4ade80; }
.profile-field-status[data-status="error"] { color: #f87171; }

.profile-plan-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.profile-plan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.profile-plan-head p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
}
.profile-plan-bars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.profile-plan-signal {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    color: #4ade80;
    font-size: 0.82rem;
    font-weight: 600;
}
.profile-plan-upgrade {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-input);
    border-radius: 8px;
}
.profile-plan-upgrade strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.88rem;
}
.profile-plan-upgrade span {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.profile-skeleton {
    color: var(--text-muted);
    font-size: 0.86rem;
}
.profile-mfa-modal-card {
    max-width: 520px;
    width: min(92vw, 520px);
}
.profile-mfa-modal-card #profile-mfa-setup-flow {
    display: block;
    margin-top: 14px;
}

.profile-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.profile-section:first-of-type { border-top: none; padding-top: 0; }
.profile-section-title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Header del card de seguridad: título + indicador de progreso ────────── */
.profile-security-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.profile-security-progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #b4b7c2);
    white-space: nowrap;
}
.profile-security-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}
.profile-security-progress[data-state="secured"] {
    background: rgba(74, 222, 128, 0.10);
    border-color: rgba(74, 222, 128, 0.25);
    color: #86efac;
}
.profile-security-progress[data-state="secured"] .profile-security-progress-dot { background: #4ade80; }
.profile-security-progress[data-state="partial"] {
    background: rgba(234, 88, 12, 0.10);
    border-color: rgba(234, 88, 12, 0.25);
    color: #FB923C;
}
.profile-security-progress[data-state="partial"] .profile-security-progress-dot { background: #EA580C; }
.profile-security-progress[data-state="insecure"] {
    background: rgba(234, 88, 12, 0.10);
    border-color: rgba(234, 88, 12, 0.25);
    color: #FB923C;
}
.profile-security-progress[data-state="insecure"] .profile-security-progress-dot { background: #EA580C; }

/* ── Checklist con dos ítems: contraseña + MFA ───────────────────────────── */
.profile-security-checklist {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-security-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color .15s ease, background .15s ease;
}
.profile-security-item[data-state="ok"] {
    background: rgba(74, 222, 128, 0.05);
    border-color: rgba(74, 222, 128, 0.18);
}
.profile-security-item[data-state="warn"] {
    background: rgba(234, 88, 12, 0.04);
    border-color: rgba(234, 88, 12, 0.20);
}
.profile-security-item-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted, #6e7485);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.profile-security-item[data-state="ok"] .profile-security-item-icon {
    background: rgba(74, 222, 128, 0.18);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.35);
}
.profile-security-item[data-state="warn"] .profile-security-item-icon {
    background: rgba(234, 88, 12, 0.18);
    color: #FB923C;
    border-color: rgba(234, 88, 12, 0.35);
}
.profile-security-item-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.profile-security-item-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary, #f4f4f5);
}
.profile-security-item-meta {
    font-size: 0.82rem;
    color: var(--text-secondary, #b4b7c2);
    line-height: 1.35;
}

/* Banner legacy oculto pero estilable por si reaparece. */
.profile-security-summary[hidden] { display: none !important; }
.profile-security-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-secondary, #b4b7c2);
}
.profile-security-icon { font-size: 18px; }

.profile-strength-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.85rem;
}
.profile-strength-meter[data-level="strong"] .profile-strength-label { color: #4ade80; }
.profile-strength-meter[data-level="ok"]     .profile-strength-label { color: #fbbf24; }
.profile-strength-meter[data-level="weak"]   .profile-strength-label { color: #f87171; }
.profile-strength-meter[data-level="unknown"] .profile-strength-label { color: var(--text-muted); }
.profile-strength-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.profile-generated-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.profile-generated-row input {
    font-family: var(--font-mono, monospace);
    flex: 1;
}

.profile-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 700px) {
    .profile-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
.profile-kpi {
    background: rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 10px;
    padding: 12px 14px;
}
.profile-kpi-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.profile-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
}
.profile-kpi-foot {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.profile-channels-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-channels-teaser {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 14px;
}
.profile-channels-teaser p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.profile-channels-teaser-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-muted);
    flex: 0 0 auto;
}
.profile-channels-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    font-size: 0.88rem;
}

@media (max-width: 700px) {
    .profile-card { padding: 16px; }
    .profile-plan-head,
    .profile-plan-upgrade,
    .profile-channels-teaser {
        align-items: stretch;
        flex-direction: column;
    }
    .profile-plan-bars { grid-template-columns: 1fr; }
    .ch-plan-strip {
        align-items: stretch;
        flex-direction: column;
    }
    .ch-schedule-row {
        grid-template-columns: 52px minmax(0, 1fr);
    }
    .ch-mini-badge,
    .ch-schedule-collab,
    .ch-schedule-status {
        justify-self: start;
        grid-column: 2;
    }
    .ch-status-banner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Sidebar pulse */
.nav-attention-pulse { position: relative; }
.nav-attention-pulse::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
    animation: nav-pulse 2s infinite;
}
.nav-attention-pulse.is-revoked::after {
    background: #f87171;
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.6);
}
@keyframes nav-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(251, 191, 36, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(251, 191, 36, 0);   }
}

/* =========================================================
   G30 Mega Producciones — Foundation (Chunk 2 paso 2.1)
   Vista landing /mega-producciones: hero empty state + tabla
   "Mis producciones" + estilos responsive. NO incluye wizard
   ni editor (Chunks 2.2-3). Light theme MP overlays sobre app
   dark — la sección invierte fondo a --mp-bg.
   ========================================================= */

#mega-producciones.view {
  background: var(--mp-bg);
  color: var(--mp-text-pri);
  font-family: var(--font);
  padding: 32px 28px 56px;
  min-height: 100vh;
}

#mega-producciones .mp-page-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
  max-width: 1100px;
}

#mega-producciones .mp-page-header h1 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mp-text-pri);
  margin: 0;
}

#mega-producciones .mp-page-subcopy {
  font-size: 16px;
  line-height: 1.5;
  color: var(--mp-text-sec);
  margin: 0;
  max-width: 720px;
}

#mega-producciones .mp-header-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* CTA primaria reutilizable */
.mp-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--mp-accent);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 24px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, transform 80ms;
  white-space: nowrap;
}
.mp-cta-primary:hover { background: var(--mp-accent-hover); }
.mp-cta-primary:active { transform: translateY(1px); }
.mp-cta-primary:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}
.mp-cta-primary.mp-cta-lg {
  padding: 14px 32px;
  font-size: 16px;
  border-radius: 14px;
}

.mp-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--mp-text-pri);
  border: 1px solid var(--mp-border);
  border-radius: 12px;
  padding: 12px 24px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.mp-cta-secondary:hover { border-color: var(--mp-border-hover); background: var(--mp-warm-100); }
.mp-cta-secondary:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

/* === Hero empty state ====================================== */

.mp-hero-empty {
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: 20px;
  box-shadow: var(--mp-shadow-md);
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  max-width: 720px;
  margin: 24px auto 0;
}

.mp-hero-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--mp-accent), #F59E0B);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.24);
}

.mp-hero-empty h2 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--mp-text-pri);
  margin: 0;
}

.mp-hero-empty-subcopy {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mp-text-sec);
  margin: 0;
  max-width: 520px;
}

/* === Tabla "Mis producciones" ============================== */

.mp-productions-wrapper {
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: 16px;
  box-shadow: var(--mp-shadow-sm);
  overflow: hidden;
  margin-top: 12px;
}

.mp-productions-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font);
  font-size: 14px;
  color: var(--mp-text-pri);
}

.mp-productions-table thead th {
  background: var(--mp-warm-100);
  color: var(--mp-text-mut);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mp-border);
}

.mp-productions-table tbody tr {
  transition: background 120ms;
  border-bottom: 1px solid var(--mp-warm-200);
}
.mp-productions-table tbody tr:last-child { border-bottom: none; }
.mp-productions-table tbody tr:hover { background: var(--mp-warm-50); }

.mp-productions-table td {
  padding: 16px 18px;
  vertical-align: middle;
  color: var(--mp-text-pri);
}

.mp-productions-table .mp-prod-name {
  font-weight: 600;
  color: var(--mp-text-pri);
}

.mp-productions-table .mp-prod-meta {
  color: var(--mp-text-mut);
  font-size: 13px;
}

/* Pills de estado */
.mp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.mp-status-pill.is-draft     { background: var(--mp-warm-100); color: var(--mp-warm-700); }
.mp-status-pill.is-uploading { background: var(--mp-info-bg); color: var(--mp-info-text); }
.mp-status-pill.is-processing { background: var(--mp-warn-bg); color: var(--mp-warn-text); }
.mp-status-pill.is-ready     { background: var(--mp-ok-bg); color: var(--mp-ok-text); }
.mp-status-pill.is-error     { background: var(--mp-err-bg); color: var(--mp-err-text); }
.mp-status-pill.is-exported  { background: var(--mp-accent-soft); color: var(--mp-accent-text); }

/* Acciones (dropdown ⋯) */
.mp-row-actions {
  position: relative;
  text-align: right;
}
.mp-row-actions-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--mp-warm-600);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background 120ms, border-color 120ms;
}
.mp-row-actions-btn:hover { background: var(--mp-warm-100); border-color: var(--mp-border); }
.mp-row-actions-btn:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

.mp-actions-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 8px;
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: 12px;
  box-shadow: var(--mp-shadow-lg);
  min-width: 200px;
  z-index: 50;
  overflow: hidden;
  display: none;
}
.mp-actions-menu[data-open="true"] { display: block; }
.mp-actions-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--mp-text-pri);
  cursor: pointer;
}
.mp-actions-menu button:hover { background: var(--mp-warm-100); }
.mp-actions-menu button.is-danger { color: var(--mp-err-text); }
.mp-actions-menu button.is-danger:hover { background: var(--mp-err-bg); }

/* Skeleton loader (cuando datos aún no cargados) */
.mp-skeleton-row td {
  padding: 16px 18px;
}
.mp-skeleton-bar {
  display: inline-block;
  height: 12px;
  background: linear-gradient(90deg, var(--mp-warm-100), var(--mp-warm-200), var(--mp-warm-100));
  background-size: 200% 100%;
  border-radius: 6px;
  animation: mp-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes mp-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Mobile responsive (<768px) ===========================
   La tabla colapsa a tarjetas verticales con labels inline. */

@media (max-width: 767px) {
  #mega-producciones.view {
    padding: 24px 16px 48px;
  }
  #mega-producciones .mp-page-header h1 { font-size: 22px; }
  #mega-producciones .mp-page-subcopy { font-size: 14px; }

  .mp-hero-empty {
    padding: 36px 20px;
    border-radius: 16px;
  }
  .mp-hero-empty h2 { font-size: 20px; }
  .mp-hero-empty-subcopy { font-size: 14px; }

  /* Tabla → cards verticales */
  .mp-productions-wrapper {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
  }
  .mp-productions-table thead { display: none; }
  .mp-productions-table tbody tr {
    display: block;
    background: var(--mp-card);
    border: 1px solid var(--mp-border);
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 12px 14px;
    box-shadow: var(--mp-shadow-sm);
  }
  .mp-productions-table tbody tr:hover { background: var(--mp-card); }
  .mp-productions-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border: none;
  }
  .mp-productions-table td::before {
    content: attr(data-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mp-text-mut);
    font-weight: 600;
    flex-shrink: 0;
  }
  .mp-row-actions { text-align: right; }
  .mp-actions-menu { right: 0; }
}

/* =========================================================
   G30 Mega Producciones — WIZARD OVERLAY (Chunk 2 paso 2.2)
   Overlay full-screen + stepper + 4 pasos (proyecto/vídeo/voces/análisis).
   Visual oracle: docs/agent_collab/claude_design/mega_prod/*.jsx
   ========================================================= */

.mp-sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.mp-wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--mp-bg);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--mp-text-pri);
  overflow: hidden;
}

.mp-wizard-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

/* ── Header ───────────────────────────────────────────── */
.mp-wizard-header {
  height: 64px;
  padding: 0 24px;
  background: var(--mp-card);
  border-bottom: 1px solid var(--mp-border);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.mp-wizard-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mp-wizard-brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--mp-accent), #F59E0B);
  display: grid; place-items: center;
  font-size: 14px; line-height: 1;
}
.mp-wizard-brand-name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--mp-text-pri);
}
.mp-wizard-breadcrumb {
  flex: 1;
  font-size: 14px;
  color: var(--mp-text-sec);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mp-wizard-bc-base { color: var(--mp-text-mut); }
.mp-wizard-bc-sep { color: var(--mp-warm-400); }
.mp-wizard-bc-current {
  color: var(--mp-text-pri);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.mp-wizard-close-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--mp-warm-500);
  display: grid; place-items: center;
  transition: background 150ms, color 150ms;
}
.mp-wizard-close-btn:hover {
  background: var(--mp-warm-100);
  color: var(--mp-warm-700);
}
.mp-wizard-close-btn:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}
.mp-wizard-close-btn[disabled] {
  cursor: not-allowed;
  color: var(--mp-warm-300);
}

/* ── Stepper ──────────────────────────────────────────── */
.mp-wizard-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 32px;
  background: var(--mp-card);
  border-bottom: 1px solid var(--mp-border);
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 0;
}
.mp-wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 64px;
  flex-shrink: 0;
}
.mp-wizard-step-circle {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid transparent;
  background: var(--mp-warm-100);
  color: var(--mp-warm-400);
  transition: background 240ms cubic-bezier(0.4, 0, 0.2, 1),
              color 240ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mp-wizard-step.mp-step-done .mp-wizard-step-circle {
  background: var(--mp-accent);
  color: #fff;
  border-color: transparent;
}
.mp-wizard-step.mp-step-active .mp-wizard-step-circle {
  background: var(--mp-card);
  color: var(--mp-accent);
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.10);
}
.mp-wizard-step.mp-step-pending .mp-wizard-step-circle {
  background: var(--mp-warm-100);
  color: var(--mp-warm-400);
}
.mp-wizard-step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--mp-warm-500);
  white-space: nowrap;
  transition: color 240ms cubic-bezier(0.4, 0, 0.2, 1),
              font-weight 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mp-wizard-step.mp-step-active .mp-wizard-step-label {
  font-weight: 600;
  color: var(--mp-text-pri);
}
.mp-wizard-step.mp-step-done .mp-wizard-step-label {
  color: var(--mp-accent);
}
.mp-wizard-step-connector {
  flex: 0 0 64px;
  height: 2px;
  margin-top: 19px;
  background: var(--mp-warm-300);
  border-radius: 1px;
  transition: background 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mp-wizard-step-connector.is-done {
  background: var(--mp-accent);
}

/* ── Body ─────────────────────────────────────────────── */
.mp-wizard-body {
  flex: 1;
  overflow: auto;
  padding: 0;
}
.mp-wizard-body-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 32px 48px;
}
.mp-wizard-body-inner.is-wide {
  max-width: 1024px;
}

/* ── Footer ───────────────────────────────────────────── */
.mp-wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  background: var(--mp-card);
  border-top: 1px solid var(--mp-warm-200);
  flex-shrink: 0;
  gap: 16px;
}

/* ── Botones MP ───────────────────────────────────────── */
.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 150ms, color 150ms, border-color 150ms, transform 80ms;
  white-space: nowrap;
  line-height: 1;
}
.mp-btn:active:not([disabled]) { transform: translateY(1px); }
.mp-btn[disabled],
.mp-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mp-btn:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}
.mp-btn-primary {
  background: var(--mp-accent);
  color: #fff;
}
.mp-btn-primary:hover:not([disabled]) { background: var(--mp-accent-hover); }
.mp-btn-secondary {
  background: transparent;
  color: var(--mp-text-pri);
  border-color: var(--mp-border);
}
.mp-btn-secondary:hover:not([disabled]) {
  background: var(--mp-warm-100);
  border-color: var(--mp-border-hover);
}
.mp-btn-ghost {
  background: transparent;
  color: var(--mp-text-sec);
  border-color: transparent;
}
.mp-btn-ghost:hover:not([disabled]) {
  background: var(--mp-warm-100);
  color: var(--mp-text-pri);
}
.mp-btn-lg {
  padding: 14px 32px;
  font-size: 16px;
}
.mp-btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}

/* ── Inputs / labels MP ───────────────────────────────── */
.mp-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--mp-warm-700);
  display: block;
  margin-bottom: 8px;
}
/* Override global input[type="text"] via id+class selector specificity. */
.mp-wizard-overlay input.mp-input,
.mp-wizard-overlay input[type="text"].mp-input,
.mp-wizard-overlay input[type="url"].mp-input,
input.mp-input {
  width: 100%;
  height: 48px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--mp-border);
  background: var(--mp-card);
  color: var(--mp-text-pri);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  box-sizing: border-box;
}
.mp-wizard-overlay input.mp-input.is-large,
input.mp-input.is-large {
  height: 56px;
  font-size: 18px;
  padding: 0 16px;
}
.mp-wizard-overlay input.mp-input:focus,
input.mp-input:focus {
  border-color: var(--mp-accent);
  border-width: 2px;
  padding: 0 13px;
  background: var(--mp-card);
  color: var(--mp-text-pri);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.20);
}
.mp-wizard-overlay input.mp-input.is-large:focus,
input.mp-input.is-large:focus { padding: 0 15px; }
.mp-wizard-overlay input.mp-input::placeholder,
input.mp-input::placeholder {
  color: var(--mp-text-mut);
  opacity: 1;
}
.mp-input-helper {
  font-size: 12px;
  color: var(--mp-text-mut);
  margin-top: 6px;
}
.mp-input-error {
  font-size: 12px;
  color: var(--mp-err-text);
  margin-top: 6px;
}

/* ── Chips ────────────────────────────────────────────── */
.mp-chip-row {
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--mp-border);
  border-radius: 12px;
  background: var(--mp-card);
}
.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--mp-accent-soft);
  color: var(--mp-accent-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.mp-chip-gray {
  background: var(--mp-warm-100);
  color: var(--mp-warm-700);
}
.mp-chip-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: grid; place-items: center;
  color: inherit;
  opacity: 0.7;
}
.mp-chip-remove:hover { opacity: 1; }
.mp-chip-remove:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 1px;
  border-radius: 999px;
}
.mp-wizard-overlay input.mp-chip-input,
.mp-wizard-overlay input[type="text"].mp-chip-input,
input.mp-chip-input {
  flex: 1;
  min-width: 120px;
  padding: 6px 8px;
  font-size: 14px;
  color: var(--mp-text-pri);
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
.mp-wizard-overlay input.mp-chip-input:focus,
input.mp-chip-input:focus {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px 8px;
}
.mp-wizard-overlay input.mp-chip-input::placeholder,
input.mp-chip-input::placeholder { color: var(--mp-text-mut); opacity: 1; }

/* ── Cards ────────────────────────────────────────────── */
.mp-card {
  padding: 24px;
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: 16px;
  box-shadow: var(--mp-shadow-sm);
}
.mp-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
}
.mp-card-icon {
  color: var(--mp-accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.mp-card-helper {
  font-size: 12px;
  color: var(--mp-text-mut);
  margin-top: 12px;
}

/* ── Drop target ──────────────────────────────────────── */
.mp-drop-target {
  height: 200px;
  border: 2px dashed var(--mp-warm-300);
  border-radius: 16px;
  background: var(--mp-warm-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 16px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.mp-drop-target:hover,
.mp-drop-target.is-dragover {
  border: 2px solid var(--mp-accent);
  background: rgba(254, 215, 170, 0.20);
}
.mp-drop-target:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}
.mp-drop-target-icon { color: var(--mp-warm-400); }
.mp-drop-target-text {
  font-size: 14px;
  color: var(--mp-text-sec);
  max-width: 260px;
  line-height: 1.5;
}
.mp-drop-target-text .mp-link {
  color: var(--mp-accent);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Step 1 — Proyecto ────────────────────────────────── */
.mp-step1-h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--mp-text-pri);
}
.mp-step1-section { margin-top: 48px; }
.mp-team-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--mp-warm-100);
  margin-bottom: 12px;
}
.mp-avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent-hover));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.mp-team-row-name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--mp-text-pri);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.mp-team-row-name .mp-team-row-meta { color: var(--mp-text-mut); font-weight: 400; }
.mp-team-helper {
  font-size: 12px;
  color: var(--mp-text-mut);
  line-height: 1.5;
  padding: 12px 0 0;
}

/* ── Step 2 — Vídeo ───────────────────────────────────── */
.mp-step-h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--mp-text-pri);
}
.mp-step-subcopy {
  font-size: 16px;
  color: var(--mp-text-sec);
  margin-bottom: 32px;
  line-height: 1.5;
}
.mp-video-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mp-video-uploaded {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  padding: 24px;
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: 16px;
  box-shadow: var(--mp-shadow-md);
}
.mp-video-thumb {
  width: 320px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #292524, #57534E);
  position: relative;
  display: grid;
  place-items: center;
}
.mp-video-thumb video,
.mp-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-video-thumb-play {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  display: grid; place-items: center;
  position: absolute;
  color: var(--mp-accent);
  pointer-events: none;
}
.mp-video-thumb-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
}
.mp-video-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-video-info-tag {
  font-size: 11px;
  color: var(--mp-text-mut);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mp-video-info-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--mp-text-pri);
  line-height: 1.3;
  word-break: break-word;
}
.mp-video-info-meta {
  font-size: 14px;
  color: var(--mp-text-sec);
}
.mp-video-info-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.mp-warn-banner {
  margin-top: 24px;
  padding: 20px;
  background: var(--mp-warn-bg);
  border-radius: 12px;
  border: 1px solid rgba(146, 64, 14, 0.3);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.mp-warn-banner-body { flex: 1; }
.mp-warn-banner-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mp-warn-text);
  margin-bottom: 4px;
}
.mp-warn-banner-text {
  font-size: 14px;
  color: var(--mp-warn-text);
  line-height: 1.5;
  margin-bottom: 12px;
}
.mp-warn-banner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Step 3 — Voces ───────────────────────────────────── */
.mp-step3-h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--mp-text-pri);
  text-align: center;
}
.mp-step3-sub {
  font-size: 18px;
  color: var(--mp-text-sec);
  margin: 12px auto 0;
  line-height: 1.6;
  max-width: 600px;
  text-align: center;
}
.mp-voices-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 40px;
  text-align: left;
}
.mp-voice-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: 16px;
  animation: mp-slide-down 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mp-voice-row.is-filled {
  box-shadow: var(--mp-shadow-sm);
}
@keyframes mp-slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mp-voice-target {
  width: 64px; height: 64px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--mp-warm-100);
  border: 2px dashed var(--mp-warm-300);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  transition: background 150ms, border-color 150ms;
}
.mp-voice-target:hover,
.mp-voice-target.is-dragover {
  border: 2px solid var(--mp-accent);
  background: rgba(254, 215, 170, 0.20);
}
.mp-voice-target.is-filled {
  background: var(--mp-card);
  border: 2px solid var(--mp-accent);
}
.mp-voice-target:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}
.mp-voice-target-icon { color: var(--mp-warm-400); }
.mp-voice-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 32px;
}
.mp-voice-wave-bar {
  width: 3px;
  background: var(--mp-accent);
  border-radius: 2px;
}
.mp-voice-duration {
  position: absolute;
  bottom: -22px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--mp-text-mut);
  font-weight: 600;
  white-space: nowrap;
}
.mp-voice-input {
  flex: 1;
  min-width: 0;
}
.mp-voice-remove {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: var(--mp-warm-100);
  color: var(--mp-warm-500);
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 150ms, color 150ms;
}
.mp-voice-remove:hover {
  background: var(--mp-err-bg);
  color: var(--mp-err-text);
}
.mp-voice-remove:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}
.mp-voices-helper {
  margin-top: 24px;
  font-size: 13px;
  color: var(--mp-text-mut);
  line-height: 1.6;
  text-align: center;
}

/* ── Step 4 — Análisis ────────────────────────────────── */
.mp-step4-h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--mp-text-pri);
}
.mp-step4-sub {
  font-size: 16px;
  color: var(--mp-text-sec);
  margin: 12px 0 32px;
}
.mp-progress-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.mp-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--mp-warm-200);
  border-radius: 4px;
  overflow: hidden;
}
.mp-progress-fill {
  height: 100%;
  background: var(--mp-accent);
  border-radius: 4px;
  transition: width 480ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mp-progress-pct {
  font-size: 28px;
  font-weight: 700;
  color: var(--mp-text-pri);
  font-variant-numeric: tabular-nums;
  min-width: 64px;
  text-align: right;
}
.mp-stages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.mp-stage {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mp-stage-bullet {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--mp-warm-100);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.mp-stage.is-done .mp-stage-bullet {
  background: var(--mp-ok-bg);
  color: var(--mp-ok-text);
}
.mp-stage.is-active .mp-stage-bullet {
  background: var(--mp-accent-dim);
}
.mp-stage.is-active .mp-stage-bullet::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--mp-accent);
  box-shadow: 0 0 0 4px var(--mp-accent-dim);
}
.mp-stage.is-pending .mp-stage-bullet::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--mp-warm-400);
}
.mp-stage-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--mp-text-pri);
}
.mp-stage.is-active .mp-stage-label { font-weight: 600; }
.mp-stage.is-pending .mp-stage-label { color: var(--mp-text-mut); }
.mp-stage-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--mp-accent);
  font-weight: 600;
}
.mp-stream-card {
  background: var(--mp-warm-100);
  border-radius: 16px;
  padding: 24px;
  min-height: 220px;
  font-size: 16px;
  color: var(--mp-warm-700);
  line-height: 1.6;
  position: relative;
  overflow: hidden;
}
.mp-stream-card-tag {
  position: absolute;
  top: 16px; right: 20px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--mp-warm-500);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mp-stream-segment { margin-bottom: 12px; }
.mp-stream-speaker {
  color: var(--mp-accent);
  font-weight: 600;
  margin-right: 4px;
}
.mp-stream-placeholder {
  color: var(--mp-text-mut);
  font-style: italic;
}
.mp-eta {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--mp-text-mut);
}
.mp-eta strong { color: var(--mp-text-sec); }
.mp-error-card {
  margin-top: 24px;
  padding: 20px;
  background: var(--mp-err-bg);
  border: 1px solid rgba(153, 27, 27, 0.25);
  border-radius: 12px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.mp-error-card-body { flex: 1; }
.mp-error-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mp-err-text);
  margin-bottom: 4px;
}
.mp-error-card-text {
  font-size: 14px;
  color: var(--mp-err-text);
  line-height: 1.5;
  margin-bottom: 12px;
}
.mp-error-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Confirm modal (cancelar wizard sin guardar) ─────── */
.mp-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(28, 25, 23, 0.5);
  display: grid;
  place-items: center;
  padding: 24px;
}
.mp-confirm-card {
  background: var(--mp-card);
  border-radius: 16px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--mp-shadow-lg);
}
.mp-confirm-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--mp-text-pri);
  margin: 0 0 8px;
}
.mp-confirm-card p {
  font-size: 14px;
  color: var(--mp-text-sec);
  line-height: 1.5;
  margin: 0 0 20px;
}
.mp-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Mobile responsive (<768px) ───────────────────────── */
@media (max-width: 767px) {
  .mp-wizard-header {
    height: 56px;
    padding: 0 16px;
    gap: 12px;
  }
  .mp-wizard-breadcrumb { font-size: 13px; }
  .mp-wizard-bc-base { display: none; }
  .mp-wizard-bc-sep { display: none; }
  .mp-wizard-stepper {
    padding: 16px 8px;
    gap: 0;
    overflow-x: auto;
  }
  .mp-wizard-step {
    min-width: 48px;
  }
  .mp-wizard-step-circle {
    width: 32px; height: 32px;
    font-size: 13px;
  }
  .mp-wizard-step-label {
    font-size: 10px;
  }
  .mp-wizard-step-connector {
    flex: 0 0 24px;
    margin-top: 15px;
  }
  .mp-wizard-body-inner {
    padding: 32px 16px 24px;
  }
  .mp-wizard-footer {
    padding: 12px 16px;
  }
  .mp-step1-h1,
  .mp-step3-h1,
  .mp-step4-h1 { font-size: 28px; }
  .mp-step-h2 { font-size: 22px; }
  .mp-video-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mp-video-uploaded {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .mp-video-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  .mp-btn-lg {
    padding: 12px 20px;
    font-size: 14px;
  }
  .mp-progress-pct { font-size: 22px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   G30 Wizard · Paso 6 (Exportar) + Paso 5 mobile redirect
   Visual oracle: docs/agent_collab/claude_design/mega_prod/mp-step6-exportar.jsx
   + mp-mobile-tablet.jsx (MPMobileStep5Redirect).
   ────────────────────────────────────────────────────────────────────────── */

.mp-step6-root {
  max-width: 720px;
  margin: 0 auto;
}
.mp-step-h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mp-text-pri);
  margin: 0 0 8px;
}
.mp-step-sub {
  font-size: 16px;
  color: var(--mp-text-sec);
  margin: 0 0 32px;
  line-height: 1.5;
}

/* ── Resumen card ── */
.mp-export-summary-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: 16px;
  box-shadow: var(--mp-shadow-sm);
  margin-bottom: 32px;
}
.mp-export-thumbnail {
  width: 240px;
  height: 135px;
  border-radius: 12px;
  background: linear-gradient(135deg, #292524, #57534E);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mp-export-thumbnail-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(234, 88, 12, 0.30), transparent 60%);
  pointer-events: none;
}
.mp-export-thumbnail-play {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  display: grid;
  place-items: center;
  color: var(--mp-accent);
  z-index: 1;
}
.mp-export-summary-body { min-width: 0; }
.mp-export-summary-eyebrow {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  font-size: 11px;
  color: var(--mp-text-mut);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mp-export-summary-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--mp-text-pri);
  margin-bottom: 6px;
  word-break: break-word;
}
.mp-export-summary-info { margin-bottom: 6px; }
.mp-export-summary-meta {
  font-size: 15px;
  font-weight: 500;
  color: var(--mp-warm-700);
}
.mp-export-summary-langs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.mp-lang-chip {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mp-warm-100);
  color: var(--mp-warm-700);
}
.mp-export-summary-langs-meta {
  font-size: 12px;
  color: var(--mp-text-mut);
}
.mp-export-summary-team {
  font-size: 13px;
  color: var(--mp-warm-700);
  margin-top: 4px;
}

/* ── Config card ── */
.mp-export-config-card {
  padding: 24px;
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: 16px;
  box-shadow: var(--mp-shadow-sm);
  margin-bottom: 24px;
}
.mp-radio-group { margin-bottom: 24px; }
.mp-radio-group:last-child { margin-bottom: 0; }
.mp-radio-group .mp-label {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--mp-text-pri);
}
.mp-radio-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.mp-radio-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mp-radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--mp-border);
  background: var(--mp-card);
  cursor: pointer;
  min-height: 44px; /* WCAG tap target */
  transition: border-color 160ms ease, background 160ms ease;
}
.mp-radio-option:hover { border-color: var(--mp-border-hover); }
.mp-radio-option.is-selected {
  border-color: var(--mp-accent);
  background: rgba(254, 215, 170, 0.25);
}
.mp-radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mp-radio-option:focus-within {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}
.mp-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #B8B5B1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mp-radio-option.is-selected .mp-radio-dot {
  border-color: var(--mp-accent);
}
.mp-radio-option.is-selected .mp-radio-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mp-accent);
}
.mp-radio-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--mp-text-pri);
}
.mp-export-format-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--mp-text-pri);
  margin-top: 4px;
}

/* ── Render progress (paso 6) ── */
.mp-render-progress {
  margin-top: 16px;
  padding: 24px;
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: 16px;
}

/* ── Success card ── */
.mp-success-card {
  margin-top: 16px;
  padding: 20px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.30);
  border-radius: 12px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.mp-success-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.18);
  color: var(--mp-ok-text);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mp-success-card-body { flex: 1; }
.mp-success-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mp-ok-text);
  margin-bottom: 4px;
}
.mp-success-card-text {
  font-size: 14px;
  color: var(--mp-text-sec);
  line-height: 1.5;
}

/* ── Step 5 desktop placeholder (Chunk 3 pendiente) ── */
.mp-step5-placeholder-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* ── Step 5 mobile redirect ── */
.mp-mobile-redirect-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  max-width: 320px;
  margin: 0 auto;
}
.mp-mobile-redirect-icon {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: var(--mp-accent-dim);
  color: var(--mp-accent);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}
.mp-mobile-redirect-h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mp-text-pri);
  margin: 0 0 12px;
}
.mp-mobile-redirect-sub {
  font-size: 15px;
  color: var(--mp-text-sec);
  line-height: 1.5;
  margin: 0 0 24px;
}
.mp-mobile-redirect-cta {
  width: 100%;
  min-height: 48px; /* WCAG tap target */
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
}
.mp-mobile-redirect-secondary {
  margin-top: 12px;
  width: 100%;
  min-height: 44px;
  font-size: 13px;
}

/* ── Responsive paso 6 (<768px) ── */
@media (max-width: 767px) {
  .mp-export-summary-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  .mp-export-thumbnail {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  .mp-export-config-card {
    padding: 16px;
  }
  .mp-radio-row {
    flex-direction: column;
    gap: 8px;
  }
  .mp-radio-option {
    width: 100%;
  }
  .mp-step6-root {
    padding: 0 4px;
  }
  .mp-step-h2 { font-size: 22px; }
  .mp-step-sub { font-size: 14px; margin-bottom: 20px; }
  .mp-mobile-redirect-card {
    padding: 36px 20px;
  }
}

/* ============================================================
   G30 Wizard · Paso 5 (Editor — Chunk 3.1)
   Visual oracle: docs/agent_collab/claude_design/mega_prod/mp-step5-editor.jsx
   Estados implementados: idle · clip-deselected · clip-hover.
   Diferidos: subtitle-edit (3.2) · multi-cursor (3.3).
   ============================================================ */

/* Shell dark mode full-width — sustituye el body inner del wizard cuando
   estamos en paso 5 ≥768px. */
.mp-editor-shell {
  width: 100%;
  min-height: 100%;
  background: var(--mp-ed-bg);
  color: var(--mp-ed-text-pri);
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}
.mp-editor-shell[data-loading="1"] .mp-editor-loading {
  padding: 48px 24px;
  text-align: center;
  color: var(--mp-ed-text-mut);
  font-size: 14px;
}

/* Cabecera editor — h:64 fila densa con brand + breadcrumb + pill +
   colaboradores + atajos + CTAs. */
.mp-editor-header {
  height: 64px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--mp-ed-border);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.mp-editor-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
}
.mp-editor-brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--mp-accent), #F59E0B);
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #fff;
}
.mp-editor-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--mp-ed-text-sec);
}
.mp-editor-bc-base { color: var(--mp-ed-text-mut); }
.mp-editor-bc-sep { color: var(--mp-ed-text-mut); }
.mp-editor-bc-current { color: var(--mp-ed-text-pri); font-weight: 500; }
.mp-editor-pill {
  padding: 4px 12px;
  height: 28px;
  border-radius: 999px;
  background: var(--mp-accent-dim);
  color: var(--mp-accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.mp-editor-edited-meta {
  font-size: 12px;
  color: var(--mp-ed-text-mut);
  flex-shrink: 0;
}
.mp-editor-collab-row {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.mp-editor-collab-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: rgba(234, 88, 12, 0.10);
  border: 1px solid var(--mp-accent-dim);
  font-size: 13px;
  font-weight: 500;
  color: var(--mp-ed-text-pri);
}
.mp-editor-avatar {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent-hover));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.mp-editor-shortcut-help {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--mp-ed-border);
  color: var(--mp-ed-text-sec);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.mp-editor-shortcut-help:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--mp-ed-text-pri);
}
.mp-editor-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.mp-editor-btn-ghost {
  background: transparent;
  color: var(--mp-ed-text-sec);
  border-color: var(--mp-ed-border);
}
.mp-editor-btn-ghost:hover {
  color: var(--mp-ed-text-pri);
  background: rgba(255, 255, 255, 0.04);
}
.mp-editor-btn-primary {
  background: var(--mp-accent);
  color: #fff;
  font-weight: 600;
  padding: 8px 16px;
}
.mp-editor-btn-primary:hover {
  background: var(--mp-accent-hover);
}
.mp-editor-btn-primary:focus-visible,
.mp-editor-btn-ghost:focus-visible,
.mp-editor-shortcut-help:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

/* Grid 60/40 (desktop ≥1280px). */
.mp-editor-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 24px;
  padding: 24px;
  overflow: hidden;
  min-height: 540px;
}
.mp-editor-col-a {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.mp-editor-col-b {
  background: var(--mp-ed-card);
  border: 1px solid var(--mp-ed-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Preview area. */
.mp-preview {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1d, #292524);
  position: relative;
  min-height: 360px;
}
.mp-preview-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(234, 88, 12, 0.18), transparent 60%);
}
.mp-preview-bubble {
  position: absolute;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.08);
}
.mp-preview-bubble-l {
  top: 60px; left: 80px; width: 180px; height: 180px;
  background: linear-gradient(135deg, var(--mp-warm-400), var(--mp-warm-300));
}
.mp-preview-bubble-r {
  top: 90px; right: 100px; width: 160px; height: 160px;
  background: linear-gradient(135deg, var(--mp-warm-300), var(--mp-warm-200));
}

/* Subtitle overlay con LANG_BADGE. */
.mp-preview-subtitle {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.mp-preview-subtitle-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* LANG_BADGE — reutilizable en preview, panel y tooltip. */
.mp-lang-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(234, 88, 12, 0.85);
  color: #fff;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.mp-lang-badge-card {
  background: rgba(255, 255, 255, 0.06);
  color: var(--mp-ed-text-sec);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.mp-lang-badge-tooltip {
  background: var(--mp-warm-100, #141416);
  color: var(--mp-warm-700, #b4b7c2);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
}

/* Player controls bar. */
.mp-player-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  z-index: 3;
}
.mp-player-play-btn {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.mp-player-scrubber {
  flex: 1;
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.mp-player-progress {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 34%;
  background: var(--mp-accent);
  border-radius: 2px;
}
.mp-player-marker {
  position: absolute;
  top: -6px;
  width: 2px;
  height: 16px;
  border-radius: 1px;
}
.mp-player-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: #fff;
}
.mp-player-cc-btn {
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--mp-accent-dim);
  color: var(--mp-accent);
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Timeline card. */
.mp-timeline-card {
  background: var(--mp-ed-card);
  border: 1px solid var(--mp-ed-border);
  border-radius: 12px;
  padding: 12px;
  height: 140px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.mp-timeline-heading {
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--mp-ed-text-mut);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.mp-timeline-blocks {
  display: flex;
  gap: 4px;
  flex: 1;
  position: relative;
  overflow-x: auto;
}
.mp-timeline-block {
  flex: 1;
  min-width: 32px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 2px solid var(--mp-clip-1);
  background: rgba(234, 88, 12, 0.18);
  cursor: pointer;
  padding: 0;
  transition: opacity 200ms ease-out, transform 280ms ease-out, box-shadow 200ms ease-out, border-width 200ms ease-out;
}
.mp-timeline-block.is-deselected {
  opacity: 0.4;
  border-width: 0;
  transform: translateX(-2px);
}
.mp-timeline-block.is-hover {
  box-shadow: 0 0 0 3px var(--mp-accent);
  transform: scale(1.02);
  z-index: 2;
}
.mp-timeline-block:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}
.mp-timeline-block-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.mp-timeline-block-label-top {
  position: absolute;
  top: 8px;
  left: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.mp-timeline-block-label-bot {
  position: absolute;
  bottom: 8px;
  left: 10px;
  color: #fff;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Tooltip flotante (anclado a body, posicionado JS). */
.mp-timeline-tooltip {
  position: fixed;
  width: 240px;
  padding: 12px;
  background: var(--mp-card);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.10), 0 4px 8px rgba(28, 25, 23, 0.04);
  z-index: 2147483646;
  display: none;
  pointer-events: none;
}
.mp-timeline-tooltip-thumb {
  width: 100%;
  height: 80px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.mp-timeline-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-timeline-tooltip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text-pri);
}
.mp-timeline-tooltip-why {
  font-size: 12px;
  color: var(--mp-text-sec);
  margin-top: 4px;
  line-height: 1.4;
}

/* Empty states (sin clips). */
.mp-editor-empty-timeline,
.mp-editor-empty-cards {
  color: var(--mp-ed-text-mut);
  font-size: 14px;
  padding: 24px;
  text-align: center;
}

/* Panel B — clips. */
.mp-editor-col-b-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--mp-ed-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--mp-ed-card);
  flex-shrink: 0;
  z-index: 1;
}
.mp-editor-col-b-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mp-ed-text-pri);
}
.mp-editor-col-b-counter {
  font-size: 13px;
  color: var(--mp-ed-text-mut);
}
.mp-editor-cards-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mp-clip-card {
  background: #1f1f23;
  border: 1px solid var(--mp-ed-border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  transition: opacity 200ms ease-out;
}
.mp-clip-card.is-deselected {
  opacity: 0.4;
}
.mp-clip-edited-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mp-accent-dim);
  color: var(--mp-accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
}
.mp-clip-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.mp-clip-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-clip-card-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--mp-ed-text-pri);
}
.mp-clip-card-dur {
  font-size: 13px;
  color: var(--mp-ed-text-mut);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.mp-clip-checkbox {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--mp-accent);
  border: 2px solid var(--mp-accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms, border-color 200ms;
}
.mp-clip-checkbox.is-off {
  background: transparent;
  border-color: var(--mp-ed-text-mut);
  color: transparent;
}
.mp-clip-checkbox:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}
.mp-clip-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  border: 2px solid var(--mp-clip-1);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.mp-clip-thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08), transparent 60%);
}
.mp-clip-why-heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-ed-text-sec);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.mp-clip-why-text {
  font-size: 13px;
  color: var(--mp-ed-text-sec);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tablet 768-1279 → grid colapsa a una columna; cards horizontal scroll. */
@media (max-width: 1279px) {
  .mp-editor-grid {
    grid-template-columns: 1fr;
  }
  .mp-editor-col-b {
    max-height: 320px;
  }
  .mp-editor-cards-scroll {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .mp-clip-card {
    min-width: 280px;
    flex-shrink: 0;
  }
  .mp-editor-collab-row {
    display: none; /* en tablet la fila de colaboradores se oculta para
                      reducir clutter — chip propio queda en cabecera fixed
                      cuando 3.3 active multi-cursor */
  }
}

/* Reduce motion. */
@media (prefers-reduced-motion: reduce) {
  .mp-timeline-block,
  .mp-clip-card,
  .mp-clip-checkbox {
    transition: none;
  }
}

/* G32 · Pipeline Vertical Universal + Recortadora */
.g32-pipeline-shell,
.recortadora-hub { display: flex; flex-direction: column; gap: 18px; }
.g32-stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.g32-wizard-stepper { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.g32-wizard-stepper[data-stepper-variant="free-5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g32-step { min-height: 52px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 700; }
.g32-step[hidden] { display: none; }
.g32-step b { font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g32-step span { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-subtle); color: var(--text-muted); }
.g32-step.is-active, .g32-step.is-complete { border-color: rgba(234, 88, 12, 0.55); color: var(--text-primary); }
.g32-step.is-active span, .g32-step.is-complete span { background: var(--accent); color: #fff; }
.g32-step.is-locked { opacity: 0.55; cursor: not-allowed; }
.g32-step.is-locked span { background: rgba(148,163,184,0.18); color: var(--text-muted); }
.u32-stepper { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: rgba(15,23,42,0.62); }
.u32-stepper .g32-step { min-height: 50px; border-radius: 8px; background: transparent; }
.u32-stepper .g32-step.is-active { background: rgba(234,88,12,0.12); box-shadow: inset 0 0 0 1px rgba(234,88,12,0.30); }
.u32-stepper .g32-step.is-complete { background: rgba(251,146,60,0.08); }
.u32-stepper .g32-step span { width: 26px; height: 26px; }
.g32-panel { display: none; }
.g32-panel.is-active { display: block; }
.g32-panel-head { margin-bottom: 16px; }
.g32-panel-head > span { display: block; color: var(--accent-light); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.g32-panel-head h2 { font-size: 1.25rem; line-height: 1.2; margin: 0 0 8px; }
.g32-panel-head p { margin: 0; color: var(--text-muted); line-height: 1.5; }
.g32-tabs, .g32-editor-tabs { display: inline-flex; gap: 6px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); margin-bottom: 14px; }
.g32-tabs button, .g32-editor-tabs button { border: 0; border-radius: 6px; padding: 8px 12px; background: transparent; color: var(--text-muted); cursor: pointer; }
.g32-tabs button.is-active, .g32-editor-tabs button.is-active { background: var(--accent); color: #fff; }
.g32-source-pane { display: none; }
.g32-source-pane.is-active { display: flex; flex-direction: column; gap: 8px; }
.g32-source-pane input, .g32-inline-settings select, .g32-editor-panel textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); padding: 10px 12px; box-sizing: border-box; }
.g32-banner, .g32-tooltip, .g32-error, .g32-status { margin-top: 14px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(234, 88, 12, 0.32); background: rgba(234, 88, 12, 0.08); color: var(--text-secondary); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* C-06 fix (2026-05-04): el contenedor de status no debe renderizar la
   banda naranja cuando está vacío (operador reportó barra naranja vacía
   en /recortadora bajo "Crear run"). Aplica a todos los `.g32-status` y
   también `.g32-banner/.g32-tooltip/.g32-error` para coherencia. */
.g32-banner:empty, .g32-tooltip:empty, .g32-error:empty, .g32-status:empty { display: none; }

/* U-36 · Panel 4 cards de títulos por plataforma. */
.g32-platform-tabs { display: flex; gap: 8px; margin: 14px 0 12px; flex-wrap: wrap; }
.g32-platform-tabs button {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.g32-platform-tabs button:hover { border-color: var(--border-hover); }
.g32-platform-tabs button.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.18);
}
.g32-platform-tabs button strong { font-weight: 700; }
.g32-titles-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
.g32-title-card {
    display: flex; align-items: flex-start; gap: 12px;
    text-align: left; padding: 12px 14px;
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 10px;
    cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
    font: inherit;
}
.g32-title-card:hover { border-color: var(--border-hover); }
.g32-title-card.is-selected {
    border-color: rgba(234, 88, 12, 0.85);
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.18);
}
.g32-title-card-num {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(234, 88, 12, 0.18); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem;
}
.g32-title-card.is-selected .g32-title-card-num { background: var(--accent); color: white; }
.g32-title-card-text { flex: 1; min-width: 0; word-break: break-word; line-height: 1.35; font-size: 0.88rem; }

/* U-44 · Editor de título en pantalla (Panel 5). */
.g32-screen-title-editor { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; }
.g32-screen-title-preview {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 28px 20px; min-height: 100px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1a1320, #2c1a1f);
    text-align: center;
}
.g32-screen-title-preview span {
    font-size: 1.6rem; font-weight: 800; line-height: 1.2;
    color: #ffffff; max-width: 90%; word-break: break-word;
}
.g32-screen-title-preview span.is-placeholder {
    color: var(--text-muted); font-weight: 400; font-size: 0.95rem;
}
.g32-screen-title-preview[data-style="bold_pop"] span {
    text-shadow: 0 0 0 #000, 3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000;
    color: #fff;
}
.g32-screen-title-preview[data-style="classic"] span {
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}
.g32-screen-title-preview[data-style="impact_block"] span {
    background: rgba(0,0,0,0.85); padding: 8px 14px; border-radius: 4px;
    font-family: Impact, sans-serif; letter-spacing: 1px;
}
.g32-screen-title-preview[data-style="neon"] span {
    color: #ff5e3a; text-shadow: 0 0 8px #ff5e3a, 0 0 18px #ff5e3a, 0 0 30px #ff5e3a;
}
.g32-screen-title-style { display: flex; gap: 14px; flex-wrap: wrap; border: none; padding: 0; margin: 0; }
.g32-screen-title-style legend { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0 6px 0; }
.g32-screen-title-style label { font-size: 0.85rem; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.g32-screen-title-duration { display: flex; flex-direction: column; gap: 6px; }
.g32-screen-title-duration label { font-size: 0.85rem; color: var(--text-secondary); }
.g32-screen-title-duration label small { color: var(--text-muted); margin-left: 4px; font-weight: 400; }
#g32-screen-title-duration-label { font-weight: 600; color: var(--accent); }

/* U-42 thumbnail color picker + per-network tabs */
.g32-thumbnail-color-picker {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer; background: var(--bg-card);
    font-size: 0.85rem;
}
.g32-thumbnail-color-picker input[type="color"] {
    width: 24px; height: 24px; border: none; padding: 0;
    background: transparent; cursor: pointer;
}
.g32-thumbnail-network-tabs { display: flex; gap: 6px; margin: 8px 0 4px 24px; flex-wrap: wrap; }
.g32-thumbnail-network-tabs button {
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-card); color: var(--text-primary); cursor: pointer;
    font-size: 0.85rem;
}
.g32-thumbnail-network-tabs button.is-active {
    background: var(--accent); color: white; border-color: var(--accent);
}

/* U-48 · Panel lateral de capas (miniatura). */
.g32-thumbnail-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: 16px; }
@media (max-width: 1100px) { .g32-thumbnail-pane { grid-template-columns: 1fr; } }
.g32-layers-config-inline { padding: 0; background: transparent; border: 0; }
.g32-layers-config-inline .g32-thumbnail-mode-toggle { padding: 10px; border-radius: 8px; }
.g32-frames-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-subtle); border: 0; border-bottom: 1px solid var(--border); cursor: pointer; color: var(--text-primary); text-align: left; font-weight: 700; transition: background 0.15s ease; }
.g32-frames-toggle:hover { background: rgba(234,88,12,0.10); }
.g32-frames-toggle small { background: var(--accent); color: #fff; padding: 2px 8px; border-radius: 999px; font-weight: 800; font-size: 0.72rem; }
.g32-frames-chevron { color: var(--accent); font-style: normal; font-size: 1.1rem; transition: transform 0.18s ease; margin-left: auto; }
#g32-layers-frames[data-collapsed="true"] .g32-frames-chevron { transform: rotate(-90deg); }
#g32-layers-frames[data-collapsed="true"] .g32-frames-toggle { border-bottom: 0; }
#g32-layers-frames[data-collapsed="true"] #g32-thumbnail-frame-grid { display: none; }
.g32-layers-panel {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px; background: var(--bg-subtle);
    border: 1px solid var(--border); border-radius: 10px;
    min-width: 0;
}
.g32-layers-section-head {
    font-size: 0.72rem; font-weight: 700;
    color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;
    padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.g32-layers-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.g32-layer-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-card);
    cursor: pointer; font-size: 0.84rem;
    transition: border-color 0.15s, background 0.15s;
}
.g32-layer-item:hover { border-color: var(--border-hover); }
.g32-layer-item.is-selected { border-color: var(--accent); background: rgba(234, 88, 12, 0.08); }
.g32-layer-icon {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 4px;
    background: var(--bg-secondary); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
}
.g32-layer-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g32-layers-empty { font-size: 0.78rem; color: var(--text-muted); font-style: italic; padding: 14px 6px; text-align: center; }

.g32-layer-editor { display: flex; flex-direction: column; gap: 10px; }
.g32-layer-editor[hidden] { display: none !important; }
.g32-layers-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .g32-layers-top { grid-template-columns: 1fr; } }
.g32-layers-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.g32-layers-frames { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); overflow: hidden; }
.g32-layers-frames > #g32-thumbnail-frame-grid { padding: 10px; }
.g32-layer-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.g32-layer-field span { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); display: flex; justify-content: space-between; align-items: center; }
.g32-layer-field span small { color: var(--accent); font-weight: 700; }
.g32-layer-field input[type="text"] {
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-card); color: var(--text-primary); font-size: 0.85rem;
}
.g32-layer-field input[type="color"] { width: 100%; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: var(--bg-card); }
.g32-layer-field input[type="range"] { width: 100%; }
.g32-layer-row { display: flex; gap: 10px; }
.g32-layer-toggles { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.82rem; }
.g32-layer-toggles label { display: flex; gap: 5px; align-items: center; cursor: pointer; }
.g32-layer-actions { display: flex; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.g32-layer-actions button { flex: 1; padding: 6px 8px; font-size: 0.85rem; }

/* U-48 · Editor inline de propiedades por línea de subtítulo. */
.g32-subtitle-line-props {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px; padding: 10px; margin-top: 10px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-subtle);
}
.g32-subtitle-line-prop { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-secondary); }
.g32-subtitle-line-prop span { display: flex; justify-content: space-between; font-weight: 600; }
.g32-subtitle-line-prop span small { color: var(--accent); font-weight: 700; }
.g32-subtitle-line-prop input[type="color"] { width: 100%; height: 28px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; padding: 2px; background: var(--bg-card); }
.g32-subtitle-line-prop input[type="range"] { width: 100%; }
.g32-subtitle-line-prop input[type="checkbox"] { margin-right: 6px; }
/* Fix bug: .g32-tooltip { display: flex } sobreescribe [hidden] del HTML.
   Forzamos display:none cuando el JS marca hidden=true. */
.g32-banner[hidden], .g32-tooltip[hidden], .g32-error[hidden], .g32-status[hidden] { display: none !important; }
.g32-error { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.08); }
.g32-step-half { flex: 0 0 auto; padding-left: 8px; padding-right: 8px; }
.g32-step-half span { background: rgba(148,163,184,0.18); color: var(--text-muted); }
.g32-step-half.is-active span, .g32-step-half.is-complete span { background: var(--accent); color: #fff; }
.g32-preprod-stages { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px; }
.g32-preprod-stage { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.g32-preprod-stage[data-state="active"] { border-color: rgba(234, 88, 12, 0.55); }
.g32-preprod-stage[data-state="done"] { border-color: rgba(34, 197, 94, 0.45); }
.g32-preprod-stage[data-state="failed"] { border-color: rgba(239, 68, 68, 0.5); }
.g32-preprod-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.g32-preprod-stage-head strong { font-weight: 700; }
.g32-preprod-stage-status { font-size: 0.82rem; color: var(--text-muted); }
.g32-preprod-stage[data-state="active"] .g32-preprod-stage-status { color: var(--accent-light); }
.g32-preprod-stage[data-state="done"] .g32-preprod-stage-status { color: rgba(34, 197, 94, 0.92); }
.g32-preprod-stage[data-state="failed"] .g32-preprod-stage-status { color: rgba(239, 68, 68, 0.92); }
.g32-preprod-stage-bar { width: 100%; height: 6px; border-radius: 999px; background: rgba(148,163,184,0.22); overflow: hidden; }
.g32-preprod-stage-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); transition: width 0.4s ease; }
.g32-preprod-stage[data-state="done"] .g32-preprod-stage-bar i { background: rgba(34, 197, 94, 0.85); }
.g32-preprod-stage[data-state="failed"] .g32-preprod-stage-bar i { background: rgba(239, 68, 68, 0.85); }
.g32-preprod-stage-error { margin-top: 0; }
.g32-preprod-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 8px; }
.g32-detect-actions { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.g32-detect-counter { color: var(--text-muted); font-size: 0.92rem; font-weight: 600; }
.g32-segment-card[role="checkbox"] { cursor: pointer; }
.g32-segment-card[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px rgba(234, 88, 12, 0.4); }
.g32-segment-card[aria-checked="true"]::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 999px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; }
.g32-clip-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); }
.g32-clip-tab { background: transparent; border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer; color: var(--text-muted); display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 110px; }
.g32-clip-tab strong { color: var(--text-primary); font-size: 0.92rem; }
.g32-clip-tab em { font-size: 0.78rem; }
.g32-clip-tab small { font-size: 0.72rem; color: var(--accent-light); text-transform: uppercase; letter-spacing: 0.04em; }
.g32-clip-tab.is-active { background: var(--accent); }
.g32-clip-tab.is-active strong, .g32-clip-tab.is-active em, .g32-clip-tab.is-active small { color: #fff; }
.g32-mode-card[role="radio"][aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px rgba(234, 88, 12, 0.4); }
.g32-mode-card.is-locked { opacity: 0.62; cursor: not-allowed; }
.g32-mode-card.is-locked b { position: absolute; right: 8px; bottom: 8px; border-radius: 999px; background: rgba(2,6,23,0.86); color: var(--accent-light); padding: 4px 8px; font-size: 10px; }
.g32-ajustar-actions { display: flex; gap: 12px; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.g32-generate-clips { list-style: none; padding: 0; margin: 14px 0 16px; display: flex; flex-direction: column; gap: 12px; }
#g32-generate-summary:not([hidden]) + .g32-generate-clips { margin-top: 14px; }
.g32-generate-clip { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.g32-generate-clip[data-state="rendering"] { border-color: rgba(234, 88, 12, 0.55); }
.g32-generate-clip[data-state="ready"] { border-color: rgba(34, 197, 94, 0.45); }
.g32-generate-clip[data-state="failed"] { border-color: rgba(239, 68, 68, 0.5); }
.g32-generate-clip-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.g32-generate-clip-head strong { font-weight: 700; }
.g32-generate-clip-head em { color: var(--text-muted); font-size: 0.82rem; flex: 1; }
.g32-generate-state-badge { font-size: 0.78rem; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(148,163,184,0.18); color: var(--text-secondary); }
.g32-generate-clip[data-state="rendering"] .g32-generate-state-badge { background: var(--accent); color: #fff; }
.g32-generate-clip[data-state="ready"] .g32-generate-state-badge { background: rgba(34, 197, 94, 0.85); color: #fff; }
.g32-generate-clip[data-state="failed"] .g32-generate-state-badge { background: rgba(239, 68, 68, 0.85); color: #fff; }
.g32-generate-stage { font-size: 0.85rem; color: var(--text-muted); }
.g32-generate-clip[data-state="rendering"] .g32-generate-stage { color: var(--accent-light); }
.g32-generate-clip[data-state="ready"] .g32-generate-stage { color: rgba(34, 197, 94, 0.92); }
.g32-generate-clip[data-state="failed"] .g32-generate-stage { color: rgba(239, 68, 68, 0.92); }
.g32-generate-bar { width: 100%; height: 6px; border-radius: 999px; background: rgba(148,163,184,0.22); overflow: hidden; }
.g32-generate-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); transition: width 0.4s ease; }
.g32-generate-clip[data-state="ready"] .g32-generate-bar i { background: rgba(34, 197, 94, 0.85); }
.g32-generate-clip[data-state="failed"] .g32-generate-bar i { background: rgba(239, 68, 68, 0.85); }
.g32-generate-clip-error { margin-top: 0; }
.g32-generate-actions { display: flex; gap: 12px; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.g32-variants-primitives { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); }
.g32-variant-primitive { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-input); cursor: pointer; font-size: 0.86rem; color: var(--text-secondary); }
.g32-variant-primitive:has(input:checked) { border-color: var(--accent); color: var(--text-primary); }
.g32-variant-primitive.is-locked { opacity: 0.6; cursor: not-allowed; }
.g32-variant-primitive b { font-size: 0.66rem; padding: 2px 6px; border-radius: 999px; background: rgba(2,6,23,0.7); color: var(--accent-light); }
.g32-variants-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.g32-variant-card.is-rendering { opacity: 0.78; }
.g32-variant-card.is-rendering em { color: var(--accent-light); }
.g32-publish-channels { display: flex; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); margin-bottom: 12px; }
.g32-publish-channels legend { padding: 0 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-light); }
.g32-publish-channels label { display: flex; gap: 6px; align-items: center; }
.g32-publish-channels label small { color: var(--text-muted); font-size: 0.74rem; }
.g32-publish-queue { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.g32-publish-queue-item { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.g32-publish-queue-item[data-state="uploading"] { border-color: rgba(234, 88, 12, 0.55); }
.g32-publish-queue-item[data-state="done"], .g32-publish-queue-item[data-state="published"], .g32-publish-queue-item[data-state="scheduled"] { border-color: rgba(34, 197, 94, 0.45); }
.g32-publish-queue-item[data-state="failed"], .g32-publish-queue-item[data-state="paused"] { border-color: rgba(239, 68, 68, 0.5); }
.g32-publish-queue-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.g32-publish-handle { color: var(--text-muted); cursor: grab; font-weight: 700; }
.g32-publish-state-badge { font-size: 0.78rem; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(148,163,184,0.18); color: var(--text-secondary); margin-left: auto; }
.g32-publish-queue-item[data-state="uploading"] .g32-publish-state-badge { background: var(--accent); color: #fff; }
.g32-publish-queue-item[data-state="done"] .g32-publish-state-badge,
.g32-publish-queue-item[data-state="published"] .g32-publish-state-badge,
.g32-publish-queue-item[data-state="scheduled"] .g32-publish-state-badge { background: rgba(34, 197, 94, 0.85); color: #fff; }
.g32-publish-queue-item[data-state="failed"] .g32-publish-state-badge,
.g32-publish-queue-item[data-state="paused"] .g32-publish-state-badge { background: rgba(239, 68, 68, 0.85); color: #fff; }
.g32-publish-queue-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.g32-publish-queue-error { margin-top: 0; }
.g32-schedule-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.78); display: flex; align-items: center; justify-content: center; z-index: 100; }
.g32-schedule-modal[hidden] { display: none; }
.g32-schedule-modal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; min-width: 320px; max-width: 440px; display: flex; flex-direction: column; gap: 14px; }
.g32-schedule-modal-card h3 { margin: 0; }
.g32-schedule-modal-card label { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; color: var(--text-secondary); }
.g32-schedule-modal-card input[type="datetime-local"] { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); }
.g32-schedule-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.g32-source-timeline { position: relative; height: 52px; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(90deg, rgba(148,163,184,0.14), rgba(234,88,12,0.12)); margin-bottom: 14px; }
.g32-source-timeline::before { content: ""; position: absolute; left: 18px; right: 18px; top: 50%; height: 2px; background: rgba(255,255,255,0.16); }
.g32-source-timeline span { position: absolute; top: 12px; width: 18px; height: 28px; border-radius: 6px; background: var(--accent); box-shadow: 0 0 0 4px rgba(234,88,12,0.16); }
.g32-segment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.g32-segment-card { position: relative; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); min-height: 190px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 7px; text-align: left; overflow: hidden; }
.g32-segment-card.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(234,88,12,0.26); }
/* U-51 · Header global título + canal del run en wizard. */
.g32-run-header {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; margin-bottom: 12px;
    border: 1px solid var(--border); border-radius: 10px;
    background: linear-gradient(90deg, rgba(234, 88, 12, 0.10), transparent);
}
.g32-run-header-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.g32-run-header-title {
    font-size: 0.95rem; font-weight: 700; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g32-run-header-channel { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }

.g32-segment-thumb {
    position: relative;
    width: 100%; aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: linear-gradient(160deg, #111827, rgba(234,88,12,0.34));
    overflow: hidden;
}
.g32-segment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g32-segment-score-badge {
    position: absolute; top: 6px; right: 6px;
    min-width: 38px; height: 38px; padding: 0 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; color: #fff;
    font-weight: 900; font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
    border: 2px solid rgba(255,255,255,0.18);
    z-index: 2;
}
.g32-segment-card em, .g32-segment-card small { color: var(--text-muted); line-height: 1.35; }
.g32-segment-card.is-blurred .g32-segment-thumb, .g32-segment-card.is-blurred strong, .g32-segment-card.is-blurred em, .g32-segment-card.is-blurred small { filter: blur(8px); opacity: 0.72; }
.g32-segment-card b { position: absolute; right: 8px; bottom: 8px; border-radius: 999px; background: rgba(2,6,23,0.86); color: var(--accent-light); padding: 4px 8px; font-size: 10px; }
.g32-trim-control { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); padding: 12px; }
.g32-trim-control label { display: flex; flex-direction: column; gap: 6px; color: var(--text-secondary); font-size: 0.82rem; }
.g32-trim-control input { accent-color: var(--accent); }
.g32-baseline-progress { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); padding: 14px; }
.g32-baseline-progress > span { height: 12px; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; }
.g32-baseline-progress i { display: block; height: 100%; background: var(--accent); }
.g32-baseline-progress-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.g32-baseline-progress-list li { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text-secondary); background: var(--bg-input); }
.g32-baseline-progress-list li::before { content: "OK"; color: #86efac; font-weight: 900; margin-right: 8px; }
.g32-free-download-grid { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 18px; align-items: start; }
.g32-free-download-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.g32-title-suggestions-readonly { display: grid; gap: 8px; }
.g32-title-suggestions-readonly label { display: grid; gap: 5px; color: var(--text-muted); font-size: 0.82rem; }
.g32-title-suggestions-readonly input { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); padding: 10px 12px; }
.g32-upgrade-banner { margin-top: 14px; border: 1px solid rgba(234,88,12,0.32); border-radius: 8px; background: rgba(234,88,12,0.08); padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g32-derived-badge, .g32-variant-chip { width: max-content; border: 1px solid rgba(234,88,12,0.28); border-radius: 999px; background: rgba(234,88,12,0.10); color: var(--accent-light); padding: 3px 8px; font-size: 0.72rem; font-weight: 800; }
.g32-variant-chip { margin-top: 10px; cursor: pointer; }
.g32-teaser-pane { margin-top: 18px; border: 1px solid rgba(234,88,12,0.34); border-radius: 8px; background: rgba(234,88,12,0.06); padding: 16px; animation: fadeInUp 180ms ease-out; }
.g32-teaser-head { margin-bottom: 14px; }
.g32-teaser-head span { color: var(--accent-light); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.08em; }
.g32-teaser-head h3 { margin: 5px 0 0; font-size: 1.05rem; color: var(--text-primary); }
.g32-teaser-editor .g32-preview-pane .chispa-watermark-diagonal { display: flex; }
.g32-crop-overlay { position: absolute; inset: 10%; border: 2px dashed rgba(255,255,255,0.54); border-radius: 8px; z-index: 10; pointer-events: none; }
.g32-crop-overlay .g32-handle { pointer-events: auto; cursor: grab; }
.g32-thumbnail-mini { position: relative; width: min(180px, 100%); aspect-ratio: 9 / 16; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #020617; }
.g32-thumbnail-mini canvas { width: 100%; height: 100%; display: block; }
.g32-thumbnail-text-element { position: absolute; left: 20%; top: 42%; border: 1px dashed rgba(255,255,255,0.5); border-radius: 8px; background: rgba(2,6,23,0.56); color: #fff; padding: 6px 8px; cursor: grab; z-index: 2; }
.g32-teaser-cta { border: 1px solid rgba(234,88,12,0.32); border-radius: 8px; background: rgba(2,6,23,0.36); padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.g32-mode-grid, .g32-publish-grid, .recortadora-mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#g32-ajustar-clip-meta:not([hidden]) + .g32-mode-grid { margin-top: 14px; }
.g32-mode-card, .g32-publish-card, .recortadora-mode-card, .g32-variant-card { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); padding: 14px; min-height: 104px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.g32-mode-card span, .g32-publish-card span, .recortadora-mode-card p, .g32-variant-card em { color: var(--text-muted); font-size: 0.8rem; line-height: 1.35; }
.g32-mode-card.is-selected, .g32-variant-card.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.25); }
.is-gated { opacity: 0.55; }
.g32-inline-settings { margin-top: 16px; display: grid; grid-template-columns: 140px minmax(120px, 220px) 1fr; align-items: center; gap: 10px; }
.g32-variants-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.g32-variant-preview { width: 100%; aspect-ratio: 9 / 16; border-radius: 8px; background: linear-gradient(160deg, #111827, #0f172a 45%, rgba(234,88,12,0.35)); }
.g32-variant-state { width: max-content; border-radius: 999px; padding: 3px 8px; font-size: 0.72rem; background: rgba(148, 163, 184, 0.12); color: var(--text-muted); }
.g32-variant-state[data-state="ready"] { background: rgba(34, 197, 94, 0.14); color: #86efac; }
.g32-variant-state[data-state="failed"] { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
.g32-progress { height: 6px; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; }
.g32-progress i { display: block; height: 100%; background: var(--accent); }
.g32-editor-shell { display: block; }
.g32-editor-grid { display: grid; grid-template-columns: minmax(360px, 480px) 1fr; gap: 22px; align-items: stretch; }
/* U-79: tamaños unificados entre subs / títulos / miniatura. La miniatura
   marca el estándar (420px) para que los 3 modos se vean al mismo tamaño. */
.g32-preview-pane { position: relative; width: 100%; max-width: 420px; aspect-ratio: 9 / 16; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(180deg, #020617, #111827); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }
.g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane { max-width: 420px; align-self: start; }
.g32-preview-video { width: 100%; height: 100%; object-fit: cover; background: linear-gradient(160deg, #111827, #0f172a 52%, rgba(234,88,12,0.28)); display: block; }
.g32-preview-video:not([src]) { opacity: 0.42; }
.g32-screen-title-overlay { position: absolute; left: 50%; top: 8%; max-width: 88%; transform: translate(-50%, 0); text-align: center; line-height: 1.05; padding: 8px 14px; border-radius: 10px; z-index: 5; font-weight: 900; cursor: grab; touch-action: none; user-select: none; display: inline-flex; align-items: center; }
/* U-71: resize handles laterales del overlay del título. Visibles solo en hover. */
.g32-screen-title-overlay .g32-st-overlay-text { flex: 1; display: inline-block; min-width: 0; }
.g32-screen-title-overlay .g32-st-resize-handle { position: absolute; top: 50%; transform: translateY(-50%); width: 8px; height: 60%; background: var(--accent); border-radius: 3px; cursor: ew-resize; opacity: 0; transition: opacity 0.15s ease; z-index: 6; }
.g32-screen-title-overlay:hover .g32-st-resize-handle,
.g32-screen-title-overlay:focus-within .g32-st-resize-handle { opacity: 0.85; }
.g32-screen-title-overlay .g32-st-resize-handle:hover { opacity: 1; box-shadow: 0 0 0 2px rgba(234,88,12,0.35); }
.g32-screen-title-overlay .g32-st-resize-handle-l { left: -4px; }
.g32-screen-title-overlay .g32-st-resize-handle-r { right: -4px; }
/* U-71: editor avanzado del título (color, tamaño, etc.). */
.g32-screen-title-advanced { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); }
.g32-screen-title-advanced > summary { cursor: pointer; padding: 8px 12px; font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; user-select: none; list-style: none; display: flex; align-items: center; gap: 6px; }
.g32-screen-title-advanced > summary::before { content: "▸"; color: var(--accent); transition: transform 0.18s ease; }
.g32-screen-title-advanced[open] > summary::before { transform: rotate(90deg); }
.g32-screen-title-advanced > summary::-webkit-details-marker { display: none; }
.g32-screen-title-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 12px; }
.g32-st-prop { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-secondary); }
.g32-st-prop > span { display: flex; justify-content: space-between; font-weight: 600; }
.g32-st-prop > span small { color: var(--accent); font-weight: 700; }
.g32-st-prop input[type="color"] { width: 100%; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); cursor: pointer; }
.g32-st-prop input[type="range"] { width: 100%; }
.g32-st-prop-checks { flex-direction: row; align-items: center; gap: 6px; cursor: pointer; }
.g32-screen-title-overlay:active { cursor: grabbing; }
.g32-screen-title-overlay[hidden] { display: none !important; }
/* U-66: tamaños responsivos + paint-order para que strokes no coman letras. */
/* U-73: 6cqw → en preview pane 9:16 = 6% del ancho. El BE drawtext usa
   fontsize=64 sobre 1080 = 5.9% → match. */
.g32-screen-title-overlay { font-size: clamp(16px, 6cqw, 32px); paint-order: stroke fill; line-height: 1.1; }
@supports not (font-size: 1cqw) { .g32-screen-title-overlay { font-size: clamp(16px, 5.5vw, 32px); } }
.g32-screen-title-overlay[data-style="bold_pop"] { color: #FACC15; -webkit-text-stroke: 1.5px #000; text-shadow: 0 4px 0 rgba(0,0,0,0.88); }
.g32-screen-title-overlay[data-style="classic"] { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.95); font-weight: 800; }
.g32-screen-title-overlay[data-style="impact_block"] { color: #fff; background: rgba(0,0,0,0.82); padding: 8px 14px; text-transform: uppercase; letter-spacing: 0.02em; font-family: Impact, 'Arial Black', sans-serif; }
.g32-screen-title-overlay[data-style="neon"] { color: #fff; text-shadow: 0 0 8px #EA580C, 0 0 14px #EA580C, 0 0 24px #EA580C; }
/* U-66 · subtítulos en preview.
   Cambios clave para que los presets se VEAN bien y no bleed:
   - paint-order: stroke fill → el relleno se pinta encima del stroke,
     así los strokes gruesos no comen las letras.
   - Tamaños responsivos al ancho del contenedor (cqw donde se soporte;
     fallback con clamp() en px). El preview ronda 360–480px, así que
     el rango 18–22 px es legible sin que rompa líneas raras.
   - Strokes reducidos para evitar el efecto "letras pegadas" que tenías. */
.g32-subtitle-overlay {
  position: absolute; left: 50%; bottom: 12%;
  width: max-content; max-width: 86%;
  transform: translate(-50%, 0);
  color: #fff; font-weight: 900; text-align: center;
  line-height: 1.12; letter-spacing: 0;
  cursor: grab; touch-action: none; user-select: none;
  padding: 4px 8px; border-radius: 6px; z-index: 4;
  /* U-73: 5.5cqw = 5.5% del ancho del preview pane (que es 9:16 → ancho =
     altura·9/16 ≈ 0.5625·H). Por construcción: ASS PlayResX=1080,
     fontsize=60 → 60/1080 = 5.55%. Match exacto. */
  font-size: clamp(14px, 5.5cqw, 28px);
  text-wrap: balance;
  word-break: keep-all;
  hyphens: none;
  paint-order: stroke fill;
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: 0;
}
@supports not (font-size: 1cqw) {
  .g32-subtitle-overlay { font-size: clamp(14px, 5vw, 28px); }
}
/* Estilos por preset — fontsize se hereda del base, solo tweaks. */
.g32-subtitle-overlay[data-style="classic"] {
  font-family: Inter, system-ui, sans-serif; font-weight: 800; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.9);
}
.g32-subtitle-overlay[data-style="bold_pop"] {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 900; color: #FACC15;
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 0 3px 0 rgba(0,0,0,0.85);
}
.g32-subtitle-overlay[data-style="impact_block"] {
  font-family: 'Impact', 'Arial Black', sans-serif; font-weight: 900; color: #fff;
  background: rgba(0,0,0,0.82); padding: 6px 12px; border-radius: 4px;
  text-shadow: none; letter-spacing: 0.02em; text-transform: uppercase;
}
.g32-subtitle-overlay[data-style="custom"] {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 900;
}
.g32-subtitle-overlay[data-style="tiktok_yellow"] {
  color: #FFFC00; font-weight: 900;
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 0 3px 0 rgba(0,0,0,0.92);
}
.g32-subtitle-overlay[data-style="tiktok_white_box"] {
  color: #FFFFFF; background: rgba(0,0,0,0.78); padding: 5px 11px;
  border-radius: 4px; font-weight: 800;
  -webkit-text-stroke: 0; text-shadow: none;
}
.g32-subtitle-overlay[data-style="youtube_mrbeast"] {
  color: #FFFFFF; font-weight: 900;
  -webkit-text-stroke: 2px #DC2626;
  text-shadow: 0 4px 0 rgba(0,0,0,0.92);
  text-transform: uppercase; letter-spacing: 0.005em;
}
.g32-subtitle-overlay[data-style="karaoke_pop"] {
  color: #34D399; font-weight: 900;
  -webkit-text-stroke: 1px #064E3B;
  text-shadow: 0 0 10px rgba(52,211,153,0.5), 0 2px 6px rgba(0,0,0,0.8);
}
.g32-subtitle-overlay[data-style="chunky_caption"] {
  color: #FFFFFF; font-weight: 950;
  font-family: Impact, 'Arial Black', sans-serif; letter-spacing: 0.01em;
  -webkit-text-stroke: 2px #1E1B4B;
  text-shadow: 0 3px 0 rgba(0,0,0,0.9);
}
.g32-subtitle-overlay[data-style="handwritten"] {
  color: #FBBF24; font-style: italic; font-weight: 700;
  font-family: 'Caveat', 'Comic Sans MS', cursive;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 1px rgba(0,0,0,0.8);
}
/* U-72 · highlight palabra-a-palabra (karaoke). El span con .is-active-word
   se pinta del color del preset; el resto hereda del overlay. */
.g32-subtitle-overlay .g32-sub-word { display: inline-block; transition: color 0.06s ease; }
.g32-subtitle-overlay[data-style="bold_pop"]        .g32-sub-word.is-active-word { color: #FFFFFF; }
.g32-subtitle-overlay[data-style="tiktok_yellow"]   .g32-sub-word.is-active-word { color: #FFFFFF; }
.g32-subtitle-overlay[data-style="youtube_mrbeast"] .g32-sub-word.is-active-word { color: #FACC15; -webkit-text-stroke-color: #DC2626; }
.g32-subtitle-overlay[data-style="karaoke_pop"]     .g32-sub-word.is-active-word { color: #FACC15; -webkit-text-stroke-color: #064E3B; text-shadow: 0 0 12px rgba(250,204,21,0.7); }
.g32-subtitle-overlay[data-style="chunky_caption"]  .g32-sub-word.is-active-word { color: #FACC15; -webkit-text-stroke-color: #1E1B4B; }
/* Container query: subtítulo se redimensiona según el preview pane. */
.g32-preview-pane { container-type: inline-size; container-name: preview; }
/* Picker visual */
.g32-sub-style-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); cursor: pointer; }
.g32-sub-style-option:has(input:checked) { border-color: var(--accent); background: rgba(234,88,12,0.08); }
.g32-sub-style-option.is-locked { opacity: 0.55; cursor: not-allowed; }
.g32-sub-style-option em { font-style: normal; color: var(--text-secondary); font-size: 0.78rem; }
.g32-sub-style-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 30px; padding: 4px 8px; background: #111827; border-radius: 6px; font-weight: 900; font-size: 0.95rem; color: #fff; }
.g32-sub-style-chip[data-style="bold_pop"] { color: #FACC15; -webkit-text-stroke: 1.5px #000; text-stroke: 1.5px #000; }
.g32-sub-style-chip[data-style="impact_block"] { font-family: Impact, 'Arial Black', sans-serif; background: #000; }
.g32-sub-style-chip[data-style="tiktok_yellow"] { color: #FFFC00; -webkit-text-stroke: 1.5px #000; text-stroke: 1.5px #000; }
.g32-sub-style-chip[data-style="tiktok_white_box"] { background: #000; color: #fff; }
.g32-sub-style-chip[data-style="youtube_mrbeast"] { color: #fff; -webkit-text-stroke: 2px #DC2626; text-stroke: 2px #DC2626; text-transform: uppercase; }
.g32-sub-style-chip[data-style="karaoke_pop"] { color: #34D399; -webkit-text-stroke: 1px #064E3B; text-stroke: 1px #064E3B; text-shadow: 0 0 8px rgba(52,211,153,0.5); }
.g32-sub-style-chip[data-style="chunky_caption"] { font-family: Impact, 'Arial Black', sans-serif; -webkit-text-stroke: 2px #1E1B4B; text-stroke: 2px #1E1B4B; }
.g32-sub-style-chip[data-style="handwritten"] { color: #FBBF24; font-style: italic; font-family: 'Caveat', 'Comic Sans MS', cursive; }
.g32-subtitle-overlay:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.g32-editor-shell[data-mode="teaser-readonly-watermarked"] .g32-subtitle-overlay { border: 1px dashed rgba(255,255,255,0.45); }
.chispa-watermark-diagonal { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; z-index: 5; pointer-events: none; color: transparent; background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 60px, rgba(234,88,12,0.50) 60px, rgba(234,88,12,0.50) 120px); text-align: center; }
.chispa-watermark-diagonal::before { content: "CHISPA FREE PREVIEW"; transform: rotate(-22deg); font-size: clamp(20px, 5vw, 36px); font-weight: 950; letter-spacing: 0.12em; color: rgba(255,255,255,0.95); text-shadow: 0 0 24px rgba(234,88,12,0.85), 0 2px 8px rgba(0,0,0,0.55); white-space: nowrap; }
.g32-editor-shell[data-mode="teaser-readonly-watermarked"] .chispa-watermark-diagonal { display: flex; }
.g32-preview-controls { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; background: rgba(2,6,23,0.74); backdrop-filter: blur(8px); z-index: 6; }
.g32-preview-controls button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; }
.g32-preview-controls input[type="range"] { width: 100%; accent-color: var(--accent); }
.g32-preview-time { color: #fff; font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g32-editor-panel { display: flex; flex-direction: column; gap: 12px; }
.g32-editor-pane { display: none; }
.g32-editor-pane.is-active { display: flex; flex-direction: column; gap: 12px; }
.g32-subtitle-fulltext-pane { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); }
.g32-subtitle-fulltext-pane label span, .g32-subtitle-section-head span { color: var(--accent-light); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; }
.g32-subtitle-fulltext-pane textarea, .g32-subtitle-line-input { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); padding: 10px 12px; box-sizing: border-box; resize: vertical; line-height: 1.45; }
.g32-subtitle-fulltext-pane p, .g32-subtitle-style-hint, .g32-muted-note { margin: 0; color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }
.g32-subtitle-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g32-subtitle-section-head button { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); padding: 8px 10px; cursor: pointer; white-space: nowrap; }
.g32-subtitle-phrases-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; max-height: 430px; overflow: auto; }
.g32-subtitle-phrase { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); overflow: hidden; }
.g32-subtitle-phrase.is-active { border-color: rgba(234, 88, 12, 0.68); box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.18); }
.g32-subtitle-phrase.is-dirty { border-color: rgba(245, 158, 11, 0.58); }
.g32-subtitle-phrase.is-failed { border-color: rgba(239, 68, 68, 0.58); }
.g32-subtitle-phrase-header { display: grid; grid-template-columns: 34px max-content minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; }
.g32-subtitle-phrase-header button { border: 1px solid var(--border); border-radius: 7px; background: var(--bg-subtle); color: var(--text-primary); cursor: pointer; min-width: 30px; min-height: 30px; }
.g32-subtitle-phrase-header .g32-subtitle-time { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; padding-right: 8px; border-right: 1px solid var(--border); }
.g32-subtitle-phrase-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; min-width: 0; }
.g32-subtitle-time { color: var(--text-muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g32-subtitle-phrase-body { display: flex; flex-direction: column; gap: 10px; padding: 0 10px 12px; }
.g32-subtitle-phrase-body[hidden] { display: none !important; }
.g32-subtitle-word-row { display: flex; flex-wrap: wrap; gap: 8px; }
.g32-subtitle-word-wrap { display: inline-flex; align-items: stretch; gap: 0; border: 1px solid rgba(234,88,12,0.34); border-radius: 999px; background: rgba(234,88,12,0.1); cursor: grab; overflow: hidden; }
.g32-subtitle-word-wrap.is-drop-target { background: rgba(234,88,12,0.32); border-color: var(--accent); }
.g32-subtitle-word-chip { min-height: 30px; background: transparent; color: var(--text-primary); padding: 5px 10px; user-select: none; }
.g32-subtitle-word-chip:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.g32-subtitle-word-arrow { background: transparent; border: 0; color: var(--accent); padding: 0 8px; cursor: pointer; font-size: 0.78rem; line-height: 1; align-self: stretch; }
.g32-subtitle-word-arrow:hover { background: rgba(234,88,12,0.25); color: #fff; }
.g32-subtitle-word-arrow:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -2px; }
.g32-subtitle-line-config { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); padding: 0; }
.g32-subtitle-line-config[open] { padding: 10px; }
.g32-subtitle-line-config > summary { cursor: pointer; padding: 8px 12px; font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; user-select: none; list-style: none; display: flex; align-items: center; gap: 6px; }
.g32-subtitle-line-config > summary::before { content: "▸"; color: var(--accent); transition: transform 0.18s ease; display: inline-block; }
.g32-subtitle-line-config[open] > summary::before { transform: rotate(90deg); }
.g32-subtitle-line-config > summary::-webkit-details-marker { display: none; }
.g32-subtitle-line-config > summary:hover { color: var(--text-primary); }
.g32-subtitle-style-inline { display: grid; grid-template-columns: 80px minmax(140px, 220px); gap: 8px; align-items: center; color: var(--text-muted); font-size: 0.82rem; }
.g32-subtitle-style-inline select { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); padding: 8px 10px; }
.g32-subtitle-style-selector { border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.g32-subtitle-style-selector legend { color: var(--text-secondary); font-weight: 800; padding: 0 4px; }
.g32-subtitle-style-selector label { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px; border-radius: 8px; background: var(--bg-input); color: var(--text-secondary); }
.g32-subtitle-save-badge { color: #fca5a5; font-size: 0.72rem; white-space: nowrap; }
.g32-subtitle-phrase.is-loading { min-height: 64px; padding: 12px; display: grid; gap: 8px; }
.g32-subtitle-phrase.is-loading span { height: 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(148,163,184,0.12), rgba(148,163,184,0.28), rgba(148,163,184,0.12)); animation: g32Shimmer 1.2s infinite linear; }
.g32-subtitle-empty { padding: 18px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-muted); }
.g32-thumbnail-pane { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 18px; align-items: start; }
.g32-thumbnail-canvas-pane { display: flex; flex-direction: column; gap: 10px; }
.g32-thumbnail-canvas-wrap { position: relative; width: 100%; max-width: 420px; aspect-ratio: 9 / 16; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #020617; align-self: flex-start; }
.g32-thumbnail-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.g32-thumbnail-canvas:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.g32-thumbnail-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.g32-thumbnail-toolbar button { min-height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); padding: 7px 10px; cursor: pointer; }
.g32-thumbnail-config-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.g32-thumbnail-mode-toggle { border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: grid; gap: 8px; }
.g32-thumbnail-mode-toggle legend { color: var(--text-secondary); font-weight: 800; padding: 0 4px; }
.g32-thumbnail-mode-toggle label { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px; border-radius: 8px; background: var(--bg-input); color: var(--text-secondary); }
.g32-thumbnail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g32-thumbnail-section-head span, .g32-thumbnail-text-stats span { color: var(--accent-light); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; }
.g32-thumbnail-section-head small { color: var(--text-muted); font-weight: 800; }
.g32-thumbnail-frame-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.g32-publish-review { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: 14px; margin: 14px 0; display: flex; flex-direction: column; gap: 14px; }
.g32-pub-review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g32-pub-review-head strong { font-size: 1.05rem; }
.g32-pub-review-head em { color: var(--text-muted); font-style: normal; font-weight: 500; }
.g32-pub-review-body { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .g32-pub-review-body { grid-template-columns: 1fr; } }
.g32-pub-review-preview video { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 10px; object-fit: cover; }
.g32-pub-review-meta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.g32-pub-review-meta h4 { margin: 0 0 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.g32-pub-titles { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.g32-pub-titles li { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); }
.g32-pub-net { font-size: 0.78rem; color: var(--text-muted); font-weight: 700; }
.g32-pub-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.g32-pub-thumb-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); display: flex; flex-direction: column; gap: 6px; align-items: center; min-width: 96px; }
.g32-pub-thumb-canvas { width: 90px; aspect-ratio: 9 / 16; border-radius: 6px; background: #020617; display: block; }
.g32-pub-thumb-card em { color: var(--text-muted); font-style: normal; font-size: 0.78rem; }
.g32-pub-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
/* U-67 · Aviso MFA en perfil — caja con badge, sin emoticono.
   - Activado: borde + badge verde discreto.
   - Inactivo: borde + badge rojo + fondo rojizo. */
.profile-mfa-status {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    font-size: 0.88rem; color: var(--text-secondary);
    margin: 4px 0;
    flex-wrap: wrap;
}
.profile-mfa-status .profile-mfa-text { flex: 1; min-width: 200px; line-height: 1.35; }
.profile-mfa-badge {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 999px;
    font-weight: 800; font-size: 0.74rem;
    text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap;
}
.profile-mfa-status--ok {
    border-color: rgba(22,163,74,0.45);
    background: rgba(22,163,74,0.08);
    color: #d1fae5;
}
.profile-mfa-badge--ok {
    background: #16a34a; color: #fff;
}
.profile-mfa-status--alert {
    border-color: rgba(220,38,38,0.55);
    background: rgba(220,38,38,0.10);
    color: #fecaca;
    box-shadow: 0 0 0 1px rgba(220,38,38,0.15) inset;
}
.profile-mfa-badge--alert {
    background: #dc2626; color: #fff;
    box-shadow: 0 0 0 2px rgba(220,38,38,0.18);
}

/* U-67: Panel Publicar — paneles legacy ocultos a favor del review per-clip. */
#g32-publish-queue[hidden],
#g32-publish-channels[hidden],
.g32-publish-grid[hidden] { display: none !important; }
/* U-71: miniatura + caja de descarga side-by-side, alturas igualadas. */
.g32-pub-thumb-and-download { display: grid; grid-template-columns: minmax(0, auto) minmax(260px, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 760px) { .g32-pub-thumb-and-download { grid-template-columns: 1fr; } }
.g32-pub-thumbs-block { display: flex; flex-direction: column; gap: 6px; }
.g32-pub-thumbs-block > h4 { margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }

/* U-70: panel de descarga con 3 botones per red social + "todos". */
.g32-pub-download-row { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid #16a34a; background: rgba(22,163,74,0.08); border-radius: 10px; height: 100%; }
.g32-pub-download-row > div { display: flex; flex-direction: column; gap: 2px; }
.g32-pub-download-row h4 { color: #16a34a !important; margin: 0; }
.g32-pub-download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.g32-pub-download-btn { color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; font-weight: 800; cursor: pointer; transition: filter 0.15s, transform 0.1s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.88rem; }
.g32-pub-download-btn:hover { filter: brightness(1.1); }
.g32-pub-download-btn:active { transform: translateY(1px); }
.g32-pub-download-btn[disabled] { opacity: 0.6; cursor: progress; filter: none; }
.g32-pub-download-btn--yt  { background: #ff0033; }
.g32-pub-download-btn--tt  { background: #25f4ee; color: #0f172a; text-shadow: 0 0 0 currentColor; }
.g32-pub-download-btn--ig  { background: linear-gradient(45deg, #f58529 0%, #dd2a7b 50%, #8134af 100%); }
.g32-pub-download-btn--all { background: #16a34a; }
.g32-pub-download-btn--all:hover { background: #15803d; }
.g32-pub-feedback { margin-top: 8px; font-size: 0.82rem; color: var(--text-secondary); }
.g32-pub-feedback a { color: var(--accent); }
.g32-thumb-canvas-hint { margin: 0 0 4px; font-size: 0.74rem; color: var(--text-muted); padding: 4px 8px; border-left: 2px solid var(--accent); background: rgba(234,88,12,0.06); border-radius: 0 4px 4px 0; }
/* U-71 · zoom toolbar de la miniatura (Panel 5 Editar > Miniatura). */
.g32-thumb-zoom-bar { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); margin-bottom: 6px; align-self: flex-start; }
.g32-thumb-zoom-bar > button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: var(--bg-subtle); color: var(--text-primary); font-weight: 700; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background 0.12s ease, color 0.12s ease; }
.g32-thumb-zoom-bar > button:hover { background: rgba(234,88,12,0.18); color: var(--accent-light); }
.g32-thumb-zoom-bar > button:active { transform: translateY(1px); }
.g32-thumb-zoom-bar > button:last-child { width: auto; padding: 0 10px; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; }
.g32-thumb-zoom-bar > #g32-thumb-zoom-label { font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); padding: 0 6px; min-width: 42px; text-align: center; }

/* U-65 · editor interactivo de encuadre dual / retención */
.g32-encuadre-editor { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); display: flex; flex-direction: column; gap: 12px; }
.g32-enc-head strong { display: block; font-size: 0.95rem; }
.g32-enc-head p { margin: 4px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.g32-enc-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.g32-enc-row label { font-size: 0.82rem; display: inline-flex; gap: 8px; align-items: center; }
.g32-enc-row select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); }
.g32-enc-stage { position: relative; width: 100%; max-width: 720px; background: #0f172a; border-radius: 10px; overflow: hidden; touch-action: none; }
.g32-enc-frame { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
.g32-enc-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* U-68: botón overlay reproducir/pausar (los controls nativos se eliminaron). */
.g32-enc-play-toggle { position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(15,23,42,0.78); color: #fff; font-size: 1.05rem; cursor: pointer; z-index: 4; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.1s ease; }
.g32-enc-play-toggle:hover { background: rgba(234,88,12,0.9); }
.g32-enc-play-toggle:active { transform: scale(0.94); }
.g32-enc-hint { margin: 8px 0 0; font-size: 0.78rem; color: var(--text-muted); }
.g32-enc-timeline { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); display: flex; flex-direction: column; gap: 10px; }
.g32-enc-tl-head { display: flex; justify-content: space-between; align-items: center; }
.g32-enc-tl-bar-wrap { position: relative; padding-top: 14px; }
.g32-enc-tl-ticks { position: relative; height: 14px; pointer-events: none; }
.g32-enc-tl-tick { position: absolute; transform: translateX(-50%); font-size: 0.65rem; color: var(--text-muted); white-space: nowrap; padding: 1px 4px; border-left: 1px solid rgba(255,255,255,0.06); height: 14px; line-height: 12px; }
.g32-enc-tl-tick:first-child { transform: translateX(0); }
.g32-enc-tl-tick:last-child { transform: translateX(-100%); }
.g32-enc-tl-bar { position: relative; width: 100%; height: 56px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; cursor: pointer; user-select: none; touch-action: none; }
.g32-enc-tl-block { position: absolute; top: 0; bottom: 0; cursor: grab; color: #fff; display: flex; align-items: stretch; border-right: 1px solid rgba(0,0,0,0.35); transition: filter 0.12s ease; }
.g32-enc-tl-block:active { cursor: grabbing; }
.g32-enc-tl-block-body { flex: 1; padding: 4px 8px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; min-width: 0; overflow: hidden; }
.g32-enc-tl-block:hover { filter: brightness(1.15); }
.g32-enc-tl-block.is-selected { box-shadow: inset 0 0 0 2px #fff; z-index: 2; }
.g32-enc-tl-block-body > span { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g32-enc-tl-block-body > small { font-size: 0.7rem; opacity: 0.85; white-space: nowrap; }
/* Handles laterales para resize */
.g32-enc-tl-handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; background: rgba(255,255,255,0.12); transition: background 0.12s ease; }
.g32-enc-tl-handle:hover { background: rgba(255,255,255,0.35); }
.g32-enc-tl-handle-l { left: 0; border-right: 1px solid rgba(0,0,0,0.55); }
.g32-enc-tl-handle-r { right: 0; border-left: 1px solid rgba(0,0,0,0.55); }
/* Playhead vertical */
.g32-enc-tl-playhead { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #ef4444; box-shadow: 0 0 0 1px rgba(239,68,68,0.4), 0 0 8px rgba(239,68,68,0.6); pointer-events: none; z-index: 3; }
.g32-enc-tl-playhead::before { content: ''; position: absolute; top: -2px; left: -5px; width: 12px; height: 8px; background: #ef4444; border-radius: 2px; }
.g32-enc-tl-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.g32-enc-tl-actions select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); }
/* Multi-track + zoom + snap (mejoras 1/2/3) */
.g32-enc-tl-row { display: grid; grid-template-columns: 70px 1fr; align-items: stretch; }
.g32-enc-tl-side-labels { display: flex; flex-direction: column; gap: 2px; padding-right: 8px; padding-top: 16px; }
.g32-enc-tl-side-label { display: flex; align-items: center; font-size: 0.66rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.g32-enc-tl-side-label--video { height: 24px; }
.g32-enc-tl-side-label--modes { height: 52px; }
.g32-enc-tl-viewport { overflow-x: auto; overflow-y: hidden; }
.g32-enc-tl-viewport::-webkit-scrollbar { height: 8px; }
.g32-enc-tl-viewport::-webkit-scrollbar-track { background: var(--bg-subtle); border-radius: 4px; }
.g32-enc-tl-viewport::-webkit-scrollbar-thumb { background: rgba(234,88,12,0.55); border-radius: 4px; }
.g32-enc-tl-viewport::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.g32-enc-tl-scaled { position: relative; }
.g32-enc-tl-tracks { display: grid; grid-template-rows: 24px 52px; gap: 2px; position: relative; }
/* U-69 · pista Vídeo: tira de thumbnails (overflow:hidden + flex de imgs).
   Mantiene el gradient como fallback si las imgs no cargan todavía. */
.g32-enc-tl-track-video { display: flex; align-items: stretch; overflow: hidden; background: linear-gradient(90deg, #1f2937, #111827); border-radius: 4px; cursor: pointer; }
.g32-enc-tl-track-video > img { height: 100%; object-fit: cover; display: block; flex: 0 0 auto; border-right: 1px solid rgba(0,0,0,0.4); user-select: none; pointer-events: none; }
.g32-enc-tl-track-video > img:last-child { border-right: 0; }
.g32-enc-tl-track-modes { position: relative; height: 52px; }
.g32-enc-tl-snap-guide { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent); opacity: 0.6; pointer-events: none; z-index: 4; }
.g32-enc-tl-help { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 0.75rem; font-weight: 700; cursor: help; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.g32-enc-tl-help:hover { color: var(--accent); border-color: var(--accent); }
.g32-enc-frame-fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.85rem; }
.g32-enc-box { position: absolute; border: 2px solid; box-shadow: 0 0 0 9999px rgba(0,0,0,0.0); border-radius: 4px; cursor: move; min-width: 40px; min-height: 40px; }
.g32-enc-box[data-role="primary"] { border-color: var(--accent); background: rgba(234,88,12,0.10); }
.g32-enc-box[data-role="secondary"] { border-color: #f97316; background: rgba(249,115,22,0.10); }
/* U-72: rectángulo 9:16 del modo single + máscaras laterales que oscurecen
   lo que NO entra en el clip vertical final (feedback visual claro). */
.g32-enc-box[data-role="single"] { border-color: var(--accent); background: transparent; box-shadow: 0 0 0 9999px rgba(0,0,0,0.0); }
.g32-enc-box--single .g32-enc-box-handle { color: var(--accent); }
.g32-enc-mask-l, .g32-enc-mask-r { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,0.55); pointer-events: none; z-index: 1; }
.g32-enc-mask-l { left: 0; }
.g32-enc-mask-r { right: 0; }
.g32-enc-box-label { position: absolute; top: 4px; left: 6px; font-size: 0.72rem; font-weight: 800; color: #fff; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,0.55); pointer-events: none; }
.g32-enc-box-handle { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; background: currentColor; border-radius: 3px; cursor: nwse-resize; }
.g32-enc-box[data-role="primary"] .g32-enc-box-handle { color: var(--accent); }
.g32-enc-box[data-role="secondary"] .g32-enc-box-handle { color: #f97316; }

.g32-enc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.g32-enc-half { display: flex; flex-direction: column; gap: 6px; }
.g32-enc-half-label { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); }
.g32-enc-vp { width: 100%; max-width: 280px; background: #020617; border-radius: 8px; overflow: hidden; position: relative; }
.g32-enc-pan-img { width: 200%; height: 100%; object-fit: cover; display: block; transition: transform 0.05s linear; }
.g32-enc-half input[type="range"] { width: 100%; max-width: 280px; }
/* U-66 · navegación entre clips en Editar */
.g32-edit-clip-nav { display: flex; align-items: center; gap: 12px; padding: 8px 0; justify-content: space-between; }
.g32-edit-clip-nav strong { font-size: 0.95rem; color: var(--text-primary); }
.g32-edit-clip-nav em { color: var(--text-muted); font-style: normal; font-weight: 500; }
.g32-edit-clip-tabs-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0; overflow-x: auto; }

/* U-66 · plantillas de texto miniatura (chips horizontales pequeños) */
.g32-layers-presets { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.g32-thumb-preset-list { display: flex; gap: 6px; flex-wrap: wrap; }
.g32-thumb-preset-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color 0.15s, background 0.15s; flex: 0 0 auto; min-height: 30px; }
.g32-thumb-preset-chip:hover { border-color: var(--accent); background: rgba(234,88,12,0.08); }
.g32-thumb-preset-swatch { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 4px; font-size: 0.78rem; font-weight: 800; line-height: 1; }
.g32-thumb-preset-chip > em { font-size: 0.72rem; color: var(--text-secondary); font-style: normal; white-space: nowrap; }

/* U-32 · Paso Video: primera migracion visual sobre la pipeline actual.
   Mantiene IDs/handlers g32 existentes; solo cambia la presentacion. */
.u32-download-panel,
.u32-preprod-panel,
.u32-ia-panel,
.u32-clips-panel,
.u32-video-panel { --u32-card-bg: rgba(15,23,42,0.72); }
.u32-download-panel .g32-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(420px, 100%);
}
.u32-download-panel .g32-source-pane.is-active {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15,23,42,0.58);
  padding: 14px;
}
.u32-download-panel #g32-source-submit {
  min-width: 210px;
}
.u32-preprod-panel .g32-preprod-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.u32-preprod-panel .g32-preprod-stage {
  min-height: 132px;
  background: linear-gradient(180deg, rgba(15,23,42,0.72), rgba(2,6,23,0.58));
}
.u32-preprod-panel .g32-preprod-stage-head {
  align-items: flex-start;
}
.u32-preprod-panel .g32-preprod-stage-head strong {
  line-height: 1.25;
}
@media (max-width: 980px) {
  .u32-preprod-panel .g32-preprod-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .u32-download-panel .g32-tabs,
  .u32-preprod-panel .g32-preprod-stages { grid-template-columns: 1fr; }
}
.u32-ia-panel .g32-source-timeline {
  background: linear-gradient(90deg, rgba(234,88,12,0.10), rgba(251,146,60,0.12));
}
.u32-ia-panel .g32-segment-card {
  background: linear-gradient(180deg, rgba(15,23,42,0.76), rgba(2,6,23,0.62));
}
.u32-ia-panel .g32-detect-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: rgba(15,23,42,0.94);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.u32-clips-panel .g32-generate-clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.u32-clips-panel .g32-generate-clip {
  display: grid;
  grid-template-columns: minmax(104px, 0.58fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 150px;
  background: linear-gradient(180deg, rgba(15,23,42,0.76), rgba(2,6,23,0.62));
}
.u32-clips-panel .g32-generate-thumb {
  position: relative;
  min-height: 128px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15,23,42,0.84);
  border: 1px solid rgba(234,88,12,0.24);
}
.u32-clips-panel .g32-generate-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.u32-clips-panel .g32-generate-thumb small {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(2,6,23,0.82);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.u32-clips-panel .g32-generate-stage,
.u32-clips-panel .g32-generate-bar,
.u32-clips-panel .g32-generate-clip-error,
.u32-clips-panel .g32-generate-retry {
  grid-column: 2;
}
@media (max-width: 1100px) {
  .u32-clips-panel .g32-generate-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .u32-clips-panel .g32-generate-clips { grid-template-columns: 1fr; }
  .u32-clips-panel .g32-generate-clip { grid-template-columns: 96px minmax(0, 1fr); }
}
.u32-video-panel { --u32-card-bg: rgba(15,23,42,0.72); }
.u32-video-panel .g32-panel-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.u32-video-panel .g32-panel-head > span { color: var(--accent-light); }
.u32-video-panel .g32-panel-head h2 { font-size: 1.4rem; }
.u32-video-panel .g32-clip-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 4px;
  margin-bottom: 12px;
}
.u32-video-panel .g32-clip-tab {
  flex: 0 0 132px;
  min-height: 64px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--u32-card-bg);
}
.u32-video-panel .g32-clip-tab.is-active {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent), #D94B08);
  box-shadow: 0 8px 24px rgba(234,88,12,0.22);
}
.u32-video-panel #g32-ajustar-clip-meta:not([hidden]) {
  display: block;
  margin: 8px 0 12px;
  border-color: rgba(234,88,12,0.36);
  background: rgba(234,88,12,0.08);
}
.u32-video-panel .g32-mode-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}
.u32-video-panel .g32-mode-card.u32-mode-card {
  position: relative;
  min-height: 64px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border-color: rgba(148,163,184,0.16);
  background: var(--u32-card-bg);
  padding: 9px 10px;
  text-align: left;
}
.u32-video-panel .g32-mode-card.u32-mode-card:hover {
  border-color: rgba(251,146,60,0.45);
  background: rgba(30,41,59,0.72);
}
.u32-video-panel .g32-mode-card.u32-mode-card.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(234,88,12,0.55), 0 0 0 1px rgba(234,88,12,0.18);
}
.u32-mode-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(251,146,60,0.35);
  background: rgba(234,88,12,0.12);
  color: var(--accent-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 900;
}
.u32-mode-card[data-mode-icon="spark"] .u32-mode-icon::before { content: "AI"; }
.u32-mode-card[data-mode-icon="frame"] .u32-mode-icon::before { content: "9:16"; }
.u32-mode-card[data-mode-icon="blur"] .u32-mode-icon::before { content: "BL"; }
.u32-mode-card[data-mode-icon="dual"] .u32-mode-icon::before { content: "2C"; }
.u32-mode-card[data-mode-icon="split"] .u32-mode-icon::before { content: "SP"; }
.u32-mode-card[data-mode-icon="text"] .u32-mode-icon::before { content: "TXT"; }
.u32-mode-copy { min-width: 0; display: flex; flex-direction: column; gap: 0; padding-right: 28px; }
.u32-video-panel .u32-mode-copy strong { font-size: 0.78rem; line-height: 1.15; }
.u32-video-panel .u32-mode-copy small { display: none; }
.u32-video-panel .u32-mode-card > em,
.u32-video-panel .u32-mode-card > b {
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 999px;
  padding: 2px 5px;
  background: rgba(234,88,12,0.14);
  border: 1px solid rgba(234,88,12,0.32);
  color: var(--accent-light);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}
.u32-video-panel .u32-mode-card.is-locked > b {
  background: rgba(15,23,42,0.92);
}
.u32-video-panel .g32-encuadre-editor {
  border-radius: 8px;
  border-color: rgba(148,163,184,0.16);
  background: linear-gradient(180deg, rgba(15,23,42,0.90), rgba(15,23,42,0.62));
  padding: 14px;
}
.u32-video-panel .g32-enc-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.u32-video-panel .g32-enc-stage {
  max-width: 880px;
  border: 1px solid rgba(148,163,184,0.16);
  background: #020617;
}
.u32-video-panel .g32-enc-timeline {
  border-radius: 8px;
  background: rgba(15,23,42,0.72);
  border-color: rgba(148,163,184,0.16);
  padding: 14px;
}
.u32-video-panel .g32-enc-tl-head strong {
  font-size: 0.98rem;
}
.u32-video-panel .g32-enc-tl-row {
  grid-template-columns: 76px minmax(0, 1fr);
}
.u32-video-panel .g32-enc-tl-track-video,
.u32-video-panel .g32-enc-tl-bar {
  border-radius: 6px;
}
.u32-video-panel .g32-enc-tl-block {
  top: 2px;
  bottom: 2px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.22);
}
.u32-video-panel .g32-enc-tl-block.is-selected {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.82), 0 0 18px rgba(234,88,12,0.22);
}
.u32-video-panel .g32-enc-tl-actions {
  align-items: end;
}
.u32-video-panel .g32-enc-tl-actions .btn-secondary {
  min-height: 34px;
}
.g32-platform-tabs button.is-locked,
.g32-thumb-preset-chip.is-locked {
  opacity: 0.58;
  border-color: rgba(234,88,12,0.32);
}
.g32-thumb-preset-chip.is-locked strong {
  margin-left: auto;
  border-radius: 999px;
  padding: 2px 6px;
  background: rgba(234,88,12,0.14);
  color: var(--accent-light);
  font-size: 0.62rem;
}
@media (max-width: 1199px) {
  .u32-video-panel .g32-mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .u32-video-panel .g32-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .u32-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u32-video-panel .g32-mode-grid { grid-template-columns: 1fr; }
  .u32-video-panel .g32-mode-card.u32-mode-card { grid-template-columns: 34px minmax(0, 1fr); }
  .u32-video-panel .u32-mode-card > em,
  .u32-video-panel .u32-mode-card > b { grid-column: 2; justify-self: start; }
  .u32-video-panel .g32-enc-tl-row { grid-template-columns: 1fr; }
  .u32-video-panel .g32-enc-tl-side-labels { display: none; }
}
.g32-thumbnail-frame { position: relative; min-height: 74px; aspect-ratio: 9 / 16; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(150deg, #111827, #0f172a 55%, rgba(234,88,12,0.35)); color: #fff; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 8px; }
.g32-thumbnail-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.g32-thumbnail-frame > span, .g32-thumbnail-frame > em { position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.85); }
.g32-thumbnail-frame span { font-weight: 900; font-size: 0.95rem; }
.g32-thumbnail-frame em { color: rgba(255,255,255,0.74); font-size: 0.72rem; font-style: normal; }
.g32-thumbnail-frame.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(234,88,12,0.28); }
.g32-thumbnail-frame.frame-locked::before { content: ""; position: absolute; inset: 0; background: inherit; filter: blur(8px); transform: scale(1.08); }
.g32-thumbnail-frame.frame-locked > span,
.g32-thumbnail-frame.frame-locked > em { filter: blur(8px); }
.g32-thumbnail-frame.frame-locked strong { position: absolute; inset: auto 6px 6px 6px; z-index: 1; border-radius: 999px; background: rgba(2,6,23,0.82); color: var(--accent-light); padding: 4px 6px; font-size: 10px; text-align: center; }
.g32-thumbnail-text-stats { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 1px solid rgba(234,88,12,0.28); border-radius: 8px; background: rgba(234,88,12,0.08); padding: 12px; }
.g32-thumbnail-text-stats strong { display: block; color: var(--text-primary); margin-top: 4px; line-height: 1.3; }
.g32-thumbnail-text-stats p { margin: 4px 0 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.4; }
.g32-thumbnail-text-stats button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(234,88,12,0.32); background: var(--bg-input); color: var(--accent-light); font-weight: 900; cursor: help; flex: 0 0 auto; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
@keyframes g32Shimmer { from { background-position: -120px 0; } to { background-position: 120px 0; } }
.g32-crop-box { position: relative; width: min(260px, 100%); aspect-ratio: 9 / 16; border: 2px solid var(--accent); border-radius: 8px; background: rgba(234, 88, 12, 0.06); }
.g32-handle { position: absolute; width: 10px; height: 10px; border-radius: 999px; background: var(--accent-light); border: 2px solid var(--bg-base); }
.g32-handle.tl { top: -7px; left: -7px; }
.g32-handle.tr { top: -7px; right: -7px; }
.g32-handle.bl { bottom: -7px; left: -7px; }
.g32-handle.br { bottom: -7px; right: -7px; }
.g32-handle.t { top: -7px; left: calc(50% - 7px); }
.g32-handle.b { bottom: -7px; left: calc(50% - 7px); }
.g32-handle.l { left: -7px; top: calc(50% - 7px); }
.g32-handle.r { right: -7px; top: calc(50% - 7px); }
.g32-footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.g32-locked-state { margin-bottom: 16px; }
.recortadora-mode-card span { width: max-content; color: var(--accent-light); font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.recortadora-submode-panel { margin-top: 16px; }
@media (max-width: 980px) {
  .g32-mode-grid, .g32-publish-grid, .recortadora-mode-grid, .g32-variants-grid, .g32-segment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g32-free-download-grid { grid-template-columns: 1fr; }
  .g32-editor-grid, .g32-thumbnail-pane { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .g32-stepper, .g32-wizard-stepper, .g32-mode-grid, .g32-publish-grid, .recortadora-mode-grid, .g32-variants-grid, .g32-inline-settings, .g32-thumbnail-frame-grid, .g32-segment-grid, .g32-trim-control { grid-template-columns: 1fr; }
  .g32-footer { position: sticky; bottom: 0; background: var(--bg-card); z-index: 30; }
  .g32-preview-pane { width: min(100%, 340px); }
  .g32-subtitle-style-selector { grid-template-columns: 1fr; }
  .g32-subtitle-phrase-header { grid-template-columns: 32px 32px auto minmax(0, 1fr); }
  .g32-subtitle-save-badge { grid-column: 4; }
  .g32-teaser-pane { padding: 12px; }
  .g32-teaser-cta, .g32-upgrade-banner, .ch-schedule-next-pub, .ch-schedule-fullauto-note { align-items: stretch; flex-direction: column; }
  .ch-schedule-row { grid-template-columns: 56px 1fr; align-items: start; }
  .ch-schedule-row-thumb { grid-row: span 3; }
  .ch-schedule-row-time { grid-column: 1; }
  .ch-schedule-row-title, .ch-schedule-row-meta, .ch-schedule-row-actions { grid-column: 2; }
  .ch-schedule-toolbar { align-items: stretch; flex-direction: column; }
  .ch-schedule-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
}



/* ============================================================
   === REDESIGN U-80 (Claude design / design 3) ============= 
   Reglas nuevas. NO eliminar las anteriores: muchos componentes
   legacy fuera del wizard siguen dependiendo de ellas.
   ============================================================ */
/* =============================================================================
   CHISPA — Pipeline visual system
   Aplica a los 9 paneles del wizard. Prefijo de clase: .chs-
   Carga DESPUÉS de tokens.css y del styles.css del proyecto.
   ========================================================================== */

/* ============================== 1. RESET / BASE ============================ */

.chs *, .chs *::before, .chs *::after { box-sizing: border-box; }
.chs {
  font-family: var(--chs-font-sans);
  font-size: var(--chs-fs-base);
  line-height: var(--chs-lh-normal);
  color: var(--chs-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.chs button { font: inherit; color: inherit; cursor: pointer; }
.chs input, .chs textarea, .chs select { font: inherit; color: inherit; }
.chs :focus { outline: none; }
.chs :focus-visible { box-shadow: var(--chs-focus); border-radius: var(--chs-r-sm); }

/* ============================== 2. WIZARD SHELL ============================ */
/* Contenedor de todo el wizard: stepper arriba, panel activo, footerbar abajo. */

.chs-wizard {
  background: var(--chs-bg-app);
  min-height: 100vh;
  display: grid;
  grid-template-rows: var(--chs-stepper-h) 1fr var(--chs-footerbar-h);
}

/* ---------- Stepper (estilo "chip" — opción 4 del prompt) ---------- */
.chs-stepper {
  display: flex;
  align-items: center;
  gap: var(--chs-s-2);
  padding: 0 var(--chs-panel-pad-x);
  border-bottom: 1px solid var(--chs-line);
  background: linear-gradient(180deg, var(--chs-bg-panel) 0%, var(--chs-bg-app) 100%);
  overflow-x: auto;
  scrollbar-width: none;
}
.chs-stepper::-webkit-scrollbar { display: none; }

.chs-stepper__brand {
  display: flex; align-items: center; gap: var(--chs-s-2);
  padding-right: var(--chs-s-5);
  margin-right: var(--chs-s-3);
  border-right: 1px solid var(--chs-line);
  height: 40px;
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-sm);
  color: var(--chs-text);
  letter-spacing: var(--chs-ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--chs-fw-semibold);
}
.chs-stepper__brand-mark {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--chs-accent);
  border-radius: var(--chs-r-xs);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 4px 10px var(--chs-accent-glow);
}

.chs-step {
  display: inline-flex;
  align-items: center;
  gap: var(--chs-s-2);
  padding: 0 14px;
  height: 36px;
  border: 1px solid var(--chs-line-strong);
  border-radius: var(--chs-r-sm);
  background: transparent;
  color: var(--chs-text-3);
  font-size: var(--chs-fs-xs);
  letter-spacing: var(--chs-ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--chs-fw-semibold);
  font-family: var(--chs-font-mono);
  white-space: nowrap;
  transition: all var(--chs-dur-2) var(--chs-ease);
  position: relative;
}
.chs-step:hover { color: var(--chs-text); border-color: var(--chs-text-4); }
.chs-step__dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  flex: none;
}
.chs-step__num { color: inherit; opacity: 0.7; }
.chs-step__label { color: var(--chs-text); opacity: 0.85; }

.chs-step[data-state="completed"] {
  color: var(--chs-text-3);
  border-color: var(--chs-line-strong);
  background: var(--chs-bg-elev);
}
.chs-step[data-state="completed"] .chs-step__dot {
  background: var(--chs-ok); border-color: var(--chs-ok);
}
.chs-step[data-state="active"] {
  color: var(--chs-accent);
  border-color: var(--chs-accent);
  background: var(--chs-bg-elev);
  box-shadow: 0 0 0 1px var(--chs-accent), 0 6px 18px var(--chs-accent-glow);
}
.chs-step[data-state="active"] .chs-step__dot {
  background: var(--chs-accent); border-color: var(--chs-accent);
  box-shadow: 0 0 0 3px var(--chs-accent-soft);
}
.chs-step[data-state="active"] .chs-step__label { color: var(--chs-text); opacity: 1; }
.chs-step[data-state="pending"] { opacity: 0.6; }
.chs-step[data-state="pending"]:hover { opacity: 1; }

/* ---------- Panel container ---------- */
.chs-panel {
  max-width: var(--chs-panel-max);
  margin: 0 auto;
  width: 100%;
  padding: var(--chs-panel-pad-y) var(--chs-panel-pad-x);
  overflow-y: auto;
}

/* Header común a TODOS los paneles (eyebrow + h2 + descripción) */
.chs-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--chs-s-6);
  margin-bottom: var(--chs-section-gap);
  padding-bottom: var(--chs-s-5);
  border-bottom: 1px solid var(--chs-line);
}
.chs-panel__head-text { min-width: 0; }
.chs-eyebrow {
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-eyebrow);
  font-weight: var(--chs-fw-semibold);
  letter-spacing: var(--chs-ls-eyebrow);
  text-transform: uppercase;
  color: var(--chs-accent);
  margin: 0 0 var(--chs-s-2) 0;
  display: inline-flex; align-items: center; gap: var(--chs-s-2);
}
.chs-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.6;
}
.chs-panel__title {
  font-size: var(--chs-fs-2xl);
  font-weight: var(--chs-fw-semibold);
  letter-spacing: var(--chs-ls-tighter);
  color: var(--chs-text);
  margin: 0 0 var(--chs-s-2) 0;
  line-height: var(--chs-lh-tight);
}
.chs-panel__desc {
  font-size: var(--chs-fs-md);
  color: var(--chs-text-3);
  max-width: 720px;
  margin: 0;
}
.chs-panel__head-aside {
  display: flex; gap: var(--chs-s-2);
  flex: none;
}

/* Footer bar (CTA principal SIEMPRE abajo a la derecha) */
.chs-footerbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--chs-s-4);
  padding: 0 var(--chs-panel-pad-x);
  background: var(--chs-bg-panel);
  border-top: 1px solid var(--chs-line);
  position: sticky;
  bottom: 0;
}
.chs-footerbar__left,
.chs-footerbar__right {
  display: flex; align-items: center; gap: var(--chs-s-3);
}
.chs-footerbar__hint {
  font-size: var(--chs-fs-sm);
  color: var(--chs-text-3);
  font-family: var(--chs-font-mono);
}

/* ============================== 3. BUTTONS ================================= */

.chs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--chs-s-2);
  padding: 0 var(--chs-density-x);
  height: 40px;
  border-radius: var(--chs-r-sm);
  border: 1px solid transparent;
  font-size: var(--chs-fs-sm);
  font-weight: var(--chs-fw-semibold);
  letter-spacing: var(--chs-ls-tight);
  white-space: nowrap;
  transition: background var(--chs-dur-1) var(--chs-ease),
              border-color var(--chs-dur-1) var(--chs-ease),
              color var(--chs-dur-1) var(--chs-ease),
              transform var(--chs-dur-1) var(--chs-ease);
  user-select: none;
}
.chs-btn:active { transform: translateY(1px); }
.chs-btn:disabled,
.chs-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none;
}
.chs-btn .chs-icon { width: 16px; height: 16px; flex: none; }

.chs-btn--primary {
  background: var(--chs-accent);
  color: var(--chs-text-on-acc);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 6px 14px var(--chs-accent-glow);
}
.chs-btn--primary:hover { background: var(--chs-accent-hover); }
.chs-btn--primary:active { background: var(--chs-accent-press); }

.chs-btn--secondary {
  background: var(--chs-bg-elev);
  color: var(--chs-text);
  border-color: var(--chs-line-strong);
}
.chs-btn--secondary:hover { border-color: var(--chs-text-4); background: var(--chs-bg-elev-2); }

.chs-btn--ghost {
  background: transparent;
  color: var(--chs-text-2);
  border-color: transparent;
}
.chs-btn--ghost:hover { background: var(--chs-bg-elev); color: var(--chs-text); }

.chs-btn--destructive {
  background: transparent;
  color: var(--chs-err);
  border-color: rgba(239,68,68,0.40);
}
.chs-btn--destructive:hover { background: var(--chs-err-soft); border-color: var(--chs-err); }

.chs-btn--lg { height: 48px; font-size: var(--chs-fs-md); padding: 0 22px; }
.chs-btn--sm { height: 32px; font-size: var(--chs-fs-xs); padding: 0 10px; }
.chs-btn--icon { width: 36px; padding: 0; }
.chs-btn--block { width: 100%; }

/* Iconbar pegada (botones agrupados) */
.chs-btn-group {
  display: inline-flex;
  background: var(--chs-bg-elev);
  border: 1px solid var(--chs-line-strong);
  border-radius: var(--chs-r-sm);
  overflow: hidden;
}
.chs-btn-group .chs-btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--chs-line);
  background: transparent;
  height: 36px;
}
.chs-btn-group .chs-btn:last-child { border-right: none; }
.chs-btn-group .chs-btn[aria-pressed="true"] {
  background: var(--chs-accent-soft);
  color: var(--chs-accent);
}

/* ============================== 4. CARDS ================================== */

.chs-card {
  background: var(--chs-bg-elev);
  border: 1px solid var(--chs-line-strong);
  border-radius: var(--chs-r-md);
  padding: var(--chs-s-4);
  transition: border-color var(--chs-dur-2) var(--chs-ease),
              background var(--chs-dur-2) var(--chs-ease),
              transform var(--chs-dur-2) var(--chs-ease);
  position: relative;
}
.chs-card--lg { border-radius: var(--chs-r-lg); padding: var(--chs-s-5); }
.chs-card--compact { padding: var(--chs-s-3); }
.chs-card--interactive { cursor: pointer; }
.chs-card--interactive:hover {
  border-color: var(--chs-text-4);
  background: var(--chs-bg-elev-2);
}
.chs-card[data-selected="true"] {
  border-color: var(--chs-accent);
  box-shadow: 0 0 0 1px var(--chs-accent) inset, 0 8px 24px var(--chs-accent-glow);
}
.chs-card[data-state="locked"] {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.chs-card[data-state="error"] {
  border-color: var(--chs-err);
  box-shadow: 0 0 0 1px var(--chs-err) inset;
}

/* ============================== 5. TABS (componente único) ================ */

.chs-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--chs-line);
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}
.chs-tabs::-webkit-scrollbar { display: none; }

.chs-tab {
  appearance: none;
  background: transparent;
  border: none;
  padding: 12px 16px;
  font-size: var(--chs-fs-sm);
  font-weight: var(--chs-fw-medium);
  color: var(--chs-text-3);
  white-space: nowrap;
  position: relative;
  transition: color var(--chs-dur-1) var(--chs-ease);
  display: inline-flex; align-items: center; gap: var(--chs-s-2);
}
.chs-tab::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 1px 1px 0 0;
  transition: background var(--chs-dur-2) var(--chs-ease);
}
.chs-tab:hover { color: var(--chs-text-2); }
.chs-tab[aria-selected="true"] { color: var(--chs-text); }
.chs-tab[aria-selected="true"]::after { background: var(--chs-accent); }
.chs-tab__count {
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-micro);
  background: var(--chs-bg-elev);
  border: 1px solid var(--chs-line);
  padding: 1px 6px;
  border-radius: var(--chs-r-pill);
  color: var(--chs-text-3);
}
.chs-tab[aria-selected="true"] .chs-tab__count {
  background: var(--chs-accent-soft);
  border-color: var(--chs-line-accent);
  color: var(--chs-accent);
}

/* Variante "pill" para clip-tabs con flechas */
.chs-cliptabs {
  display: flex; align-items: center; gap: var(--chs-s-2);
}
.chs-cliptabs__list {
  display: flex; gap: var(--chs-s-1);
  background: var(--chs-bg-input);
  border: 1px solid var(--chs-line);
  padding: 4px;
  border-radius: var(--chs-r-md);
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.chs-cliptabs__list::-webkit-scrollbar { display: none; }
.chs-cliptab {
  appearance: none; border: none; background: transparent;
  padding: 6px 12px;
  border-radius: var(--chs-r-sm);
  color: var(--chs-text-3);
  font-size: var(--chs-fs-xs);
  font-family: var(--chs-font-mono);
  font-weight: var(--chs-fw-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--chs-dur-1) var(--chs-ease);
}
.chs-cliptab:hover { color: var(--chs-text); background: var(--chs-bg-elev); }
.chs-cliptab[aria-selected="true"] {
  background: var(--chs-accent);
  color: var(--chs-text-on-acc);
  box-shadow: 0 2px 8px var(--chs-accent-glow);
}
.chs-cliptab__num { opacity: 0.7; }
.chs-cliptab[aria-selected="true"] .chs-cliptab__num { opacity: 1; }

/* ============================== 6. FORM CONTROLS ========================== */

.chs-field { display: flex; flex-direction: column; gap: 6px; }
.chs-label {
  font-size: var(--chs-fs-xs);
  font-weight: var(--chs-fw-semibold);
  color: var(--chs-text-2);
  letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: space-between;
}
.chs-label__counter {
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-micro);
  color: var(--chs-text-4);
  font-weight: var(--chs-fw-regular);
}
.chs-hint {
  font-size: var(--chs-fs-xs);
  color: var(--chs-text-3);
  line-height: var(--chs-lh-snug);
}
.chs-hint--err { color: var(--chs-err); }

.chs-input,
.chs-textarea,
.chs-select {
  width: 100%;
  background: var(--chs-bg-input);
  border: 1px solid var(--chs-line-strong);
  border-radius: var(--chs-r-sm);
  padding: var(--chs-density-y) var(--chs-density-x);
  color: var(--chs-text);
  font-size: var(--chs-fs-sm);
  transition: border-color var(--chs-dur-1) var(--chs-ease),
              box-shadow var(--chs-dur-1) var(--chs-ease),
              background var(--chs-dur-1) var(--chs-ease);
}
.chs-input::placeholder,
.chs-textarea::placeholder { color: var(--chs-text-4); }
.chs-input:hover,
.chs-textarea:hover,
.chs-select:hover { border-color: var(--chs-text-4); }
.chs-input:focus,
.chs-textarea:focus,
.chs-select:focus {
  border-color: var(--chs-accent);
  box-shadow: 0 0 0 3px var(--chs-accent-soft);
}
.chs-textarea { min-height: 96px; resize: vertical; line-height: var(--chs-lh-snug); }
.chs-textarea--code { font-family: var(--chs-font-mono); font-size: var(--chs-fs-xs); }

/* Tabs internos para "URL / MP4" tipo segmented */
.chs-segment {
  display: inline-flex;
  background: var(--chs-bg-input);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-sm);
  padding: 3px;
  gap: 2px;
}
.chs-segment__btn {
  appearance: none; border: none; background: transparent;
  padding: 8px 14px;
  font-size: var(--chs-fs-xs);
  font-weight: var(--chs-fw-semibold);
  color: var(--chs-text-3);
  border-radius: var(--chs-r-xs);
  display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--chs-dur-1) var(--chs-ease);
  letter-spacing: 0.02em;
}
.chs-segment__btn:hover { color: var(--chs-text); }
.chs-segment__btn[aria-selected="true"] {
  background: var(--chs-bg-elev-2);
  color: var(--chs-text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}

/* Dropzone */
.chs-dropzone {
  border: 1.5px dashed var(--chs-line-strong);
  border-radius: var(--chs-r-md);
  padding: 48px 24px;
  text-align: center;
  background: var(--chs-bg-input);
  transition: border-color var(--chs-dur-2) var(--chs-ease),
              background var(--chs-dur-2) var(--chs-ease);
  display: flex; flex-direction: column; align-items: center; gap: var(--chs-s-3);
}
.chs-dropzone:hover, .chs-dropzone[data-state="hover"] {
  border-color: var(--chs-accent);
  background: var(--chs-accent-soft);
}
.chs-dropzone__icon {
  width: 48px; height: 48px;
  background: var(--chs-bg-elev);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-md);
  display: grid; place-items: center;
  color: var(--chs-text-3);
}
.chs-dropzone__title { font-size: var(--chs-fs-md); font-weight: var(--chs-fw-semibold); color: var(--chs-text); }
.chs-dropzone__hint { font-size: var(--chs-fs-xs); color: var(--chs-text-3); }

/* Slider */
.chs-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: var(--chs-bg-input);
  border-radius: var(--chs-r-pill);
  outline: none;
}
.chs-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  background: var(--chs-accent);
  border: 2px solid var(--chs-bg-app);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 6px var(--chs-accent-glow);
}
.chs-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--chs-accent);
  border: 2px solid var(--chs-bg-app);
  border-radius: 50%;
  cursor: grab;
}

/* Color swatch */
.chs-color {
  width: 36px; height: 36px;
  border: 1px solid var(--chs-line-strong);
  background: var(--chs-bg-input);
  border-radius: var(--chs-r-sm);
  cursor: pointer;
  padding: 3px;
}

/* Switch / toggle */
.chs-switch {
  width: 36px; height: 20px;
  background: var(--chs-bg-input);
  border: 1px solid var(--chs-line-strong);
  border-radius: var(--chs-r-pill);
  position: relative;
  cursor: pointer;
  transition: background var(--chs-dur-2) var(--chs-ease);
  flex: none;
}
.chs-switch::after {
  content: ""; position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--chs-text-3);
  border-radius: 50%;
  transition: transform var(--chs-dur-2) var(--chs-ease), background var(--chs-dur-2);
}
.chs-switch[aria-checked="true"] { background: var(--chs-accent); border-color: var(--chs-accent); }
.chs-switch[aria-checked="true"]::after { transform: translateX(16px); background: #fff; }

/* ============================== 7. BADGES / CHIPS ========================= */

.chs-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: var(--chs-fs-micro);
  font-family: var(--chs-font-mono);
  font-weight: var(--chs-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--chs-r-xs);
  background: var(--chs-bg-elev-2);
  color: var(--chs-text-2);
  border: 1px solid var(--chs-line);
}
.chs-badge--accent { background: var(--chs-accent-soft); color: var(--chs-accent); border-color: var(--chs-line-accent); }
.chs-badge--ok     { background: var(--chs-ok-soft);     color: var(--chs-ok);     border-color: rgba(16,185,129,0.30); }
.chs-badge--warn   { background: var(--chs-warn-soft);   color: var(--chs-warn);   border-color: rgba(245,158,11,0.30); }
.chs-badge--err    { background: var(--chs-err-soft);    color: var(--chs-err);    border-color: rgba(239,68,68,0.30); }
.chs-badge--info   { background: var(--chs-info-soft);   color: var(--chs-info);   border-color: rgba(251,146,60,0.30); }

.chs-badge--score {
  font-size: var(--chs-fs-xs);
  padding: 4px 8px;
  background: var(--chs-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 10px var(--chs-accent-glow);
}

/* ============================== 8. PROGRESS / SPINNERS ==================== */

.chs-progress {
  width: 100%; height: 6px;
  background: var(--chs-bg-input);
  border-radius: var(--chs-r-pill);
  overflow: hidden;
  position: relative;
}
.chs-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--chs-accent), var(--chs-accent-light));
  border-radius: inherit;
  transition: width 400ms var(--chs-ease);
}
.chs-progress--indeterminate .chs-progress__bar {
  width: 33% !important;
  animation: chs-indet 1.4s var(--chs-ease) infinite;
}
@keyframes chs-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.chs-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--chs-line-strong);
  border-top-color: var(--chs-accent);
  border-radius: 50%;
  animation: chs-spin 800ms linear infinite;
  flex: none;
}
@keyframes chs-spin { to { transform: rotate(360deg); } }

/* Skeleton */
.chs-skeleton {
  background: linear-gradient(90deg, var(--chs-bg-elev) 0%, var(--chs-bg-elev-2) 50%, var(--chs-bg-elev) 100%);
  background-size: 200% 100%;
  animation: chs-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--chs-r-sm);
}
@keyframes chs-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================== 9. SECTION & GROUP ======================== */

.chs-section { display: flex; flex-direction: column; gap: var(--chs-s-3); }
.chs-section + .chs-section { margin-top: var(--chs-section-gap); }
.chs-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--chs-s-3);
}
.chs-section__title {
  font-size: var(--chs-fs-xs);
  font-weight: var(--chs-fw-semibold);
  letter-spacing: var(--chs-ls-eyebrow);
  text-transform: uppercase;
  color: var(--chs-text-3);
  margin: 0;
  font-family: var(--chs-font-mono);
}
.chs-section__title-count { color: var(--chs-text-4); margin-left: 6px; }

/* Grid de cards genérico */
.chs-grid {
  display: grid;
  gap: var(--chs-s-3);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.chs-grid--lg  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.chs-grid--sm  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* Disclosure (details/summary unificado) */
.chs-disclosure {
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-sm);
  background: var(--chs-bg-elev);
  overflow: hidden;
}
.chs-disclosure > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex; align-items: center; gap: var(--chs-s-2);
  font-size: var(--chs-fs-sm);
  font-weight: var(--chs-fw-medium);
  color: var(--chs-text-2);
  transition: background var(--chs-dur-1);
}
.chs-disclosure > summary::-webkit-details-marker { display: none; }
.chs-disclosure > summary::before {
  content: "›";
  font-size: 16px;
  color: var(--chs-text-4);
  transition: transform var(--chs-dur-2) var(--chs-ease);
  display: inline-block;
}
.chs-disclosure[open] > summary::before { transform: rotate(90deg); color: var(--chs-accent); }
.chs-disclosure > summary:hover { background: var(--chs-bg-elev-2); }
.chs-disclosure__body {
  padding: 12px;
  border-top: 1px solid var(--chs-line);
  display: flex; flex-direction: column; gap: var(--chs-s-3);
}

/* ============================== 10. PREVIEW PANE 9:16 ==================== */
/* Tamaño CONSTANTE en panel 5 (subs/títulos/miniatura) y panel 6. */

.chs-preview {
  width: var(--chs-preview-w);
  height: var(--chs-preview-h);
  background: #000;
  border-radius: var(--chs-r-md);
  border: 1px solid var(--chs-line-strong);
  box-shadow: var(--chs-shadow-pop);
  position: relative;
  overflow: hidden;
  flex: none;
}
.chs-preview__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.chs-preview__title-overlay {
  position: absolute; left: 12px; right: 12px; top: 24px;
  text-align: center;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.chs-preview__subs-overlay {
  position: absolute; left: 16px; right: 16px; bottom: 110px;
  text-align: center;
  font-weight: 800;
  color: #fff;
  font-size: 28px;
  line-height: 1.1;
  text-shadow: 0 2px 0 #000, 0 4px 12px rgba(0,0,0,0.7);
}
.chs-preview__watermark {
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--chs-font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em;
  background: rgba(0,0,0,0.4);
  padding: 3px 6px;
  border-radius: var(--chs-r-xs);
}
.chs-preview__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  display: grid; place-items: center;
  color: #fff;
  backdrop-filter: blur(10px);
}
.chs-preview__timeline {
  position: absolute; left: 12px; right: 12px; bottom: 16px;
  height: 26px;
  background: rgba(0,0,0,0.55);
  border-radius: var(--chs-r-pill);
  padding: 0 12px;
  display: flex; align-items: center; gap: 10px;
  color: #fff;
  font-family: var(--chs-font-mono);
  font-size: 11px;
}
.chs-preview__timeline-bar {
  flex: 1; height: 3px; background: rgba(255,255,255,0.25); border-radius: var(--chs-r-pill);
  position: relative;
}
.chs-preview__timeline-bar::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 35%; background: var(--chs-accent); border-radius: inherit;
}

/* ============================== 11. TIMELINE (multi-track) =============== */

.chs-timeline {
  background: var(--chs-bg-track);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-md);
  overflow: hidden;
}
.chs-timeline__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--chs-line);
  background: var(--chs-bg-elev);
  gap: var(--chs-s-3);
}
.chs-timeline__toolbar-left,
.chs-timeline__toolbar-right { display: flex; gap: var(--chs-s-2); align-items: center; }
.chs-timeline__time {
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-xs);
  color: var(--chs-text-3);
  letter-spacing: 0.04em;
}
.chs-timeline__ruler {
  height: 22px;
  border-bottom: 1px solid var(--chs-line);
  position: relative;
  background:
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent calc(10% - 1px),
      var(--chs-line-strong) calc(10% - 1px),
      var(--chs-line-strong) 10%);
}
.chs-timeline__ruler-tick {
  position: absolute; bottom: 4px;
  font-family: var(--chs-font-mono);
  font-size: 10px;
  color: var(--chs-text-4);
  transform: translateX(2px);
}
.chs-timeline__tracks {
  display: flex; flex-direction: column;
  position: relative;
}
.chs-track {
  height: 56px;
  border-bottom: 1px solid var(--chs-line);
  display: flex; align-items: stretch;
  background: var(--chs-bg-track);
}
.chs-track:last-child { border-bottom: none; }
.chs-track__label {
  width: 110px;
  flex: none;
  background: var(--chs-bg-elev);
  border-right: 1px solid var(--chs-line);
  display: flex; align-items: center; padding: 0 12px;
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--chs-ls-eyebrow);
  color: var(--chs-text-3);
  font-weight: var(--chs-fw-semibold);
  gap: 6px;
}
.chs-track__lane {
  flex: 1;
  position: relative;
  padding: 6px;
  display: flex; align-items: center; gap: 2px;
  overflow: hidden;
}
.chs-track__thumb {
  height: 100%;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-xs);
  flex: 1;
  min-width: 24px;
  background-size: cover;
  background-position: center;
}
.chs-block {
  height: 100%;
  border-radius: var(--chs-r-xs);
  border: 1px solid var(--chs-line-accent);
  background: var(--chs-accent-soft);
  color: var(--chs-text);
  padding: 4px 8px;
  font-size: var(--chs-fs-micro);
  font-family: var(--chs-font-mono);
  font-weight: var(--chs-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex; align-items: center;
  position: relative;
  cursor: grab;
}
.chs-block--accent { background: rgba(234,88,12,0.18);   border-color: rgba(234,88,12,0.55);   color: var(--chs-frame-primary); }
.chs-block--accent-light { background: rgba(251,146,60,0.18); border-color: rgba(251,146,60,0.55); color: var(--chs-frame-secondary); }
.chs-block--success { background: var(--chs-ok-soft); border-color: rgba(16,185,129,0.55); color: var(--chs-ok); }
.chs-block::before, .chs-block::after {
  content: ""; position: absolute; top: 6px; bottom: 6px; width: 3px;
  background: currentColor; opacity: 0.6; border-radius: 2px;
}
.chs-block::before { left: 3px; }
.chs-block::after  { right: 3px; }

.chs-playhead {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: var(--chs-err);
  pointer-events: none;
  z-index: 5;
}
.chs-playhead::before {
  content: ""; position: absolute; top: -3px; left: -5px;
  border: 6px solid transparent;
  border-top-color: var(--chs-err);
  border-bottom: 0;
}

/* ============================== 12. ENCUADRE STAGE ======================= */
/* Vídeo horizontal con marco 9:16 movible y marco secundario en paleta Chispa. */

.chs-encuadre {
  background: var(--chs-bg-track);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-md);
  padding: 16px;
  display: flex; align-items: center; justify-content: center;
}
.chs-encuadre__stage {
  position: relative;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0b1220 0%, #1e293b 100%);
  border-radius: var(--chs-r-sm);
  overflow: hidden;
  border: 1px solid var(--chs-line);
}
.chs-encuadre__frame {
  position: absolute;
  border: 2px solid var(--chs-frame-primary);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 24px rgba(234,88,12,0.35);
  cursor: move;
  background: rgba(234,88,12,0.04);
}
.chs-encuadre__frame--accent-light {
  border-color: var(--chs-frame-secondary);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 24px rgba(251,146,60,0.35);
  background: rgba(251,146,60,0.04);
}
.chs-encuadre__frame-label {
  position: absolute; top: -22px; left: 0;
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-micro);
  color: currentColor;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--chs-fw-bold);
}

/* ============================== 13. NOTIFICATION BANNER ================= */

.chs-notice {
  display: flex; gap: var(--chs-s-3); align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-md);
  background: var(--chs-bg-elev);
}
.chs-notice--accent { border-color: var(--chs-line-accent); background: var(--chs-accent-soft); }
.chs-notice--ok     { border-color: rgba(16,185,129,0.35); background: var(--chs-ok-soft); }
.chs-notice--err    { border-color: rgba(239,68,68,0.35);  background: var(--chs-err-soft); }
.chs-notice__icon { flex: none; color: var(--chs-accent); }
.chs-notice--ok  .chs-notice__icon { color: var(--chs-ok); }
.chs-notice--err .chs-notice__icon { color: var(--chs-err); }
.chs-notice__title { font-weight: var(--chs-fw-semibold); margin: 0 0 2px 0; font-size: var(--chs-fs-sm); }
.chs-notice__body  { font-size: var(--chs-fs-xs); color: var(--chs-text-3); margin: 0; }

/* ============================== 14. EDITOR LAYOUT (Panel 5) ============= */

.chs-editor {
  display: grid;
  grid-template-columns: var(--chs-preview-w) 1fr;
  gap: var(--chs-s-6);
  align-items: start;
}
.chs-editor__pane {
  background: var(--chs-bg-panel);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-lg);
  overflow: hidden;
  min-width: 0;
}
.chs-editor__pane-body {
  padding: var(--chs-s-5);
  display: flex; flex-direction: column; gap: var(--chs-s-4);
  max-height: calc(var(--chs-preview-h) + 2px);
  overflow-y: auto;
}

/* Style chips (subtitle styles) */
.chs-style-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--chs-s-2);
}
.chs-style-chip {
  appearance: none;
  border: 1px solid var(--chs-line-strong);
  background: var(--chs-bg-elev);
  border-radius: var(--chs-r-sm);
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all var(--chs-dur-1) var(--chs-ease);
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
}
.chs-style-chip:hover { border-color: var(--chs-text-4); }
.chs-style-chip[aria-pressed="true"] {
  border-color: var(--chs-accent);
  box-shadow: 0 0 0 1px var(--chs-accent), 0 4px 12px var(--chs-accent-glow);
  background: var(--chs-bg-elev-2);
}
.chs-style-chip__sample {
  font-weight: 800;
  font-size: 16px;
  padding: 12px 4px;
  border-radius: var(--chs-r-xs);
  background: #000;
  color: #fff;
}
.chs-style-chip__name {
  font-size: var(--chs-fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--chs-text-3);
  font-family: var(--chs-font-mono);
  font-weight: var(--chs-fw-semibold);
}

/* Phrase list (subtitles) */
.chs-phrase {
  background: var(--chs-bg-elev);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-sm);
}
.chs-phrase__head {
  display: flex; align-items: center; gap: var(--chs-s-2);
  padding: 10px 12px;
  cursor: pointer;
  font-size: var(--chs-fs-sm);
}
.chs-phrase__time {
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-micro);
  color: var(--chs-text-4);
  flex: none;
}
.chs-phrase__text {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--chs-text-2);
}
.chs-phrase__body {
  border-top: 1px solid var(--chs-line);
  padding: 12px;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* Panel para títulos */
.chs-platform-tabs {
  display: flex; gap: var(--chs-s-2);
}
.chs-platform-tab {
  appearance: none; border: 1px solid var(--chs-line-strong);
  background: var(--chs-bg-elev);
  padding: 8px 14px;
  border-radius: var(--chs-r-sm);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--chs-fs-xs);
  font-weight: var(--chs-fw-semibold);
  color: var(--chs-text-2);
  cursor: pointer;
  transition: all var(--chs-dur-1) var(--chs-ease);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--chs-font-mono);
}
.chs-platform-tab[data-platform="yt"]:hover { border-color: #FF0000; color: #FF4444; }
.chs-platform-tab[data-platform="tt"]:hover { border-color: #FE2C55; color: #FE2C55; }
.chs-platform-tab[data-platform="ig"]:hover { border-color: #E1306C; color: #E1306C; }
.chs-platform-tab[aria-selected="true"] {
  border-color: var(--chs-accent);
  color: var(--chs-text);
  background: var(--chs-accent-soft);
}
.chs-platform-tab__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Title variant cards */
.chs-title-card {
  background: var(--chs-bg-elev);
  border: 1px solid var(--chs-line-strong);
  border-radius: var(--chs-r-sm);
  padding: 12px 14px;
  display: flex; gap: var(--chs-s-3); align-items: flex-start;
  cursor: pointer;
  transition: all var(--chs-dur-1) var(--chs-ease);
}
.chs-title-card:hover { border-color: var(--chs-text-4); background: var(--chs-bg-elev-2); }
.chs-title-card[data-selected="true"] {
  border-color: var(--chs-accent);
  box-shadow: 0 0 0 1px var(--chs-accent);
  background: var(--chs-accent-soft);
}
.chs-title-card__num {
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-xs);
  color: var(--chs-text-4);
  flex: none; width: 22px;
  font-weight: var(--chs-fw-bold);
}
.chs-title-card[data-selected="true"] .chs-title-card__num { color: var(--chs-accent); }
.chs-title-card__text { font-size: var(--chs-fs-sm); line-height: var(--chs-lh-snug); color: var(--chs-text); flex: 1; }

/* ============================== 15. SEGMENT CARDS (Panel 1) ============== */

.chs-segment-card {
  background: var(--chs-bg-elev);
  border: 1px solid var(--chs-line-strong);
  border-radius: var(--chs-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: all var(--chs-dur-2) var(--chs-ease);
}
.chs-segment-card:hover { border-color: var(--chs-text-4); transform: translateY(-2px); }
.chs-segment-card[data-selected="true"] {
  border-color: var(--chs-accent);
  box-shadow: 0 0 0 1px var(--chs-accent), 0 12px 24px rgba(0,0,0,0.5);
}
.chs-segment-card__thumb {
  aspect-ratio: 9/16;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  position: relative;
  overflow: hidden;
}
.chs-segment-card__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
}
.chs-segment-card__score { position: absolute; top: 8px; right: 8px; z-index: 2; }
.chs-segment-card__check {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 22px; height: 22px;
  border-radius: var(--chs-r-xs);
  border: 1.5px solid rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.4);
  display: grid; place-items: center;
  color: transparent;
}
.chs-segment-card[data-selected="true"] .chs-segment-card__check {
  background: var(--chs-accent); border-color: var(--chs-accent); color: #fff;
}
.chs-segment-card__time {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  font-family: var(--chs-font-mono);
  font-size: 10px;
  background: rgba(0,0,0,0.7);
  padding: 2px 6px;
  border-radius: var(--chs-r-xs);
  color: #fff;
}
.chs-segment-card__body {
  padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.chs-segment-card__title {
  font-size: var(--chs-fs-sm);
  font-weight: var(--chs-fw-semibold);
  color: var(--chs-text);
  line-height: var(--chs-lh-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mini-timeline en header de Panel 1 */
.chs-mini-tl {
  height: 56px;
  background: var(--chs-bg-track);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-md);
  position: relative;
  overflow: hidden;
  padding: 8px 12px;
  display: flex; align-items: center;
}
.chs-mini-tl__bar {
  position: relative;
  flex: 1;
  height: 12px;
  background: var(--chs-bg-input);
  border-radius: var(--chs-r-xs);
}
.chs-mini-tl__seg {
  position: absolute; top: 0; bottom: 0;
  background: var(--chs-accent-soft);
  border: 1px solid var(--chs-accent);
  border-radius: var(--chs-r-xs);
}
.chs-mini-tl__time {
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-micro);
  color: var(--chs-text-4);
  margin: 0 12px;
}

/* ============================== 16. RECENTS LIST (Panel 0) ============== */

.chs-recent {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: var(--chs-s-3);
  align-items: center;
  padding: 8px;
  background: var(--chs-bg-elev);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-sm);
  transition: border-color var(--chs-dur-1);
  cursor: pointer;
}
.chs-recent:hover { border-color: var(--chs-text-4); }
.chs-recent__thumb {
  width: 88px; height: 50px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border-radius: var(--chs-r-xs);
}
.chs-recent__title {
  font-size: var(--chs-fs-sm);
  font-weight: var(--chs-fw-semibold);
  color: var(--chs-text);
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chs-recent__meta {
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-micro);
  color: var(--chs-text-4);
  margin: 2px 0 0 0;
}

/* ============================== 17. CLIP PROGRESS ROW (Panel 3) ========= */

.chs-cliprow {
  background: var(--chs-bg-elev);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-md);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--chs-s-4);
  align-items: center;
}
.chs-cliprow__thumb {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border-radius: var(--chs-r-sm);
  border: 1px solid var(--chs-line);
}
.chs-cliprow__title {
  font-size: var(--chs-fs-sm);
  font-weight: var(--chs-fw-semibold);
  margin: 0 0 6px 0;
  color: var(--chs-text);
}
.chs-cliprow__stage {
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-micro);
  color: var(--chs-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px 0;
  display: flex; align-items: center; gap: 8px;
}
.chs-cliprow__stage-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.chs-cliprow__progress { width: 100%; }
.chs-cliprow__action { display: flex; gap: var(--chs-s-2); }

/* ============================== 18. PUBLISH (Panel 6) =================== */

.chs-pub-grid {
  display: grid;
  grid-template-columns: var(--chs-preview-w) 1fr;
  gap: var(--chs-s-6);
  align-items: start;
}
.chs-pub-actions {
  display: grid;
  gap: var(--chs-s-4);
}
.chs-pub-block {
  background: var(--chs-bg-panel);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-md);
  padding: var(--chs-s-4);
  display: flex; flex-direction: column; gap: var(--chs-s-3);
}
.chs-pub-block--download {
  border-color: rgba(234,88,12,0.40);
  background: linear-gradient(180deg, rgba(234,88,12,0.06), transparent);
}
.chs-pub-block__title {
  font-size: var(--chs-fs-xs);
  font-weight: var(--chs-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--chs-ls-eyebrow);
  color: var(--chs-text-3);
  font-family: var(--chs-font-mono);
  margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.chs-pub-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--chs-s-2);
}
.chs-pub-buttons--3 { grid-template-columns: repeat(3, 1fr); }

.chs-pub-titlerow {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--chs-s-3);
  align-items: center;
  padding: 10px 12px;
  background: var(--chs-bg-elev);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-sm);
}
.chs-pub-titlerow__platform {
  font-family: var(--chs-font-mono);
  font-size: var(--chs-fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--chs-fw-semibold);
  color: var(--chs-text-3);
  display: flex; align-items: center; gap: 6px;
}
.chs-pub-titlerow__text {
  font-size: var(--chs-fs-sm);
  color: var(--chs-text);
  margin: 0;
}

/* ============================== 18.5 GATING / PLANS =====================
   Patrón A "visible pero locked", Patrón C "upsell inline", badge de plan.
   Aplica a chips, cards (modo de encuadre), platform tabs, botones de publicar.
======================================================================== */

/* Badge de plan en esquina superior derecha (sobre cualquier control) */
.chs-plan-badge {
  position: absolute;
  top: 6px; right: 6px;
  font-family: var(--chs-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
  background: rgba(15, 23, 42, 0.78);
  pointer-events: none;
  line-height: 1.2;
}
.chs-plan-badge[data-plan="creator"] { color: #EA580C; }
.chs-plan-badge[data-plan="pro"]     { color: var(--chs-accent-light); }
.chs-plan-badge[data-plan="studio"]  { color: #F59E0B; }

/* Estado locked aplicable a cards, chips y botones */
.chs-locked {
  position: relative;
  opacity: 0.55;
  cursor: not-allowed !important;
  filter: saturate(0.7);
}
.chs-locked:hover { opacity: 0.7; transform: none !important; }

/* Banner upsell inline (Patrón C) */
.chs-upsell {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(234,88,12,0.35);
  background: linear-gradient(90deg, rgba(234,88,12,0.10), rgba(234,88,12,0.02));
  border-radius: var(--chs-r-md);
  margin-bottom: 16px;
}
.chs-upsell__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(234,88,12,0.15);
  display: grid; place-items: center;
  color: var(--chs-accent);
  flex: none;
}
.chs-upsell__body { flex: 1; min-width: 0; }
.chs-upsell__title { font-size: 13px; font-weight: 600; color: var(--chs-text); margin: 0 0 2px; }
.chs-upsell__desc  { font-size: 12px; color: var(--chs-text-2); margin: 0; }
.chs-upsell__close {
  background: none; border: none; color: var(--chs-text-3);
  cursor: pointer; padding: 4px; border-radius: 4px;
  font-size: 18px; line-height: 1;
}
.chs-upsell__close:hover { color: var(--chs-text); background: rgba(255,255,255,0.05); }

/* Banner cuota agotada (Patrón C variante error) */
.chs-quota-banner {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(90deg, rgba(239,68,68,0.10), rgba(239,68,68,0.02));
}
.chs-quota-banner .chs-upsell__icon {
  background: rgba(239,68,68,0.15);
  color: var(--chs-err);
}

/* Plan selector en stepper (header) — solo demo */
.chs-plan-selector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  background: var(--chs-bg-elev-2);
  border: 1px solid var(--chs-line);
  border-radius: 999px;
  font-family: var(--chs-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chs-plan-selector__btn {
  background: none;
  border: none;
  color: var(--chs-text-3);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.chs-plan-selector__btn[data-active="true"] {
  color: var(--chs-text);
  background: var(--chs-bg-elev-3, #1a2438);
  box-shadow: 0 0 0 1px var(--chs-line-strong);
}
.chs-plan-selector__btn[data-plan="creator"][data-active="true"] { color: #EA580C; }
.chs-plan-selector__btn[data-plan="pro"][data-active="true"]     { color: var(--chs-accent-light); }
.chs-plan-selector__btn[data-plan="studio"][data-active="true"]  { color: #F59E0B; }
.chs-plan-selector__btn[data-plan="operator"][data-active="true"] {
  color: #fff; background: #000;
}

/* Header plan badge (siempre visible junto al avatar) */
.chs-current-plan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--chs-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: rgba(15, 23, 42, 0.6);
  cursor: pointer;
}
.chs-current-plan[data-plan="free"]     { color: #9CA3AF; }
.chs-current-plan[data-plan="creator"]  { color: #EA580C; }
.chs-current-plan[data-plan="pro"]      { color: var(--chs-accent-light); }
.chs-current-plan[data-plan="studio"]   { color: #F59E0B; }
.chs-current-plan[data-plan="operator"] { color: #fff; background: #000; border-color: #000; }
.chs-current-plan__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Modal de upgrade (overlay genérico, demo) */
.chs-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 9000;
  animation: chs-fade 180ms ease;
}
@keyframes chs-fade { from { opacity: 0 } to { opacity: 1 } }
.chs-modal {
  width: min(440px, 92vw);
  background: var(--chs-bg-card);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r-lg);
  padding: 28px;
  box-shadow: var(--chs-shadow-pop);
}
.chs-modal__eyebrow {
  font-family: var(--chs-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--chs-accent);
  margin: 0 0 8px;
}
.chs-modal__title { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--chs-text); }
.chs-modal__desc  { font-size: 13px; color: var(--chs-text-2); margin: 0 0 20px; line-height: 1.55; }
.chs-modal__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ============================== 19. RESPONSIVE ========================== */

@media (max-width: 1280px) {
  .chs-editor { grid-template-columns: 1fr; }
  .chs-editor__preview { margin: 0 auto; }
  .chs-pub-grid { grid-template-columns: 1fr; }
  .chs-pub-grid__preview { margin: 0 auto; }
}
@media (max-width: 1100px) {
  :root { --chs-panel-pad-x: 20px; }
  .chs-stepper__brand { display: none; }
}
@media (max-width: 760px) {
  :root { --chs-preview-w: 320px; --chs-preview-h: 569px; }
  .chs-pub-buttons { grid-template-columns: 1fr 1fr; }
}


/* === REDESIGN U-80 TOKENS === */
/* =============================================================================
   CHISPA — Design tokens (suplemento al global del proyecto)
   Prefijo: --chs-*  |  No sobrescribe variables existentes.
   ========================================================================== */

:root {
  /* ---------- Color (extiende el sistema actual) ---------------------- */
  --chs-accent:        #EA580C;        /* = --accent */
  --chs-accent-hover:  #C2410C;
  --chs-accent-press:  #9A3412;
  --chs-accent-light:  #FB923C;
  --chs-accent-soft:   rgba(234,88,12,0.12);
  --chs-accent-glow:   rgba(234,88,12,0.32);

  --chs-bg-app:        #0A0F1C;        /* fondo más profundo que --bg-card */
  --chs-bg-panel:      #0F172A;        /* = --bg-card */
  --chs-bg-elev:       #131C30;        /* card sobre panel */
  --chs-bg-elev-2:     #19243C;        /* card sobre card */
  --chs-bg-input:      #0B1220;        /* = --bg-input */
  --chs-bg-track:      #060A14;        /* timeline / barras */

  --chs-line:          rgba(148,163,184,0.10);
  --chs-line-strong:   rgba(148,163,184,0.18);
  --chs-line-accent:   rgba(234,88,12,0.45);

  --chs-text:          #F1F5F9;
  --chs-text-2:        #CBD5E1;
  --chs-text-3:        #94A3B8;
  --chs-text-4:        #64748B;
  --chs-text-on-acc:   #FFFFFF;

  --chs-ok:            #10B981;
  --chs-ok-soft:       rgba(16,185,129,0.12);
  --chs-warn:          #F59E0B;
  --chs-warn-soft:     rgba(245,158,11,0.12);
  --chs-err:           #EF4444;
  --chs-err-soft:      rgba(239,68,68,0.14);
  --chs-info:          #FB923C;
  --chs-info-soft:     rgba(251,146,60,0.12);

  --chs-frame-primary:   #EA580C;      /* encuadre single */
  --chs-frame-secondary: #FB923C;      /* encuadre secundario */

  /* ---------- Tipografía --------------------------------------------- */
  --chs-font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --chs-font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --chs-fs-eyebrow:    11px;
  --chs-fs-micro:      11px;
  --chs-fs-xs:         12px;
  --chs-fs-sm:         13px;
  --chs-fs-base:       14px;
  --chs-fs-md:         15px;
  --chs-fs-lg:         18px;
  --chs-fs-xl:         22px;
  --chs-fs-2xl:        28px;

  --chs-lh-tight:      1.2;
  --chs-lh-snug:       1.4;
  --chs-lh-normal:     1.55;

  --chs-ls-eyebrow:    0.14em;
  --chs-ls-tight:      -0.01em;
  --chs-ls-tighter:    -0.02em;

  --chs-fw-regular:    400;
  --chs-fw-medium:     500;
  --chs-fw-semibold:   600;
  --chs-fw-bold:       700;

  /* ---------- Spacing (rejilla 4px) ---------------------------------- */
  --chs-s-1:   4px;
  --chs-s-2:   8px;
  --chs-s-3:  12px;
  --chs-s-4:  16px;
  --chs-s-5:  20px;
  --chs-s-6:  24px;
  --chs-s-7:  32px;
  --chs-s-8:  40px;
  --chs-s-9:  56px;

  /* ---------- Radii --------------------------------------------------- */
  --chs-r-xs:   4px;
  --chs-r-sm:   6px;     /* = --radius-sm */
  --chs-r-md:  10px;     /* = --radius-md */
  --chs-r-lg:  14px;     /* = --radius-lg */
  --chs-r-xl:  18px;
  --chs-r-pill: 999px;

  /* ---------- Shadows ------------------------------------------------- */
  --chs-shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.30);
  --chs-shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 16px rgba(0,0,0,0.36);
  --chs-shadow-pop: 0 12px 32px rgba(0,0,0,0.50), 0 2px 4px rgba(0,0,0,0.40);
  --chs-shadow-accent: 0 0 0 1px var(--chs-accent), 0 0 0 4px var(--chs-accent-soft);
  --chs-focus: 0 0 0 2px var(--chs-bg-app), 0 0 0 4px var(--chs-accent);

  /* ---------- Motion -------------------------------------------------- */
  --chs-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --chs-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --chs-dur-1:       120ms;
  --chs-dur-2:       200ms;
  --chs-dur-3:       320ms;

  /* ---------- Layout -------------------------------------------------- */
  --chs-panel-max:        1480px;
  --chs-panel-pad-x:      32px;
  --chs-panel-pad-y:      28px;
  --chs-panel-gap:        24px;
  --chs-section-gap:      20px;

  --chs-header-h:         64px;
  --chs-stepper-h:        72px;
  --chs-footerbar-h:      72px;

  /* Preview 9:16 — CONSTANTE en panel 5 (todas las sub-tabs) y panel 6 */
  --chs-preview-w:        420px;
  --chs-preview-h:        747px;

  /* Densidad (la sobrescribe el tweak `density`) */
  --chs-density-y:        14px;   /* padding vertical de inputs/botones */
  --chs-density-x:        14px;
}

/* Densidad compact (para sobrescribir vía Tweaks) */
[data-chs-density="compact"] {
  --chs-density-y: 10px;
  --chs-density-x: 12px;
  --chs-panel-pad-y: 20px;
  --chs-section-gap: 16px;
}
[data-chs-density="comfortable"] {
  --chs-density-y: 16px;
  --chs-density-x: 18px;
  --chs-panel-pad-y: 36px;
  --chs-section-gap: 24px;
}


/* ============================================================
   === U-80 ITERACIÓN 2 (legacy pipeline · operador 2026-05-07) =
   Aplica visual del rediseño Claude design 3 al pipeline legacy
   sin tocar el flujo de handlers. Reglas scopeadas a clases
   legacy (.g32-*) — no afectan a otras vistas.
   ============================================================ */

/* Fix 1 — Quitar fondo "azul" propio de los paneles (heredan app bg). */
#g32-pipeline-card { background: var(--chs-bg-app, #0A0F1C); }
#g32-pipeline-card .g32-panel { background: transparent; }

/* Fix 2 — Prompt cards (panel 0.7): icono inline SVG al lado del título,
   SIN caja envolvente del icono. Operador 2026-05-07 ITER 3. */
#g32-pipeline-card .prompt-card {
  background: var(--bg-card, #18181b);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#g32-pipeline-card .prompt-card:hover {
  border-color: var(--border-strong, rgba(255,255,255,0.18));
  background: var(--bg-card-hover, #1f1f23);
}
#g32-pipeline-card .prompt-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
#g32-pipeline-card .prompt-card-svg {
  color: var(--text-secondary, #b4b7c2);
  flex-shrink: 0;
  display: block;
}
#g32-pipeline-card .prompt-card .prompt-card-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
}
#g32-pipeline-card .prompt-card .prompt-card-desc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-muted);
  margin: 0;
}
#g32-pipeline-card .prompt-card.selected,
#g32-pipeline-card .prompt-card[aria-checked="true"] {
  border-color: var(--accent, #EA580C) !important;
  background: linear-gradient(180deg, var(--accent-dim, rgba(234,88,12,0.14)) 0%, var(--bg-card, #18181b) 100%) !important;
  box-shadow: 0 0 0 1px var(--accent, #EA580C) inset, 0 8px 24px var(--accent-glow, rgba(234,88,12,0.26));
}
#g32-pipeline-card .prompt-card.selected .prompt-card-svg {
  color: var(--accent, #EA580C) !important;
}
/* Cleanup: oculta restos del markup legacy si quedan (header/check/icon-with-box). */
#g32-pipeline-card .prompt-card .prompt-card-header,
#g32-pipeline-card .prompt-card .prompt-card-check,
#g32-pipeline-card .prompt-card .prompt-card-icon {
  display: none !important;
}

/* Fix 3 — Mode cards (panel 2 Vídeo): icono SVG visible, activo naranja. */
#g32-pipeline-card .g32-mode-card .u32-mode-icon { color: var(--chs-text-2, #CBD5E1); display: inline-flex; align-items: center; }
#g32-pipeline-card .g32-mode-card .u32-mode-icon svg { display: block; color: inherit; width: 22px; height: 22px; }
#g32-pipeline-card .g32-mode-card.is-selected,
#g32-pipeline-card .g32-mode-card[aria-checked="true"] {
  border-color: var(--chs-accent, #EA580C) !important;
  background: linear-gradient(180deg, var(--chs-accent-soft, rgba(234,88,12,0.12)) 0%, var(--bg-input) 100%) !important;
  box-shadow: 0 0 0 1px var(--chs-accent, #EA580C) inset, 0 8px 24px var(--chs-accent-glow, rgba(234,88,12,0.32));
}
#g32-pipeline-card .g32-mode-card.is-selected .u32-mode-icon,
#g32-pipeline-card .g32-mode-card.is-selected .u32-mode-icon svg,
#g32-pipeline-card .g32-mode-card[aria-checked="true"] .u32-mode-icon,
#g32-pipeline-card .g32-mode-card[aria-checked="true"] .u32-mode-icon svg {
  color: var(--chs-accent, #EA580C) !important;
}

/* Fix 4 — Encuadre stage (panel 2): centrado con bordes laterales. */
#g32-pipeline-card #g32-encuadre-editor,
#g32-pipeline-card .g32-encuadre-editor {
  margin-left: auto;
  margin-right: auto;
  max-width: 1040px;
  padding: 24px;
  background: var(--chs-bg-panel, #0F172A);
  border: 1px solid var(--chs-line, rgba(148,163,184,0.10));
  border-radius: 14px;
}

/* Fix 5 — Preview pane (panel 5 Editar): más pequeño + 3 sub-tabs MISMO TAMAÑO.
   Operador 2026-05-07: Subs/Títulos/Miniatura comparten dimensiones. */
#g32-pipeline-card .g32-preview-pane {
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane {
  max-width: 320px;
}
@media (min-width: 1024px) {
  #g32-pipeline-card .g32-editor-grid > .g32-preview-pane {
    flex: 0 0 320px;
  }
}

/* Fix 6 — Preview Miniatura ocupa el slot del vídeo (no panel separado).
   Cuando data-pane="thumbnail" en el shell, ocultamos los hijos del preview-pane
   (video + overlays + watermark) y reposicionamos el canvas thumbnail dentro. */
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane > .g32-preview-video,
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane > #g32-screen-title-overlay,
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane > #g32-subtitle-overlay,
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane > .g32-preview-controls {
  display: none !important;
}
/* Cuando el JS u80 mueva el canvas-wrap dentro del preview-pane: */
#g32-pipeline-card .g32-preview-pane > .g32-thumbnail-canvas-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#g32-pipeline-card .g32-preview-pane > .g32-thumbnail-canvas-wrap > canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Fix 7 — Recientes (panel 0): card compacta tipo chs-recent con paleta Chispa. */
#g32-pipeline-card .g32-recent-row,
#g32-pipeline-card #recent-workspaces-list .recent-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--chs-bg-elev, #131C30);
  border: 1px solid var(--chs-line, rgba(148,163,184,0.10));
  border-radius: 10px;
  transition: border-color .18s ease;
}
#g32-pipeline-card .g32-recent-row:hover,
#g32-pipeline-card #recent-workspaces-list .recent-item:hover {
  border-color: var(--chs-accent, #EA580C);
}

/* ============================================================
   === U-80 ITERACIÓN 3 (operador 2026-05-07) =================
   - Quitar tinte azul (slate) global → neutral dark zinc.
   - Mode cards: quitar caja del icono (era badge legacy).
   - Preview pane forzado 320px en las 3 sub-tabs.
   - Recientes full-width compactos.
   ============================================================ */

/* (A) Override de tokens chs-* a neutral dark / zinc (quita azul). */
:root {
  --chs-bg-app:   #0a0a0b;        /* era #0A0F1C slate-950 */
  --chs-bg-panel: #111114;        /* era #0F172A slate-900 */
  --chs-bg-elev:  #18181b;        /* era #131C30 slate-800 */
  --chs-bg-elev-2:#1f1f23;        /* era #19243C */
  --chs-bg-input: #0c0c0e;        /* era #0B1220 */
  --chs-bg-track: #060607;        /* era #060A14 */
  --chs-line:        rgba(255,255,255,0.08);
  --chs-line-strong: rgba(255,255,255,0.16);
  /* Neutralizar también --bg-secondary que el prompt-flow usa como bg. */
  --bg-secondary: #18181b;
}

/* (B) Mode cards (panel 2 Vídeo): eliminar caja envolvente del icono SVG.
   La CSS legacy en .u32-mode-icon (L11300) creaba 30x30 box con border + bg.
   Lo desarmamos aquí dejando solo el SVG inline. */
#g32-pipeline-card .g32-mode-card.u32-mode-card .u32-mode-icon {
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;          /* mata el "AI"/"9:16"/"BL" del ::before */
  color: var(--text-secondary) !important;
}
#g32-pipeline-card .g32-mode-card.u32-mode-card .u32-mode-icon::before {
  content: none !important;          /* desactiva pseudo-element legacy */
  display: none !important;
}
#g32-pipeline-card .g32-mode-card.u32-mode-card .u32-mode-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: inherit;
  display: block;
}
#g32-pipeline-card .g32-mode-card.u32-mode-card.is-selected .u32-mode-icon,
#g32-pipeline-card .g32-mode-card.u32-mode-card[aria-checked="true"] .u32-mode-icon {
  color: var(--accent) !important;
}
/* Caja de la mode-card activa: borde naranja + tinte naranja suave. */
#g32-pipeline-card .g32-mode-card.u32-mode-card.is-selected,
#g32-pipeline-card .g32-mode-card.u32-mode-card[aria-checked="true"] {
  border-color: var(--accent) !important;
  background: linear-gradient(180deg, var(--accent-dim) 0%, var(--bg-card) 100%) !important;
  box-shadow: 0 0 0 1px var(--accent) inset, 0 8px 24px var(--accent-glow) !important;
}

/* (C) Preview pane (panel 5 Editar): forzar 320px en LAS 3 sub-tabs.
   La regla legacy a L10728 ponía max-width 420px. */
#g32-pipeline-card .g32-preview-pane {
  max-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane {
  max-width: 320px !important;
}

/* (D) Recientes (panel 0): full-width compactos en columna, no 200-260px boxes. */
#g32-pipeline-card #recent-workspaces-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100%;
}
#g32-pipeline-card #recent-workspaces-list > div {
  flex: 1 1 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 10px 14px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}
#g32-pipeline-card #recent-workspaces-list > div:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent-dim) !important;
}

/* (E) Encuadre stage panel 2: ya tiene bordes + centrado de iter2.
   Ajuste fino: fondo más oscuro y consistente sin slate. */
#g32-pipeline-card #g32-encuadre-editor,
#g32-pipeline-card .g32-encuadre-editor {
  background: var(--bg-card, #18181b) !important;
}

/* ============================================================
   === U-80 ITER 3 (timeline panel 2 · toolbar rediseñada) =====
   Cabecera mono "TIMELINE · CLIP NN" + toolbar con play/tiempo
   y dos grupos de botones (edit / zoom) con SVG icons.
   ============================================================ */
#g32-pipeline-card .g32-enc-tl-eyebrow {
  font: 700 11px/1.2 var(--chs-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0 0 12px 0;
}
#g32-pipeline-card .g32-enc-tl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
#g32-pipeline-card .g32-enc-tl-toolbar-left,
#g32-pipeline-card .g32-enc-tl-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
#g32-pipeline-card .g32-enc-tl-time {
  font: 600 12px/1.2 var(--chs-font-mono, 'JetBrains Mono', monospace);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
#g32-pipeline-card .g32-enc-tl-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
#g32-pipeline-card .g32-enc-tl-btn-group .g32-enc-tl-iconbtn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border);
}
#g32-pipeline-card .g32-enc-tl-btn-group .g32-enc-tl-iconbtn:last-child {
  border-right: none;
}
#g32-pipeline-card .g32-enc-tl-iconbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  position: relative;
}
#g32-pipeline-card .g32-enc-tl-iconbtn:hover:not([disabled]) {
  color: var(--accent);
  background: var(--accent-dim);
}
#g32-pipeline-card .g32-enc-tl-iconbtn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
#g32-pipeline-card .g32-enc-tl-iconbtn svg {
  display: block;
  flex-shrink: 0;
}
#g32-pipeline-card .g32-enc-tl-iconbtn--zoom {
  font-family: var(--chs-font-mono, monospace);
  min-width: 38px;
  justify-content: center;
}
#g32-pipeline-card .g32-enc-tl-iconbtn--select {
  position: relative;
  cursor: pointer;
}
#g32-pipeline-card .g32-enc-tl-iconbtn--select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
/* Track labels izquierda — estilo mono. */
#g32-pipeline-card .g32-enc-tl-side-label {
  font: 700 10px/1.2 var(--chs-font-mono, monospace);
  letter-spacing: 0.10em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ============================================================
   === U-80 ITER 3 (resize editor panel 5 · operador 2026-05-07) =
   - Preview pane más pequeño (260px max).
   - Edit pane (lado derecho) flex:1 → ocupa todo el ancho restante.
   - Ergonomía: con más ancho, los controles fluyen horizontal y la
     barra "ocupa menos a lo alto".
   - Fondo neutral (sin slate-blue) en editor-shell + panes.
   ============================================================ */

/* Editor 2-col: preview izquierda fijo, editor derecha flexible. */
#g32-pipeline-card .g32-editor-grid {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  background: transparent !important;
}
#g32-pipeline-card .g32-editor-shell,
#g32-pipeline-card .g32-editor-panel,
#g32-pipeline-card .g32-editor-pane {
  background: transparent !important;
}

/* Preview más pequeño (260px en vez de 320px). */
#g32-pipeline-card .g32-preview-pane {
  max-width: 260px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane {
  max-width: 260px !important;
}

/* Editor pane (lado derecho): contenedor flex con bg neutral. */
#g32-pipeline-card .g32-editor-panel {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 14px !important;
}
#g32-pipeline-card .g32-editor-pane {
  padding: 0 !important;
}

/* Tabs del editor (Subtítulos / Títulos / Miniatura): horizontal compactas. */
#g32-pipeline-card .g32-editor-tabs {
  display: flex !important;
  gap: 4px !important;
  background: var(--bg-input) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  margin-bottom: 14px !important;
}
#g32-pipeline-card .g32-editor-tabs .g32-edit-tab {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
#g32-pipeline-card .g32-editor-tabs .g32-edit-tab:hover {
  color: var(--text-primary) !important;
  background: var(--bg-card) !important;
}
#g32-pipeline-card .g32-editor-tabs .g32-edit-tab.is-active {
  color: var(--accent) !important;
  background: var(--accent-dim) !important;
  font-weight: 600 !important;
}

/* Subtitle phrases / fields: aprovechar el ancho extra horizontal. */
#g32-pipeline-card #g32-subtitle-phrases-list,
#g32-pipeline-card .g32-screen-title-editor,
#g32-pipeline-card .g32-thumbnail-pane {
  display: grid !important;
  gap: 10px !important;
}
/* Style chips en grid auto-fit para que fluyan horizontal. */
#g32-pipeline-card #g32-subtitle-style-selector,
#g32-pipeline-card .g32-screen-title-style {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
/* Screen-title props grid horizontal. */
#g32-pipeline-card .g32-screen-title-props {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 8px !important;
}

/* Responsive: en pantallas estrechas, vuelve a 1 col. */
@media (max-width: 900px) {
  #g32-pipeline-card .g32-editor-grid {
    grid-template-columns: 1fr !important;
  }
  #g32-pipeline-card .g32-preview-pane {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   === U-80 ITER 4 (purga azul slate global · operador 2026-05-07) =
   El CSS legacy tiene 31 ocurrencias de rgba(15,23,42,...)/
   rgba(2,6,23,...) + varios literales #020617/#0f172a/#111827/
   #1f2937 que pintan el wizard en slate-blue. Aquí los anulo
   uno a uno con equivalentes neutral zinc.
   ============================================================ */

/* Stepper (u32-stepper) — antes rgba(15,23,42,0.62) slate. */
#g32-pipeline-card .u32-stepper { background: rgba(24,24,27,0.62) !important; }

/* Source pane URL input (panel 0). */
#g32-pipeline-card .u32-download-panel .g32-source-pane.is-active {
  background: rgba(24,24,27,0.6) !important;
}

/* Preprod stages (panel 0.5). */
#g32-pipeline-card .u32-preprod-panel .g32-preprod-stage {
  background: linear-gradient(180deg, rgba(24,24,27,0.72), rgba(9,9,11,0.58)) !important;
}

/* IA panel — segment cards + detect actions sticky. */
#g32-pipeline-card .u32-ia-panel .g32-segment-card {
  background: linear-gradient(180deg, rgba(24,24,27,0.76), rgba(9,9,11,0.62)) !important;
}
#g32-pipeline-card .u32-ia-panel .g32-detect-actions {
  background: rgba(24,24,27,0.94) !important;
}

/* Vídeo panel — mode card bg. */
#g32-pipeline-card .u32-video-panel { --u32-card-bg: rgba(24,24,27,0.72) !important; }
#g32-pipeline-card .u32-video-panel .g32-mode-card.u32-mode-card:hover {
  background: rgba(39,39,42,0.72) !important;
}

/* Preview panes — slate gradient → neutral zinc gradient. */
#g32-pipeline-card .g32-preview-pane {
  background: linear-gradient(180deg, #09090b, #18181b) !important;
}
#g32-pipeline-card .g32-preview-video {
  background: linear-gradient(160deg, #18181b, #1f1f23 52%, rgba(234,88,12,0.20)) !important;
}

/* Thumbnail panes (canvas, mini, pub). */
#g32-pipeline-card .g32-thumbnail-canvas-wrap,
#g32-pipeline-card .g32-thumbnail-mini,
#g32-pipeline-card .g32-pub-thumb-canvas {
  background: #09090b !important;
}
#g32-pipeline-card .g32-thumbnail-frame {
  background: linear-gradient(150deg, #18181b, #1f1f23 55%, rgba(234,88,12,0.30)) !important;
}

/* Variant preview + variants list. */
#g32-pipeline-card .g32-variant-preview {
  background: linear-gradient(160deg, #18181b, #1f1f23 45%, rgba(234,88,12,0.30)) !important;
}

/* Encuadre stage video preview. */
#g32-pipeline-card .g32-enc-vp { background: #09090b !important; }

/* Timeline track video — antes linear-gradient(90deg,#1f2937,#111827) slate. */
#g32-pipeline-card .g32-enc-tl-track-video {
  background: linear-gradient(90deg, #27272a, #1f1f23) !important;
}

/* Schedule modal overlay y schedule row thumb. */
.g32-schedule-modal { background: rgba(9,9,11,0.78) !important; }
.ch-schedule-row-thumb {
  background: linear-gradient(160deg, #1f1f23, #18181b 55%, rgba(234,88,12,0.30)) !important;
}

/* Subtitle style chip + small badges sobre slate. */
#g32-pipeline-card .g32-sub-style-chip { background: #1f1f23 !important; }
#g32-pipeline-card .g32-mode-card.is-locked b,
#g32-pipeline-card .g32-variant-primitive b,
#g32-pipeline-card .g32-segment-card b {
  background: rgba(9,9,11,0.86) !important;
}

/* Preview controls / play toggle — bg slate-blue oscuro. */
#g32-pipeline-card .g32-preview-controls { background: rgba(9,9,11,0.74) !important; }
#g32-pipeline-card .g32-enc-play-toggle { background: rgba(24,24,27,0.78) !important; }

/* Teaser CTA + thumbnail text element + screen title preview. */
#g32-pipeline-card .g32-teaser-cta { background: rgba(9,9,11,0.36) !important; }
#g32-pipeline-card .g32-thumbnail-text-element { background: rgba(9,9,11,0.56) !important; }

/* ============================================================
   === U-80 ITER 5 (estirar editor + cazar azul restante) =====
   Operador 2026-05-07: caja del editor (panel 2 Vídeo) y la
   timeline/botones estirados a todo el ancho. Vídeo centrado.
   Más overrides slate→zinc que faltaban.
   ============================================================ */

/* Editor encuadre (panel 2 Vídeo): SIN max-width, ocupa todo el ancho. */
#g32-pipeline-card #g32-encuadre-editor,
#g32-pipeline-card .g32-encuadre-editor {
  max-width: none !important;
  width: 100% !important;
  background: var(--bg-card, #18181b) !important;
}

/* Stage interno (donde va el vídeo): vídeo centrado pero stage full-width.
   Antes max-width: 720px + background #0f172a slate. */
#g32-pipeline-card .g32-enc-stage {
  max-width: none !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #09090b !important;
}

/* Vídeo dentro del stage centrado horizontalmente y limitado a su aspect-ratio. */
#g32-pipeline-card .g32-enc-stage .g32-enc-video {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* Timeline section + bar wrap: full width, sin margen máx. */
#g32-pipeline-card #g32-enc-timeline,
#g32-pipeline-card .g32-enc-timeline,
#g32-pipeline-card .g32-enc-tl-bar-wrap {
  width: 100% !important;
  max-width: none !important;
}
#g32-pipeline-card .g32-enc-tl-toolbar {
  width: 100% !important;
}

/* g32-enc-vp (encuadre vídeo preview en otros modos) — antes #020617 slate. */
#g32-pipeline-card .g32-enc-vp {
  max-width: none !important;
  width: 100% !important;
  background: #09090b !important;
}

/* Caza azul restante en la columna izquierda + cualquier card slate-tinted. */
#g32-pipeline-card .u32-video-panel {
  --u32-card-bg: rgba(24,24,27,0.72) !important;
}
#g32-pipeline-card .u32-video-panel .g32-mode-card.u32-mode-card {
  background: var(--u32-card-bg) !important;
}

/* Mode grid también estirable: 6 cards en una fila o 3+3 según ancho. */
#g32-pipeline-card #g32-mode-grid,
#g32-pipeline-card .g32-mode-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

/* Clip-tabs (panel 2/4/5) full width row. */
#g32-pipeline-card .g32-clip-tabs {
  width: 100% !important;
  max-width: none !important;
}

/* Cazar el azul slate del fondo del encuadre dual / split / retention.
   .g32-enc-mask-l/.g32-enc-mask-r usaban rgba slate también. */
#g32-pipeline-card .g32-enc-mask-l,
#g32-pipeline-card .g32-enc-mask-r {
  background: rgba(9,9,11,0.65) !important;
}

/* ============================================================
   === U-80 ITER 6 (operador 2026-05-07) =====================
   - Caja editor full-width PERO vídeo dentro centrado y pequeño.
   - Modo Horizontal blur: preview real con 2 vídeos (bg blur + fg).
   - Más purga azul (encuadre editor wrapper, timeline wrapper).
   - Selects (subtítulos por frase, etc.) estilizados neutrales.
   - <details>/<summary> "Configuración de esta frase" como botón pill.
   ============================================================ */

/* Caja del editor (panel 2 Vídeo): full-width, pero el stage interno es chico
   y centrado. Antes el stage se estiraba con la caja → vídeo demasiado grande. */
#g32-pipeline-card #g32-encuadre-editor,
#g32-pipeline-card .g32-encuadre-editor {
  max-width: none !important;
  width: 100% !important;
  background: var(--bg-card, #18181b) !important;
}
/* Stage: max-width sensato (no full-width). Centrado horizontal. */
#g32-pipeline-card .g32-enc-stage {
  max-width: 560px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #09090b !important;
}
/* Stage en modo blur: vertical 9:16 (no 16:9). Vídeo bg ocupa todo con blur,
   vídeo fg centrado encima a 100% width (height auto, ~56% del width). */
#g32-pipeline-card .g32-enc-stage--blur {
  aspect-ratio: 9 / 16 !important;
  max-width: 380px !important;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#g32-pipeline-card .g32-enc-video--blur-bg {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  filter: blur(40px) saturate(1.1);
  transform: scale(1.2);   /* evitar bordes de blur en los lados */
  z-index: 1;
}
#g32-pipeline-card .g32-enc-video--blur-fg {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  z-index: 2;
}

/* Caza azul en wrapper editor + timeline (header + bar wrap). */
#g32-pipeline-card .u32-video-panel,
#g32-pipeline-card .u32-video-panel .g32-enc-tl-bar-wrap,
#g32-pipeline-card .u32-video-panel .g32-enc-tl-eyebrow,
#g32-pipeline-card .u32-video-panel .g32-enc-tl-toolbar {
  background: transparent !important;
}
/* Wrapper EXTERIOR del timeline (#g32-enc-timeline) — fondo card neutral. */
#g32-pipeline-card #g32-enc-timeline {
  background: var(--bg-card, #18181b) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin-top: 14px !important;
}
/* Toolbar del timeline: dentro del wrapper, sin doble borde. */
#g32-pipeline-card #g32-enc-timeline .g32-enc-tl-toolbar {
  background: var(--bg-input, #141416) !important;
  border-color: var(--border) !important;
}

/* Selects de subtítulos por frase: estilo neutral. */
#g32-pipeline-card .g32-subtitle-style-inline select,
#g32-pipeline-card select {
  background: var(--bg-input, #141416) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  appearance: auto !important;
}
#g32-pipeline-card select:hover {
  border-color: var(--border-strong, rgba(255,255,255,0.18)) !important;
}
#g32-pipeline-card select:focus {
  outline: 2px solid var(--accent) !important;
  outline-offset: 1px !important;
}

/* <details>/<summary> "Configuración de esta frase": estilo botón pill. */
#g32-pipeline-card .g32-subtitle-line-config {
  background: transparent !important;
  border: none !important;
  margin-top: 8px !important;
  padding: 0 !important;
}
#g32-pipeline-card .g32-subtitle-line-config > summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: var(--bg-input, #141416) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  list-style: none !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: color .15s, background .15s, border-color .15s;
}
#g32-pipeline-card .g32-subtitle-line-config > summary:hover {
  color: var(--text-primary) !important;
  background: var(--bg-card-hover, #1f1f23) !important;
  border-color: var(--accent) !important;
}
#g32-pipeline-card .g32-subtitle-line-config[open] > summary {
  color: var(--accent) !important;
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
}
#g32-pipeline-card .g32-subtitle-line-config > summary::before {
  content: "⚙" !important;
  color: inherit !important;
  font-size: 0.85rem !important;
  transform: none !important;
}
#g32-pipeline-card .g32-subtitle-line-config[open] > summary::before {
  transform: rotate(60deg) !important;
}
#g32-pipeline-card .g32-subtitle-line-config[open] {
  background: var(--bg-input, #141416) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-top: 10px !important;
}

/* También cazo cualquier <fieldset> con bg slate residual. */
#g32-pipeline-card fieldset {
  background: transparent !important;
}

/* ============================================================
   === U-80 ITER 7 (operador 2026-05-07) =====================
   - Move miniatura canvas al slot del preview izquierdo.
   - Hide canvas-pane original cuando data-pane="thumbnail".
   - Subtitle phrase header como botón pill clicable entero.
   - Style chips contienen el sample dentro de la caja (Handwriting fix).
   ============================================================ */

/* Move miniatura canvas al preview pane (izquierda) cuando Miniatura activa.
   El JS en g32SetEditorPane mueve .g32-thumbnail-canvas-wrap a .g32-preview-pane.
   Aquí ocultamos los hijos legacy del preview-pane y el canvas-pane vacío. */
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane > .g32-preview-video,
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane > #g32-screen-title-overlay,
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane > #g32-subtitle-overlay,
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane > .g32-preview-controls {
  display: none !important;
}
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane {
  position: relative;
  background: #09090b !important;
}
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane > .g32-thumbnail-canvas-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 18px !important;
  background: #09090b !important;
}
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-preview-pane > .g32-thumbnail-canvas-wrap > canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}
/* Esconde la columna izquierda original del thumbnail-pane (canvas-pane vacío). */
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-thumbnail-canvas-pane {
  display: none !important;
}
#g32-pipeline-card .g32-editor-shell[data-pane="thumbnail"] .g32-thumbnail-pane {
  grid-template-columns: 1fr !important;
}
/* Zoom bar movido bajo el preview-pane: estilo coherente. */
#g32-pipeline-card .g32-editor-grid > .g32-thumb-zoom-bar {
  margin-top: 10px;
  align-self: start;
  justify-self: start;
}

/* Subtitle phrase header: botón pill ENTERO clicable. */
#g32-pipeline-card .g32-subtitle-phrase {
  list-style: none !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
}
#g32-pipeline-card .g32-subtitle-phrase-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  background: var(--bg-card, #18181b) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  text-align: left !important;
  font: inherit !important;
  transition: border-color .15s, background .15s !important;
}
#g32-pipeline-card .g32-subtitle-phrase-header:hover {
  background: var(--bg-card-hover, #1f1f23) !important;
  border-color: var(--accent) !important;
}
#g32-pipeline-card .g32-subtitle-phrase.is-active > .g32-subtitle-phrase-header,
#g32-pipeline-card .g32-subtitle-phrase[data-line-id]:focus-within > .g32-subtitle-phrase-header {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) inset !important;
}
#g32-pipeline-card .g32-subtitle-phrase-chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: var(--bg-input, #141416) !important;
  color: var(--text-secondary) !important;
  font-size: 10px !important;
  flex-shrink: 0 !important;
  transition: transform .18s ease, color .15s !important;
}
#g32-pipeline-card .g32-subtitle-phrase:not(.is-collapsed) > .g32-subtitle-phrase-header > .g32-subtitle-phrase-chevron {
  transform: rotate(180deg) !important;
  color: var(--accent) !important;
}
#g32-pipeline-card .g32-subtitle-phrase-header > .g32-subtitle-time {
  font: 600 12px/1.2 var(--chs-font-mono, 'JetBrains Mono', monospace) !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
#g32-pipeline-card .g32-subtitle-phrase-header > strong {
  flex: 1 1 auto !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Style chips: contener el "Aa" sample dentro del cuadro fijo (fix Handwriting). */
#g32-pipeline-card .g32-sub-style-chip {
  width: 36px !important;
  height: 30px !important;
  min-width: 36px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
}
/* Handwriting style: serif italic, ajustar tamaño para que quepa. */
#g32-pipeline-card .g32-sub-style-chip[data-style="handwriting"] {
  font-family: 'Brush Script MT', 'Lucida Handwriting', cursive !important;
  font-style: italic !important;
  color: #FACC15 !important;
  font-size: 1rem !important;
  background: #18181b !important;
}
/* Karaoke / Chunky / MrBeast: ajustes de tamaño para que el "Aa" quepa. */
#g32-pipeline-card .g32-sub-style-chip[data-style="karaoke_pop"],
#g32-pipeline-card .g32-sub-style-chip[data-style="chunky_caption"],
#g32-pipeline-card .g32-sub-style-chip[data-style="youtube_mrbeast"] {
  font-size: 0.85rem !important;
}