/* ============================================================================
   RUMBO · /voz/ — "La Voz" (tutor de voz IA)
   Escenarios + sala de práctica: burbujas de conversación, micro grande con
   pulso, medidor de claridad y respaldo por texto. Lee de tokens.css.
   ============================================================================ */
.rmb-voz{padding:40px 0 72px}
.rmb-voz__hero{max-width:60ch;margin-block-end:26px}
.rmb-voz__badge{display:inline-block;font-family:var(--rmb-mrz);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rmb-oro-d);border:1px solid var(--rmb-oro);border-radius:100px;padding:5px 12px}
.rmb-rtl .rmb-voz__badge{letter-spacing:.02em}
.rmb-voz__h{font-family:var(--rmb-serif);font-weight:800;font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;color:var(--rmb-ink);margin-block:12px 6px}
.rmb-voz__sub{font-size:15.5px;color:var(--rmb-ink-2);line-height:1.6}

/* candado / login */
.rmb-voz__gate{text-align:center;background:var(--rmb-surface);border:1px solid var(--rmb-crema-3);border-radius:var(--rmb-radius-lg);
  box-shadow:var(--rmb-shadow-sm);padding:44px 26px;max-width:520px;margin:0 auto}
.rmb-voz__gateico{display:inline-flex;align-items:center;justify-content:center;inline-size:72px;block-size:72px;border-radius:50%;
  background:var(--rmb-surface-2);border:1px solid var(--rmb-line-2);color:var(--rmb-granate);font-size:30px;margin-block-end:14px}
.rmb-voz__gate h2{font-family:var(--rmb-serif);font-weight:800;font-size:22px;color:var(--rmb-ink);margin-block-end:8px}
.rmb-voz__gate p{font-size:14.5px;color:var(--rmb-ink-2);line-height:1.55;max-width:40ch;margin:0 auto 18px}

/* selector de escenario */
.rmb-voz__pick .rmb-label{margin-block-end:14px}
.rmb-voz__scns{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.rmb-voz__scn{text-align:start;background:var(--rmb-surface);border:1px solid var(--rmb-line);border-radius:var(--rmb-radius-lg);
  padding:22px 22px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:transform .16s,box-shadow .16s,border-color .16s;color:inherit}
.rmb-voz__scn:hover{transform:translateY(-3px);box-shadow:var(--rmb-shadow);border-color:var(--rmb-oro)}
.rmb-voz__scn:focus-visible{outline:2px solid var(--rmb-oro);outline-offset:2px}
.rmb-voz__scn b{font-family:var(--rmb-serif);font-weight:700;font-size:18px;color:var(--rmb-ink)}
.rmb-voz__scn span{font-size:13.5px;color:var(--rmb-ink-2);line-height:1.5}
.rmb-voz__scngo{margin-block-start:8px;font-family:var(--rmb-mrz);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--rmb-granate)}
.rmb-rtl .rmb-voz__scngo{letter-spacing:.02em}

/* sala de práctica */
.rmb-voz__stage{background:var(--rmb-surface);border:1px solid var(--rmb-crema-3);border-radius:var(--rmb-radius-lg);
  box-shadow:var(--rmb-shadow);overflow:hidden}
.rmb-voz__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;
  background:linear-gradient(120deg,var(--rmb-granate),var(--rmb-granate-d));color:#F3E7CE}
