/* Tema espacial de toda la app: fondo oscuro con estrellas (espacio.js), vidrio y brillos celestes.
   La Sala lo suma solo al final de cada página (después de su estilo y de marca.css), así pisa los colores claros
   sin tocar cómo está armada cada una. Celeste como único color, como pidió. */

:root, html.oscuro { --fondo:#040b10; --tarjeta:rgba(14,40,48,.55); --panel:rgba(14,40,48,.55); --borde:rgba(106,204,226,.18);
  --texto:#e8f6f9; --suave:#8eb3bc; --crema:rgba(14,40,48,.6); --tinta:#e8f6f9; }
/* El fondo va en <html> y el cielo (canvas) detrás de todo con z-index negativo: así no hace falta tocar la
   posición de nada de cada página (menús fijos, encabezados pegados arriba, barras de abajo quedan como estaban). */
html { background:
    radial-gradient(1100px 560px at 75% -8%, rgba(106,204,226,.20), transparent 70%),
    radial-gradient(900px 520px at 5% 105%, rgba(43,157,184,.16), transparent 70%),
    radial-gradient(600px 400px at 45% 55%, rgba(120,90,255,.06), transparent 70%), #040b10 !important;
  background-attachment:fixed !important; min-height:100%; }
body { color:var(--texto) !important; background:transparent !important; }
#estrellas { position:fixed !important; inset:0; width:100vw; height:100vh; z-index:-1 !important; pointer-events:none; }
#franja-marca { position:sticky !important; z-index:9999 !important; background:rgba(4,11,16,.85) !important; color:#cfe6ec !important;
  border-bottom:1px solid rgba(106,204,226,.25); box-shadow:0 0 24px -8px rgba(106,204,226,.6) !important; backdrop-filter:blur(10px); }
#franja-marca b { color:#6acce2; text-shadow:0 0 12px rgba(106,204,226,.8); }
#franja-marca a { background:rgba(106,204,226,.1) !important; color:#e8f6f9 !important; }
#franja-marca a:hover { background:rgba(106,204,226,.22) !important; }

/* Encabezados */
header { background:rgba(4,11,16,.65) !important; color:var(--texto) !important; border-bottom:1px solid rgba(106,204,226,.15) !important;
  backdrop-filter:blur(10px); }
