/* RANGO — idiomas (es · en · pt · fr · de · it)
   1. Selector de idioma discreto (intro «Conoce RANGO», login y Cuenta).
   2. Textos largos (alemán, francés): nada se corta ni se solapa; los elementos crecen en alto.
   Solo tokens de design/tokens.css. */

/* ---------- 1. selector de idioma ---------- */
.rd-intro-actions { display: flex; align-items: center; gap: var(--sp-2); }
.rd-lang-mini {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: var(--hit); padding: 0 var(--sp-1) 0 var(--sp-3);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-pill);
  color: var(--text-2); background: transparent;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.rd-lang-mini:hover, .rd-lang-mini:focus-within { color: var(--text-1); border-color: var(--performance-blue); }
.rd-lang-mini svg { flex: none; }
.rd-lang-mini select {
  -webkit-appearance: none; appearance: none;
  min-height: var(--hit); max-width: 9.5em; padding: 0 var(--sp-3) 0 var(--sp-1);
  background: transparent; border: 0; color: inherit; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
}
.rd-lang-mini select:focus-visible { outline: none; }
.rd-lang-mini:focus-within { box-shadow: 0 0 0 3px var(--ring-blue); }
.rd-lang-mini select option, .rd-lang-select option { background: var(--surface-2); color: var(--text-1); }
.rd-lang-row { display: flex; justify-content: flex-end; margin: calc(var(--sp-2) * -1) 0 var(--sp-2); }
#screen-auth-intro .rd-intro-top { gap: var(--sp-2); flex-wrap: wrap; }
#screen-auth-intro .rd-intro-actions { margin-left: auto; }
@media (max-width: 360px) { .rd-lang-mini { padding-left: var(--sp-2); } .rd-lang-mini select { padding-right: var(--sp-2); } }
#screen-auth-intro .rd-intro-skip { margin-right: calc(var(--sp-3) * -1); }

/* ---------- 2. textos largos ---------- */
/* palabras largas (alemán) parten antes que desbordar */
.app-title, .greet-cap, .row-title, .row-sub, .opt-title, .opt-sub, .card-cap, .group-cap, .group-title,
.btn, .chip, .opt, .rd-seg-btn, .rd-quick-btn, .tab span, .mode-card strong, .mode-card span,
.ex-main strong, .ex-why, .phase-cap, .player-step, #playerTitle, .cue, .safety-card, .why-list p,
.rdpro-benefit h2, .rdpro-benefit p, .pro-cmp th, .pro-cmp td, .admin-hero-label, .adm-kpi .card-cap,
.rd-slide-title, .rd-slide-text, .auth-lead, .field label, .rd-disclose-txt, .rd-bz-name, .rd-cat-txt,
.welcome-card, .empty-title, .empty-text, .te-msg, .te-zone-cap, .rd-sheet-sec, .rd-cant-opt, .rd-tfold-t {
  overflow-wrap: break-word;
}
html[lang="de"] body, html[lang="fr"] body { -webkit-hyphens: auto; hyphens: auto; }


/* «Siguiente · Nombre» del player: con nombres largos (de, fr, pt) la línea crece en alto en vez de recortarse */
#screen-player .player-subrow .player-next { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }

/* pantallas estrechas en idiomas con palabras largas: selector de Sesiones y pestañas del panel admin
   bajan un punto de cuerpo y nunca parten una palabra por la mitad */
@media (max-width: 380px) {
  html:not([lang="es"]) .rd-seg-btn { font-size: var(--fs-micro); overflow-wrap: normal; }
  html:not([lang="es"]) #screen-admin .admin-seg .chip { padding: 0 var(--sp-1); font-size: var(--fs-micro); }
}