/* SellerForge — capa visual HOLOGRÁFICA (se carga después de sf-fx.css).
   Idea: todo parece una lámina de luz flotando en el espacio (3D aumentado): superficie de cristal oscuro,
   borde de luz degradado, brillo interior, profundidad por capas y una pequeña inclinación al acercar el puntero.
   Solo usa los colores de la paleta elegida (--fx-a, --fx-rgb); nada de azules ni marrones.
   Reglas de escala: espacio en múltiplos de 8; títulos grandes, etiquetas pequeñas en mayúsculas; un acento por pantalla. */
:root{
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;--sp-6:64px;
  --t-xs:11.5px;--t-sm:13px;--t-md:15px;--t-lg:20px;--t-xl:28px;--t-2xl:40px;
  --holo-glass:linear-gradient(160deg,rgba(26,26,26,.72),rgba(8,8,8,.82));
  --holo-edge:linear-gradient(145deg,rgba(var(--fx-rgb),.75),rgba(255,255,255,.08) 38%,rgba(255,255,255,.04) 62%,rgba(var(--fx-rgb),.35));
  --holo-glow:0 24px 60px -28px rgba(var(--fx-rgb),.45),0 2px 0 rgba(255,255,255,.04) inset;
}

/* ---- Superficies: cristal con borde de luz ---- */
.db-card,.mc-card,.lp-card,.lg-panel,.pub-plan,.db-pers-panel{
  position:relative;isolation:isolate;border:1px solid transparent;background:var(--holo-glass);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--holo-glow);transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.23,1,.32,1),box-shadow .35s cubic-bezier(.23,1,.32,1)}
.db-card::before,.mc-card::before,.lp-card::before,.lg-panel::before,.pub-plan::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:var(--holo-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
/* brillo que sigue al puntero (lo mueve sf-holo-ui.js con --mx/--my) */
.db-card::after,.mc-card::after,.lp-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(var(--fx-rgb),.16),transparent 60%);
  transition:opacity .3s}
@media (hover:hover) and (pointer:fine){
  .db-card:hover::after,.mc-card:hover::after,.lp-card:hover::after{opacity:1}
  .db-card:hover,.mc-card:hover,.lp-card:hover{box-shadow:0 30px 70px -26px rgba(var(--fx-rgb),.55),0 2px 0 rgba(255,255,255,.05) inset}
}

/* ---- Jerarquía: qué es grande y qué es pequeño ---- */
.db-head h2,.mc-head-copy h2{font-size:var(--t-2xl);line-height:1.05;letter-spacing:-.04em;font-weight:600}
.db-head p,.mc-head-copy p{font-size:var(--t-md);color:var(--muted);max-width:60ch}
.db-card h3,.mc-card h3{font-size:var(--t-lg);letter-spacing:-.02em;font-weight:600;margin:0}
.hint,.mc-card-head p{font-size:var(--t-sm);color:var(--muted)}
.mc-kpi-value{font-size:clamp(26px,2.6vw,34px);text-shadow:0 0 28px rgba(var(--fx-rgb),.35)}
.mc-kpi-label,.db-table th,.mc-table th{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mc-kpis{gap:var(--sp-2)}

/* ---- Rejilla y respiración ---- */
.db-view{padding-block:var(--sp-3)}
.db-view>*+*{margin-top:var(--sp-3)}
.db-card,.mc-card{padding:var(--sp-3)}

/* ---- Botones: luz propia ---- */
.db-btn,.mc-btn,.lg-btn,.pub-cta{transition:transform .16s cubic-bezier(.23,1,.32,1),box-shadow .2s,background .2s}
.db-btn:not(.ghost),.mc-btn:not(.mc-btn-ghost),.lg-btn.primary,.pub-cta.accent{
  background:linear-gradient(180deg,rgba(var(--fx-rgb),1),rgba(var(--fx-rgb),.82));color:var(--sobre-acento);
  box-shadow:0 10px 30px -10px rgba(var(--fx-rgb),.75),0 1px 0 rgba(255,255,255,.35) inset}
.db-btn:active,.mc-btn:active,.lg-btn:active,.pub-cta:active{transform:scale(.97)}

/* ---- «Más herramientas» plegadas (menos ruido, nada se pierde) ---- */
.sf-mas{border:1px solid var(--line);border-radius:var(--radio-l,16px);background:rgba(10,10,10,.6);margin-top:var(--sp-3)}
.sf-mas>summary{cursor:pointer;list-style:none;padding:var(--sp-2) var(--sp-3);font-size:var(--t-sm);font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);border-radius:inherit}
.sf-mas>summary::-webkit-details-marker{display:none}
.sf-mas>summary::after{content:"+";font:600 18px var(--font-m);color:var(--fx-a);transition:transform .2s}
.sf-mas[open]>summary::after{transform:rotate(45deg)}
.sf-mas>summary:hover{color:var(--ink)}
.sf-mas>summary:focus-visible{outline:2px solid var(--fx-a);outline-offset:2px}
.sf-mas>.db-card,.sf-mas>.mc-card,.sf-mas>section{margin:0 var(--sp-2) var(--sp-2)}