header h1, h1, h2, h3 { color:#fff !important; text-shadow:0 0 18px rgba(106,204,226,.45); }
header a, header .sub { color:#9fdcea !important; } header a:hover { color:#fff !important; }
.logo { box-shadow:0 0 18px rgba(106,204,226,.55); animation:respira 3s ease-in-out infinite; }
@keyframes respira { 50% { box-shadow:0 0 30px rgba(106,204,226,.9); } }

/* Textos */
p, li, td, label, .info, .ayuda, .nota, .sub, .meta, .intro, small { color:var(--suave); }
b, strong, .nombre, .titulo, .tipo { color:#e8f6f9; }
a { color:#8fe3f5; }
.dice, .claude p, .claude li, .paso p, .paso ul { color:#cfe6ec !important; }

/* Vidrio: tarjetas y cajas de todas las páginas */
.tarjeta, .paso, .opcion, .zona, .clip, .persona-clip, .elegido, .guardado, .item, .clips li, .placa, .modo, .ref, .aplicado,
.sonido, .intro, .escena, .leer, .voz, .kpi, .graf, .servicio, .tarjeta-video, .fila, .guion, .vacio, .caja, .claude,
.chips label, .gancho button, .sugerencias button, a.marca, .chip {
  background:var(--tarjeta) !important; border-color:var(--borde) !important; color:var(--texto); backdrop-filter:blur(8px); }
.tarjeta:hover, .paso:hover, .escena:hover, .ref:hover, .sonido:hover, .clip:hover, a.marca:hover, .kpi:hover, .graf:hover,
.servicio:hover, .tarjeta-video:hover {
  border-color:rgba(106,204,226,.55) !important; box-shadow:0 0 0 1px rgba(106,204,226,.3), 0 0 32px -6px rgba(106,204,226,.55) !important; }
/* Elegidos / arrastrando encima / marcados */
.opcion.sel, .modo.sel, .zona.encima, .escena.marcada, .voz.en-uso, .chips label:has(input:checked) {
  background:rgba(106,204,226,.18) !important; border-color:#6acce2 !important; box-shadow:0 0 22px -6px rgba(106,204,226,.8) !important; }
/* Avisos y errores, en versión oscura */
.ojo, .pill.nueva { background:rgba(242,196,90,.12) !important; border-color:rgba(242,196,90,.35) !important; color:#f6dc9a !important; }
.msg.error, .item.fallo, .error { color:#ffb4ab !important; }
.msg.error, .item.fallo { background:rgba(232,133,124,.14) !important; border-color:rgba(232,133,124,.4) !important; }
.sacar, .persona-clip button { background:rgba(106,204,226,.12) !important; color:#e8f6f9 !important; border:1px solid rgba(106,204,226,.25) !important; }
.sacar:hover { background:rgba(232,133,124,.18) !important; color:#ffb4ab !important; }

/* Campos */
:root body :is(input[type=text], input[type=search], input[type=password], input[type=number], input:not([type]), select, textarea) {
  background:rgba(4,20,26,.75) !important; color:#fff !important; border:1px solid rgba(106,204,226,.28) !important; }
input::placeholder, textarea::placeholder { color:#6f98a2 !important; }
input:focus, select:focus, textarea:focus { outline:2px solid #6acce2 !important; border-color:transparent !important;
  box-shadow:0 0 18px -4px rgba(106,204,226,.8); }
select option { background:#0b2129; color:#fff; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color:#6acce2; }
code { background:rgba(106,204,226,.14) !important; color:#bff0fa !important; }

/* Botones */
.btn.violeta, .btn.negro, .btn.azul, .btn.principal, button.primario { box-shadow:0 0 22px -4px rgba(106,204,226,.8); position:relative; overflow:hidden; }
.btn.violeta::after, .btn.principal::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; transform:skewX(-20deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent); animation:barrido 3.2s ease-in-out infinite; pointer-events:none; }
@keyframes barrido { 0%,60% { left:-60%; } 100% { left:140%; } }
.btn.claro, .btn.secundario { background:rgba(106,204,226,.12) !important; color:#e8f6f9 !important; border:1px solid rgba(106,204,226,.25) !important; }
.btn.claro:hover { background:rgba(106,204,226,.22) !important; }
.btn:disabled { box-shadow:none; }

/* Barras de progreso y la barra fija de abajo (storyboard) */
.barra i, .progreso i { background:linear-gradient(90deg,#2b9db8,#6acce2) !important; box-shadow:0 0 10px #6acce2; }
.barra:not(body > .barra) { background:rgba(106,204,226,.15) !important; }
body > .barra { background:rgba(4,11,16,.8) !important; border-top:1px solid rgba(106,204,226,.2) !important; backdrop-filter:blur(10px); }

/* Números y gráficos */
.kpi .n { color:#fff !important; text-shadow:0 0 22px rgba(106,204,226,.7); }
.destello { position:absolute; color:#bff0fa; font-style:normal; pointer-events:none; text-shadow:0 0 8px #6acce2;
  animation:titilar 2.4s ease-in-out infinite; opacity:0; }
@keyframes titilar { 0%,100% { opacity:0; transform:scale(.4) rotate(0); } 50% { opacity:1; transform:scale(1) rotate(45deg); } }

/* Chispitas que deja el mouse */
.chispa-cursor { position:fixed; z-index:9998; pointer-events:none; color:#bff0fa; font-size:12px; text-shadow:0 0 8px #6acce2;
  animation:chispear .9s ease-out forwards; }
@keyframes chispear { from { opacity:1; transform:translate(-50%,-50%) scale(1); }
  to { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2) rotate(120deg); } }

/* Ventanas emergentes */
dialog { background:#0b2129 !important; color:#e8f6f9 !important; border:1px solid rgba(106,204,226,.3) !important; }

::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(106,204,226,.3); border-radius:10px; } ::-webkit-scrollbar-thumb:hover { background:rgba(106,204,226,.55); }

@media (prefers-reduced-motion: reduce) { #estrellas { display:none; } }