/* ==========================================================
   DECKA · AJUSTES
   ----------------------------------------------------------
   Una página de ajustes se queda vacía en cuanto la abres en
   una pantalla grande: cuatro interruptores arriba y medio
   metro de negro debajo. Aquí cada apartado empieza por una
   banda que dice de qué va y cómo está la cosa ahora mismo, y
   sigue con el resto de lo que hace falta para no tener que
   irse a otra pantalla a terminar la faena.
   ========================================================== */

[hidden]{display:none !important}

/* ---------- la banda de cada apartado ---------- */
.aj-banda{position:relative;overflow:hidden;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,1.4vw,22px);align-items:center;
  padding:clamp(12px,1.5vh,18px) clamp(14px,1.2vw,20px);margin-bottom:clamp(10px,1.2vh,16px);
  border:1px solid var(--linea);border-radius:var(--r,16px);
  background:
    radial-gradient(85% 220% at 6% 50%, color-mix(in srgb, var(--aj-tono,#FFA033) 14%, transparent), transparent 58%),
    radial-gradient(70% 190% at 94% 50%, rgba(127,212,255,.08), transparent 62%),
    linear-gradient(180deg,#111721,#090C12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px -34px #000}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .aj-banda{background:linear-gradient(180deg,#111721,#090C12)}
}
.aj-banda > canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.38;pointer-events:none}
.aj-banda > *{position:relative}
.aj-sello{width:clamp(40px,3.4vw,52px);aspect-ratio:1;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(160deg,#18202C,#0A0F17);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--aj-tono,#FFA033) 30%, var(--linea)),
             0 0 28px -12px var(--aj-tono,#FFA033)}
.aj-sello svg{width:22px;height:22px;fill:none;stroke:var(--aj-tono,#FFA033);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aj-txt{min-width:0}
.aj-txt .kick{font-family:var(--dato);font-size:.44rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--aj-tono,#FFA033)}
.aj-txt h2{margin:4px 0 3px;font-family:var(--display,inherit);font-weight:600;letter-spacing:-.012em;
  font-size:clamp(1rem,1.9vh,1.28rem);color:var(--crema)}
.aj-txt p{margin:0;font-size:.82rem;color:var(--aluminio);max-width:82ch}
.aj-cifras{display:flex;gap:clamp(12px,1.4vw,26px);align-items:center;flex:0 0 auto}
.aj-cifra{text-align:right}
.aj-cifra b{display:block;font-family:var(--dato);font-size:clamp(.92rem,1.9vh,1.2rem);color:var(--crema);line-height:1.1}
.aj-cifra span{font-family:var(--dato);font-size:.42rem;letter-spacing:.1em;text-transform:uppercase;color:var(--apagado)}
.aj-cifra.ok b{color:var(--verde)} .aj-cifra.avisa b{color:var(--ambar)}

/* ---------- retículas de relleno ---------- */
.aj-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1vw,14px);align-items:start}
.aj-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1vw,14px);align-items:start}
.aj-ancho{grid-column:1 / -1}
@media (max-width:1100px){.aj-tres{grid-template-columns:1fr}.aj-dos{grid-template-columns:1fr}}

/* ---------- piezas sueltas ---------- */
.aj-filas{display:flex;flex-direction:column;gap:9px}
.aj-fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:9px 11px;border-radius:11px;border:1px solid var(--linea);
  background:linear-gradient(180deg,#121722,#0C1017)}
.aj-fila-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:#0A0E16;box-shadow:inset 0 0 0 1px #1E2634}
.aj-fila-ico svg{width:14px;height:14px;fill:none;stroke:var(--aluminio);stroke-width:1.7}
.aj-fila strong{display:block;font-size:.85rem;color:var(--crema);font-weight:500}
.aj-fila .min{font-size:.74rem;color:var(--apagado)}
.aj-fila .der{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.aj-metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.aj-metrica{padding:8px 10px;border-radius:10px;background:#0C1017;border:1px solid var(--linea)}
.aj-metrica b{display:block;font-family:var(--dato);font-size:.88rem;color:var(--crema)}
.aj-metrica span{font-family:var(--dato);font-size:.41rem;letter-spacing:.09em;text-transform:uppercase;color:var(--apagado)}
.aj-metrica i{display:block;height:4px;border-radius:3px;margin-top:6px;background:#1A2130;overflow:hidden}
.aj-metrica i u{display:block;height:100%;border-radius:3px;background:var(--ambar)}

/* barras de consumo con su etiqueta */
.aj-uso{display:flex;flex-direction:column;gap:11px}
.aj-uso-it .fila{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.aj-uso-it span{font-size:.82rem;color:var(--aluminio)}
.aj-uso-it em{font-style:normal;font-family:var(--dato);font-size:.58rem;color:var(--crema)}
.aj-barra{height:6px;border-radius:4px;background:#101620;box-shadow:inset 0 0 0 1px #1C2432;
  margin-top:6px;overflow:hidden}
.aj-barra u{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--ambar),var(--ambar-claro,#FFC97A))}
.aj-barra.hielo u{background:linear-gradient(90deg,#3E8FB8,var(--hielo))}
.aj-barra.verde u{background:linear-gradient(90deg,#2C9A6E,var(--verde))}
.aj-barra.rojo  u{background:linear-gradient(90deg,#B03028,var(--rojo))}

/* la tira de 24 horas del silencio */
.aj-horas{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;margin-top:9px}
.aj-horas button{height:34px;border:none;border-radius:4px;cursor:pointer;padding:0;
  background:#141B26;box-shadow:inset 0 0 0 1px #1C2432;transition:background .14s ease}
.aj-horas button[data-on="1"]{background:linear-gradient(180deg,#2B3A50,#1A2432);
  box-shadow:inset 0 0 0 1px var(--hielo), 0 0 12px -6px var(--hielo)}
.aj-horas-pie{display:flex;justify-content:space-between;margin-top:5px}
.aj-horas-pie span{font-family:var(--dato);font-size:.4rem;color:var(--apagado)}

/* la vista previa de tu página */
.aj-previa{border:1px solid var(--linea);border-radius:13px;overflow:hidden;background:#07090E}
.aj-previa-barra{display:flex;align-items:center;gap:7px;padding:7px 10px;background:#0E131C;
  border-bottom:1px solid var(--linea)}
.aj-previa-barra i{width:7px;height:7px;border-radius:50%;background:#2C3446}
.aj-previa-barra span{flex:1;font-family:var(--dato);font-size:.45rem;color:var(--apagado);
  padding:4px 8px;border-radius:6px;background:#080B11;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aj-previa-cuerpo{position:relative;padding:16px;min-height:150px;
  background:radial-gradient(120% 130% at 20% 0%, color-mix(in srgb, var(--aj-portada,#FFA033) 22%, transparent), transparent 60%), #090C12}
.aj-previa-cuerpo h4{margin:0;font-family:var(--display,inherit);font-size:1.15rem;color:var(--crema);font-weight:600}
.aj-previa-cuerpo .min{font-size:.78rem;color:var(--aluminio);margin-top:5px;max-width:44ch}
.aj-previa-sets{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.aj-previa-sets i{height:26px;flex:1 1 60px;border-radius:6px;background:#121822;
  box-shadow:inset 0 0 0 1px #1C2432}
.aj-previa-marca{position:absolute;right:12px;top:12px;font-family:var(--dato);font-size:.4rem;
  letter-spacing:.14em;color:var(--apagado)}

/* mapa de la controladora */
.aj-mapa{position:relative;border:1px solid var(--linea);border-radius:13px;overflow:hidden;
  background:linear-gradient(180deg,#0E131C,#080B11);padding:10px}
.aj-mapa svg{display:block;width:100%;height:auto}
.aj-mapa .zona{cursor:pointer}
.aj-mapa .zona:hover .pieza{stroke:var(--ambar)}
.aj-mapa .pieza{fill:#121A26;stroke:#28323F;stroke-width:1}
.aj-mapa .pieza.viva{fill:#1A2634;stroke:var(--ambar);filter:drop-shadow(0 0 6px rgba(255,160,51,.55))}
.aj-mapa .rot{fill:#7E8AA0;font-family:var(--dato);font-size:5.4px;letter-spacing:.08em}

/* monitor MIDI */
.aj-midi{font-family:var(--dato);font-size:.56rem;line-height:1.75;color:var(--aluminio);
  background:#070910;border:1px solid var(--linea);border-radius:11px;padding:10px 12px;
  height:clamp(110px,16vh,190px);overflow:auto;scrollbar-width:thin}
.aj-midi div span{color:var(--apagado)}
.aj-midi div b{color:var(--ambar);font-weight:400}
.aj-midi div em{font-style:normal;color:var(--hielo)}

/* logotipos de las plataformas en una tira */
.aj-marcas{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.aj-marca{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--linea);background:#0B0F17}
.aj-marca img,.aj-marca svg{width:14px;height:14px;object-fit:contain}
.aj-marca span{font-size:.76rem;color:var(--aluminio)}
.aj-marca[data-on="1"]{border-color:rgba(75,224,160,.3);background:rgba(75,224,160,.07)}
.aj-marca[data-on="1"] span{color:var(--crema)}

/* avisos recientes */
.aj-feed{display:flex;flex-direction:column;gap:7px;max-height:clamp(120px,20vh,240px);overflow:auto;
  scrollbar-width:thin;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent)}
.aj-feed-it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:7px 10px;border-radius:9px;background:#0C1017;border:1px solid var(--linea)}
.aj-feed-it i{width:7px;height:7px;border-radius:50%;background:var(--apagado);flex:0 0 auto}
.aj-feed-it i.ok{background:var(--verde)} .aj-feed-it i.avisa{background:var(--ambar)}
.aj-feed-it i.mal{background:var(--rojo)}
.aj-feed-it span{font-size:.79rem;color:var(--aluminio);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aj-feed-it em{font-style:normal;font-family:var(--dato);font-size:.44rem;color:var(--apagado)}

/* el aviso de abajo del todo: ayuda del apartado */
.aj-pie{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  margin-top:clamp(10px,1.2vh,16px);padding:12px 16px;border-radius:var(--r,16px);
  border:1px solid var(--linea);background:linear-gradient(180deg,#0D121A,#080B11)}
.aj-pie svg{width:18px;height:18px;fill:none;stroke:var(--hielo);stroke-width:1.6}
.aj-pie p{margin:0;font-size:.8rem;color:var(--aluminio)}
.aj-pie b{color:var(--crema);font-weight:500}

/* el gasto por proveedor */
.aj-gasto{display:flex;align-items:flex-end;gap:10px;height:clamp(76px,11vh,124px);
  padding:0 2px;margin-top:4px}
.aj-gasto div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;
  justify-content:flex-end}
.aj-gasto i{display:block;width:100%;border-radius:5px 5px 0 0;min-height:3px;
  background:linear-gradient(180deg,var(--ambar),rgba(255,160,51,.18))}
.aj-gasto i.hielo{background:linear-gradient(180deg,var(--hielo),rgba(127,212,255,.18))}
.aj-gasto i.verde{background:linear-gradient(180deg,var(--verde),rgba(75,224,160,.18))}
.aj-gasto span{font-family:var(--dato);font-size:.4rem;letter-spacing:.08em;color:var(--apagado);
  text-transform:uppercase}

/* ---------- ventanas bajas ---------- */
@media (max-height:820px){
  .aj-txt p{display:none}
  .aj-banda{padding:10px 14px}
  .aj-pie{display:none}
}
/* el mapa no necesita ser enorme para leerse */
.aj-mapa{max-width:620px}
/* la fila añadida de «calidad y plataformas» también tiene que colocarse
   cuando la hoja se convierte en rejilla al estrechar la ventana */
@media (min-width:900px) and (max-width:1200px) and (min-height:560px){
  .sub-e[data-sub="calidad"] > .aj-emi-fila{grid-column:1 / -1;grid-row:4}
}

/* ==========================================================
   EL FONDO DE CADA APARTADO
   ----------------------------------------------------------
   Nueve apartados con el mismo fondo son nueve pantallas que
   parecen la misma. Aquí cada uno tiene su luz y su trama: al
   cambiar de pestaña cambia el color del aire, y eso basta
   para saber dónde estás sin leer el rótulo.
   ========================================================== */
body.shell[data-pagina="ajustes"]{position:relative;isolation:isolate}
body.shell[data-pagina="ajustes"] > .barra-sup{position:relative;z-index:3}
body.shell[data-pagina="ajustes"] > .marco{position:relative;z-index:2}

.aj-fondo{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  transition:opacity .45s ease}
/* Estaban a .58: tres manchas de color a media opacidad detrás de unos
   paneles traslúcidos. El resultado era que el texto de Ajustes se leía
   sobre naranja o sobre violeta según el apartado. Ahora solo insinúan
   de qué apartado se trata, por los bordes. */
.aj-fondo i{position:absolute;display:block;border-radius:50%;filter:blur(130px);opacity:.13;
  transition:background .6s ease}
.aj-fondo i:nth-child(1){width:44vw;height:44vw;left:-10vw;top:-14vh;
  background:radial-gradient(circle,var(--f1,#FFA033),transparent 68%);
  animation:aj-vaga 30s ease-in-out infinite}
.aj-fondo i:nth-child(2){width:38vw;height:38vw;right:-6vw;top:-8vh;
  background:radial-gradient(circle,var(--f2,#7FD4FF),transparent 68%);
  animation:aj-vaga 37s ease-in-out infinite reverse}
.aj-fondo i:nth-child(3){width:40vw;height:40vw;left:28vw;bottom:-22vh;
  background:radial-gradient(circle,var(--f3,#4BE0A0),transparent 70%);
  animation:aj-vaga2 33s ease-in-out infinite}
.aj-fondo u{position:absolute;inset:0;display:block;opacity:.24;
  transition:background-image .4s ease, background-size .4s ease}
@keyframes aj-vaga{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  34%{transform:translate3d(5vw,5vh,0) scale(1.14)}
  67%{transform:translate3d(-5vw,8vh,0) scale(.92)}}
@keyframes aj-vaga2{
  0%,100%{transform:translate3d(0,0,0) scale(1.06)}
  50%{transform:translate3d(-8vw,-7vh,0) scale(.88)}}
@media (prefers-reduced-motion: reduce){.aj-fondo i{animation:none}}

/* ---------- la luz y la trama de cada apartado ---------- */
body[data-seccion="cuenta"]       .aj-fondo{--f1:#FFA033;--f2:#C79BFF;--f3:#3B4A63}
body[data-seccion="audio"]        .aj-fondo{--f1:#7FD4FF;--f2:#4BE0A0;--f3:#2B5F7A}
body[data-seccion="pagina"]       .aj-fondo{--f1:#C79BFF;--f2:#FF7A8A;--f3:#4A3A78}
body[data-seccion="emision"]      .aj-fondo{--f1:#FF4438;--f2:#FFA033;--f3:#5A2430}
body[data-seccion="avisos"]       .aj-fondo{--f1:#FFC97A;--f2:#7FD4FF;--f3:#6A5230}
body[data-seccion="controladora"] .aj-fondo{--f1:#4BE0A0;--f2:#7FD4FF;--f3:#1F5A4A}
body[data-seccion="jukebox"]      .aj-fondo{--f1:#D8A05A;--f2:#8A5A2A;--f3:#4A3A20}
body[data-seccion="ia"]           .aj-fondo{--f1:#A78BFA;--f2:#7FD4FF;--f3:#33306A}
body[data-seccion="pago"]         .aj-fondo{--f1:#5EE8B2;--f2:#FFC97A;--f3:#1E4A3E}

/* rejilla */
body[data-seccion="cuenta"] .aj-fondo u,
body[data-seccion="pago"] .aj-fondo u{
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:62px 62px}
/* ondas horizontales */
body[data-seccion="audio"] .aj-fondo u,
body[data-seccion="emision"] .aj-fondo u{
  background-image:repeating-linear-gradient(180deg,
    rgba(255,255,255,.045) 0 1px, transparent 1px 26px)}
/* diagonales */
body[data-seccion="pagina"] .aj-fondo u,
body[data-seccion="ia"] .aj-fondo u{
  background-image:repeating-linear-gradient(56deg,
    rgba(255,255,255,.035) 0 1px, transparent 1px 30px)}
/* puntos */
body[data-seccion="avisos"] .aj-fondo u,
body[data-seccion="controladora"] .aj-fondo u{
  background-image:radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.3px);
  background-size:34px 34px}
/* vetas de madera */
body[data-seccion="jukebox"] .aj-fondo u{
  background-image:repeating-linear-gradient(92deg,
    rgba(255,255,255,.035) 0 2px, transparent 2px 9px,
    rgba(0,0,0,.14) 9px 11px, transparent 11px 22px)}
.aj-fondo u{
  -webkit-mask-image:radial-gradient(130% 95% at 50% 0%,#000,transparent 74%);
  mask-image:radial-gradient(130% 95% at 50% 0%,#000,transparent 74%)}

/* ==========================================================
   CADA APARTADO LLENA LA PANTALLA
   Arriba la banda del apartado, en medio lo que se ajusta y
   abajo la banda que cierra. Lo que sobra se desplaza por
   dentro: la pantalla nunca se queda a medias.
   ========================================================== */
@media (min-width:900px) and (min-height:560px){
  #hojas > .hoja[data-on="1"]{display:flex;flex-direction:column;overflow:hidden;padding-right:0}
  #hojas > .hoja[data-on="1"] > .aj-banda{flex:0 0 auto}
  .aj-cuerpo{flex:1 1 auto;min-height:0;overflow:auto;overflow-x:hidden;
    scrollbar-width:thin;padding-right:6px;
    display:flex;flex-direction:column;gap:clamp(10px,1.2vh,16px)}
  .aj-cuerpo > *{flex:0 0 auto}
  .aj-pie-banda{flex:0 0 auto}
}

/* ---------- la banda que cierra ---------- */
.aj-pie-banda{position:relative;overflow:hidden;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(13px,1.5vw,24px);align-items:center;
  margin-top:clamp(10px,1.2vh,16px);
  padding:clamp(11px,1.4vh,17px) clamp(15px,1.3vw,22px);border-radius:var(--r,16px);
  border:1px solid color-mix(in srgb, var(--aj-tono,#FFA033) 32%, transparent);
  background:
    radial-gradient(90% 240% at 6% 50%, color-mix(in srgb, var(--aj-tono,#FFA033) 22%, transparent), transparent 62%),
    linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  -webkit-backdrop-filter:blur(20px) saturate(145%);backdrop-filter:blur(20px) saturate(145%);
  box-shadow:0 22px 50px -32px #000, inset 0 1px 0 rgba(255,255,255,.14)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .aj-pie-banda{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.045)}
}
.aj-pie-banda > i.luz{position:absolute;left:-45%;top:-120%;width:38%;height:340%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);
  transform:skewX(-14deg);animation:aj-barrido 8s ease-in-out infinite}
@keyframes aj-barrido{0%{left:-45%}55%{left:118%}100%{left:118%}}
@media (prefers-reduced-motion: reduce){.aj-pie-banda > i.luz{animation:none;opacity:0}}
.aj-pie-sello{width:clamp(36px,3vw,46px);aspect-ratio:1;border-radius:14px;display:grid;
  place-items:center;flex:0 0 auto;position:relative;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--aj-tono,#FFA033) 40%, transparent),
    color-mix(in srgb, var(--aj-tono,#FFA033) 9%, transparent));
  border:1px solid color-mix(in srgb, var(--aj-tono,#FFA033) 42%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 30px -12px var(--aj-tono,#FFA033)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .aj-pie-sello{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
}
.aj-pie-sello svg{width:21px;height:21px;fill:none;stroke:var(--aj-tono,#FFA033);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.aj-pie-txt{min-width:0;position:relative}
.aj-pie-txt .kick{font-family:var(--dato);font-size:.42rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--aj-tono,#FFA033)}
.aj-pie-txt h3{margin:4px 0 3px;font-family:var(--display,inherit);font-weight:600;
  letter-spacing:-.012em;font-size:clamp(.95rem,1.7vh,1.18rem);color:var(--crema)}
.aj-pie-txt p{margin:0;font-size:.8rem;color:var(--aluminio);max-width:94ch;line-height:1.45}
.aj-pie-acc{display:flex;gap:9px;flex:0 0 auto;position:relative}
@media (max-height:820px){.aj-pie-txt p{display:none}}
@media (max-width:900px){.aj-pie-banda{grid-template-columns:auto minmax(0,1fr)}
  .aj-pie-acc{grid-column:1 / -1}}

/* ==========================================================
   EMISIÓN · de rejilla a columna, para que quepan las bandas
   ----------------------------------------------------------
   Este apartado tenía su propia rejilla con las sub-pestañas
   metidas en la primera columna. Con banda arriba y abajo eso
   ya no cabe, así que pasa a columna: banda, sub-pestañas,
   lo que se ajusta —que se desplaza por dentro— y banda.
   ========================================================== */
@media (min-width:900px) and (min-height:560px){
  .hoja[data-hoja="emision"][data-on="1"]{display:flex !important;flex-direction:column;
    gap:clamp(9px,1.1vh,14px);overflow:hidden}
  .hoja[data-hoja="emision"] > .aj-banda{flex:0 0 auto;margin-bottom:0}
  .hoja[data-hoja="emision"] > .sub-emision{flex:0 0 auto;flex-direction:row !important;
    justify-content:flex-start;margin:0;gap:6px}
  .hoja[data-hoja="emision"] > .sub-emision .pestana{padding:7px 15px;font-size:.62rem;
    text-align:center}
  .hoja[data-hoja="emision"] > .sub-e{display:none}
  .hoja[data-hoja="emision"] > .sub-e[data-on="1"]{display:flex !important;flex-direction:column;
    flex:1 1 auto;min-height:0;overflow:auto;overflow-x:hidden;scrollbar-width:thin;
    padding-right:6px;gap:clamp(10px,1.2vh,16px)}
  .hoja[data-hoja="emision"] > .sub-e > *{flex:0 0 auto}
  /* tres columnas: la calidad a la izquierda, el puente y el aviso en
     medio, y las claves a la derecha; cada una crece lo que necesita */
  .hoja[data-hoja="emision"] > .sub-e[data-sub="calidad"] > .malla.dos{display:grid !important;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);
    gap:clamp(10px,1vw,16px);align-items:start}
  .hoja[data-hoja="emision"] > .sub-e[data-sub="calidad"] > .malla.dos > .col{display:contents !important}
  .hoja[data-hoja="emision"] > .sub-e[data-sub="calidad"] > .malla.dos > .panel{
    grid-column:1 !important;grid-row:1 / span 2}
  .hoja[data-hoja="emision"] > .sub-e[data-sub="calidad"] > .malla.dos > .col > :nth-child(1){
    grid-column:2 !important;grid-row:1}
  .hoja[data-hoja="emision"] > .sub-e[data-sub="calidad"] > .malla.dos > .col > :nth-child(2){
    grid-column:3 !important;grid-row:1 / span 2}
  .hoja[data-hoja="emision"] > .sub-e[data-sub="calidad"] > .malla.dos > .col > :nth-child(3){
    grid-column:2 !important;grid-row:2}
  .hoja[data-hoja="emision"] > .sub-e[data-sub="calidad"] > .aj-emi-fila{grid-column:auto;grid-row:auto}
  .sub-e[data-sub="tu"] > .pasos{grid-column:auto;grid-row:auto;margin:0}
  .sub-e[data-sub="tu"] > .local{grid-column:auto;grid-row:auto}
  .sub-e[data-sub="tu"] > #hojasEmision{grid-column:auto;grid-row:auto;flex:1 1 auto;min-height:0}
  .hoja[data-hoja="emision"] > .aj-pie-banda{flex:0 0 auto;margin-top:0}
}

/* ==========================================================
   LAS CHAPAS DE LOS PANELES
   ----------------------------------------------------------
   Eran de cristal: traslúcidas y con desenfoque, para que el
   color del apartado se viera a través. Leído en pantalla eso
   es un panel teñido de naranja, de violeta o de verde según
   dónde estés, y el texto encima cuesta. El apartado se
   distingue igual por la banda con foto, por la raya de color
   y por los iconos; la chapa donde va la letra es opaca.
   ========================================================== */
@media (min-width:900px) and (min-height:560px){
  body.shell[data-pagina="ajustes"] #hojas .panel,
  body.shell[data-pagina="ajustes"] #hojas .aj-banda{
    background:linear-gradient(180deg,#12161F 0%,#0C1017 58%,#0A0D13 100%);
    background-color:#0C1017;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-color:rgba(255,255,255,.08);
    box-shadow:0 22px 50px -34px #000, inset 0 1px 0 rgba(255,255,255,.05)}
  body.shell[data-pagina="ajustes"] #hojas .panel.liso{
    background:#0C1017}
  body.shell[data-pagina="ajustes"] #hojas .subpanel,
  body.shell[data-pagina="ajustes"] #hojas .aj-fila,
  body.shell[data-pagina="ajustes"] #hojas .aj-metrica,
  body.shell[data-pagina="ajustes"] #hojas .aj-feed-it,
  body.shell[data-pagina="ajustes"] #hojas .prov{
    background:#10141C;border-color:rgba(255,255,255,.07)}
  /* lo que se escribe necesita fondo firme */
  body.shell[data-pagina="ajustes"] #hojas input,
  body.shell[data-pagina="ajustes"] #hojas select,
  body.shell[data-pagina="ajustes"] #hojas textarea{
    background:#080B11;border-color:rgba(255,255,255,.1)}
}

/* ==========================================================
   LAS BANDAS LLEVAN FOTO
   ----------------------------------------------------------
   Un rectángulo de cristal sin nada detrás no es un banner.
   Cada apartado tiene su propio cuadro de fondo —pintado a
   medida de lo que cuenta esa banda— y encima un velo que cae
   de izquierda a derecha: fuerte donde va el texto, flojo
   donde se ve la imagen. Así se lee todo sin pelear.
   ========================================================== */
   OJO · ESTO YA NO SE VE. `assets/aj-caras.css` se carga después
   y pone `background: … !important` en .aj-banda, así que el
   degradado de color del apartado gana y la foto no llega a
   dibujarse nunca. Son dos ideas distintas para el mismo sitio —la
   foto por apartado y el color por apartado— y la segunda se comió
   a la primera sin decirlo.

   Se deja escrito aquí, no borrado, porque las fotos existen
   (assets/img/bandas) y las pinta herramientas/arte/render.py: si
   se quiere recuperar la foto, basta con quitar el !important de
   aj-caras.css o combinarlas. Lo que no puede quedarse es sin
   avisar, que es como estaba.
   ========================================================== */
@media (min-width:900px) and (min-height:560px){
  body.shell[data-pagina="ajustes"] #hojas .aj-banda,
  body.shell[data-pagina="ajustes"] #hojas .aj-pie-banda{
    background-image:
      linear-gradient(90deg,
        rgba(6,8,13,.97) 0%, rgba(6,8,13,.93) 30%,
        rgba(6,8,13,.68) 55%, rgba(6,8,13,.30) 78%, rgba(6,8,13,.12) 100%),
      radial-gradient(85% 220% at 6% 50%,
        color-mix(in srgb, var(--aj-tono,#FFA033) 24%, transparent), transparent 56%),
      var(--aj-img, none);
    background-size:cover, cover, cover;
    background-position:center, center, center;
    background-repeat:no-repeat;
    /* base opaca: si la foto no carga, detrás hay negro, no la aurora */
    background-color:#0A0D13;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-color:color-mix(in srgb, var(--aj-tono,#FFA033) 30%, rgba(255,255,255,.1))}
  @supports not (color: color-mix(in srgb, red 50%, blue)){
    body.shell[data-pagina="ajustes"] #hojas .aj-banda,
    body.shell[data-pagina="ajustes"] #hojas .aj-pie-banda{
      background-image:
        linear-gradient(90deg, rgba(6,8,13,.97) 0%, rgba(6,8,13,.9) 34%,
                               rgba(6,8,13,.6) 66%, rgba(6,8,13,.3) 100%),
        var(--aj-img, none)}
  }
  /* la de abajo enseña otra parte de la misma foto */
  body.shell[data-pagina="ajustes"] #hojas .aj-pie-banda{
    background-position:center, center, right 30%}
  /* la trama animada se queda de apoyo, no de protagonista */
  body.shell[data-pagina="ajustes"] #hojas .aj-banda > canvas{opacity:.22}
}
/* ---------- qué foto lleva cada apartado ---------- */
body[data-seccion="cuenta"]       .aj-banda,body[data-seccion="cuenta"]       .aj-pie-banda{--aj-img:url(img/bandas/cuenta.jpg)}
body[data-seccion="audio"]        .aj-banda,body[data-seccion="audio"]        .aj-pie-banda{--aj-img:url(img/bandas/audio.jpg)}
body[data-seccion="pagina"]       .aj-banda,body[data-seccion="pagina"]       .aj-pie-banda{--aj-img:url(img/bandas/pagina.jpg)}
body[data-seccion="emision"]      .aj-banda,body[data-seccion="emision"]      .aj-pie-banda{--aj-img:url(img/bandas/emision.jpg)}
body[data-seccion="avisos"]       .aj-banda,body[data-seccion="avisos"]       .aj-pie-banda{--aj-img:url(img/bandas/avisos.jpg)}
body[data-seccion="controladora"] .aj-banda,body[data-seccion="controladora"] .aj-pie-banda{--aj-img:url(img/bandas/controladora.jpg)}
body[data-seccion="jukebox"]      .aj-banda,body[data-seccion="jukebox"]      .aj-pie-banda{--aj-img:url(img/bandas/jukebox.jpg)}
body[data-seccion="ia"]           .aj-banda,body[data-seccion="ia"]           .aj-pie-banda{--aj-img:url(img/bandas/ia.jpg)}
body[data-seccion="pago"]         .aj-banda,body[data-seccion="pago"]         .aj-pie-banda{--aj-img:url(img/bandas/pago.jpg)}

/* ---------- que el texto gane siempre ---------- */
.aj-txt h2,.aj-pie-txt h3{text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 34px rgba(0,0,0,.6)}
.aj-txt p,.aj-pie-txt p{text-shadow:0 1px 10px rgba(0,0,0,.8)}
.aj-txt .kick,.aj-pie-txt .kick{text-shadow:0 1px 8px rgba(0,0,0,.9)}
.aj-cifra b,.aj-cifra span{text-shadow:0 2px 12px rgba(0,0,0,.85)}