.rmb-voz__scnnow{font-family:var(--rmb-serif);font-weight:700;font-size:17px;color:#F7EDD5}
.rmb-voz__change{font-family:var(--rmb-mrz);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  color:#F3E7CE;background:transparent;border:1px solid rgba(243,231,206,.5);border-radius:100px;padding:7px 13px;transition:.16s}
.rmb-voz__change:hover{background:rgba(243,231,206,.14)}
.rmb-rtl .rmb-voz__change{letter-spacing:.02em}

.rmb-voz__log{padding:22px 20px;display:flex;flex-direction:column;gap:12px;min-block-size:220px;max-block-size:46vh;overflow-y:auto}
.rmb-voz__msg{max-inline-size:82%;display:flex;flex-direction:column;gap:4px}
.rmb-voz__msg--tutor{align-self:flex-start}
.rmb-voz__msg--you{align-self:flex-end;align-items:flex-end}
.rmb-voz__who{font-family:var(--rmb-mrz);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--rmb-ink-3)}
.rmb-rtl .rmb-voz__who{letter-spacing:.02em}
.rmb-voz__bubble{padding:11px 15px;border-radius:14px;font-size:15px;line-height:1.5;color:var(--rmb-ink)}
.rmb-voz__msg--tutor .rmb-voz__bubble{background:var(--rmb-crema-2);border:1px solid var(--rmb-line);border-start-start-radius:4px}
.rmb-voz__msg--you .rmb-voz__bubble{background:var(--rmb-granate);color:#F7EDD5;border-start-end-radius:4px}
.rmb-voz__tip{align-self:flex-start;max-inline-size:82%;display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--rmb-verde);
  background:color-mix(in srgb,var(--rmb-verde) 8%,transparent);border:1px solid color-mix(in srgb,var(--rmb-verde) 34%,transparent);
  border-radius:10px;padding:9px 13px}
.rmb-voz__tip b{font-weight:700}

/* micro */
.rmb-voz__mic{border-block-start:1px solid var(--rmb-line);padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.rmb-voz__btn{position:relative;inline-size:78px;block-size:78px;border-radius:50%;border:none;cursor:pointer;color:#F7EDD5;
  background:radial-gradient(120% 120% at 30% 25%,var(--rmb-granate-l),var(--rmb-granate) 60%,var(--rmb-granate-d));
  box-shadow:0 10px 26px -10px var(--rmb-granate);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.rmb-voz__btn svg{inline-size:32px;block-size:32px;position:relative;z-index:1}
.rmb-voz__btn:hover{transform:scale(1.04)}
.rmb-voz__btn:focus-visible{outline:2px solid var(--rmb-oro);outline-offset:3px}
.rmb-voz__btnpulse{position:absolute;inset:0;border-radius:50%;background:var(--rmb-granate);opacity:0}
.rmb-voz__btn.is-live{background:radial-gradient(120% 120% at 30% 25%,var(--rmb-verde),var(--rmb-verde-d))}
.rmb-voz__btn.is-live .rmb-voz__btnpulse{animation:rmb-voz-pulse 1.4s ease-out infinite}
@keyframes rmb-voz-pulse{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
.rmb-voz__btn[disabled]{opacity:.5;cursor:default}
.rmb-voz__status{font-size:13.5px;color:var(--rmb-ink-2);min-block-size:20px;text-align:center}

.rmb-voz__clarity{display:flex;align-items:center;gap:10px;margin-block-end:2px}
.rmb-voz__clarity .rmb-label{margin:0}
.rmb-voz__claritybar{inline-size:120px;block-size:8px;border-radius:100px;background:var(--rmb-crema-3);overflow:hidden}
.rmb-voz__claritybar span{display:block;block-size:100%;inline-size:0;background:linear-gradient(90deg,var(--rmb-oro),var(--rmb-verde));transition:inline-size .4s ease}
.rmb-voz__clarity b{font-family:var(--rmb-serif);font-weight:800;font-size:15px;color:var(--rmb-ink);font-variant-numeric:tabular-nums;min-inline-size:44px}

.rmb-voz__type{display:flex;gap:8px;inline-size:min(460px,100%)}
.rmb-voz__type input{flex:1;font-family:var(--rmb-sans);font-size:14.5px;color:var(--rmb-ink);background:var(--rmb-surface-2);
  border:1px solid var(--rmb-line-2);border-radius:var(--rmb-radius);padding:11px 13px}
.rmb-voz__type input:focus{outline:none;border-color:var(--rmb-oro)}
.rmb-voz.is-nospeech .rmb-voz__btn,.rmb-voz.is-nospeech .rmb-voz__clarity{display:none}

@media (prefers-reduced-motion:reduce){
  .rmb-voz__btn.is-live .rmb-voz__btnpulse{animation:none}
  .rmb-voz__scn:hover{transform:none}
}

/* ═══════════ Nivel del tutor (de cero a avanzado) + traducción de apoyo ═══════════ */
.rmb-voz__lvls{display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center;margin:0 0 20px}
.rmb-voz__lvlrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.rmb-voz__lvl{font:inherit;font-size:13px;font-weight:700;cursor:pointer;border:1.5px dashed var(--rmb-line-2);
  border-radius:999px;padding:8px 16px;background:var(--rmb-surface);color:var(--rmb-ink-2);
  transition:border-color .15s,color .15s,background .15s,box-shadow .15s,transform .12s}
.rmb-voz__lvl:hover{border-color:var(--rmb-oro-d);color:var(--rmb-granate);transform:translateY(-1px)}
.rmb-voz__lvl.is-on{background:var(--rmb-granate);border:1.5px solid var(--rmb-granate);color:#fff;
  box-shadow:0 8px 18px -10px rgba(110,27,40,.6)}

/* La traducción al idioma del alumno: se muestra bajo la voz del tutor, no se lee. */
.rmb-voz__tr{max-width:78%;margin:2px 0 4px;padding:8px 12px;font-size:13.5px;line-height:1.55;
  color:var(--rmb-ink-2);background:color-mix(in srgb,var(--rmb-crema-2) 70%,transparent);
  border:1px dashed var(--rmb-line);border-radius:10px}

/* ═══════════ Altavoz de re-escucha en cada burbuja del tutor ═══════════ */
.rmb-voz__msg--tutor{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:6px 8px}
.rmb-voz__msg--tutor .rmb-voz__who{flex-basis:100%}
.rmb-voz__msg--tutor .rmb-voz__bubble{flex:0 1 auto;min-width:0}
.rmb-voz__replay{flex:none;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;
  border:1.5px solid var(--rmb-line-2);background:var(--rmb-crema-2);color:var(--rmb-granate);
  display:inline-grid;place-items:center;transition:background .15s,border-color .15s,transform .12s}
.rmb-voz__replay:hover{background:var(--rmb-oro);border-color:var(--rmb-oro);color:#231a10}
.rmb-voz__replay:active{transform:scale(.9)}