/* ============================================================
   STUDIA — Sistema de diseño global (tema claro/oscuro)
   Fuente de verdad de tokens + componentes. Ver STUDIA-sistema-diseno.md
   Regla de oro: ningún color a pelo en las páginas, siempre var(--...).
   ============================================================ */

/* ====== TOKENS · TEMA OSCURO (por defecto) ====== */
:root{
  --bg:#08080C; --bg-2:#0E0E15; --surface:#15151E; --surface-2:#1B1B27;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.13);
  --text:#F4F4F1; --text-2:#9C9CAC; --text-3:#65656F;
  --hero-grad:radial-gradient(120% 160% at 0% 0%,rgba(124,92,255,.30),transparent 55%),linear-gradient(120deg,#1A1430,#121019);
  --thumb-grad:linear-gradient(135deg,#241B3F,#15131F);
  --raise:rgba(255,255,255,.05);
  /* acentos (estables en ambos temas) */
  --violet:#7C5CFF; --violet-2:#9D86FF; --violet-soft:rgba(124,92,255,.14); --violet-glow:rgba(124,92,255,.55);
  --gold:#FFB23E; --gold-soft:rgba(255,178,62,.14); --gold-ink:#2A1B00;
  --green:#36D399; --green-soft:rgba(54,211,153,.13);
  --red:#F87171; --red-soft:rgba(248,113,113,.13);
  /* layout */
  --r:14px; --r-sm:10px; --r-lg:20px;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --disp:'Space Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
}
/* ====== TOKENS · TEMA CLARO (solo cambian colores) ====== */
[data-theme="light"]{
  --bg:#F7F7F9; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F1F4;
  --border:rgba(16,16,28,.09); --border-2:rgba(16,16,28,.16);
  --text:#15151C; --text-2:#5B5B68; --text-3:#9A9AA6;
  --hero-grad:radial-gradient(120% 160% at 0% 0%,rgba(124,92,255,.22),transparent 55%),linear-gradient(120deg,#2A2350,#1E1A3A);
  --thumb-grad:linear-gradient(135deg,#EDE9FB,#E2DEF2);
  --raise:rgba(16,16,28,.03);
  --violet:#7C5CFF; --violet-2:#6A4BF0; --violet-soft:rgba(124,92,255,.12); --violet-glow:rgba(124,92,255,.28);
  --gold:#F59E0B; --gold-soft:rgba(245,158,11,.14); --gold-ink:#3A2600;
  --green:#16A34A; --green-soft:rgba(22,163,74,.12);
  --red:#DC2626; --red-soft:rgba(220,38,38,.10);
}

/* ====== BASE ====== */
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
::selection{background:var(--violet);color:#fff}
.studia-shell a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* Transición de tema · reveal circular (View Transitions API) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:9999}
.theme-toggle svg{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.theme-toggle:hover svg{transform:rotate(35deg)}

/* ====== LAYOUT SHELL ====== */
.studia-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.scrim{display:none}

/* SIDEBAR — scroll invisible (David 17-jul: sin barra a la vista, todo integrado) */
.sidebar{background:var(--bg-2);border-right:1px solid var(--border);padding:18px 16px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:11px;padding:0 6px}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--violet),#5B3DE0);display:grid;place-items:center;font-family:var(--disp);font-weight:700;color:#fff;font-size:17px;box-shadow:0 0 22px var(--violet-glow);flex-shrink:0}
.brand .name{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.3px}
.brand .name span{color:var(--violet-2)}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group .label{font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--text-3);font-weight:600;padding:0 8px;margin-bottom:4px}
.nav-item{display:flex;align-items:center;gap:10px;padding:7.5px 10px;border-radius:var(--r-sm);color:var(--text-2);font-weight:500;font-size:13.5px;transition:.16s;position:relative;cursor:pointer;white-space:nowrap}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item:hover svg{color:var(--violet-2)}
.nav-item.active svg{color:var(--violet-2)}
.nav-item.active{background:var(--violet-soft);color:var(--text)}
.nav-item.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--violet);border-radius:0 3px 3px 0}
.nav-item .pill{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:700;background:var(--violet);color:#fff;padding:2px 7px;border-radius:20px}
.sidebar-foot{margin-top:auto;padding:14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border)}
.sidebar-foot .row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-2);margin-bottom:7px}
.sidebar-foot .bar{height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.sidebar-foot .bar i{display:block;height:100%;width:62%;background:linear-gradient(90deg,var(--gold),#FF8A3D);border-radius:6px}

/* MAIN + TOPBAR */
.main{padding:0 38px 60px;width:100%}
.topbar{display:flex;align-items:center;gap:18px;padding:18px 0 22px;position:sticky;top:0;background:var(--bg);z-index:20}
.menu-btn{display:none;width:40px;height:40px;border-radius:11px;background:var(--surface);border:1px solid var(--border);color:var(--text-2);place-items:center}
.menu-btn svg{width:20px;height:20px}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;color:var(--text-3);font-size:14px}
.search svg{width:17px;height:17px;flex-shrink:0}
.search .k{margin-left:auto;font-family:var(--mono);font-size:11px;border:1px solid var(--border-2);border-radius:5px;padding:2px 6px}
.hud{display:flex;align-items:center;gap:10px;margin-left:auto}
.chip{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 13px}
.chip .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex-shrink:0}
.chip.streak .ic{background:var(--gold-soft);color:var(--gold)}
.chip.level .ic{background:var(--violet-soft);color:var(--violet-2)}
.chip svg{width:15px;height:15px}
.chip .v{font-family:var(--mono);font-weight:700;font-size:15px;line-height:1}
.chip .t{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px}
.theme-toggle{width:40px;height:40px;border-radius:11px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:var(--text-2);transition:.16s}
.theme-toggle:hover{color:var(--text);border-color:var(--border-2)}
.theme-toggle svg{width:19px;height:19px}
.avatar{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#FF8A3D,var(--gold));display:grid;place-items:center;font-family:var(--disp);font-weight:700;color:var(--gold-ink);text-decoration:none}

/* ====== TIPOGRAFÍA / SECCIONES ====== */
.hello{margin-bottom:26px}
.hello h1{font-family:var(--disp);font-size:30px;font-weight:700;letter-spacing:-.5px;margin-bottom:6px}
.hello p{color:var(--text-2);font-size:15px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:14px;flex-wrap:wrap}
.section-head h3{font-family:var(--disp);font-size:19px;font-weight:600}
.section-head .prog{display:flex;align-items:center;gap:12px}
.section-head .prog .txt{font-family:var(--mono);font-size:13px;color:var(--text-2)}
.section-head .prog .txt b{color:var(--green)}
.section-head .track{width:130px;height:7px;border-radius:7px;background:var(--surface-2);overflow:hidden}
.section-head .track i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#1FB67A);border-radius:7px}
.section-link{font-size:13.5px;color:var(--violet-2);font-weight:600}

/* ====== HERO (siempre oscuro: tarjeta de marca) ====== */
.hero{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:30px 34px;margin-bottom:34px;background:var(--hero-grad);border:1px solid var(--border-2)}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--violet-glow),transparent 65%);pointer-events:none}
.hero .tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1px;color:var(--gold);background:var(--gold-soft);padding:5px 11px;border-radius:20px;margin-bottom:14px}
.hero h2{font-family:var(--disp);font-size:26px;font-weight:700;letter-spacing:-.4px;max-width:560px;margin-bottom:10px;color:#F4F4F1;position:relative;z-index:1}
.hero p{color:#C7C3DA;max-width:540px;font-size:14.5px;margin-bottom:20px;position:relative;z-index:1}
.hero .meta{display:flex;gap:9px;margin-bottom:22px;flex-wrap:wrap;position:relative;z-index:1}
.hero .meta span{font-size:12.5px;color:#D6D2E6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:5px 11px;border-radius:20px}

/* ====== BOTONES (kit) ====== */
.btn-primary{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--violet),#5B3DE0);color:#fff;font-weight:600;font-size:15px;padding:14px 26px;border-radius:12px;box-shadow:0 8px 30px var(--violet-glow);transition:.18s;cursor:pointer}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 38px var(--violet-glow)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary svg{width:18px;height:18px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--text);border:1px solid var(--border);font-weight:600;font-size:14px;padding:11px 18px;border-radius:var(--r-sm);transition:.16s;cursor:pointer}
.btn:hover{border-color:var(--border-2)}

/* ====== PIPELINE / STEP ====== */
.pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:38px}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 16px 16px;display:flex;flex-direction:column;gap:12px;transition:.18s;position:relative;overflow:hidden}
.step:hover{transform:translateY(-3px);border-color:var(--border-2)}
.step .num{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text-3)}
.step .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-2)}
.step .ic svg{width:21px;height:21px}
.step h4{font-size:15px;font-weight:600}
.step small{font-size:12.5px;color:var(--text-3);margin-top:-6px}
.step .status{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.step .status svg{width:14px;height:14px}
.step.done{background:linear-gradient(180deg,var(--green-soft),var(--surface))}
.step.done .ic{background:var(--green-soft);color:var(--green)}
.step.done .status,.step.done .num{color:var(--green)}
.step.current{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet),0 0 28px var(--violet-glow)}
.step.current .ic{background:var(--violet-soft);color:var(--violet-2)}
.step.current .status,.step.current .num{color:var(--violet-2)}
.step.current::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,var(--violet-soft),transparent 60%);pointer-events:none}
.step.locked{opacity:.55}
.step.locked .status{color:var(--text-3)}