/* ---- Navegación lateral con profundidad ---- */
.db-nav button.on{background:linear-gradient(90deg,rgba(var(--fx-rgb),.16),transparent);box-shadow:inset 2px 0 0 var(--fx-a)}

/* ---- Fondo: rejilla de luz muy tenue (no tapa el negro puro) ---- */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:radial-gradient(900px 500px at 85% -10%,rgba(var(--fx-rgb),.10),transparent 70%),
  linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px) 0 0/48px 48px}

/* ---- Móvil y movimiento reducido ---- */
@media (max-width:640px){
  .db-head h2,.mc-head-copy h2{font-size:var(--t-xl)}
  .mc-kpi-value{font-size:var(--t-xl)}
  .db-card,.mc-card{padding:var(--sp-2)}
  .db-card,.mc-card,.lp-card{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .db-card,.mc-card,.lp-card,.db-btn,.mc-btn{transition:none}
  .db-card::after,.mc-card::after,.lp-card::after{display:none}
}

/* Resumen: la gráfica no debe ocupar media pantalla */
.mc-chart-stage svg{max-height:240px;width:100%}
.mc-grid-main{align-items:stretch}
.mc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mc-chart-stage{min-height:0;height:auto}

/* Agenda de publicación */
.ag-dia{margin:16px 0 8px;font:600 var(--t-xs) var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--fx-a)}
.ag-item{display:grid;grid-template-columns:56px 1fr auto auto auto;gap:var(--sp-2);align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.ag-hora{font:600 var(--t-md) var(--font-m);color:var(--ink-2)}
.ag-body small{display:block;color:var(--muted);font-size:var(--t-sm)}
.ag-st{font-size:var(--t-xs);padding:4px 10px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted)}
.ag-st.ok{color:var(--green);border-color:var(--green)}.ag-st.warn{color:#F2B84B;border-color:#F2B84B}
@media (max-width:640px){.ag-item{grid-template-columns:48px 1fr;row-gap:8px}.ag-st,.ag-item .db-btn{grid-column:2}}

/* Lo que no es un destino no sale en el menú (se llega desde donde se usa) */
.db-nav button[hidden]{display:none!important}

/* Presente en la página (lo usa el código) pero no visible: no aporta a conexión, diseño, publicación ni campañas */
.sf-oculto{display:none!important}

/* Estudio simple (Fotos y Vídeos): idea, archivos y resultados; el editor completo queda plegado */
.sf-avanzado.sf-colapsado{display:none}
.sf-crear{max-width:880px;margin-inline:auto}
.sf-crear textarea{width:100%;font-size:var(--t-md);margin:var(--sp-1) 0 var(--sp-2)}
.sf-fila{display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:flex-end;margin:var(--sp-1) 0}
.sf-file{cursor:pointer}
.sf-mini{display:grid;gap:4px;font-size:var(--t-xs);color:var(--muted)}
.sf-res{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-2);margin-top:var(--sp-2)}
.sf-pieza{margin:0}.sf-pieza img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.sf-pieza figcaption{font-size:var(--t-xs);color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,180px));gap:var(--sp-1);margin:var(--sp-2) 0}
.sf-clip{display:grid;gap:4px;font-size:var(--t-xs);color:var(--muted);cursor:pointer}
.sf-clip video{width:100%;aspect-ratio:9/16;max-height:180px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.sf-res-video{display:block}.sf-res-video video{max-width:100%;max-height:420px;border-radius:12px}

/* ===== Iconos holográficos 3D ===== */
.db-nav button,.cx-card,.hv-t{perspective:260px}
svg.ic-cristal{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.23,1,.32,1),filter .3s}
svg.ic-cristal .sfc-sweep{animation:sfc-sweep 1.2s cubic-bezier(.23,1,.32,1) 1 paused both}
svg.ic-cristal .sfc-glifo,svg.ic-cristal .sfc-sombra{transition:transform .35s cubic-bezier(.23,1,.32,1)}
@keyframes sfc-sweep{from{transform:translateX(0)}to{transform:translateX(190px)}}
@keyframes sfc-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@media (hover:hover) and (pointer:fine){
  .db-nav button:hover svg.ic-cristal,.cx-card:hover svg.ic-cristal,.hv-t:hover svg.ic-cristal{
    transform:rotateX(14deg) rotateY(-16deg) translateY(-3px) scale(1.1);filter:drop-shadow(0 10px 16px rgba(var(--fx-rgb),.45))}
  .db-nav button:hover svg.ic-cristal .sfc-sweep,.cx-card:hover svg.ic-cristal .sfc-sweep,.hv-t:hover svg.ic-cristal .sfc-sweep{animation-play-state:running}
  .db-nav button:hover svg.ic-cristal .sfc-glifo,.cx-card:hover svg.ic-cristal .sfc-glifo{transform:translate(-1px,-3px)}
  .db-nav button:hover svg.ic-cristal .sfc-sombra,.cx-card:hover svg.ic-cristal .sfc-sombra{transform:translate(2px,3px)}
}
/* el activo respira: la luz lo barre cada pocos segundos y el glifo flota */
.db-nav button.on svg.ic-cristal .sfc-sweep{animation:sfc-sweep 5s ease-in-out infinite;animation-play-state:running}
.db-nav button.on svg.ic-cristal .sfc-glifo{animation:sfc-flota 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  svg.ic-cristal .sfc-sweep,.db-nav button.on svg.ic-cristal .sfc-sweep,.db-nav button.on svg.ic-cristal .sfc-glifo{animation:none}
  .db-nav button:hover svg.ic-cristal,.cx-card:hover svg.ic-cristal{transform:none}
}

