/* Estilos comunes de la sala de la Semana del Blues.
   Mismos colores que All of Me, 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 12 compases: 4 por fila, una fila por línea del blues. Las tres
   filas SON las tres líneas: se ve de un vistazo que el blues es eso y nada más. */
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}
.pb{min-height:44px;display:flex;align-items:center;justify-content:center}
.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 ----
   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}
/* En el teléfono los cinco ejercicios no entran de ancho. Apretados quedaban
   con el nombre partido en tres renglones y un botón de 76 px de alto: mejor
   que la tira se corra con el dedo y cada nombre quede en una línea. */
@media (max-width:640px){
  .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .seg button{flex:0 0 auto;white-space:nowrap}
}

.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}