/* ═══════════ VidForge Creator — piel de color (solo estética) ═══════════
   Se carga DESPUÉS de styles.css y solo repinta: variables, colores y tipografía.
   No cambia estructura, tamaños ni lógica. Para volver al look morado basta con
   quitar su <link> (y el <script> de tema_color.js) de index.html.
   El color de acento lo elige cada usuario (🎨 en la barra lateral): tema_color.js
   reescribe las variables --a-* / --acc*. Estos valores son el rojo YouTube por
   defecto, y sirven también si el JS no carga.
   Sistema de diseño: https://claude.ai/artifact/JRf6UXJMjf66vaJBGhFuC6 */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* ── Claro ── */
:root{
  /* acento (lo reescribe tema_color.js) */
  --a-base:#ff0000;            /* color identidad: logo, barras de progreso */
  --a-logo-ink:#0f0f0f;        /* triángulo del logo sobre --a-base */
  --a-fill:#cc0000;            /* fondo de botones y switches */
  --a-fill-hover:#e00000;
  --a-on:#ffffff;              /* texto sobre --a-fill */
  --a-shadow:rgba(204,0,0,.5);
  --a-glow:rgba(255,0,0,.12);
  --a-text-dk:#ff4e45;         /* texto de acento en zonas siempre oscuras (editor, portada) */
  --a-tint-dk:rgba(255,78,69,.12);
  --a-tint2-dk:rgba(255,78,69,.4);
  --acc:#cc0000; --acc2:#a80000;
  --acc-tint:rgba(204,0,0,.08); --acc-tint2:rgba(204,0,0,.14);

  --thumbbg:linear-gradient(140deg,#f2f2f2,#fafafa 60%);
  --bg:#f9f9f9; --bg2:#ffffff; --panel:#ffffff; --panel2:#f9f9f9; --card:#ffffff;
  --line:#e5e5e5; --line2:#d9d9d9;
  --tx:#0f0f0f; --tx2:#4d4d4d; --tx3:#6b6b6b;
  --grad:linear-gradient(135deg,var(--a-fill-hover),var(--a-fill));
  --ok:#1e7d32; --err:#b3261e; --warn:#8f5f00; --info:#065fd4;
  --purple:var(--acc); --brand:var(--a-fill); --yt:var(--a-base);
  --signal:#065fd4;
  --focus:0 0 0 3px #065fd4;
  --sh:0 12px 32px -16px rgba(15,15,15,.18);
  --sh2:0 3px 12px rgba(15,15,15,.06);
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
/* ── Oscuro (tipo YouTube Studio) ── */
html[data-theme="dark"]{
  --acc:#ff4e45; --acc2:#ff6b63;
  --acc-tint:rgba(255,78,69,.12); --acc-tint2:rgba(255,78,69,.18);
  --thumbbg:linear-gradient(140deg,#272727,#1a1a1a 60%);
  --bg:#0f0f0f; --bg2:#181818; --panel:#212121; --panel2:#272727; --card:#212121;
  --line:#303030; --line2:#3f3f3f;
  --tx:#f1f1f1; --tx2:#aaaaaa; --tx3:#8c8c8c;
  --ok:#2ba640; --err:#ff5b6e; --warn:#f5b301; --info:#3ea6ff;
  --signal:#3ea6ff;
  --focus:0 0 0 3px #3ea6ff;
  --sh:0 24px 60px -20px rgba(0,0,0,.7); --sh2:0 3px 14px rgba(0,0,0,.35);
}

/* Fondo plano, sin halos */
body, html[data-theme="dark"] body{ background:var(--bg); font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; }
::selection{ background:var(--acc-tint2); }

/* Foco: anillo azul sólido (independiente del acento) */
input:focus,textarea:focus,select:focus{ border-color:var(--signal); box-shadow:var(--focus); }
button:focus-visible{ outline:none; box-shadow:var(--focus); }

/* Marca: cuadrado de color + triángulo */
.brand .logo{ background:var(--a-base); box-shadow:0 6px 18px var(--a-glow); }
.brand .logo svg path:first-child{ display:none; }
.brand .logo svg path:last-child{ fill:var(--a-logo-ink); }
.brand h1 em{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--acc); }
.login-card h1 em{ background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:var(--acc) !important; font-style:normal; }

/* Navegación */
.nav button:hover{ background:var(--acc-tint); }
.nav button.on{ background:var(--acc-tint); color:var(--acc); box-shadow:inset 0 0 0 1.5px var(--acc-tint2); }
.nav .cta, .nav .cta.on{ background:var(--a-fill); color:var(--a-on); box-shadow:0 10px 24px -10px var(--a-shadow); border-radius:999px; }
.nav .cta:hover{ background:var(--a-fill-hover); color:var(--a-on); filter:none; }
.side-user .av{ background:var(--a-fill); color:var(--a-on); }

/* Botones: pastilla de acento, secundarios neutros */
.btn-primary{ background:var(--a-fill); color:var(--a-on); box-shadow:0 12px 26px -12px var(--a-shadow); }
.btn-primary:hover{ background:var(--a-fill-hover); }
.btn-ghost:hover{ border-color:var(--tx2); color:var(--tx); }
.pulso-btn{ background:var(--a-fill); color:var(--a-on); }
.pulso-btn:hover{ background:var(--a-fill-hover); }

/* Chips de estado: acento = en marcha, verde = hecho, azul = en cola */
.chip.running, .chip.tag,
html[data-theme="dark"] .chip.running, html[data-theme="dark"] .chip.tag{ background:var(--acc-tint); color:var(--acc); }
html[data-theme="dark"] .chip.done{ background:rgba(43,166,64,.14); color:#2ba640; }
html[data-theme="dark"] .chip.queued, html[data-theme="dark"] .chip.tag2{ background:rgba(62,166,255,.14); color:#3ea6ff; }

/* Progreso */
.pbar i, .pulso-barra i{ background:var(--a-base); }
html[data-theme="dark"] .pbar{ background:#303030; }
.ring .ring-bg, html[data-theme="dark"] .ring .ring-bg{ stroke:var(--acc-tint2); }
.ring .ring-fg, html[data-theme="dark"] .ring .ring-fg{ stroke:var(--a-base); filter:none; }

/* Paneles, zonas de soltar, interruptores */
.panel h3 svg{ color:var(--acc); }
.drop:hover,.drop.over{ border-color:var(--acc); background:var(--acc-tint); }
.switch input:checked+.track{ background:var(--a-fill); }
.back:hover{ color:var(--acc); background:var(--acc-tint); }
.proj-hero{ background:var(--bg2); }
.vcard.selon{ border-color:var(--acc); box-shadow:0 0 0 2px var(--acc),var(--sh); }
.vsel input{ accent-color:var(--a-fill); }
.pulso-pill:hover{ border-color:var(--acc); box-shadow:0 12px 30px var(--acc-tint2); }
.pal.on{ box-shadow:0 0 0 3px var(--acc-tint2); }
.pot-range{ background:linear-gradient(90deg,var(--a-fill),var(--a-base)); }
html[data-theme="dark"] .vcard .thumb .ph{ color:#3f3f3f; }

/* Fondo animado: acento/azul muy tenues */
.bg-anim .b1, html[data-theme="dark"] .bg-anim .b1{ background:radial-gradient(circle at 50% 50%, var(--a-glow) 0%, transparent 70%); }
.bg-anim .b2, html[data-theme="dark"] .bg-anim .b2{ background:radial-gradient(circle at 50% 50%, rgba(62,166,255,.10) 0%, rgba(62,166,255,.04) 32%, transparent 70%); }
.bg-anim .b3, html[data-theme="dark"] .bg-anim .b3{ background:radial-gradient(circle at 50% 50%, var(--acc-tint) 0%, transparent 70%); }

/* Editor (siempre oscuro): grises Studio + acento */
.ed-shell input,.ed-shell select{ background:#181818; border-color:#303030; color:#f1f1f1; }
.ed-shell input:focus,.ed-shell select:focus{ border-color:#3ea6ff; box-shadow:0 0 0 3px #3ea6ff; }
.ed-shell .switch .track{ background:#303030; }
.ed-shell .switch input:checked+.track{ background:var(--a-fill); }
.ed-shell .btn-ghost{ border-color:#3f3f3f; color:#aaaaaa; }
.ed-shell .btn-ghost:hover{ border-color:#aaaaaa; color:#f1f1f1; }
.ed-shell .back:hover{ color:var(--a-text-dk); background:var(--a-tint-dk); }
.ed-top, .ed-side, .tl-wrap{ background:#0f0f0f; border-color:#272727; }
.tl-bar, .tl-ruler, .tl-ruler .tick{ border-color:#272727; }
.tl-ruler{ color:#8c8c8c; }
.ed-prop{ background:#181818; border-color:#303030; }
.tl-bar .zbtn{ border-color:#3f3f3f; color:#aaaaaa; }
.tl-bar .zbtn:hover{ border-color:var(--a-text-dk); color:var(--a-text-dk); }
.tl-clip{ background:#212121; border-color:#3f3f3f; }
.tl-clip.sel{ border-color:var(--a-text-dk); box-shadow:0 0 0 2px var(--a-tint2-dk); }
.tl-chip.icon{ background:rgba(62,166,255,.18); color:#3ea6ff; }
.kbd{ background:#272727; border-color:#3f3f3f; color:#aaaaaa; }

/* Portada (su piel oscura propia) */
#viewPortada{ --macc:var(--a-text-dk); --maccsoft:var(--a-tint-dk); }

/* ── Selector de color (🎨) ── */
.vfc-pop{ position:fixed; z-index:1000; width:268px; background:var(--panel); color:var(--tx); border:1px solid var(--line2); border-radius:16px; padding:16px; box-shadow:var(--sh); font-family:inherit; }
.vfc-pop[hidden]{ display:none; }
.vfc-h{ font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--tx2); margin-bottom:12px; }
.vfc-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.vfc-sw{ width:36px; height:36px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); transition:transform .12s; }
.vfc-sw:hover{ transform:scale(1.08); }
.vfc-sw.on{ border-color:var(--tx); box-shadow:inset 0 0 0 2px var(--panel); }
.vfc-name{ font-size:12.5px; font-weight:600; color:var(--tx2); margin-top:12px; min-height:18px; }
.vfc-row{ display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.vfc-row label{ flex:1; font-size:13px; font-weight:700; }
.vfc-row input[type=color]{ width:44px; height:32px; padding:0; border:1px solid var(--line2); border-radius:8px; background:none; cursor:pointer; }
.vfc-modes{ display:flex; gap:6px; margin-top:12px; }
.vfc-modes button{ flex:1; padding:8px 0; border-radius:999px; border:1px solid var(--line2); font-size:12.5px; font-weight:700; color:var(--tx2); }
.vfc-modes button.on{ background:var(--a-fill); border-color:var(--a-fill); color:var(--a-on); }