/* ==========================================================
   DECKA · AMBIENTE
   El fondo de cada pantalla. Una capa detrás de todo, con
   auroras de color que se mueven despacio, y un tratamiento
   de vidrio para los paneles que van encima.

   Cada página tiene su pareja de tonos, así que se sabe
   dónde estás antes de leer nada:
     cabina      ámbar y rojo      · el fuego, lo que suena
     biblioteca  cian y azul       · lo frío, lo archivado
     registro    verde y cian      · lo cerrado, lo firmado
     club        violeta y magenta · la gente
     radio       rojo y ámbar      · el directo
     sesiones    verde y ámbar     · lo grabado
     estudio     magenta y violeta · lo que se crea
     panel       azul y cian       · los números

   Todo son degradados: ni imágenes, ni canvas, ni un solo
   píxel que descargar. El movimiento es una transformación
   sobre una capa aislada, así que no repinta nada de debajo.
   ========================================================== */

:root{
  /* la pareja por defecto, por si una página no declara la suya */
  --amb-1:#FFA033;
  --amb-2:#7FD4FF;
  --amb-3:#3A4358;
  --amb-fuerza:1;
}

/* ---------- la capa ----------
   Va en el background del propio body, no en un pseudo-elemento: la
   cabina ya tiene un canvas de motas en z-index 0 y el contenido en
   z-index 1, así que meter otra capa ahí solo daba guerra. Pintando
   el fondo del body queda por debajo de todo sin pelearse con nadie.
   ---------------------------------------------------------- */
/* Va en el fondo de <html>, no del body: así se pinta UNA vez en el
   lienzo de la página y no vuelve a tocarse. Antes lo animaba sobre
   el body con background-attachment:fixed, y eso obliga al navegador a
   repintar la pantalla entera en cada cuadro — de ahí el retraso. Una
   aurora quieta se ve igual de bien y no cuesta nada. */
/* Sin pseudo-elemento y sin animación: los degradados van en el fondo
   de <html>, que el navegador propaga al lienzo de la página y pinta
   UNA vez. Un ::before con z-index negativo se pinta detrás del fondo
   de su propio padre, así que desaparecía; y animarlo sobre el body con
   background-attachment:fixed era lo que metía el retraso. Esto no
   cuesta nada y se ve siempre. */
html{
  /* EL CHASIS
     La versión anterior pintaba los tonos a plena opacidad sobre una
     base clara: eso no es un fondo, es una capa de pintura, y dejaba
     todos los paneles lavados y sin contraste —de ahí que la página
     no pareciera un instrumento.

     Un equipo de estudio es NEGRO con luz alrededor. Así que: base
     casi negra, el color entrando desde los bordes a baja opacidad, y
     una viñeta que oscurece el centro, que es justo donde caen los
     paneles y donde hace falta contraste para leer. El color sigue
     estando —cada página el suyo— pero como luz de sala, no como
     pintura encima.

     Segunda corrección, y la importante: aun a baja opacidad, treinta
     por ciento de color es PINTURA. Sobre eso, un panel traslúcido deja
     pasar el tono y el texto acaba flotando sobre verde, naranja o
     violeta —«molesta leerlas»—. Ahora el color entra al diez por
     ciento y solo por las esquinas, la viñeta cierra el centro casi a
     negro, y los paneles de abajo son opacos. La identidad de cada
     página sigue ahí, pero como luz de sala, no como filtro. */
  background-color:#07090E;
  background-image:
    /* la luz que entra por las esquinas */
    radial-gradient(70vmax 56vmax at  4% -8%,
      color-mix(in oklab, var(--amb-1) 11%, transparent), transparent 62%),
    radial-gradient(76vmax 60vmax at 98%  6%,
      color-mix(in oklab, var(--amb-2) 10%, transparent), transparent 64%),
    radial-gradient(86vmax 66vmax at 46% 114%,
      color-mix(in oklab, var(--amb-3) 13%, transparent), transparent 64%),
    /* un poso del tono, muy bajo, para que el negro no sea neutro */
    linear-gradient(180deg,
      color-mix(in oklab, var(--amb-base) 20%, transparent),
      color-mix(in oklab, var(--amb-base) 8%, transparent)),
    /* y la viñeta, que devuelve el contraste al centro */
    radial-gradient(120vmax 96vmax at 50% 44%,
      rgba(5,7,11,.86) 0%, rgba(5,7,11,.52) 54%, rgba(5,7,11,.10) 90%);
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:scroll;
  min-height:100%;
}
/* el body no puede tapar el lienzo */
body.shell{background:transparent !important}

