/* ==========================================================
   AJUSTES · CADA APARTADO CON SU CARA
   ----------------------------------------------------------
   Nueve pantallas que se veían iguales: el color del apartado
   solo teñía un 14 % del fondo, así que a dos metros no se
   distinguía Audio de Facturación.

   Aquí se le da peso. La banda de arriba y la de abajo llevan
   el color del apartado en el relleno, en el canto y en el
   halo, y el motivo del lienzo cambia con la pantalla. Al
   cambiar de pestaña se nota que has cambiado de sitio.
   ========================================================== */

/* ---------- la banda de arriba ---------- */
.aj-banda{
  border:0;
  background:
    linear-gradient(118deg,
      color-mix(in srgb, var(--aj-tono,#FFA033) 30%, #0A0E16) 0%,
      color-mix(in srgb, var(--aj-tono,#FFA033) 11%, #080B12) 46%,
      #05070C 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px color-mix(in srgb, var(--aj-tono,#FFA033) 32%, transparent),
    0 0 54px -30px var(--aj-tono,#FFA033),
    0 20px 46px -36px #000}
.aj-banda > canvas{opacity:.72}
.aj-banda .kick{color:color-mix(in srgb, var(--aj-tono,#FFA033) 76%, #fff)}
.aj-banda h2{color:#E7ECF3}
.aj-banda p{color:#AEB8C7}
.aj-sello{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--aj-tono,#FFA033) 88%, #fff),
    var(--aj-tono,#FFA033));
  box-shadow:0 8px 24px -12px var(--aj-tono,#FFA033)}
.aj-sello svg{stroke:#06080D;fill:none;stroke-width:1.9}
.aj-cifra b{color:#E7ECF3}
.aj-cifra span{color:#8A93A3}
.aj-cifra.ok b{color:color-mix(in srgb, var(--aj-tono,#FFA033) 80%, #fff)}

/* ---------- la banda de abajo, que cierra la pantalla ---------- */
.aj-pie-banda{
  position:relative;overflow:hidden;
  background:
    linear-gradient(242deg,
      color-mix(in srgb, var(--aj-tono,#FFA033) 28%, #0A0E16) 0%,
      color-mix(in srgb, var(--aj-tono,#FFA033) 10%, #080B12) 48%,
      #05070C 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 0 0 1px color-mix(in srgb, var(--aj-tono,#FFA033) 28%, transparent),
    0 0 54px -30px var(--aj-tono,#FFA033),
    0 20px 46px -36px #000}
.aj-pie-banda .kick{color:color-mix(in srgb, var(--aj-tono,#FFA033) 76%, #fff)}
.aj-pie-banda h3{color:#E7ECF3}
.aj-pie-banda p{color:#AEB8C7}
.aj-pie-sello{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--aj-tono,#FFA033) 88%, #fff),
    var(--aj-tono,#FFA033));
  box-shadow:0 8px 24px -12px var(--aj-tono,#FFA033)}
.aj-pie-sello svg{stroke:#06080D;fill:none;stroke-width:1.9}
/* el botón principal del pie, con el color del apartado */
.aj-pie-acc .btn:not(.fantasma){
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--aj-tono,#FFA033) 88%, #fff),
    var(--aj-tono,#FFA033));
  color:#06080D;border:0;font-weight:700;
  box-shadow:0 0 30px -10px var(--aj-tono,#FFA033)}
.aj-pie-acc .btn.fantasma{
  color:color-mix(in srgb, var(--aj-tono,#FFA033) 70%, #fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--aj-tono,#FFA033) 38%, transparent)}

/* ---------- la pestaña activa lleva el color de su apartado ---------- */
.pestanas .pestana[data-on="1"][data-hoja="cuenta"]      {--pt:#FFA033}
.pestanas .pestana[data-on="1"][data-hoja="audio"]       {--pt:#7FD4FF}
.pestanas .pestana[data-on="1"][data-hoja="pagina"]      {--pt:#C79BFF}
.pestanas .pestana[data-on="1"][data-hoja="emision"]     {--pt:#FF4438}
.pestanas .pestana[data-on="1"][data-hoja="avisos"]      {--pt:#FFD166}
.pestanas .pestana[data-on="1"][data-hoja="controladora"]{--pt:#4BE0A0}
.pestanas .pestana[data-on="1"][data-hoja="jukebox"]     {--pt:#00C8FF}
.pestanas .pestana[data-on="1"][data-hoja="ia"]          {--pt:#A78BFA}
.pestanas .pestana[data-on="1"][data-hoja="pago"]        {--pt:#5EE6C5}
.pestanas .pestana[data-on="1"]{
  color:#06080D;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--pt,#FFA033) 90%, #fff), var(--pt,#FFA033));
  box-shadow:0 0 26px -10px var(--pt,#FFA033)}

/* ==========================================================
   LOS TONOS DEL TEXTO
   ----------------------------------------------------------
   Tres pasos y ninguno es blanco puro: sobre negro, el blanco
   de verdad vibra y leer cansa.
   ========================================================== */
body[data-pagina="ajustes"] .panel h3,
body[data-pagina="ajustes"] .panel-cab .mono{color:#D8E0EB}
body[data-pagina="ajustes"] .panel p,
body[data-pagina="ajustes"] .panel li{color:#AEB8C7}
body[data-pagina="ajustes"] .nota,
body[data-pagina="ajustes"] .apagado,
body[data-pagina="ajustes"] small{color:#7E8896}
body[data-pagina="ajustes"] input,
body[data-pagina="ajustes"] textarea,
body[data-pagina="ajustes"] select{color:#E7ECF3}

/* ==========================================================
   AJUSTES · EL COLOR LLEGA A TODA LA PANTALLA
   ----------------------------------------------------------
   No bastaba con teñir las dos bandas: en medio quedaban doce
   paneles negros iguales en las nueve pantallas, y eso es lo
   que las hacía indistinguibles.

   Ahora el color del apartado baja a todo: cada hoja declara
   su tono y de ahí lo cogen el canto de los paneles, el icono
   de su cabecera, los interruptores, las barras y los botones.
   Al cambiar de pestaña cambia la pantalla entera, no una
   franja.
   ========================================================== */
.hoja[data-hoja="cuenta"]      {--sec:#FFA033}
.hoja[data-hoja="audio"]       {--sec:#7FD4FF}
.hoja[data-hoja="pagina"]      {--sec:#C79BFF}
.hoja[data-hoja="emision"]     {--sec:#FF4438}
.hoja[data-hoja="avisos"]      {--sec:#FFD166}
.hoja[data-hoja="controladora"]{--sec:#4BE0A0}
.hoja[data-hoja="jukebox"]     {--sec:#00C8FF}
.hoja[data-hoja="ia"]          {--sec:#A78BFA}
.hoja[data-hoja="pago"]        {--sec:#5EE6C5}

/* ---------- la banda de arriba, en grande ---------- */
.hoja .aj-banda{
  min-height:clamp(120px,17vh,210px);
  align-items:center;
  padding:clamp(18px,2.4vh,30px) clamp(20px,1.6vw,32px);
  border-radius:clamp(16px,1.4vw,24px)}
/* el motivo ya no es un adorno de fondo: es la figura de la pieza */
.hoja .aj-banda > canvas{opacity:1;
  -webkit-mask-image:linear-gradient(100deg, #000 0 30%, rgba(0,0,0,.45) 62%, transparent 92%);
  mask-image:linear-gradient(100deg, #000 0 30%, rgba(0,0,0,.45) 62%, transparent 92%)}
.hoja .aj-banda h2{font-size:clamp(1.05rem,1.6vw,1.75rem);line-height:1.15}
.hoja .aj-sello{width:clamp(48px,4vw,72px);border-radius:clamp(14px,1.2vw,20px)}
.hoja .aj-sello svg{width:52%;height:52%}
.hoja .aj-cifra b{font-size:clamp(1.1rem,1.7vw,1.9rem)}

/* ---------- los paneles cogen el color de su apartado ---------- */
.hoja .panel{
  position:relative;
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--sec,#FFA033) 9%, #0B0F17) 0%,
      #080B12 58%, #06080E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px color-mix(in srgb, var(--sec,#FFA033) 17%, rgba(255,255,255,.05)),
    0 22px 52px -42px #000;
  transition:box-shadow .2s ease}
.hoja .panel:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px color-mix(in srgb, var(--sec,#FFA033) 34%, transparent),
    0 0 44px -30px var(--sec,#FFA033),
    0 22px 52px -42px #000}
/* el filo de arriba, del color: es lo que hace que se lean como piezas */
.hoja .panel::after{
  content:"";position:absolute;left:clamp(14px,1.2vw,22px);right:clamp(14px,1.2vw,22px);top:0;
  height:2px;border-radius:0 0 3px 3px;pointer-events:none;
  background:linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--sec,#FFA033) 70%, transparent), transparent)}

/* la cabecera del panel y su icono */
.hoja .panel-cab .mono,
.hoja .panel > .mono:first-child{color:#D8E0EB}
.hoja .panel-cab .ic,
.hoja .panel .ic{stroke:var(--sec,#FFA033)}

/* ---------- los mandos, del color ---------- */
.hoja input[type="checkbox"]:checked + *,
.hoja .interruptor[data-on="1"],
.hoja [role="switch"][aria-checked="true"]{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--sec,#FFA033) 92%, #fff), var(--sec,#FFA033)) !important;
  box-shadow:0 0 20px -7px var(--sec,#FFA033)}
.hoja .btn:not(.fantasma):not(.peligro){
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--sec,#FFA033) 90%, #fff), var(--sec,#FFA033));
  color:#06080D;border:0;font-weight:700;
  box-shadow:0 0 26px -10px var(--sec,#FFA033)}
.hoja .btn.fantasma{
  color:color-mix(in srgb, var(--sec,#FFA033) 72%, #fff);
  background:transparent;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sec,#FFA033) 34%, transparent)}
.hoja .btn.fantasma:hover{
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sec,#FFA033) 62%, transparent)}
/* las barras de progreso y las cifras destacadas */
.hoja .barra > i,
.hoja .progreso > i,
.hoja [data-barra] > i{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--sec,#FFA033) 60%, #fff), var(--sec,#FFA033)) !important;
  box-shadow:0 0 14px -4px var(--sec,#FFA033)}
/* lo que está dentro de un campo, al foco, con su color */
.hoja input:focus,
.hoja textarea:focus,
.hoja select:focus{
  outline:0;
  box-shadow:inset 0 0 0 1px var(--sec,#FFA033),
             0 0 0 3px color-mix(in srgb, var(--sec,#FFA033) 18%, transparent)}