/* ==========================================================================
   COPILOTO CS — CAPA "NOVA" (cristal + Black)
   Se carga al final: no cambia flujos ni IDs, solo la piel.
   Usa var(--br) → Liverpool magenta / Suburbia morado automáticamente.
   ========================================================================== */
:root{
  --nv-acc: var(--br);
  --nv-acc2: color-mix(in srgb, var(--br) 55%, #ff8ac4);
  --nv-glass: rgba(255,255,255,.62);
  --nv-glass-2: rgba(255,255,255,.78);
  --nv-line: rgba(255,255,255,.85);
  --nv-edge: color-mix(in srgb, var(--br) 22%, rgba(255,255,255,.6));
  --nv-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 50px color-mix(in srgb, var(--br) 12%, transparent), 0 2px 8px rgba(30,0,20,.05);
  --nv-radius: 22px;
}

/* ── Fondo vivo: malla de color que se mueve muy lento ── */
body{
  background:#f7f1f5 !important;
  letter-spacing:-.005em;
}
body::after{
  content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40% 40% at 12% 18%, color-mix(in srgb, var(--br) 30%, transparent), transparent 70%),
    radial-gradient(35% 35% at 88% 12%, color-mix(in srgb, var(--br) 18%, #ffd1e8), transparent 70%),
    radial-gradient(45% 45% at 78% 88%, color-mix(in srgb, var(--br) 20%, #c9b6ff), transparent 70%),
    radial-gradient(40% 40% at 18% 92%, color-mix(in srgb, var(--br) 14%, #ffe3c7), transparent 70%);
  filter: blur(30px) saturate(1.15);
  animation: novaMesh 38s ease-in-out infinite alternate;
}
@keyframes novaMesh{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(-3%,2%,0) rotate(4deg) scale(1.05)}
  100%{transform:translate3d(2%,-2%,0) rotate(-3deg) scale(1.02)}
}
html.cielo-pausa body::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ body::after{animation:none} }

/* ── Barra superior: cristal flotante ── */
.topbar{
  background:rgba(255,255,255,.55) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  border-bottom:1px solid var(--nv-edge) !important;
  box-shadow:0 10px 30px color-mix(in srgb, var(--br) 8%, transparent) !important;
}
.view-toggle{
  background:rgba(255,255,255,.5) !important; border:1px solid var(--nv-line) !important;
  border-radius:999px !important; padding:4px !important; box-shadow:inset 0 1px 2px rgba(0,0,0,.04) !important;
}
.view-toggle button{border-radius:999px !important; font-weight:800 !important; transition:all .2s ease !important}
.view-toggle button.on{
  background:linear-gradient(135deg, var(--nv-acc), color-mix(in srgb, var(--br) 70%, #2a0018)) !important;
  color:#fff !important; box-shadow:0 8px 20px color-mix(in srgb, var(--br) 35%, transparent) !important;
}

/* ── Superficies de cristal con borde luminoso ── */
.panel,.cp-card,.cp-step,.cp-head,.home-product-card,.cp-tangible,.cp-result{
  background:var(--nv-glass) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border:1px solid var(--nv-line) !important;
  border-radius:var(--nv-radius) !important;
  box-shadow:var(--nv-shadow) !important;
}
.cp-card{overflow:hidden}
.cp-card-hd{
  background:linear-gradient(90deg, color-mix(in srgb, var(--br) 10%, transparent), transparent) !important;
  border-bottom:1px solid var(--nv-edge) !important;
  letter-spacing:.06em !important;
}
.cp-card-main{border:1.5px solid color-mix(in srgb, var(--br) 45%, white) !important; box-shadow:0 0 0 5px color-mix(in srgb, var(--br) 8%, transparent), var(--nv-shadow) !important}

/* Títulos con más presencia */
.cp-head h1, .cp-wrap h1{font-weight:900 !important; letter-spacing:-.035em !important}
.cp-step-label{letter-spacing:.14em !important; color:var(--nv-acc) !important}

/* ── Opciones (motivos, perfiles): tarjetas que responden ── */
.cp-opt{
  background:var(--nv-glass-2) !important; border:1px solid var(--nv-line) !important; border-radius:18px !important;
  box-shadow:0 1px 0 #fff inset, 0 6px 18px rgba(30,0,20,.05) !important;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s !important;
}
.cp-opt:hover{
  transform:translateY(-3px) !important;
  border-color:color-mix(in srgb, var(--br) 50%, white) !important;
  box-shadow:0 14px 30px color-mix(in srgb, var(--br) 20%, transparent) !important;
}
.home-product-card{transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s !important}
.home-product-card:hover{transform:translateY(-6px) !important; box-shadow:0 26px 60px color-mix(in srgb, var(--br) 22%, transparent) !important}

/* ── Botones ── */
.cp-btn-primary,.cp-video-btn,#accesoContinuarBtn{
  background:linear-gradient(135deg, var(--nv-acc), color-mix(in srgb, var(--br) 65%, #1a0010)) !important;
  border:none !important; color:#fff !important;
  box-shadow:0 10px 26px color-mix(in srgb, var(--br) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transition:transform .15s, box-shadow .15s !important;
}
.cp-btn-primary:hover,.cp-video-btn:hover,#accesoContinuarBtn:not(:disabled):hover{transform:translateY(-2px) !important; box-shadow:0 16px 34px color-mix(in srgb, var(--br) 45%, transparent) !important}
.cp-tool-btn{
  background:rgba(255,255,255,.6) !important; border:1px solid var(--nv-line) !important; border-radius:999px !important;
  backdrop-filter:blur(10px); font-weight:800 !important;
}
.cp-tool-btn:hover{border-color:var(--nv-acc) !important; color:var(--nv-acc) !important}

/* Guion principal: tipografía de lectura grande */
.cp-speech{font-size:17px !important; line-height:1.65 !important; font-weight:600 !important}

/* Entradas */
input[type=text],input:not([type]),textarea,select{border-radius:14px !important}

/* ── Acceso: tarjeta de cristal más profunda ── */
#accesoCard{border-radius:34px !important; box-shadow:0 50px 140px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.25) inset !important}
#accesoBody{background:rgba(255,255,255,.72) !important; backdrop-filter:blur(24px)}
.acceso-input{border-radius:14px !important}

/* ==========================================================================
   MODO BLACK  (body.dark)
   ========================================================================== */
body.dark{ background:#07060a !important; color:#ece8ef }
body.dark::after{
  background:
    radial-gradient(38% 38% at 15% 15%, color-mix(in srgb, var(--br) 34%, transparent), transparent 70%),
    radial-gradient(30% 30% at 85% 20%, color-mix(in srgb, var(--br) 20%, #3a0a5a), transparent 70%),
    radial-gradient(40% 40% at 75% 90%, color-mix(in srgb, var(--br) 16%, #001a3a), transparent 70%);
  filter: blur(40px) saturate(1.2); opacity:.55;
}
body.dark .topbar{background:rgba(10,8,14,.6) !important; border-bottom:1px solid rgba(255,255,255,.07) !important}
body.dark .view-toggle{background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.08) !important}
body.dark .view-toggle button:not(.on){color:#b9b3c0 !important}
body.dark .panel,body.dark .cp-card,body.dark .cp-step,body.dark .cp-head,body.dark .home-product-card,body.dark .cp-tangible,body.dark .cp-result{
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 20px 50px rgba(0,0,0,.45) !important;
}
body.dark .cp-card-main{border-color:color-mix(in srgb, var(--br) 60%, transparent) !important; box-shadow:0 0 0 1px color-mix(in srgb, var(--br) 40%, transparent), 0 0 34px color-mix(in srgb, var(--br) 28%, transparent) !important}
body.dark .cp-card-hd{background:linear-gradient(90deg, color-mix(in srgb, var(--br) 18%, transparent), transparent) !important; border-bottom-color:rgba(255,255,255,.06) !important}
body.dark .cp-opt{background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.09) !important; box-shadow:none !important}
body.dark .cp-opt:hover{border-color:var(--nv-acc) !important; box-shadow:0 0 0 1px var(--nv-acc), 0 0 26px color-mix(in srgb, var(--br) 35%, transparent) !important}
body.dark .cp-tool-btn{background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.1) !important; color:#e7e1ec !important}
body.dark #herrMenu,body.dark #dailyHistPanel,body.dark #notasPanel{background:rgba(16,12,20,.92) !important; backdrop-filter:blur(20px); border-color:rgba(255,255,255,.08) !important}
body.dark #btnHerramientas,body.dark #dailyScoreBadge{background:rgba(255,255,255,.05) !important; color:#f1ecf4 !important}
body.dark #cieloBand{border-bottom-color:rgba(255,255,255,.06)}