/* Estilos comunes de la sala The Thrill Is Gone.
   Mismos colores que All of Me 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}
/* El ancho de la sala. Conviene que sea el mismo número que el max-width del
   <div> que la envuelve en Kajabi (ver incrustar-en-kajabi.txt): si el marco es
   más ancho que esto, lo que sobra queda de borde negro al costado.
   El mástil es un SVG a width:100% y la grilla son 4 columnas iguales, así que
   todo lo que se le dé de ancho se ve más grande de verdad. */
.wrap{width:100%;max-width:1280px;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 ("el V · el A# es la nota prestada"): 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: "Bm7" en versalita se lee "BM7" */
.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%}

.legend{display:flex;gap:16px;margin-top:11px;font-size:12px;color:#8A8580;flex-wrap:wrap;align-items:center}
.legend i{display:inline-block;width:13px;height:13px;border-radius:50%;margin-right:6px;vertical-align:-2px}
.legend .ghost{background:rgba(233,228,220,.16);border:1px solid rgba(233,228,220,.22)}

/* grilla de 12 compases: cuatro por fila, una fila por frase.
   Va entera, los doce, uno atrás del otro: la grilla no es la partitura, es el
   mapa de dónde está parado el alumno. */
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.pb{position:relative;border-radius:10px;padding:14px 6px;text-align:center;font-size:clamp(15px,2vw,22px);
    font-weight:900;color:#0D0B0A;cursor:pointer;filter:brightness(.32) saturate(.7);
    transition:filter .1s,transform .1s}
.pb .n{position:absolute;top:3px;left:6px;font-size:10px;opacity:.5}
/* "igual que el compás anterior": el mismo signo que usa la hoja */
.pb svg.rep{display:block;margin:0 auto;width:30px;height:22px;opacity:.75}
/* la letra de la frase (A · B · C), como el cuadradito de la partitura */
.pb .sec{position:absolute;top:2px;right:5px;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.05);box-shadow:0 0 0 3px #fff,0 0 20px rgba(245,197,24,.45);z-index:2}
.pb.fam-i{background:#F5C518}      /* i · Bm7 */
.pb.fam-iv{background:#C98A0E}     /* iv · Em7 */
.pb.fam-VI{background:#9AD24A}     /* VI · Gmaj7 */
.pb.fam-V{background:#FFFFFF}      /* V · F#7 */

.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;font-family:inherit}
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 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 20px rgba(245,197,24,.45)}
.pb.on.loopFin{box-shadow:inset -5px 0 0 #9AD24A,0 0 0 3px #fff,0 0 20px 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;font-family:inherit}
.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, forma, etc.) */
.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}
.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}

/* interruptores sueltos (hoja de calcar, nombres de nota, dibujos) */
button.tg{background:#141110;color:#8A8580;border:1px solid #2a2521;border-radius:10px;
          padding:9px 14px;font-size:13px;font-weight:bold;cursor:pointer;font-family:inherit}
button.tg:hover{background:#1d1810;color:#cfcac4}
button.tg.on{background:#1d1810;color:#F5C518;border-color:#4a3f16}
.toggles{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toggles .spacer{flex:1}

/* fichas grandes (las dos formas, las tres zonas) */
.fichas{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.ficha{flex:1;min-width:210px;border:2px solid #2a2521;border-radius:12px;padding:12px 16px;
       background:#141110;cursor:pointer;transition:all .18s ease;opacity:.5}
.ficha b{display:block;font-size:15px;font-weight:900;letter-spacing:.4px}
.ficha span{font-size:12px;color:#8A8580}
.ficha.act{opacity:1;border-color:#F5C518;background:#1d1810;box-shadow:0 0 22px rgba(245,197,24,.16)}
.ficha.act b{color:#F5C518}

.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}
kbd{background:#241f13;color:#F5C518;border:1px solid #4a3f16;border-radius:5px;
    padding:1px 6px;font-family:inherit;font-size:11px;font-weight:bold}

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

/* ---- barra de arriba cuando se corre una rutina (la que se arma en index) ---- */
.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}