/* ============================================================
   VAISETT — Generador de rider técnico (/rider)
   Usa los tokens y componentes de styles.css (Manual de imagen v01).
   ============================================================ */

/* ---------- Barra de pasos (fija bajo el menú) ---------- */
.r-pasos{position:sticky;top:var(--nav-h);z-index:50;background:var(--marfil);border-bottom:1.5px solid var(--line)}
.r-pasos-in{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding-block:.7rem}
.r-pasos ol{list-style:none;margin:0;padding:0;display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none}
.r-pasos ol::-webkit-scrollbar{display:none}
.r-pasos a{
  display:flex;align-items:center;gap:.45em;white-space:nowrap;text-decoration:none;color:var(--fg);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.5em .8em;border-radius:999px;border:1.5px solid transparent;transition:border-color .2s ease,background .2s ease;
}
.r-pasos a:hover,.r-pasos a:focus-visible{border-color:var(--fg)}
.r-pasos a span{color:var(--fg-2)}
.r-pasos a em{font-style:normal;background:var(--acido);color:var(--tinta);border-radius:999px;padding:0 .5em;font-size:.68rem}
.r-pasos a em:empty{display:none}
.r-pasos .btn{flex:none}
@media (max-width:700px){.r-pasos .btn{display:none}}

/* ---------- Bloques ---------- */
.r-bloque{padding:4.5rem 0;border-bottom:1.5px solid var(--line)}
.r-bloque[id]{scroll-margin-top:calc(var(--nav-h) + 4rem)}
.r-cab{display:flex;gap:1.25rem;align-items:flex-start;margin-bottom:2.25rem;max-width:860px}
.r-cab h2{font-size:clamp(2rem,4.4vw,3.2rem);margin:0 0 .35em}
.r-cab p{color:var(--fg-2);margin:0;max-width:62ch}
.r-num{
  flex:none;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;
  border:1.5px solid var(--fg);border-radius:999px;padding:.45em .8em;margin-top:.5em;
}
.r-mini{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--fg-2)}
.r-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.r-grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.r-grid-3{grid-template-columns:1fr}}
.r-app .field textarea{min-height:96px}

/* ---------- Plantillas ---------- */
.r-plantillas{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.75rem}
.r-chip{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;cursor:pointer;
  background:transparent;color:var(--fg);border:1.5px solid var(--line);border-radius:999px;padding:.55em 1em;
  transition:border-color .2s ease,background .2s ease;
}
.r-chip:hover,.r-chip:focus-visible{border-color:var(--fg);outline:none}
.r-chip:active{transform:translateY(1px)}

/* ---------- Input list ---------- */
.r-canales-cab,.r-ch{
  display:grid;grid-template-columns:2.6rem minmax(0,1.1fr) minmax(0,1.35fr) minmax(0,.9fr) 3.4rem minmax(0,1fr) 5.6rem;
  gap:.75rem;align-items:start;
}
.r-canales-cab{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);
  padding:0 0 .6rem;border-bottom:1.5px solid var(--fg);
}
.r-ch{padding:.85rem 0;border-bottom:1.5px solid var(--line)}
.r-ch .field label{display:none}
.r-ch .field input,.r-ch .field select{padding:.7em .8em;font-size:.94rem}
.r-ch-num{font-family:var(--display);font-size:1.6rem;line-height:1;padding-top:.35rem}
.r-48{display:flex;align-items:center;justify-content:center;height:2.75rem;cursor:pointer}
.r-48 input{width:1.15rem;height:1.15rem;accent-color:var(--tinta);cursor:pointer}
.r-ch-acc{display:flex;gap:.2rem;justify-content:flex-end;padding-top:.3rem}
.r-ico-btn{
  width:1.75rem;height:1.75rem;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--fg);
  cursor:pointer;font-size:.85rem;line-height:1;display:grid;place-items:center;transition:border-color .2s ease;
}
.r-ico-btn:hover,.r-ico-btn:focus-visible{border-color:var(--fg);outline:none}
.r-ico-btn[disabled]{opacity:.3;cursor:default}
.r-sug{margin:.45rem 0 0;font-family:var(--mono);font-size:.7rem;color:var(--fg-2);line-height:1.5}
.r-sug button{
  font:inherit;color:var(--fg);background:var(--acido);border:0;border-radius:999px;padding:.15em .65em;margin-left:.2em;cursor:pointer;
}
.r-sug button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.r-vacio{padding:1.5rem 0;color:var(--fg-2);border-bottom:1.5px solid var(--line)}
.r-fila-acciones{display:flex;align-items:center;gap:1rem;margin-top:1.25rem;flex-wrap:wrap}

