/* Solo algoritmos: tambores del director, cuadro del algoritmo y frases escritas (los dos pads están en comun.css).
   Los tambores son claros con contorno oscuro en los dos modos, como las manos: lo que toca el director queda "iluminado".
   Al golpe, el parche se enciende con el azul de su altura (los mismos tokens que los pads). */
:root{
  --madera:#E4C796; --madera-borde:#8F6A3E; --aro:#1E2430; --aro-brillo:#6B7487; --parche:#F3EADB;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --madera:#D9B987; --madera-borde:#6E5232; --aro:#0B0F17; --aro-brillo:#5F6A80; --parche:#EFE6D6; }
}
:root[data-theme="dark"]{ --madera:#D9B987; --madera-borde:#6E5232; --aro:#0B0F17; --aro-brillo:#5F6A80; --parche:#EFE6D6; }

.algoritmo{margin:-.7rem 0 1rem;color:var(--muted);font-weight:600}

/* tambores */
.tambores{display:block;width:62%;max-width:320px;height:auto;margin:0 auto .2rem}
.tambor .madera{fill:var(--madera);stroke:var(--madera-borde);stroke-width:3;stroke-linejoin:round}
.tambor .cintura{fill:var(--madera-borde)}
.tambor .aro{fill:var(--aro);stroke:var(--aro-brillo);stroke-width:2}
.tambor .parche{fill:var(--parche);stroke:var(--aro);stroke-width:3}
.tambor .luz, .tambor .brillo{opacity:0;transition:opacity .2s}
.tambor.grave .luz, .tambor.grave .brillo{fill:var(--grave)}
.tambor.agudo .luz, .tambor.agudo .brillo{fill:var(--agudo)}
.tambor.on .luz{opacity:1;transition:none}
.tambor.on .brillo{opacity:.35;transition:none}
.tambor .nombre{fill:var(--muted)}
.tambor.grave.on .nombre{fill:var(--grave-texto)}
.tambor.agudo.on .nombre{fill:var(--agudo-texto)}

/* cuadro del algoritmo: 8 columnas de un tiempo, así la letra (2 tiempos) y el punto (1) quedan proporcionales */
.cuadro{display:grid;gap:.3rem;margin:.1rem 0 .5rem}
.renglon{display:flex;align-items:center;gap:.5rem}
.quien{width:3.7rem;flex:none;font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.celdas{flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:.25rem}
.celda{grid-column:span 2;position:relative;display:flex;align-items:center;justify-content:center;height:1.9rem;border:1px solid var(--line);border-radius:8px;font-family:var(--f-titulo);font-stretch:80%;font-weight:800;font-size:1.2rem;color:var(--ink)}
.celda.punto{grid-column:span 1}
.renglon.director .celda{border-style:dashed}
.celda.pasada{color:var(--muted)}
.celda.actual{background:var(--senal);border-color:var(--senal);color:var(--bg)}
.celda.bien::after, .celda.mal::after{content:"";position:absolute;left:20%;right:20%;bottom:3px;height:3px;border-radius:2px;background:var(--ok)}
.celda.mal::after{background:var(--bad)}
.vuelta{margin:.1rem 0 0;text-align:center;color:var(--muted);font-size:.8rem}

/* nivel 1: A y B escritas */
.frases{display:grid;gap:.1rem;margin:0 0 .4rem}
.frase-escrita{display:flex;align-items:center;gap:.5rem}
.frase-escrita .letra{width:1.4rem;flex:none;text-align:center;font-family:var(--f-titulo);font-stretch:80%;font-weight:800;font-size:1.3rem}
.frase-escrita svg{flex:1;display:block;height:auto;min-width:0}
.punto-leyenda{margin:.1rem 0 0;color:var(--muted);font-size:.8rem;text-align:center}

/* resultado */
.desglose{margin:.4rem 0 0;padding-left:1.1rem;color:var(--muted);font-variant-numeric:tabular-nums}