/* 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(8,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}
.pb.fam-i{background:#F5C518}      /* tónica */
.pb.fam-sec{background:#C98A0E}    /* dominantes secundarias: E7 A7 D7 */
.pb.fam-min{background:#9AD24A}    /* menores: Dm7 Am7 */
.pb.fam-V{background:#FFFFFF}      /* el V de verdad: G7 */
.pb.fam-sub{background:#7FB2E5}    /* F y Fm */

.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 ----
   Los compases de afuera del loop se apagan: de un vistazo se ve qué se está
   machacando. El primero y el último llevan el corchete, como una repetición. */
.pb.fuera{filter:brightness(.14) saturate(.5)}
.pb.fuera.on{filter:brightness(.55)}
.pb.loopIni{box-shadow:inset 4px 0 0 #9AD24A}
.pb.loopFin{box-shadow:inset -4px 0 0 #9AD24A}
.pb.loopIni.loopFin{box-shadow:inset 4px 0 0 #9AD24A,inset -4px 0 0 #9AD24A}
.pb.on.loopIni{box-shadow:inset 4px 0 0 #9AD24A,0 0 0 3px #fff,0 0 18px rgba(245,197,24,.45)}
.pb.on.loopFin{box-shadow:inset -4px 0 0 #9AD24A,0 0 0 3px #fff,0 0 18px rgba(245,197,24,.45)}

.tools{margin-top:14px}
.looprow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:11px}
.looprow .llbl{font-size:11px;color:#6E6963;text-transform:uppercase;letter-spacing:1.5px;font-weight:bold}
.looprow .seg button{padding:6px 11px;font-size:12px}
.loopinfo{font-size:12px;color:#6E6963}
.loopinfo b{color:#9AD24A;font-weight:bold}
.progwrap{position:relative;height:9px;background:#221e1a;border-radius:5px;cursor:pointer;overflow:hidden}
.loopzone{position:absolute;top:0;bottom:0;display:none;background:#2f3d1c;border-left:1px solid #9AD24A;border-right:1px solid #9AD24A}
.progfill{position:relative;height:100%;width:0;background:#F5C518;border-radius:5px}
.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}