/* ═══════════════════════════════════════════════════════════════════════
   AURIA ADAPTATIVO V2 — celular · tablet · PC
   ─────────────────────────────────────────────────────────────────────
   CAMBIO DE ENFOQUE respecto de la V1.

   La V1 escalaba todo el lienzo con `zoom`. Funcionaba, pero arrastraba
   la tipografía junto con la caja: en PC quedaban letras gigantes. Era
   una adaptación simple, no un diseño de escritorio.

   La V2 no escala nada. El contenedor se ensancha de verdad y la
   tipografía se queda en su tamaño nominal — que es el que se diseñó
   para leerse cómodo. El resultado es que en PC entra más contenido,
   no el mismo contenido más grande.

   Además la V2 es deliberadamente menos invasiva. La V1 tenía una regla
   que le tocaba los márgenes a TODOS los hijos directos del wrap:

       .wrap:has(> .mod-header) > *{ margin-left:auto !important; ... }

   Eso le pisaba el `margin:0 -20px` al `.stage` del Editor Auria, que lo
   necesita para romper el padding del contenedor. Acá no se toca ningún
   hijo: se ensancha el wrap y cada página resuelve su interior con las
   reglas que ya tenía.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --auria-ancho: 100%;   /* ancho máximo del contenedor */
}

/* ── 1 · BASE — la app ocupa la ventana entera ─────────────────────────
   Igual que en la V1: se va la tarjeta flotante con sombra y bordes
   redondeados, y se leen los env() de la muesca, que estaban declarados
   en el viewport pero ninguna página consultaba. */

/* 100dvh y no 100%: en el celular, 100% mide la pantalla CON la barra del
   navegador escondida, asi que la app se pasa de largo y la botonera queda
   cortada abajo. dvh sigue el alto realmente visible en cada momento. */
html{ height:100%; margin:0; }
body{ height:100dvh; margin:0; }

