/* Estilos comunes de la sala All of Me.
   Mismos colores que Thrill Is Gone y Blues-Bend: si se cambia la marca, se cambia acá. */

*{box-sizing:border-box;margin:0;padding:0}
body{background:#0D0B0A;color:#fff;font-family:Arial,Helvetica,sans-serif;min-height:100vh;padding:22px}
.wrap{width:100%;max-width:1080px;margin:0 auto}

a.volver{display:inline-block;margin:0 0 14px;color:#8A8580;font-size:13px;text-decoration:none;
         border:1px solid #2a2521;border-radius:9px;padding:8px 14px;background:#141110;
         font-weight:bold;transition:all .15s}
a.volver:hover{color:#F5C518;border-color:#F5C518;background:#1d1810}

header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:16px}
.brand img{height:56px;width:auto;display:block}
h1{font-size:clamp(22px,3.2vw,40px);font-weight:900;letter-spacing:-1px;line-height:1}
.sub{color:#F5C518;font-weight:bold;font-size:clamp(13px,1.6vw,20px);margin-top:6px}
.hintTop{color:#8A8580;font-size:13px;text-align:right;line-height:1.5;max-width:340px}
.hintTop b{color:#cfcac4}

/* barra "qué estoy viendo ahora" */
.nowbar{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.nowbar .cname{font-size:30px;font-weight:900;color:#F5C518;line-height:1}
/* acá va prosa ("V7 de Dm · entra el C#"): en mayúsculas no se lee */
.nowbar .cinv{font-size:14px;color:#cfcac4;letter-spacing:.5px;font-weight:bold}
.nowbar .cnext{margin-left:auto;font-size:13px;color:#6E6963;text-transform:uppercase;letter-spacing:1px}
/* el nombre del acorde NO va en mayúsculas: "Fm6" en versalita se lee "FM6" */
.nowbar .cnext b{color:#8A8580;font-size:16px;text-transform:none;letter-spacing:0}

.neckbox{background:#141110;border:1px solid #2a2521;border-radius:14px;padding:10px 8px;overflow-x:auto}
svg.neck{display:block;margin:0 auto;min-width:900px;width:100%}

/* grilla de 32 compases: 8 por fila, una fila por frase de 8 */
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}
.pb{position:relative;border-radius:8px;padding:8px 4px;text-align:center;font-size:14px;font-weight:900;
    color:#0D0B0A;cursor:pointer;filter:brightness(.32) saturate(.7);transition:filter .1s,transform .1s}
.pb .n{position:absolute;top:2px;left:4px;font-size:9px;opacity:.5}
/* "igual que el compás anterior": el mismo signo que usa la hoja */
.pb svg.rep{display:block;margin:0 auto;width:26px;height:19px;opacity:.75}
/* la letra de la parte (A · B · A · C), como el cuadradito de la partitura */
.pb .sec{position:absolute;top:1px;right:3px;font-size:11px;font-weight:900;opacity:.55;
         border:1.5px solid currentColor;border-radius:3px;line-height:1;padding:1px 3px}
.pb.on{filter:none;transform:scale(1.06);box-shadow:0 0 0 3px #fff,0 0 18px rgba(245,197,24,.45);z-index:2}
/* Un color por función, no por tipo de acorde: en este tema los cinco acordes
   son tríadas y lo que cambia es para qué está cada uno. El único que se
   despega —el LA mayor— va en el color más distinto a propósito: es el compás
   donde la pentatónica deja de alcanzar. */
.pb.fam-casa{background:#F5C518}   /* Dm · la casa */
.pb.fam-bVII{background:#FFFFFF}   /* C  · el bVII */
.pb.fam-bVI{background:#7FB2E5}    /* Bb · el bVI */
.pb.fam-rel{background:#9AD24A}    /* F  · el relativo mayor */
.pb.fam-V{background:#E06C5A}      /* A  · el V mayor, el que choca */

.panel{margin-top:16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
       background:#171412;border:1px solid #2a2521;border-radius:14px;padding:14px 18px}
button.play{background:#F5C518;color:#0D0B0A;border:0;border-radius:10px;
     font-size:18px;font-weight:900;padding:12px 26px;cursor:pointer;min-width:150px}
button.play:hover{background:#ffd52e}
.stat{display:flex;flex-direction:column;gap:3px}
.stat b{font-size:22px;font-weight:900;color:#F5C518;line-height:1}
.stat span{font-size:11px;color:#8A8580;text-transform:uppercase;letter-spacing:1px}
.beats{display:flex;gap:8px;margin-left:auto}
.beats i{width:15px;height:15px;border-radius:50%;background:#2f2a25;display:block;transition:background .05s}
.beats i.on{background:#F5C518}
.beats i.key{box-shadow:0 0 0 2px #6E6963}

/* ---- el pedazo que se repite ----
   Lo importante es al revés de lo que parece: no se trata de apagar lo de
   afuera, sino de PRENDER lo de adentro. Los compases que se están repitiendo
   quedan casi a pleno color y el resto se hunde en el fondo, así el pedazo
   salta a la vista sin tener que leer nada. El primero y el último llevan el
   corchete verde, como la barra de repetición de la hoja. */
.pb.dentro{filter:brightness(.72) saturate(1)}
.pb.dentro.on{filter:none}      /* el compás que suena sigue yendo a pleno */
.pb.fuera{filter:brightness(.12) saturate(.35)}
.pb.fuera.on{filter:brightness(.5)}
.pb.loopIni{box-shadow:inset 5px 0 0 #9AD24A}
.pb.loopFin{box-shadow:inset -5px 0 0 #9AD24A}
.pb.loopIni.loopFin{box-shadow:inset 5px 0 0 #9AD24A,inset -5px 0 0 #9AD24A}
.pb.on.loopIni{box-shadow:inset 5px 0 0 #9AD24A,0 0 0 3px #fff,0 0 18px rgba(245,197,24,.45)}
.pb.on.loopFin{box-shadow:inset -5px 0 0 #9AD24A,0 0 0 3px #fff,0 0 18px rgba(245,197,24,.45)}

/* ---- la línea del loop ----
   Antes acá había una hilera de cinco botones con los compases escritos al
   lado ("A · 1-8", "B · 9-16"…). Eran demasiados controles para algo que casi
   siempre se hace arrastrando sobre la grilla, y encima dos decían "A". Ahora
   es una línea de texto con cuatro letras: pasando el dedo o el mouse por
   encima se prenden en la grilla los compases de esa parte, que es más claro
   que cualquier cartel —y de paso se ve cuál de las dos "A" es. */
.tools{margin-top:14px}
.looprow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px;
         font-size:12px;color:#6E6963;min-height:26px}
.looprow .llbl{font-size:11px;color:#6E6963;text-transform:uppercase;letter-spacing:1.5px;font-weight:bold}
.lparts{display:inline-flex;gap:5px}
.lparts button{width:28px;height:24px;padding:0;background:transparent;color:#8A8580;
               border:1px solid #2a2521;border-radius:7px;font-family:inherit;font-size:12px;
               font-weight:900;cursor:pointer;transition:all .12s}
.lparts button:hover{border-color:#9AD24A;color:#9AD24A}
.lparts button.on{background:#9AD24A;border-color:#9AD24A;color:#0D0B0A}
.loopinfo b{color:#9AD24A;font-weight:bold}
button.loopoff{background:transparent;color:#6E6963;border:0;border-bottom:1px dotted #3a352f;
               padding:0 0 1px;margin-left:4px;font-family:inherit;font-size:12px;cursor:pointer}
button.loopoff:hover{color:#F5C518;border-bottom-color:#F5C518}
/* la barra dejó de ser un hilito: con la banda del loop adentro tiene que
   poder verse qué pedazo del tema se está repitiendo y por dónde va */
.progwrap{position:relative;height:15px;background:#1a1613;border:1px solid #2a2521;
          border-radius:8px;cursor:pointer;overflow:hidden}
.loopzone{position:absolute;top:0;bottom:0;display:none;background:rgba(154,210,74,.16);
          box-shadow:inset 2px 0 0 #9AD24A,inset -2px 0 0 #9AD24A}
.progfill{position:relative;height:100%;width:0;background:#F5C518;border-radius:7px 0 0 7px}
.toolrow{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:11px;color:#8A8580;font-size:13px}
.tItem{display:flex;align-items:center;gap:8px}
.tItem b{color:#F5C518;font-weight:900}
.tItem button{background:#1a1613;color:#cfcac4;border:1px solid #2a2521;border-radius:6px;
              padding:4px 8px;cursor:pointer;font-size:12px}
.tItem button:hover{background:#241f1a}
.tempo input[type=range]{accent-color:#F5C518;vertical-align:middle;width:130px}
.fuente{font-size:11px;color:#6E6963;text-transform:uppercase;letter-spacing:1px}

/* botoncitos de opción (zona, patrón, etc.) */
.seg{display:inline-flex;border:1px solid #2a2521;border-radius:9px;overflow:hidden;background:#141110}
.seg button{background:transparent;color:#8A8580;border:0;border-right:1px solid #2a2521;
            padding:8px 14px;font-size:13px;font-weight:bold;cursor:pointer;font-family:inherit}
.seg button:last-child{border-right:0}
.seg button.on{background:#F5C518;color:#0D0B0A}
.seg button:hover:not(.on){background:#1d1810;color:#cfcac4}

.big{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
     font-size:22vw;font-weight:900;color:#F5C518;pointer-events:none;opacity:.9}

.aviso{margin-top:14px;background:#141110;border:1px solid #2a2521;border-left:5px solid #C98A0E;
       border-radius:12px;padding:12px 16px;color:#8A8580;font-size:13px;line-height:1.6}
.aviso b{color:#cfcac4}

footer{margin-top:28px;color:#6E6963;font-size:12px;text-align:center}

/* ---- barra de arriba cuando se está corriendo una rutina (sesion.html) ---- */
.sesbar{position:fixed;top:0;left:0;right:0;z-index:100;background:#1d1810;
        border-bottom:2px solid #4a3f16;padding:8px 16px}
.sestop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:#F5C518;font-weight:bold}
.sestop .sesname{letter-spacing:.4px}
.sestop span:not(.sesname){color:#cfcac4}
button.sesb{background:#241f13;color:#F5C518;border:1px solid #4a3f16;border-radius:8px;
            padding:6px 12px;font-weight:bold;font-family:inherit;cursor:pointer;font-size:12px}
button.sesb2{background:#1a1613;color:#cfcac4;border-color:#2a2521;font-weight:normal}
.sesline{display:flex;align-items:center;gap:9px;margin-top:5px}
.seslbl{font-size:10px;color:#8A8580;letter-spacing:1px;width:96px;flex:none;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seschan{flex:1;height:7px;background:#0d0b0a;border-radius:4px;overflow:hidden}
.seschan i{display:block;height:100%;width:0;background:#F5C518;transition:width .25s}
.seschan i.verde{background:#9AD24A}
.sespct{font-size:10px;color:#6E6963;width:38px;text-align:right;flex:none}
.sestap{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;
        justify-content:center;background:rgba(13,11,10,.93);color:#F5C518;cursor:pointer;text-align:center}
.sestap .t1{font-size:15px;color:#cfcac4;margin-bottom:8px}
.sestap .t2{font-size:15vw;font-weight:900;line-height:1}
.sestap .t3{font-size:14px;color:#8A8580;margin-top:8px}

/* ===========================================================================
   LO PROPIO DE SULTANS
   =========================================================================== */

/* el cartel de qué solo se está practicando, arriba de todo. Va siempre, y no
   sólo cuando hay dos pantallas abiertas: el solo 1 y el solo 2 tienen la misma
   cara y sin este cartel uno no sabe en cuál está. */
.solobar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 14px;
         background:#141110;border:1px solid #2a2521;border-radius:12px;padding:10px 14px}
.solobar .sl{font-size:11px;color:#6E6963;text-transform:uppercase;letter-spacing:1.5px;font-weight:bold}
.solobar .sq{color:#8A8580;font-size:13px}
.solobar .sq b{color:#cfcac4}

/* la referencia de los colores de las notas */
.leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:#8A8580}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.leyenda i{width:13px;height:13px;border-radius:50%;display:inline-block}
.leyenda .am{background:#F5C518} .leyenda .ve{background:#9AD24A}
.leyenda .ro{background:#E06C5A} .leyenda .na{background:#C98A0E}
.leyenda .bl{background:#e9e4dc}

/* las estiradas que salen en el compás que suena */
.bends{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin-top:12px}
.bend{background:#141110;border:1px solid #2a2521;border-radius:11px;padding:11px 13px;
      cursor:pointer;transition:all .14s;opacity:.72;text-align:left}
.bend:hover{border-color:#4a433c;background:#1a1613;opacity:1}
.bend b{display:block;font-size:15px;color:#e9e4dc;line-height:1.25;font-weight:900}
.bend .dnd{display:block;font-size:12px;color:#6E6963;margin-top:4px}
.bend .gr{display:block;font-size:12px;color:#8A8580;margin-top:5px}
.bend .gr em{font-style:normal;color:#9AD24A;font-weight:bold}
.bend.sel{opacity:1;border-color:#F5C518;background:#1d1810;box-shadow:0 0 18px rgba(245,197,24,.13)}
.bend.sel b{color:#F5C518}
/* la que arregla el choque contra el LA: es UNA sola en todo el tema */
.bend.salva{border-color:#9AD24A}
.bend.salva::before{content:'★ la que arregla el choque';display:block;font-size:10px;
                    color:#9AD24A;letter-spacing:1.1px;font-weight:bold;margin-bottom:6px}
.bend.media b{color:#9AD24A}
.bend.media.sel b{color:#F5C518}

/* el cartel del acorde que suena, con el porqué */
.rec{margin-top:14px;background:#141110;border:1px solid #2a2521;border-left:5px solid #F5C518;
     border-radius:12px;padding:13px 16px}
.rec .rn{font-size:19px;font-weight:900;color:#F5C518;line-height:1.2}
.rec .rq{color:#cfcac4;font-size:14px;line-height:1.6;margin-top:6px}
.rec .rg{color:#8A8580;font-size:13px;margin-top:8px;letter-spacing:.4px}
.rec .rg b{color:#e9e4dc}
.rec .clave{color:#9AD24A;font-weight:bold}
.rec .choca{color:#E06C5A;font-weight:bold}
.rec .roza{color:#C98A0E;font-weight:bold}

.fila{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.fila > span.lbl{font-size:11px;color:#6E6963;text-transform:uppercase;letter-spacing:1.5px;font-weight:bold}

/* el mástil de las estiradas lo dibuja bend-mastil.js, que trae su propio svg */
.neckbend{background:#141110;border:1px solid #2a2521;border-radius:14px;padding:10px 8px;overflow-x:auto}
.neckbend svg{display:block;width:100%;min-width:640px}