@media (max-width:900px){
  .r-canales-cab{display:none}
  .r-ch{grid-template-columns:2.4rem 1fr 1fr;gap:.6rem .75rem;padding:1.1rem 0}
  .r-ch .field label{display:block;font-size:.66rem}
  .r-ch-num{grid-row:1 / span 3}
  .r-ch .r-f-fuente{grid-column:2 / span 2}
  .r-ch .r-f-mic{grid-column:2 / span 2}
  .r-ch .r-f-soporte{grid-column:2}
  .r-ch .r-48{grid-column:3;justify-content:flex-start;height:auto;padding-top:1.6rem;gap:.5rem}
  .r-ch .r-48::after{content:"Phantom 48V";font-family:var(--mono);font-size:.7rem}
  .r-ch .r-f-notas{grid-column:2 / span 2}
  .r-ch .r-ch-acc{grid-column:2 / span 2;justify-content:flex-start}
}

/* Lista desplegable de micrófonos */
.r-lista{
  position:absolute;z-index:120;margin:0;padding:.4rem;list-style:none;
  background:var(--tinta);color:var(--marfil);border-radius:var(--radius);
  box-shadow:8px 8px 0 var(--acido);max-height:320px;overflow:auto;min-width:280px;
}
.r-lista .r-grupo{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acido);padding:.7rem .7rem .3rem}
.r-lista [role="option"]{padding:.55rem .7rem;border-radius:4px;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.r-lista [role="option"] span{flex:none}
.r-lista [role="option"] small{font-family:var(--mono);font-size:.68rem;color:var(--gris);text-align:right}
.r-lista [role="option"][aria-selected="true"],.r-lista [role="option"]:hover{background:rgba(244,241,233,.12)}
.r-lista .r-nada{padding:.7rem;color:var(--gris);font-size:.88rem}

/* ---------- Stage plot ---------- */
.r-stage-barra{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;margin-bottom:1.25rem}
.r-medidas{display:flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.r-medidas input{
  width:4.2rem;padding:.5em .6em;border-radius:var(--radius);border:1.5px solid var(--line);
  background:var(--input-bg);color:var(--fg);font-family:var(--mono);font-size:.9rem;
}
.r-medidas label{margin-left:.4rem}
.r-paleta{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.25rem}
.r-paleta button{
  display:flex;align-items:center;gap:.45em;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--fg);
  background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:.4em .85em .4em .45em;
  transition:border-color .2s ease,background .2s ease;
}
.r-paleta button:hover,.r-paleta button:focus-visible{border-color:var(--acido);outline:none}
.r-paleta svg{width:22px;height:22px;flex:none}

.r-escenario-wrap{position:relative}
.r-escenario{
  display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none;
  border-radius:var(--radius);
}
.r-escenario:focus{outline:none}
.r-ayuda{margin-top:.75rem}
.r-pieza{cursor:grab}
.r-pieza:active{cursor:grabbing}
.r-pieza:focus{outline:none}
.r-pieza .r-trazo{transition:stroke .15s ease}
.r-pieza.is-sel .r-trazo,.r-pieza:focus-visible .r-trazo{stroke:var(--acido)}
.r-pieza.is-sel .r-etq-bg,.r-pieza:focus-visible .r-etq-bg{fill:var(--acido)}
.r-pieza.is-sel .r-etq,.r-pieza:focus-visible .r-etq{fill:var(--tinta)}
.r-pieza.is-nueva{animation:r-pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes r-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.r-pieza.is-nueva{animation:none}}

.r-sel{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;margin-top:1.25rem;
  padding:1.1rem;border:1.5px solid var(--line);border-radius:var(--radius);
}
.r-sel[hidden]{display:none}
.r-sel .field{flex:1 1 220px}
.r-sel-btns{display:flex;flex-wrap:wrap;gap:.5rem}

/* ---------- Integrantes ---------- */
.r-sub{margin-top:3rem}
.r-sub h3{font-size:1.6rem;margin-bottom:1rem}
.r-personal{margin-bottom:1rem}
.r-persona{display:grid;grid-template-columns:2rem 1fr 1fr 2rem;gap:.75rem;align-items:center;padding:.6rem 0;border-bottom:1.5px solid var(--line)}
.r-persona .field label{display:none}
.r-persona .field input{padding:.65em .8em}
.r-persona .r-ch-num{font-size:1.2rem;padding:0}
@media (max-width:560px){.r-persona{grid-template-columns:1.6rem 1fr 2rem}.r-persona .r-f-rol{grid-column:2}}

/* ---------- Descarga ---------- */
.r-opciones{display:grid;grid-template-columns:1.2fr 1fr;gap:1.25rem}
@media (max-width:800px){.r-opciones{grid-template-columns:1fr}}
.r-opcion{border-radius:var(--radius);padding:2rem;border:1.5px solid var(--line);display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
.r-opcion h3{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:0}
.r-opcion p{margin:0;color:var(--fg-2);max-width:46ch}
.r-opcion .btn{margin-top:.5rem}
.r-estado{font-family:var(--mono);font-size:.74rem;min-height:1.2em}
.r-pie-app{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;margin-top:1.5rem}
.r-link{font:inherit;font-family:var(--mono);font-size:.72rem;background:none;border:0;color:var(--fg);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}

/* ---------- Escenario ilustrado (vista 3/4) ---------- */
.r-vistas{display:flex;gap:.35rem;padding:.25rem;border:1.5px solid var(--line);border-radius:999px}
.r-vistas .r-chip{border-color:transparent;padding:.45em 1em}
.r-vistas .r-chip.is-on{background:var(--acido);color:var(--tinta);border-color:var(--acido)}
.r-escena-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
.r-escenario{background:#050605}
.r-pieza{transform-box:fill-box;transform-origin:50% 100%}
.r3-anillo{opacity:0;transition:opacity .2s ease}
.r-pieza.is-sel .r3-anillo,.r-pieza:focus-visible .r3-anillo{opacity:1}
.r-pieza.is-sel .r3-pill,.r-pieza:focus-visible .r3-pill{stroke:var(--acido);stroke-width:2.4}
.r3-riser.is-sel .r3-top,.r3-riser:focus-visible .r3-top{stroke-opacity:1}
.r-pieza:hover .r3-pill{stroke-width:2.4}

.r-leyenda{border:1.5px solid var(--line);border-radius:var(--radius);padding:1.25rem;background:rgba(244,241,233,.03);display:grid;grid-template-columns:2fr 1fr;gap:.25rem 2rem;align-items:start}
.r-leyenda h3{grid-column:1 / -1}
@media (max-width:760px){.r-leyenda{grid-template-columns:1fr}}
.r-leyenda h3{font-size:1.5rem;margin:0 0 .75rem;color:var(--acido)}
.r-leyenda ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.15rem .5rem}
.r-ley-aux{grid-column:1 / -1}
.r-leyenda li button{
  display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;cursor:pointer;
  background:none;border:1.5px solid transparent;border-radius:999px;color:var(--fg);
  font-family:var(--text);font-size:.92rem;padding:.25rem .5rem .25rem .25rem;
}
.r-leyenda li button:hover,.r-leyenda li button:focus-visible,.r-leyenda li button.is-sel{border-color:var(--acido);outline:none}
.r-ley-num{
  flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:.9rem;color:var(--tinta);
}
.r-ley-aux{padding:.5rem .25rem 0;line-height:1.5}
.r-leyenda .field textarea{min-height:110px;font-size:.88rem}
.r3-nombre{opacity:0;transition:opacity .15s ease}
.r3-etq.is-sel .r3-nombre,.r3-etq.is-hover .r3-nombre{opacity:1}
.r-pieza.is-hover .r3-anillo{opacity:.55}
.r3-etq{cursor:pointer}