/* ====== TOOLS GRID ====== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:14px;margin-bottom:38px}
.tool{display:flex;align-items:flex-start;gap:13px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;transition:.16s;text-decoration:none;color:inherit}
.tool:hover{transform:translateY(-3px);border-color:var(--violet);background:var(--surface-2)}
.tool .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-2);flex-shrink:0;font-size:21px}
.tool .ic svg{width:21px;height:21px}
.tool h4{font-size:14.5px;font-weight:600;margin-bottom:3px;display:flex;align-items:center;gap:7px}
.tool h4 .new{font-family:var(--mono);font-size:9px;font-weight:700;background:var(--gold);color:var(--gold-ink);padding:1px 6px;border-radius:10px;letter-spacing:.5px}
.tool p{font-size:12.5px;color:var(--text-3);line-height:1.45}

/* ====== PROYECTOS RECIENTES ====== */
.recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.proj{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:.16s;text-decoration:none;color:inherit}
.proj:hover{transform:translateY(-3px);border-color:var(--border-2)}
.proj .thumb{height:108px;background:var(--thumb-grad);display:grid;place-items:center;color:var(--violet-2);position:relative}
.proj .thumb svg{width:30px;height:30px;opacity:.6}
.proj .thumb .badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);padding:3px 9px;border-radius:20px;color:#fff}
.proj .body{padding:13px 15px}
.proj .body h4{font-size:14px;font-weight:600;margin-bottom:5px}
.proj .body .meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-3)}
.proj .body .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}