/* ===== Acceso (login y registro): fondo vivo, tarjeta holográfica y iconos flotantes ===== */
#lgField{position:fixed;inset:0;z-index:0;pointer-events:none}
.lg-wrap{position:relative;z-index:1}
.lg-wrap .lg-scene-side{background:transparent!important;border-right:1px solid rgba(255,255,255,.07)!important}
.lg-wrap .lg-form{background:transparent}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.lg-card{position:relative;isolation:isolate;background:linear-gradient(160deg,rgba(24,24,24,.66),rgba(6,6,6,.82))!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid transparent!important;
  box-shadow:0 40px 90px -40px rgba(var(--fx-rgb),.55),0 2px 0 rgba(255,255,255,.05) inset;will-change:transform}
.lg-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--ang),rgba(255,255,255,.06) 0 45%,rgba(var(--fx-rgb),.95) 68%,#fff 74%,rgba(var(--fx-rgb),.95) 80%,rgba(255,255,255,.06) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:lg-giro 7s linear infinite}
@keyframes lg-giro{to{--ang:360deg}}
.lg-scene-copy h1 em{background:linear-gradient(100deg,var(--fx-a),#F3E6D6 45%,var(--fx-a));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:lg-brillo 6s ease-in-out infinite}
@keyframes lg-brillo{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.lg-orbita{position:absolute;inset:0;pointer-events:none}
.lg-flota{position:absolute;width:76px;height:76px;opacity:.9;animation:lg-flota 7s ease-in-out infinite}
.lg-flota svg{width:100%;height:100%;filter:drop-shadow(0 14px 22px rgba(var(--fx-rgb),.35))}
.lg-f1{right:7%;top:14%}.lg-f2{right:20%;top:30%;width:60px;height:60px;animation-delay:-2s}.lg-f3{right:6%;top:50%;width:64px;height:64px;animation-delay:-4s}
.lg-f4{right:22%;top:68%;width:54px;height:54px;animation-delay:-1s}.lg-f5{right:9%;top:82%;animation-delay:-5s}
@keyframes lg-flota{0%,100%{transform:translateY(0) rotateY(-12deg)}50%{transform:translateY(-16px) rotateY(12deg)}}
@media (max-width:1279px){.lg-orbita{display:none}}
@media (prefers-reduced-motion:reduce){.lg-card::before,.lg-scene-copy h1 em,.lg-flota{animation:none}}