/* sin color-mix, los colores planos y menos opacidad */
@supports not (background: color-mix(in oklab, red 50%, transparent)){
  html{
    background-image:
      radial-gradient(120vmax 96vmax at 50% 48%, rgba(5,7,11,.72), rgba(5,7,11,0) 88%),
      radial-gradient(70vmax 56vmax at  4% -8%, var(--amb-1), transparent 62%),
      radial-gradient(76vmax 60vmax at 98%  6%, var(--amb-2), transparent 64%),
      radial-gradient(86vmax 66vmax at 46% 114%,var(--amb-3), transparent 66%);
    opacity:1;
  }
}

/* ==========================================================
   la pareja de cada página
   ========================================================== */
/* La identidad de la página vive en <body data-pagina>, pero el fondo
   lo pinta <html>, que está por encima y no hereda hacia arriba. Con
   :has() se lee el body desde el html y cada pantalla se lleva su
   pareja de tonos. Los selectores de body se quedan por si algo de
   dentro usa las mismas variables. */
html:has(body[data-pagina="cabina"]),
body.shell[data-pagina="cabina"]{--amb-1:#FF7A18; --amb-2:#FF4438; --amb-3:#7A2E08; --amb-fuerza:.82; --amb-base:#210E03}
html:has(body[data-pagina="biblioteca"]),
body.shell[data-pagina="biblioteca"]{--amb-1:#7FD4FF; --amb-2:#4C7BFF; --amb-3:#1A4590; --amb-base:#08172E}
html:has(body[data-pagina="registro"]),
body.shell[data-pagina="registro"]{--amb-1:#4BE0A0; --amb-2:#7FD4FF; --amb-3:#0F6A4E; --amb-base:#052018}
html:has(body[data-pagina="club"]),
body.shell[data-pagina="club"]{--amb-1:#8B5CF6; --amb-2:#E24FA8; --amb-3:#5B1FA8; --amb-fuerza:1.14; --amb-base:#1F0C3D}
html:has(body[data-pagina="radio"]),
body.shell[data-pagina="radio"]{--amb-1:#FF4438; --amb-2:#FFA033; --amb-3:#8A2018; --amb-base:#290B08}
html:has(body[data-pagina="antena"]),
body.shell[data-pagina="antena"]{--amb-1:#FF4438; --amb-2:#B98BFF; --amb-3:#6A1A78; --amb-base:#1F0823}
html:has(body[data-pagina="emision"]),
body.shell[data-pagina="emision"]{--amb-1:#FF6A1A; --amb-2:#FF4438; --amb-3:#7A2A0E; --amb-base:#220B04}
html:has(body[data-pagina="set"]),
body.shell[data-pagina="set"]{--amb-1:#4BE0A0; --amb-2:#FFA033; --amb-3:#137A52; --amb-base:#071F17}
html:has(body[data-pagina="sesiones"]),
body.shell[data-pagina="sesiones"]{--amb-1:#4BE0A0; --amb-2:#FFA033; --amb-3:#137A52; --amb-base:#071F17}
html:has(body[data-pagina="estudio"]),
body.shell[data-pagina="estudio"]{--amb-1:#B98BFF; --amb-2:#E24FA8; --amb-3:#5A1FA0; --amb-base:#1C0934}
html:has(body[data-pagina="estudio-ia"]),
body.shell[data-pagina="estudio-ia"]{--amb-1:#B98BFF; --amb-2:#7FD4FF; --amb-3:#3A24A8; --amb-base:#110B38}
html:has(body[data-pagina="masterizar"]),
body.shell[data-pagina="masterizar"]{--amb-1:#FFC97A; --amb-2:#7FD4FF; --amb-3:#7A5410; --amb-base:#1F1704}
html:has(body[data-pagina="panel"]),
body.shell[data-pagina="panel"]{--amb-1:#4C7BFF; --amb-2:#7FD4FF; --amb-3:#1B48A8; --amb-base:#081735}
html:has(body[data-pagina="perfil"]),
body.shell[data-pagina="perfil"]{--amb-1:#E24FA8; --amb-2:#FFA033; --amb-3:#8A2470; --amb-base:#280B23}
html:has(body[data-pagina="ajustes"]),
body.shell[data-pagina="ajustes"]{--amb-1:#98A1B4; --amb-2:#7FD4FF; --amb-3:#2A3450; --amb-fuerza:.72; --amb-base:#0E111A}
html:has(body[data-pagina="precios"]),
body.shell[data-pagina="precios"]{--amb-1:#FFA033; --amb-2:#4BE0A0; --amb-3:#6A5210; --amb-base:#1C1504}
html:has(body[data-pagina="correo"]),
body.shell[data-pagina="correo"]{--amb-1:#7FD4FF; --amb-2:#B98BFF; --amb-3:#2A2FA0; --amb-base:#0C0E2E}
html:has(body[data-pagina="estados"]),
body.shell[data-pagina="estados"]{--amb-1:#4BE0A0; --amb-2:#4C7BFF; --amb-3:#10683C; --amb-base:#051D11}
html:has(body[data-pagina="movil"]),
body.shell[data-pagina="movil"]{--amb-1:#FFA033; --amb-2:#B98BFF; --amb-3:#5A2478; --amb-base:#190B23}
html:has(body[data-pagina="elementos"]),
body.shell[data-pagina="elementos"]{--amb-1:#98A1B4; --amb-2:#FFA033; --amb-3:#2A3450; --amb-fuerza:.7; --amb-base:#0E111A}
html:has(body[data-pagina="entrar"]),
body.shell[data-pagina="entrar"]{--amb-1:#FFA033; --amb-2:#7FD4FF; --amb-3:#30384F; --amb-base:#0F121D}
/* ----------------------------------------------------------
   LA CABINA Y LA VISTA DE DIRECTO NO LLEVAN AMBIENTE
   Aquí no es un descuido: es una decisión. En la cabina la
   pantalla ya está llena de luz propia —LED, ondas, vúmetros,
   los platos— y un fondo de color por detrás compite con todo
   eso y ensucia la lectura. Quien está pinchando necesita que
   lo único que brille sea la señal.

   Las dos se quedan como estaban: negras.
   ---------------------------------------------------------- */
html:has(body[data-pagina="cabina"]),
html:has(body[data-pagina="cabina4"]),
html:has(body[data-pagina="directo"]),
html:has(body[data-pagina="live"]){
  background-image:none !important;
  background-color:var(--noche, #080A0F) !important;
}
body.shell[data-pagina="cabina"],
body.shell[data-pagina="cabina4"],
body.shell[data-pagina="directo"],
body.shell[data-pagina="live"]{
  background:var(--noche, #080A0F) !important;
}
/* y el mueble vuelve a ser opaco, que era como estaba */
body.shell[data-pagina="cabina"] #consola{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #181D2A, #0E1220) !important;
}
body.shell[data-pagina="cabina"] > canvas#fondoApp{mix-blend-mode:normal; opacity:1}

/* ==========================================================
   vidrio
   Solo en los paneles grandes, no en cada cajita: el desenfoque
   de fondo es de lo más caro que hay y en la cabina compite con
   el audio y con el plato en tres dimensiones.
   ========================================================== */
/* Translucidez sin desenfoque. backdrop-filter obliga a rasterizar
   lo que hay detrás de cada panel en cada cuadro; con quince paneles
   por pantalla eso se nota, y se notaba. El alfa solo es gratis. */
/* Y solo dentro de la vista. Los menús, los desplegables del buscador,
   las ventanas y la barra flotan POR ENCIMA del contenido: si se vuelven
   translúcidos se lee lo de detrás a través de ellos, que es exactamente
   lo que pasaba. Esos se quedan opacos, como estaban. */
/* OPACOS. Un panel traslúcido deja pasar el color del fondo y el texto
   se lee sobre lo que haya detrás: por eso costaba leer. El tono de la
   página se queda, pero mezclado DENTRO del panel, al seis por ciento
   sobre casi negro, así que sigue distinguiéndose Audio de Facturación
   sin que nada tiña las letras. */
body.shell main.vista .panel:not(.liso){
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--amb-1) 6%, #12161F),
    color-mix(in oklab, var(--amb-3) 6%, #0A0D13));
  border-color:rgba(255,255,255,.075);
  box-shadow:0 28px 68px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
body.shell main.vista .panel.liso{
  background:color-mix(in oklab, var(--amb-3) 6%, #0C1017);
  border-color:rgba(255,255,255,.058);
}
@supports not (background: color-mix(in oklab, red 50%, transparent)){
  body.shell main.vista .panel:not(.liso){background:linear-gradient(180deg,#12161F,#0A0D13)}
  body.shell main.vista .panel.liso{background:#0C1017}
}
/* nada que flote puede ser transparente */
body.shell .resultados,
body.shell .menu-t,
body.shell .modal,
body.shell .dg-caja,
body.shell .velo .panel,
body.shell [role="menu"],
body.shell [role="listbox"]{
  background:var(--rack-alto) !important;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95) !important;
}
/* el filo de luz superior de los paneles, que es lo que hace que
   parezcan de cristal y no de plástico */
body.shell main.vista .panel{position:relative}
body.shell main.vista .panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.055), transparent 38%);
}

/* en pantallas pequeñas el desenfoque se va: no compensa */


/* ==========================================================
   LA BARRA DE ARRIBA NO SE TOCA
   El fondo es de la página, no de la navegación. Aquí no hay
   ni una regla sobre .barra-sup: se queda con su degradado,
   su filo de luz y el glow que sale por debajo, como estaba.
   ========================================================== */



/* ==========================================================
   LA CABINA, APARTE
   Aquí los paneles tapaban la pantalla entera y el fondo no
   se veía. Se les baja la opacidad para que el ámbar pase
   entre ellos, pero SIN backdrop-filter: el desenfoque de
   fondo compite con el audio y con el plato en tres
   dimensiones, y eso ya lo pagamos una vez.
   ========================================================== */
body.shell[data-pagina="cabina"] .panel,
body.shell[data-pagina="cabina4"] .panel{
  background:linear-gradient(180deg, rgba(28,34,50,.80), rgba(19,24,36,.86));
  border-color:rgba(255,190,130,.14);
}
body.shell[data-pagina="cabina"] .panel.liso,
body.shell[data-pagina="cabina4"] .panel.liso{background:rgba(14,18,27,.74)}
body.shell[data-pagina="cabina"] .plato-a,
body.shell[data-pagina="cabina"] .plato-b,
body.shell[data-pagina="cabina4"] .plato-a,
body.shell[data-pagina="cabina4"] .plato-b{
  background:linear-gradient(180deg, rgba(21,26,38,.80), rgba(12,16,23,.88));
  border-color:rgba(255,190,130,.13);
}
body.shell[data-pagina="cabina"] .centro-mesa,
body.shell[data-pagina="cabina"] .consola-mandos{background:transparent}
/* y el canvas de motas, un punto más tenue: sobre el degradado sobraba */
body.shell[data-pagina="cabina"] #fondoApp,
body.shell[data-pagina="cabina4"] #fondoApp{opacity:.45}