body{
  box-sizing: border-box !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
  align-items: stretch !important;
  justify-content: center !important;
  background: var(--bg, #060404) !important;
}

.wrap, .phone{
  width: 100% !important;
  max-width: var(--auria-ancho) !important;
  margin: 0 auto !important;
  /* La altura exacta la fija el bloque 19: aca ya no se declara, porque
     min-height dejaba crecer el contenedor y arrastrar la botonera. */
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* ── 2 · ANCHO REAL, SIN ESCALADO ─────────────────────────────────────
   El contenedor crece; la fuente no. En una ventana de 1256px la app
   pasa a ocupar prácticamente todo el ancho. */

@media (min-width:  768px){ :root{ --auria-ancho: 100%;   } }
@media (min-width: 1280px){ :root{ --auria-ancho: 1240px; } }
@media (min-width: 1600px){ :root{ --auria-ancho: 1420px; } }

/* Un poco más de aire lateral cuando hay lugar, para que el contenido
   no quede pegado al borde del monitor. */
@media (min-width: 768px){
  .wrap{ padding-left: 2rem; padding-right: 2rem; }
  /* p19 maneja su propio padding en 0 y tiene hijos con margen negativo:
     no se lo tocamos. */
  .wrap:has(.stage){ padding-left: 0 !important; padding-right: 0 !important; }
}

/* ── 3 · APROVECHAR EL ANCHO, NO ESTIRAR EL TEXTO ─────────────────────
   Una lista de opciones de 1200px de ancho es peor que una de 360px:
   el ojo tiene que barrer toda la pantalla para leer cuatro renglones.
   En pantalla ancha las opciones pasan a dos columnas, que es lo que
   justifica tener el ancho. */

@media (min-width: 900px){
  .opciones{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
  }
  .mel-opciones, #opciones{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  /* Los bloques de lectura no se estiran más allá de lo legible. */
  .ej-pregunta, .day-hint, .intro-box p, .hero-sub{
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── 4 · p21 · TECLADO APAISADO EN PC ─────────────────────────────────
   La regla original pedía (orientation:landscape) and (max-height:500px),
   pensada para un celular girado. En una notebook la altura pasa de
   500px, así que no entraba nunca y el monitor mostraba el cartel de
   "girá el teléfono". Acotado con body:has(#landscapeContent) para no
   tocar p20, que comparte las clases .lp-* pero es vertical por diseño. */

@media (min-width: 900px){
  body:has(#landscapeContent) #portraitGate{ display:none !important; }
  body:has(#landscapeContent) #landscapeContent{ display:flex !important; }
  body:has(#landscapeContent) .lp-hide{ display:none !important; }
  body:has(#landscapeContent) .lp-main{
    flex:none !important; padding:0 !important; overflow:visible !important;
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:10px !important;
  }
  body:has(#landscapeContent) .keyboard{ height:min(52vh, 280px) !important; }
  body:has(#landscapeContent) .keyboard-inner{ height:100% !important; }
  body:has(#landscapeContent) .bkey{ height:60% !important; }
  body:has(#landscapeContent) .key-slider-row{ margin-top:6px !important; flex-shrink:0; width:min(90%, 520px); }
  body:has(#landscapeContent) .chord-box.show{
    position:absolute; top:8px; left:54px; right:auto; z-index:300;
    padding:4px 12px; margin:0; flex-direction:row; gap:6px;
    align-items:baseline; background:rgba(22,20,18,.88); border-radius:20px;
  }
  body:has(#landscapeContent) .chord-box-label{ display:none; }
  body:has(#landscapeContent) .chord-box-name{ font-size:16px; min-height:auto; }
  body:has(#landscapeContent) .rec-row{ margin-top:6px !important; flex-shrink:0; }
  body:has(#landscapeContent) .rec-btn{ width:44px !important; height:44px !important; }
}

/* ── 5 · PUNTERO FINO — hay mouse, así que hay hover ─────────────────── */

@media (hover: hover) and (pointer: fine){
  button, .card, .tarj, .ej-card, .lab-card, .nivel-card, .opcion, .op-card{
    transition: filter .15s ease, transform .15s ease;
  }
  button:hover:not(:disabled){ filter: brightness(1.12); }
}

/* ── 6 · ZÓCALO CON COLOR POR SECCIÓN ─────────────────────────────────
   Antes las cuatro solapas eran todas ocre: la activa a opacidad 1 y las
   otras tres a 0.45. Ahora cada sección tiene su color guía, con el
   degradé translúcido subiendo desde la base del botón. La opacidad
   sigue marcando en qué página estás, así que no se pierde esa señal.

   Los botones traen color inline, por eso hace falta !important.
   El orden es fijo en las 22 páginas: Inicio · Intervalos · Dictados ·
   Laboratorio, así que nth-child es confiable. */

.nav-botonera button:nth-child(1){ --nav-c: #D6C5A9; } /* Inicio      · crema */
.nav-botonera button:nth-child(2){ --nav-c: #EDB85C; } /* Intervalos  · ocre  */
.nav-botonera button:nth-child(3){ --nav-c: #A6CE96; } /* Dictados    · sage  */
.nav-botonera button:nth-child(4){ --nav-c: #E07A5F; } /* Laboratorio · coral */

.nav-botonera button{
  background-image: linear-gradient(
      to top,
      color-mix(in srgb, var(--nav-c) 46%, transparent) 0%,
      color-mix(in srgb, var(--nav-c) 20%, transparent) 45%,
      color-mix(in srgb, var(--nav-c) 6%,  transparent) 78%,
      transparent 100%) !important;
  border-radius: 14px 14px 10px 10px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nav-c) 22%, transparent);
  transition: background-image .25s ease, opacity .25s ease !important;

  /* Las solapas inactivas venían con opacity:0.45 inline, que lavaba el
     color antes de que llegara a verse. Subirla es lo que más cambia:
     el degradé ya estaba, lo que faltaba era dejarlo llegar. La página
     en curso se sigue distinguiendo por el degradé más alto y la línea
     encendida de abajo, así que no se pierde la señal. */
  opacity: .88 !important;
}
.nav-botonera button svg{ stroke: var(--nav-c) !important; }
.nav-botonera button svg polygon,
.nav-botonera button svg [fill]:not([fill="none"]){ fill: var(--nav-c) !important; }
.nav-botonera button span{ color: var(--nav-c) !important; }

/* La solapa de la página en curso: el degradé sube más y se enciende. */
.nav-botonera button[style*="opacity:1"]{
  background-image: linear-gradient(
      to top,
      color-mix(in srgb, var(--nav-c) 72%, transparent) 0%,
      color-mix(in srgb, var(--nav-c) 34%, transparent) 52%,
      color-mix(in srgb, var(--nav-c) 10%, transparent) 84%,
      transparent 100%) !important;
  box-shadow:
    inset 0 -2px 0 -1px var(--nav-c),
    inset 0 1px 0 color-mix(in srgb, var(--nav-c) 40%, transparent),
    0 -3px 14px -6px var(--nav-c);
  opacity: 1 !important;
}
/* Ícono y rótulo de la sección en curso, a pleno. */
.nav-botonera button[style*="opacity:1"] svg{ stroke-width: 2.1; }
.nav-botonera button[style*="opacity:1"] span{ font-weight: 600; }

@media (hover: hover) and (pointer: fine){
  .nav-botonera button:hover{
    background-image: linear-gradient(
        to top,
        color-mix(in srgb, var(--nav-c) 60%, transparent) 0%,
        color-mix(in srgb, var(--nav-c) 26%, transparent) 50%,
        transparent 100%) !important;
    opacity: 1 !important;
  }
}

/* ── 7 · RELIEVE DE LAS TARJETAS ──────────────────────────────────────
   El relieve que ya existía era muy sutil: un degradé al 5% y una línea
   de luz al 5%. Contra el negro #060404 del fondo la tarjeta casi no se
   despegaba. Acá se levanta el cuerpo de la tarjeta, se marca más la
   línea de luz superior y se apoya en una sombra propia, para que haya
   contraste real contra el fondo. */

.intro-box,.fig-card,.cat-card,.tarj,.card,.pat,.fam,.gro,.mic,.escritura,
.ctrl,.paso,.opt-ubi,.mel-opt,.canal,.item,.opcion-t,.fb-box,.speed-control,
.ej-card,.teoria-card,.lab-card,.compas-card,.opcion,.op-card,
.stat-box,.feedback-box,.motiv-box,.rec-item,.play-area,.historial,
.review-box,.iv-card-v2,.chord-box,.nivel-card,.concept-card,.familia-card,
.opt-card,.slot-box,.exp-item,.rec-review,.fx-panel,.mixer{
  background-image:
    linear-gradient(163deg,
      rgba(255,255,255,.085) 0%,
      rgba(255,255,255,.028) 34%,
      rgba(0,0,0,.10) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 6px 16px -8px rgba(0,0,0,.95),
    0 1px 2px rgba(0,0,0,.6) !important;
  border-color: rgba(255,255,255,.09);
}

/* ── 8 · p19 · EDITOR AURIA — arriba controles, al medio pentagrama y
      cifrado lado a lado, abajo el piano cruzando la pantalla ──────────

   La estructura real es:
       .main
         .mixer-titlerow / .mixer / .fx-panel     ← controles
         .split-tabs
         .stage
           .stage-pane-staff
             .staff-card
               .staff-svg-wrap    ← pentagrama
               .chord-panel       ← cifrado
           .stage-handle
           .stage-pane-roll       ← listoncitos
         .keyboard

   El pentagrama y el cifrado ya son hermanos dentro de .staff-card: sólo
   estaban apilados. Poner esa tarjeta en fila los deja lado a lado sin
   tocar una línea de HTML.

   La versión de dos columnas de la v171 dejaba media pantalla en negro
   porque los controles ocupan poca altura real: una columna de 290px
   para tres faders desperdicia más de lo que ahorra. Vuelven arriba, en
   una sola franja compacta.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 900px){

  .wrap:has(.stage) .main{
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 8px 16px 0 !important;
    gap: 6px !important;
  }

  /* ── ARRIBA · sonidos y efectos, en una franja ────────────────────── */
  .wrap:has(.stage) .mixer-titlerow{ margin: 0 !important; flex: 0 0 auto; }
  .wrap:has(.stage) .section-label{ margin: 0 !important; }
  .wrap:has(.stage) .mixer{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 4px 20px !important;
    padding: 6px 12px !important;
    flex: 0 0 auto;
  }
  /* Los efectos siguen plegados hasta que toggleFxPanel() los abre. */
  .wrap:has(.stage) .fx-panel.show{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 6px 20px; padding: 8px 12px !important;
    flex: 0 0 auto;
  }
  .wrap:has(.stage) .split-tabs{ justify-content: center; margin: 0 !important; flex: 0 0 auto; }
  .wrap:has(.stage) .split-hint{ display: none !important; }
  .wrap:has(.stage) .key-slider-row{ display: none !important; }
  .wrap:has(.stage) .main > div:last-child{ display: none !important; }

  /* ── AL MEDIO · pentagrama de un lado, cifrado del otro ───────────── */
  .wrap:has(.stage) .stage{
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  /* La tarjeta del pentagrama es blanca (#F5F1E8) y se estiraba de borde a
     borde: quedaban costados blancos enormes con nada adentro, porque la
     notación se dibuja centrada y no crece con el ancho sobrante. Ahora la
     tarjeta se queda en el medio, con el fondo oscuro de la app a los lados. */
  .wrap:has(.stage) .stage-pane-staff{
    background: transparent !important;
    align-items: center;
  }
  .wrap:has(.stage) .staff-card{
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    gap: 12px;
    width: min(980px, 82%) !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .wrap:has(.stage) .staff-svg-wrap{
    flex: 1 1 auto !important;
    min-width: 0;
    padding: 6px 4px !important;
  }
  .wrap:has(.stage) .chord-panel{
    flex: 0 0 clamp(220px, 24%, 340px) !important;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    border-left: 1px solid var(--border);
    padding: 8px 12px;
    text-align: center;
  }
  /* El tamaño de #chordNombre lo calcula _tamCifrado() en JS a partir del
     ancho de este panel — el inline gana sobre cualquier regla de acá. */

  /* ── ABAJO · el piano cruzando la pantalla ────────────────────────── */
  .wrap:has(.stage) .keyboard{
    flex: 0 0 auto !important;
    height: var(--auria-teclado-alto, clamp(230px, 30vh, 360px)) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
}

@media (min-width: 1280px) and (min-height: 950px){
  .wrap:has(.stage) .keyboard{ height: var(--auria-teclado-alto, clamp(280px, 34vh, 420px)) !important; }
}

/* ── 9 · p19 · BARRA REGULABLE DEL TECLADO ────────────────────────────
   Mismo lenguaje visual que .stage-handle, que ya existía para repartir
   pentagrama y listoncitos. Arrastrar cambia el alto; el deslizador de
   la derecha cambia el ancho de tecla; doble click vuelve a automático.
   ═══════════════════════════════════════════════════════════════════ */

.teclado-handle{
  height: 20px;
  flex: 0 0 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: ns-resize;
  touch-action: none;
  margin-left: -16px;
  margin-right: -16px;
  user-select: none;
}
.teclado-handle.activo{ background: var(--card); }
.teclado-handle-grip{
  width: 44px; height: 4px; border-radius: 2px;
  background: var(--border);
}
.teclado-handle.activo .teclado-handle-grip{ background: var(--ocre); }

.teclado-handle-ctrl{
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px;
  cursor: default;
}
.teclado-handle-ctrl span{
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); font-family: 'DM Sans', sans-serif;
}
.teclado-handle-rango{
  width: 110px; height: 4px; cursor: ew-resize;
  appearance: none; -webkit-appearance: none;
  background: var(--border); border-radius: 2px; outline: none;
}
.teclado-handle-rango::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ocre); cursor: ew-resize;
}
.teclado-handle-rango::-moz-range-thumb{
  width: 12px; height: 12px; border: none; border-radius: 50%;
  background: var(--ocre); cursor: ew-resize;
}

/* ── 10 · p19 · ECUALIZADOR DE TRES BANDAS ────────────────────────────
   Plegado dentro de su botón, igual que los efectos: sólo ocupa lugar
   cuando lo abrís. Las perillas se arrastran para arriba y para abajo,
   la rueda del mouse afina de a medio dB, y doble click vuelve a cero.
   ═══════════════════════════════════════════════════════════════════ */

.eq-panel{
  display: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  gap: 22px;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(165deg, rgba(255,255,255,.05), transparent 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 12px -7px rgba(0,0,0,.9);
}
.eq-panel.show{ display: flex; }

.eq-perilla{ display: flex; flex-direction: column; align-items: center; gap: 3px; }

.eq-disco{
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #3A332C, #17130F 72%);
  border: 1px solid var(--border);
  position: relative;
  cursor: ns-resize;
  touch-action: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 10px -5px #000;
}
.eq-disco.activo{ border-color: var(--ocre); }

/* marca del centro: referencia visual del 0 dB */
.eq-disco::after{
  content:''; position:absolute; top:3px; left:50%;
  width:1px; height:5px; margin-left:-0.5px;
  background: var(--muted); opacity:.55;
}
.eq-arco{
  position: absolute; inset: 4px; border-radius: 50%;
  border: 1.5px solid var(--ocre);
  opacity: .25;
  pointer-events: none;
}
.eq-aguja{
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 21px; margin-left: -1px;
  background: var(--ocre); border-radius: 1px;
  transform-origin: 50% 100%;
  transform: translateY(-100%) rotate(0deg);
  top: 50%; margin-top: -21px;
  transition: transform .06s linear;
}
.eq-perilla.en-cero .eq-aguja{ background: var(--crema-dim); }

.eq-et{ font-size: 11.5px; font-weight: 600; color: var(--crema); margin-top: 2px; }
.eq-sub{ font-size: 9.5px; letter-spacing: .5px; color: var(--muted); }
.eq-valor{
  font-size: 10.5px; color: var(--crema-dim);
  font-variant-numeric: tabular-nums; min-width: 54px; text-align: center;
}

.eq-plano{
  align-self: center;
  background: var(--surface); color: var(--crema-dim);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 5px 14px; font-size: 11px; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.eq-plano:hover{ color: var(--ocre); border-color: var(--ocre-mid); }

/* En el celular las perillas se achican un poco y el panel envuelve. */
@media (max-width: 640px){
  .eq-panel{ gap: 14px; flex-wrap: wrap; padding: 10px; }
  .eq-disco{ width: 46px; height: 46px; }
  .eq-aguja{ height: 18px; margin-top: -18px; }
}

/* ── 11 · p19 · BARRA DEL ESCENARIO ───────────────────────────────────
   Arrastrarla hacia arriba comprime la zona de controles y le entrega
   ese alto al escenario. El piano queda intacto: antes agrandar el
   pentagrama salía del alto del teclado, que es justo lo que no sirve.
   ═══════════════════════════════════════════════════════════════════ */

.controles-handle{
  height: 18px; flex: 0 0 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: ns-resize; touch-action: none;
  user-select: none;
}
.controles-handle.activo{ background: var(--card); }
.controles-handle-grip{ width: 44px; height: 4px; border-radius: 2px; background: var(--border); }
.controles-handle.activo .controles-handle-grip{ background: var(--ocre); }
.controles-handle-et{
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); font-family: 'DM Sans', sans-serif;
}

/* El mixer se comprime con transición para que el arrastre se vea fluido,
   pero no mientras se arrastra: ahí tiene que seguir al dedo sin retardo. */
#mixer{ transition: max-height .12s linear, opacity .12s linear; }
.controles-handle.activo ~ #mixer{ transition: none; }

/* Dos controles en la barra del teclado: tamaño y desplazamiento. */
.teclado-handle-corre{ right: 190px; }

/* ── 12 · p19 · VISTA DEL CIFRADO ─────────────────────────────────────
   Botón dentro del panel del cifrado: sólo el acorde, o el acorde más
   las notas que lo desglosan. En "sólo cifrado" el hueco de las notas
   no se reserva, así el nombre del acorde queda centrado de verdad.
   ═══════════════════════════════════════════════════════════════════ */

.chord-panel{ position: relative; }

.chord-panel.solo-cifrado #chordNotas{
  display: none !important;
}

.cifrado-toggle{
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 10.5px;
  letter-spacing: .6px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cifrado-toggle i{ font-size: 13px; }
.cifrado-toggle:hover{ color: var(--crema-dim); border-color: var(--ocre-mid); }
.cifrado-toggle.active{
  color: var(--ocre);
  border-color: var(--ocre-mid);
  background: var(--ocre-dim);
}

/* ── 13 · p19 · EDITOR INTERNO DE CADA EFECTO ─────────────────────────
   Chevron en cada fila de efecto; abajo se despliega su propio juego de
   parámetros. Cerrado por defecto: la fila sigue siendo una sola línea
   con la perilla de cantidad, como antes.
   ═══════════════════════════════════════════════════════════════════ */

.fx-editor{
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px 14px;
  margin: 2px 0 6px;
  border-left: 2px solid var(--ocre-mid);
  background: rgba(255,255,255,.028);
  border-radius: 0 8px 8px 0;
}
.fx-editor.show{ display: flex; }

.fx-editor-linea{
  display: grid;
  grid-template-columns: 92px minmax(0,1fr) 62px;
  align-items: center;
  gap: 10px;
}
.fx-editor-linea label{
  font-size: 11px; color: var(--crema-dim);
  font-family: 'DM Sans', sans-serif;
}
.fx-editor-linea input[type=range]{
  width: 100%; height: 3px;
  appearance: none; -webkit-appearance: none;
  background: var(--border); border-radius: 2px; outline: none; cursor: pointer;
}
.fx-editor-linea input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px; border-radius: 50%; background: var(--ocre); cursor: pointer;
}
.fx-editor-linea input[type=range]::-moz-range-thumb{
  width: 11px; height: 11px; border: none; border-radius: 50%; background: var(--ocre); cursor: pointer;
}
.fx-editor-val{
  font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: right;
}

/* Con el editor abierto, la grilla de cuatro columnas del panel de
   efectos en PC dejaría los controles apretadísimos: cada efecto que se
   despliega pasa a ocupar el ancho entero. */
@media (min-width: 900px){
  .wrap:has(.stage) .fx-panel.show > .fx-editor{ grid-column: 1 / -1; }
}

/* El control de correr queda siempre en su lugar; cuando no hay nada que
   correr se apaga en vez de desaparecer. Un control que aparece y se va
   obliga a buscarlo cada vez. */
.teclado-handle-corre.inactivo{ opacity: .35; pointer-events: none; }
.teclado-handle-rango:disabled{ cursor: default; }

/* El botón de Notas sale de la tarjeta blanca y se apoya en el fondo
   oscuro, al costado. Sobre el papel del pentagrama distraía. */
.stage-pane-staff{ position: relative; }
.stage-pane-staff > .cifrado-toggle{
  position: absolute;
  right: 10px;
  bottom: 10px;
  margin-top: 0;
  z-index: 4;
}
@media (max-width: 899px){
  .stage-pane-staff > .cifrado-toggle{ right: 8px; bottom: 8px; }
}

/* Control de brillo por dinámica, dentro del panel del ecualizador. */
.eq-brillo{
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding-left: 18px; border-left: 1px solid var(--border);
}
.eq-brillo label{
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--crema-dim); font-family: 'DM Sans', sans-serif; text-align: center;
}
.eq-brillo input[type=range]{
  width: 120px; height: 4px;
  appearance: none; -webkit-appearance: none;
  background: var(--border); border-radius: 2px; outline: none; cursor: pointer;
}
.eq-brillo input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%; background: var(--ocre); cursor: pointer;
}
.eq-brillo input[type=range]::-moz-range-thumb{
  width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--ocre); cursor: pointer;
}
.eq-brillo-val{ font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── 14 · p19 · INSTRUMENTOS ──────────────────────────────────────────
   Botón verde que reemplaza el rótulo CAPAS y despliega el catálogo.
   Plegado por defecto, como los efectos y el ecualizador.
   ═══════════════════════════════════════════════════════════════════ */

.instr-panel{
  display: none;
  flex-direction: column; gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background-image: linear-gradient(165deg, rgba(255,255,255,.05), transparent 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 12px -7px rgba(0,0,0,.9);
}
.instr-panel.show{ display: flex; }

/* selector de capa: a qué capa se le asigna el sonido que elijas */
.instr-capas{ display: flex; gap: 8px; }
.instr-capa{
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 10px; cursor: pointer;
  text-align: left; font-family: 'DM Sans', sans-serif;
}
.instr-capa b{ font-size: 11px; color: var(--crema-dim); font-weight: 600; }
.instr-capa small{ font-size: 10px; color: var(--muted); }
.instr-capa.activa{ border-color: var(--sage); background: rgba(166,206,150,.10); }
.instr-capa.activa b{ color: var(--sage); }

.instr-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
@media (max-width: 760px){ .instr-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.instr-grupo{ display: flex; flex-direction: column; gap: 4px; }
.instr-grupo-tit{
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.instr-son{
  display: flex; flex-direction: column; gap: 1px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 9px; cursor: pointer;
  font-size: 11.5px; color: var(--crema); text-align: left;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .15s ease, background .15s ease;
}
.instr-son small{ font-size: 9px; color: var(--muted); }
.instr-son:hover{ border-color: var(--ocre-mid); }
.instr-son.elegido{
  border-color: var(--sage); background: rgba(166,206,150,.12); color: var(--sage);
}
.instr-son.cargando{ opacity: .55; }
.instr-son.cargando::after{ content:' cargando…'; font-size: 9px; color: var(--muted); }
.instr-son.falla{ border-color: var(--coral); color: var(--coral); }

/* Leslie — dentro del panel de instrumentos. */
.leslie-fila{
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px;
}
.leslie-btn{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--crema-dim);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 5px 14px; font-size: 11.5px; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.leslie-btn.active{
  color: var(--sage); border-color: var(--sage);
  background: rgba(166,206,150,.14);
}
.leslie-btn.active i{ animation: leslieGira 1.6s linear infinite; }
@keyframes leslieGira{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
.leslie-vel{
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 5px 12px; font-size: 11px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; min-width: 68px;
}
.leslie-vel.rapido{ color: var(--ocre); border-color: var(--ocre-mid); }
.leslie-nota{ font-size: 10px; color: var(--muted); font-style: italic; }

/* Cuatro familias: el catálogo ya no necesita selector de capa, porque
   cada columna ES una capa. */
.instr-capas{ display: none !important; }

/* ── 15 · CUATRO FAMILIAS EN UNA SOLA FRANJA ──────────────────────────
   Con cuatro columnas cada celda del mixer queda en ~290px, y la fila
   trae botón + rótulo + deslizador + porcentaje. Sin min-width:0 el
   deslizador se niega a achicarse, la celda desborda y la grilla se
   rompe. Estos tres renglones son los que garantizan que las cuatro
   familias entren en una franja y no se vaya ninguna abajo.
   ═══════════════════════════════════════════════════════════════════ */

.mixer-row{ min-width: 0; }
.mixer-row input[type=range]{ min-width: 0; flex: 1 1 40px; }
.mixer-label{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 900px){
  /* rótulos un poco más angostos: "E.Pianos" y "Órganos" entran igual */
  .wrap:has(.stage) .mixer-label{ width: 62px !important; }
  .wrap:has(.stage) .mixer{ gap: 4px 14px !important; }
}

/* El catálogo pasa a cuatro columnas desde más abajo, para que las
   cuatro familias se vean juntas también en tablet. */
.instr-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 620px){
  .instr-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.leslie-fila{ grid-column: 1 / -1; }

/* Efecto encendido: se ve de un vistazo cuál está actuando, sin tener que
   mover la perilla para averiguarlo. */
.fx-row.on{
  background: rgba(237,184,92,.10);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(237,184,92,.35);
  padding: 4px 8px;
}
.fx-row.on input[type=range]{ background: rgba(237,184,92,.32); }
.fx-row:not(.on){ opacity: .72; padding: 4px 8px; }
.fx-row:not(.on) .fx-editor{ opacity: 1; }

/* El Leslie, dentro de la columna de Órganos. */
.instr-grupo .leslie-fila{
  flex-direction: column; align-items: stretch; gap: 5px;
  border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px;
}
.instr-grupo .leslie-fila .leslie-btn,
.instr-grupo .leslie-fila .leslie-vel{ width: 100%; justify-content: center; }
.instr-grupo .leslie-nota{ display: none; }

/* Sonido elegido Y sonando: el punto verde distingue "elegido" de "activo".
   Tocar el sonido ya elegido apaga la capa sin cambiar de banco. */
.instr-son.sonando{ position: relative; }
.instr-son.sonando::before{
  content:''; position:absolute; top:7px; right:7px;
  width:6px; height:6px; border-radius:50%;
  background: var(--sage); box-shadow: 0 0 6px var(--sage);
}
.instr-son.elegido:not(.sonando){ opacity:.62; }

/* La fila del mixer del órgano lleva el Leslie debajo del nombre, así se
   puede prender y apagar con el catálogo cerrado. */
.mixer-label-caja{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.mixer-label-caja .mixer-label{ width:auto !important; }
.mixer-row[data-voz="organo"]{ align-items:flex-start; }
.mixer-row[data-voz="organo"] .leslie-fila{
  border-top:none; padding-top:0; margin-top:0; gap:4px;
}
.mixer-row[data-voz="organo"] .leslie-btn{
  padding:2px 8px; font-size:10px; gap:4px;
}
.mixer-row[data-voz="organo"] .leslie-vel{
  padding:2px 7px; font-size:9.5px; min-width:0;
}
.mixer-row[data-voz="organo"] .leslie-nota{ display:none; }

/* Cinco sonidos por banco: la columna crece, no la grilla. */
.instr-grupo{ gap: 3px; }
.instr-son{ padding: 5px 9px; font-size: 11px; }

/* ── 16 · SOLAPAMIENTOS ───────────────────────────────────────────────
   "Anular avatar" está posicionado inline con position:absolute,
   bottom:72px, left:16px y z-index:200. En el celular queda sobre zona
   vacía, pero en PC cae justo encima del panel de efectos y tapa los
   controles. Como el estilo viene inline, hace falta !important.

   El avatar entra por la derecha (.avatar-tip right:-320px), así que el
   botón que lo silencia va del mismo lado: queda al lado de lo que
   silencia y libera la columna de controles.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 900px){
  /* Ya no flota: se muda a la barra de estado por JS. Aca solo se lo
     achica para que entre en esa linea. */
  .wrap:has(.stage) .btn-silenciar{
    font-size: 11px !important;
    padding: 3px 10px !important;
    display: inline-flex !important;
  }
  /* El chevron de cada efecto tiene que quedar alcanzable siempre. */
  .wrap:has(.stage) .fx-chevron{ position: relative; z-index: 30; }
  /* Por debajo del avatar (z-index 100), por encima de los paneles. */
  .wrap:has(.stage) .fx-panel,
  .wrap:has(.stage) .eq-panel,
  .wrap:has(.stage) .instr-panel{ position: relative; z-index: 20; }
}

/* Los paneles desplegables no se pisan entre sí: cada uno empuja al que
   sigue en vez de superponerse. */
.fx-panel, .eq-panel, .instr-panel{ position: relative; }

/* ── 17 · ZONA DEL NOMBRE DEL SONIDO EN EL MIXER ──────────────────────
   La fila del órgano tiene nombre + Leslie debajo, así que es más alta
   que las otras tres. Alineadas arriba y con altura mínima común, las
   cuatro quedan parejas y el Leslie no empuja nada.
   ═══════════════════════════════════════════════════════════════════ */

.mixer-row{ align-items: center; }
.mixer-row[data-voz="organo"]{ align-items: center; }
.mixer-label-caja{
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; flex: 0 0 auto;
}
.mixer-label-caja .mixer-label{ width: auto !important; line-height: 1.15; }
.leslie-fila{ display: flex; gap: 4px; align-items: center; }
.mixer-row[data-voz="organo"] .leslie-btn{
  padding: 1px 7px; font-size: 9.5px; gap: 3px; border-radius: 12px;
  line-height: 1.5; white-space: nowrap;
}
.mixer-row[data-voz="organo"] .leslie-btn i{ font-size: 11px; }
.mixer-row[data-voz="organo"] .leslie-vel{
  padding: 1px 6px; font-size: 9px; min-width: 0; border-radius: 12px;
  line-height: 1.5; white-space: nowrap;
}

@media (min-width: 900px){
  /* Las cuatro celdas con la misma altura, así el Leslie no desalinea. */
  .wrap:has(.stage) .mixer-row{ min-height: 42px; }
}

/* Medidor de latencia en la barra de estado. */
.lat-pill{
  margin-left: 10px; font-size: 10.5px; padding: 1px 8px;
  border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lat-pill.media{ color: var(--ocre); border-color: var(--ocre-mid); }
.lat-pill.alta{ color: var(--coral); border-color: var(--coral); }

/* La barra de estado ahora aloja el botón de anular avatar y el medidor
   de latencia, así que se ordena en fila. */
.chrome-status{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }

/* El editor abierto se ve como colgado de su efecto. */
.fx-editor.show{ animation: fxAbrir .18s ease; }
@keyframes fxAbrir{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* La etiqueta del efecto es ahora todo el control: un clic prende o
   apaga, dos clics abren los ajustes. Se le da aspecto de zona
   accionable y área de toque generosa, ya que reemplaza al botón. */
.fx-label-activa{
  cursor: pointer;
  border-radius: 8px;
  padding: 6px 10px !important;
  min-height: 34px;
  display: flex; flex-direction: column; justify-content: center;
  transition: background .15s ease, box-shadow .15s ease;
  user-select: none;
  position: relative;
}
.fx-label-activa:hover{ background: rgba(255,255,255,.05); }
.fx-label-activa::after{
  content: '••';
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 9px; letter-spacing: 1px; color: var(--muted); opacity: .5;
}
.fx-label-activa:hover::after{ opacity: 1; color: var(--ocre); }
.fx-row.editando .fx-label-activa::after{ content: '×'; font-size: 13px; opacity: 1; color: var(--ocre); }
.fx-row.editando .fx-label-activa{ background: rgba(237,184,92,.12); }

/* Botón de Instrumentos: hereda todo de .chrome-pill-btn — color ocre,
   borde, brillo y relleno al activarse. Acá sólo el ícono, que es lo
   único propio. Antes tenía su propia paleta en verde y quedaba distinto
   de Efectos y Ecualizador. */
.instr-btn i{ font-size: 15px; }

/* ── 18 · TARJETAS DE INSTRUMENTO, TODAS IGUALES ──────────────────────
   Las que no tenían nota quedaban más bajas que las que sí. Ahora el
   segundo renglón se renderiza siempre (vacío si no hay nota) y la
   tarjeta tiene altura fija, así las veinte miden lo mismo y las cuatro
   columnas terminan a la misma altura.
   ═══════════════════════════════════════════════════════════════════ */

.instr-grid{ align-items: start; }
.instr-grupo{ display: flex; flex-direction: column; gap: 5px; }

.instr-son{
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  height: 42px;
  padding: 0 10px !important;
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
}
.instr-son-et{
  font-size: 11.5px;
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.instr-son small{
  font-size: 9px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 11px;
}
.instr-son.elegido .instr-son-et{ font-weight: 600; }
/* La marca de "sonando" no cambia el alto. */
.instr-son.sonando::before{ top: 6px; right: 6px; }
/* El aviso de carga tampoco: reemplaza la nota en vez de sumar renglón. */
.instr-son.cargando small{ visibility: hidden; }
.instr-son.cargando::after{
  content: 'cargando…';
  position: absolute; left: 10px; bottom: 5px;
  font-size: 9px; color: var(--muted);
}
.instr-son{ position: relative; }

@media (max-width: 620px){
  .instr-son{ height: 40px; }
}

/* Los controles del teclado y del escenario aparecen desde 700px, así una
   tablet en vertical también los tiene. El resto del rediseño de p19
   (dos columnas, pentagrama y cifrado lado a lado) sigue desde 900px:
   debajo de eso no hay ancho para repartir y conviene el apilado. */
@media (min-width: 700px){
  .teclado-handle, .controles-handle{ display: flex; }
}

/* ── 19 · BARRA DEL TECLADO EN CELULAR ────────────────────────────────
   En el celular estos controles hacen MÁS falta que en la PC: pantalla
   chica, 88 teclas, y la única alternativa para mover el teclado sería
   arrastrar sobre las teclas — que dispara notas.
   Versión compacta: sin rótulos, barra más alta para el dedo y los dos
   deslizadores repartidos a lo ancho.
   ═══════════════════════════════════════════════════════════════════ */

.teclado-handle.compacta{
  height: 34px; flex: 0 0 34px;
  margin-left: 0; margin-right: 0;
  justify-content: space-between;
  padding: 0 10px;
  gap: 10px;
}
.teclado-handle.compacta .teclado-handle-grip{
  position: absolute; left: 50%; top: 4px;
  transform: translateX(-50%);
  width: 34px; height: 3px;
}
.teclado-handle.compacta .teclado-handle-ctrl{
  position: static; transform: none;
  flex: 1 1 0; min-width: 0;
}
.teclado-handle.compacta .teclado-handle-rango{
  width: 100%;
  height: 22px;              /* área de toque, no grosor visible */
  background: transparent;
}
/* La pista se dibuja aparte para que el dedo tenga 22px de alto pero la
   línea se vea fina. */
.teclado-handle.compacta .teclado-handle-ctrl{ position: relative; }
.teclado-handle.compacta .teclado-handle-ctrl::before{
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: var(--border); pointer-events: none;
}
.teclado-handle.compacta .teclado-handle-rango::-webkit-slider-thumb{
  width: 20px; height: 20px;
}
.teclado-handle.compacta .teclado-handle-rango::-moz-range-thumb{
  width: 20px; height: 20px;
}
/* Un ícono chiquito distingue cuál es cuál, ya que no hay rótulos. */
.teclado-handle.compacta .teclado-handle-ctrl::after{
  content: '⇔'; position: absolute; right: -2px; top: 50%;
  transform: translateY(-50%); font-size: 11px; color: var(--muted);
  pointer-events: none; background: var(--surface); padding-left: 3px;
}
.teclado-handle.compacta .teclado-handle-corre::after{ content: '⟷'; }

/* ── 20 · GRABADOR / CARPETA ──────────────────────────────────────────
   El botón de descarga se distingue de los otros dos: es el único que
   saca el archivo de la app.
   ═══════════════════════════════════════════════════════════════════ */

.rec-btn-wav{
  color: var(--sage) !important;
  border-color: rgba(166,206,150,.4) !important;
}
.rec-btn-wav:hover:not(:disabled){
  background: rgba(166,206,150,.16) !important;
  border-color: var(--sage) !important;
}
.rec-btn-wav:disabled{
  opacity: .3; cursor: default;
}
/* Las grabaciones viejas no tienen audio: se marca por qué el botón está
   apagado en vez de dejarlo mudo. */
.rec-btn-wav:disabled::after{ content: ''; }
.rec-item-info .fecha{ font-variant-numeric: tabular-nums; }


/* ── 18 · "ANULAR AVATAR" NO PISA LA BOTONERA ─────────────────────────
   El boton vive en las paginas con position:absolute y bottom:72px,
   dentro de .wrap, que en el celular llega hasta el borde inferior de
   la pantalla. Ahi abajo esta la botonera de navegacion —unos 84px, y
   en varias paginas hay ademas una fila de "Nivel N →" encima—, asi que
   72px no cae en zona vacia: cae justo arriba de "Inicio", el boton de
   mas a la izquierda, que es el mismo lado en el que esta este.

   El comentario del bloque 16 daba por sentado que en el celular no
   molestaba. Molesta, y tapa el boton mas usado de la app.

   En PC no hace falta: alli el boton se muda a la barra de estado por JS.

   Si queda muy alto o muy bajo en algun modelo, se corrige cambiando un
   solo numero: --auria-silenciar-alto.
   ═══════════════════════════════════════════════════════════════════ */

:root{ --auria-silenciar-alto: 130px; }

@media (max-width: 899px){
  .btn-silenciar{
    /* FIXED, no absolute. Estaba absolute dentro de .wrap, que en las paginas
       que se desplazan se mueve con el contenido: por eso el boton "no queda
       siempre en el mismo lugar". Fijo a la ventana, se queda quieto siempre,
       se desplace la pagina o no. */
    position: fixed !important;
    bottom: calc(var(--auria-silenciar-alto) + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    right: auto !important; top: auto !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    z-index: 210 !important;
  }
}


/* ── 19 · UNA SOLA FORMA DE DESPLAZARSE ───────────────────────────────
   Lo que se mueve es el contenido. La cabecera arriba y la botonera de
   cuatro botones abajo quedan pegadas a los bordes y no se desplazan
   nunca.

   Diecisiete de las veintidos paginas ya estaban asi: su .wrap (o
   .phone) era una cascara con display:flex y overflow:hidden, y adentro
   el contenido llevaba flex:1 con overflow-y:auto. Por eso funcionaban.

   Cinco no lo eran: p04, p11, p12, p13 y p14. En esas se desplazaba el
   documento entero y la app se iba hacia arriba hasta perderse de
   vista, botonera incluida.

   El contenedor de contenido ya existia en las veintidos —.content,
   .screen, .tab-content, #ejWrap, #screenHome, .lp-main, main—, y las
   botoneras ya traian flex-shrink:0 puesto inline. Lo unico que
   faltaba era la altura fija de la cascara. Eso se hace aca, una vez,
   para todas.

   Antes la base ponia min-height:100dvh: el contenedor podia CRECER mas
   alla de la ventana y arrastrar la botonera con el. Ahora es una
   altura exacta, y lo que sobra se desplaza adentro.
   ═══════════════════════════════════════════════════════════════════ */

.wrap, .phone{
  /* height:100% del body, NO 100dvh menos las zonas seguras. El body ya
     reserva esas zonas con su padding; restarlas otra vez aca las descontaba
     dos veces y dejaba una franja muerta abajo, con la botonera despegada del
     borde. Con box-sizing:border-box en el body, el 100% cae exacto. */
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Nada de esto se encoge ni se desplaza. */
.mod-header, .app-header, .bottom-nav,
.day-bar-row, .day-hint, .editor-toolbar, .lab-toolbar, .chrome-status, .tabs{
  flex-shrink: 0 !important;
}

/* Las cinco que no eran cascara traen padding en .wrap: sin quitarlo, la
   botonera queda flotando a 20px del borde en vez de pegada abajo. */
.wrap:has(> .screen),
.wrap:has(> #ejWrap),
.wrap:has(> #screenHome){
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* p04 es la unica cuyo .screen no tenia flex ni overflow —el mismo html
   que p05, distinta css—. El padding que se le saco a .wrap se le
   devuelve aca, o el texto queda pegado al borde. */
.wrap:has(> .screen) > .screen.active{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px 20px !important;
}