/* ====== ESTADO VACÍO (plantilla C) ====== */
.empty-state{text-align:center;max-width:380px;margin:60px auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:34px 28px}
.empty-state .ic{width:54px;height:54px;border-radius:14px;background:var(--violet-soft);color:var(--violet-2);display:grid;place-items:center;margin:0 auto 16px}
.empty-state h3{font-family:var(--disp);font-size:18px;margin-bottom:8px}
.empty-state p{color:var(--text-2);font-size:14px;margin-bottom:18px}
.studia-foot{border-top:1px solid var(--border);margin-top:40px;padding:20px 0;text-align:center;font-size:12px;color:var(--text-3)}

/* ====== FEATURE CARDS (destacados del dashboard · siempre oscuros) ====== */
.feature{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:30px 34px;margin-bottom:16px;border:1px solid var(--border-2);display:flex;gap:28px;align-items:center}
.feature::after{content:"";position:absolute;right:-60px;top:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--violet-glow),transparent 65%);pointer-events:none}
.feature .fbody{flex:1;position:relative;z-index:1;min-width:0}
.feature .ftag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1px;padding:5px 11px;border-radius:20px;margin-bottom:12px;color:var(--gold);background:var(--gold-soft)}
.feature h2{font-family:var(--disp);font-size:27px;font-weight:700;letter-spacing:-.4px;color:#F4F4F1;margin-bottom:8px}
.feature p{color:#C7C3DA;font-size:14.5px;line-height:1.5;margin-bottom:16px;max-width:580px}
.feature .pros{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.feature .pro{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#E7E3F5;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:6px 12px;border-radius:20px}
.feature .pro svg{width:14px;height:14px;flex-shrink:0;color:var(--violet-2)}
.feature .fart{flex-shrink:0;position:relative;z-index:1}
.feature-mg{background:radial-gradient(120% 160% at 100% 0%,rgba(95,208,230,.22),transparent 55%),linear-gradient(120deg,#19233f,#141026)}
.feature-mg .pro svg{color:#5fd0e6}
.feature-shorts{background:var(--hero-grad)}
@media(max-width:860px){ .feature{flex-direction:column;align-items:flex-start} .feature .fart{align-self:center;margin-top:6px} }

/* MG preview (mini motion-graphics) */
.mg-prev{width:208px;height:130px;border-radius:14px;background:#0b1020;border:1px solid rgba(255,255,255,.12);display:flex;align-items:flex-end;justify-content:center;gap:9px;padding:16px;box-shadow:0 14px 34px rgba(0,0,0,.45);overflow:hidden}
.mg-prev::before{content:"RANKING";position:absolute;margin-top:-104px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.55)}
.mg-prev i{display:block;width:20px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#5fd0e6,var(--violet));animation:mgbar 1.5s ease-in-out infinite}
.mg-prev i:nth-child(2){animation-delay:.18s}
.mg-prev i:nth-child(3){animation-delay:.36s}
.mg-prev i:nth-child(4){animation-delay:.54s}
@keyframes mgbar{0%,100%{height:24px}50%{height:70px}}

/* Shorts preview (frame 9:16) */
.short-prev{width:88px;height:130px;border-radius:14px;background:linear-gradient(160deg,#2a1f4d,#16121f);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.short-prev .play{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center}
.short-prev .play svg{width:18px;height:18px;color:#16121f;margin-left:3px}
.feature-free{background:radial-gradient(120% 160% at 100% 0%,var(--green-soft),transparent 55%),linear-gradient(120deg,#10241c,#121a17)}
.feature-free .ftag{color:var(--green);background:var(--green-soft)}
.feature-free .pro svg{color:var(--green)}
.aud-prev{width:124px;height:124px;border-radius:50%;background:var(--green-soft);border:1px solid var(--green);display:grid;place-items:center;font-size:50px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.nav-item .pill.free{background:var(--green-soft);color:var(--green)}

/* ============================================================
   PUENTE MODO CLARO · páginas internas aún sin migrar.
   Mapea utilidades Tailwind hardcodeadas (text-white, grises, paneles)
   a los tokens del tema — SOLO en claro y SOLO dentro del shell
   (no toca el login, ni el dashboard, ni el modo oscuro por defecto).
   ============================================================ */
[data-theme="light"] .studia-shell .content-animate .text-white{color:var(--text)}
[data-theme="light"] .studia-shell .content-animate .text-gray-100,
[data-theme="light"] .studia-shell .content-animate .text-gray-200{color:var(--text)}
[data-theme="light"] .studia-shell .content-animate .text-gray-300,
[data-theme="light"] .studia-shell .content-animate .text-gray-400,
[data-theme="light"] .studia-shell .content-animate .text-slate-300,
[data-theme="light"] .studia-shell .content-animate .text-slate-400{color:var(--text-2)}
[data-theme="light"] .studia-shell .content-animate .text-gray-500,
[data-theme="light"] .studia-shell .content-animate .text-gray-600,
[data-theme="light"] .studia-shell .content-animate .text-slate-500{color:var(--text-3)}
[data-theme="light"] .studia-shell .content-animate .bg-gray-800,
[data-theme="light"] .studia-shell .content-animate .bg-gray-900,
[data-theme="light"] .studia-shell .content-animate .bg-slate-800,
[data-theme="light"] .studia-shell .content-animate .bg-slate-900,
[data-theme="light"] .studia-shell .content-animate .bg-black\/20,
[data-theme="light"] .studia-shell .content-animate .bg-black\/30{background-color:var(--surface-2)}
[data-theme="light"] .studia-shell .content-animate .border-white\/5,
[data-theme="light"] .studia-shell .content-animate .border-white\/10,
[data-theme="light"] .studia-shell .content-animate .border-gray-700,
[data-theme="light"] .studia-shell .content-animate .border-gray-800,
[data-theme="light"] .studia-shell .content-animate .border-slate-700,
[data-theme="light"] .studia-shell .content-animate .border-slate-800{border-color:var(--border)}

/* ====== PUENTES: re-tokenizar utilidades antiguas (compatibilidad 65 páginas) ====== */
/* Tarjeta de aviso (API keys, etc.) */
.notice-gold{background:var(--gold-soft);border:1px solid var(--gold);border-radius:var(--r);padding:14px 18px;color:var(--text)}
/* Inputs heredados del base.html viejo → ahora con tokens */
.input-field{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm)}
.input-field:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.input-field::placeholder{color:var(--text-3)}
select.input-field{background:var(--surface-2);color:var(--text)}
select.input-field option, select option{background:var(--surface);color:var(--text)}
.input-modern{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm)}
.input-modern:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.glass-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);backdrop-filter:none;-webkit-backdrop-filter:none}

/* ====== RESPONSIVE ====== */
@media(max-width:980px){
  .studia-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:60;width:264px;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .studia-shell.nav-open .sidebar{transform:translateX(0)}
  .scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
  .studia-shell.nav-open .scrim{display:block}
  .main{padding:0 20px 50px}
  .menu-btn{display:grid}
  .pipeline{grid-template-columns:repeat(2,1fr)}
  .hud .chip{display:none}
  .search{font-size:0}
  .search svg{font-size:initial}
}

/* ============================================================
   DASHBOARD v2 (2026-07) — El oro de hoy, raíl real, crea ahora,
   proyectos como filas. Todo con tokens: el tema claro sale gratis.
   ============================================================ */

/* ── El oro de hoy (héroe) ── */
.oro{background:linear-gradient(160deg,var(--gold-soft),transparent 42%),var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 22px 18px;margin-bottom:36px}
.oro .head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.oro .head h2{font-family:var(--disp);font-size:21px;font-weight:700;display:flex;align-items:center;gap:10px}
.oro .head .cta{font-size:13px;font-weight:600;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold);padding:7px 14px;border-radius:9px;transition:.16s}
.oro .head .cta:hover{background:var(--gold);color:var(--gold-ink)}
.oro .head .sub{width:100%;font-size:13px;color:var(--text-2)}
.fmt-label{font-size:11.5px;font-weight:700;color:var(--text-2);letter-spacing:.04em;text-transform:uppercase;margin:16px 0 9px}
.oro-grid{display:grid;grid-template-columns:1.9fr repeat(4,1fr);gap:12px}
.oro-grid.largos{grid-template-columns:1.9fr repeat(3,1fr)}
.ocard{position:relative;display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:.16s}
.ocard:hover{border-color:var(--gold);transform:translateY(-2px)}
.ocard .thumb{position:relative;aspect-ratio:16/9;background:#0b0b0f;overflow:hidden}
.ocard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ocard .ratio{position:absolute;left:8px;top:8px;font-family:var(--mono);font-weight:700;font-size:13px;color:var(--gold);background:rgba(8,8,12,.82);padding:3px 8px;border-radius:7px}
.ocard .body{padding:9px 11px 11px}
.ocard h5{font-size:12.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px;color:var(--text)}
.ocard .meta{font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocard.joya{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-soft),0 14px 40px rgba(0,0,0,.25)}
.ocard.joya .ratio{font-size:16px;padding:4px 10px}
.ocard.joya .body{padding:12px 14px 14px}
.ocard.joya h5{font-size:14.5px}
.ocard.joya .meta{font-size:12px}
.joya-tag{position:absolute;right:8px;top:8px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--gold);color:var(--gold-ink);padding:3px 8px;border-radius:6px}
.gscore{position:absolute;right:8px;top:8px;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--gold);background:rgba(8,8,12,.82);padding:2px 6px;border-radius:6px}
.temas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.temas .lead{font-size:12.5px;font-weight:650;color:var(--text-2)}
.tchip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--text-2);transition:.16s}
.tchip:hover{border-color:var(--gold);color:var(--text)}
.tchip .rx{font-family:var(--mono);font-weight:700;color:var(--gold)}
.tchip .st{font-size:9px;font-weight:800;padding:1px 6px;border-radius:4px;letter-spacing:.03em}
.tchip .st.nuevo{background:var(--green-soft);color:var(--green)}
.tchip .st.repite{background:var(--gold-soft);color:var(--gold)}

/* ── Sigue donde lo dejaste (raíl real) ── */
.resume{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:36px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.resume .info h4{font-family:var(--disp);font-size:17px;font-weight:650;margin-bottom:3px}
.resume .info .st{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2)}
.resume .info .st .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:studiaRec 1.6s infinite}
.resume .info .st .dot.err{background:var(--red);animation:none}
.rbtn{background:var(--violet);color:#fff;font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:10px;white-space:nowrap;transition:.16s}
.rbtn:hover{background:var(--violet-2)}
.rail{grid-column:1/-1;display:flex;align-items:center;margin-top:2px}
.rstep{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-3);white-space:nowrap}
.rstep .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;background:var(--surface-2);border:1px solid var(--border-2);color:var(--text-3);flex-shrink:0}
.rstep.done{color:var(--text-2)}
.rstep.done .n{background:var(--green-soft);border-color:transparent;color:var(--green)}
.rstep.now{color:var(--text)}
.rstep.now .n{background:var(--violet);border-color:transparent;color:#fff;box-shadow:0 0 14px var(--violet-glow)}
.rstep.now.fail .n{background:var(--red);box-shadow:none}
.rlink{flex:1;height:2px;background:var(--border-2);margin:0 10px;min-width:14px;position:relative;overflow:hidden}
.rlink.fill::after{content:"";position:absolute;inset:0;background:var(--green)}
.rlink.half::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:var(--violet)}
.resume .prog-msg{grid-column:1/-1;font-size:12px;color:var(--text-3);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes studiaRec{0%{box-shadow:0 0 0 0 rgba(255,178,62,.45)}70%{box-shadow:0 0 0 7px rgba(255,178,62,0)}100%{box-shadow:0 0 0 0 rgba(255,178,62,0)}}

/* ── Crea ahora ── */
.stars{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.star{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;transition:.16s;position:relative;display:block}
.star:hover{border-color:var(--violet);transform:translateY(-2px)}
.star .tic{font-size:24px;display:block;margin-bottom:10px}
.star h4{font-size:14.5px;font-weight:650;margin-bottom:4px;color:var(--text)}
.star p{font-size:12px;color:var(--text-3);line-height:1.45}
.star .badge{position:absolute;top:12px;right:12px;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px}
.star .badge.dest{background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold)}
.star .badge.new{background:var(--green-soft);color:var(--green);border:1px solid var(--green)}
.tool-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 22px;margin-bottom:8px}
.trowg .glabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:7px}
.trow{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:13.5px;color:var(--text-2);transition:.14s}
.trow:hover{background:var(--surface);color:var(--text)}
.trow .tic{font-size:15px;width:20px;text-align:center}
.all-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--text-3);margin:10px 0 36px}
.all-tools a{color:var(--violet-2);font-weight:600}
.all-tools .k{font-family:var(--mono);font-size:11px;border:1px solid var(--border-2);border-radius:5px;padding:1px 6px}

/* ── Proyectos recientes: filas con acción ── */
.plist{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:30px;background:var(--surface)}
.prow{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--border);transition:.14s;color:var(--text)}
.prow:last-child{border-bottom:none}
.prow:hover{background:var(--surface-2)}
.prow .pdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.prow .pname{font-size:14px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .pst{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px;letter-spacing:.02em;flex-shrink:0}
.pst.ok{background:var(--green-soft);color:var(--green)}
.pst.gen{background:var(--gold-soft);color:var(--gold)}
.pst.err{background:var(--red-soft);color:var(--red)}
.pst.vio{background:var(--violet-soft);color:var(--violet-2)}
.pst.dft{background:var(--surface-2);color:var(--text-3)}
.prow .pdate{font-size:12px;color:var(--text-3);font-family:var(--mono);flex-shrink:0}
.prow .pact{font-size:12.5px;font-weight:600;color:var(--violet-2);border:1px solid var(--border-2);padding:6px 12px;border-radius:8px;white-space:nowrap;flex-shrink:0;transition:.14s}
.prow:hover .pact{border-color:var(--violet);background:var(--violet-soft)}

/* ── Responsive dashboard v2 ── */
@media(max-width:1100px){
  .oro-grid,.oro-grid.largos{grid-template-columns:repeat(3,1fr)}
  .ocard.joya{grid-column:span 2}
  .stars{grid-template-columns:repeat(2,1fr)}
  .tool-rows{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .oro-grid,.oro-grid.largos{grid-template-columns:repeat(2,1fr)}
  .stars{grid-template-columns:1fr}
  .tool-rows{grid-template-columns:1fr}
  .rail{flex-wrap:wrap;row-gap:10px}
  .resume{grid-template-columns:1fr}
  .prow .pdate{display:none}
}

/* ── Shell v2: chip generando + menú de usuario + créditos en sidebar ── */
.chip .recdot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:studiaRecG 1.6s infinite;flex-shrink:0}
@keyframes studiaRecG{0%{box-shadow:0 0 0 0 rgba(54,211,153,.45)}70%{box-shadow:0 0 0 7px rgba(54,211,153,0)}100%{box-shadow:0 0 0 0 rgba(54,211,153,0)}}
.avatar-wrap{position:relative}
.avatar{cursor:pointer;border:none;font-size:15px}
.umenu{position:absolute;right:0;top:calc(100% + 8px);width:220px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-sm);box-shadow:0 18px 50px rgba(0,0,0,.45);padding:6px;z-index:80}
.umenu[hidden]{display:none}
.umenu .who{padding:9px 11px;border-bottom:1px solid var(--border);margin-bottom:5px}
.umenu .who b{font-size:13.5px;display:block;color:var(--text)}
.umenu .who span{font-size:11.5px;color:var(--text-3);word-break:break-all}
.umenu a,.umenu button{display:flex;width:100%;align-items:center;gap:9px;padding:8px 11px;border-radius:7px;font-size:13.5px;color:var(--text-2);background:none;border:none;cursor:pointer;font-family:var(--sans);text-align:left}
.umenu a:hover,.umenu button:hover{background:var(--surface-2);color:var(--text)}
.umenu .sep{height:1px;background:var(--border);margin:5px 0}
.umenu .adm{font-size:10px;font-weight:800;letter-spacing:.05em;color:var(--gold);padding:6px 11px 2px;text-transform:uppercase}
.sidebar-foot .cred{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--text)}
.sidebar-foot .link{display:block;margin-top:8px;font-size:11.5px;color:var(--violet-2)}

/* ── Delta de créditos flotante (David 15-jul): qué te ha costado y cuánto te queda ── */
.credit-float{position:fixed;top:74px;right:26px;z-index:9000;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:10px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--border-2);box-shadow:0 14px 40px rgba(0,0,0,.35);pointer-events:none;animation:creditFloat 3.4s cubic-bezier(.22,.9,.35,1) forwards}
.credit-float b{font-family:var(--mono);font-size:17px;line-height:1}
.credit-float span{font-size:11px;color:var(--text-3)}
.credit-float.down b{color:var(--gold)}
.credit-float.up b{color:var(--green)}
.credit-float.down{border-color:var(--gold)}
.credit-float.up{border-color:var(--green)}
@keyframes creditFloat{0%{opacity:0;transform:translateY(14px) scale(.92)}10%{opacity:1;transform:translateY(0) scale(1)}78%{opacity:1;transform:translateY(-8px)}100%{opacity:0;transform:translateY(-26px)}}
@media(max-width:640px){.credit-float{top:auto;bottom:86px;right:14px}}