/* Dirección C · «Invitación»: sala en directo. Tonos café oscuros y tranquilos, serif en los
   momentos importantes. Las invitaciones a participar (te dan la palabra, parejas) y el final de la
   clase llegan como tarjetas de papel, con los tokens claros de la página.
   Visibilidad por estado: mismo patrón que la base (todo lo que depende del estado empieza oculto). */

.c-room {
  --paper: #1f1915;
  --paper-2: #2b231d;
  --paper-3: #362c25;
  --ink: #f2e8db;
  --ink-2: #b8a694;
  --rule: #3d3229;
  --rule-strong: #5c4b3e;
  --terra: #e08a5f;
  --terra-ink: #e39a72;
  --terra-press: #cf7a50;
  --on-terra: #1f1915;
  --ok: #9cc493;
  --error: #f0a08c;
  --focus: #e39a72;
  --live: #e2674a;
  --bar-h: 72px;
  color-scheme: dark;
  background: var(--paper);
  min-height: 100dvh;
}

/* Tarjetas de papel dentro de la sala: vuelven los tokens claros de la carta */
.c-room .card-invite, .c-room .end-card {
  --paper: #f5eee3; --paper-2: #ede3d3; --paper-3: #fbf7f0;
  --ink: #271e18; --ink-2: #62544a; --rule: #d9cbb6; --rule-strong: #b9a68c;
  --terra: #a6461f; --terra-ink: #9a3f1b; --terra-press: #8a3818; --on-terra: #fff8f0;
  --ok: #3f6b3a; --focus: #a6461f;
  color-scheme: light;
  background: var(--paper); color: var(--ink);
}

.noscript { margin: 0; padding: 1rem var(--gutter); background: var(--paper-2); font: 400 .95rem/1.5 var(--sans); }

/* ---------------------------------------------------------------- antes de entrar */
.lobby { min-height: 100dvh; padding: max(3.5rem, env(safe-area-inset-top)) var(--gutter) 2rem; }
.lobby-card { max-width: 26rem; margin: 0 auto; text-align: center; }
.lobby-faces img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.1rem;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--rule-strong);
}
.lobby-kicker { font: 600 .7rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.lobby-event { font: italic 400 1.2rem/1.35 var(--serif); color: var(--ink-2); margin: .35rem 0 2rem; }
.lobby-form { display: grid; gap: .5rem; text-align: left; border-top: 1px solid var(--rule); padding-top: 1.75rem; }
.lobby-form h1 { font: 500 1.85rem/1.12 var(--serif); letter-spacing: -.015em; margin-bottom: 1rem; text-align: center; }
.lobby-form label { margin-top: .25rem; }
.lobby-form .help { margin-bottom: 1rem; }
.lobby-ticket { font: 400 .8rem/1.4 var(--sans); color: var(--ink-2); text-align: center; margin-top: .6rem; }
.c-room input[type="text"], .c-room textarea { background: var(--paper-2); border-color: var(--rule-strong); }
.c-room input::placeholder, .c-room textarea::placeholder { color: #8f7e6e; }
.c-room input[type="text"]:focus, .c-room textarea:focus { box-shadow: 0 0 0 3px rgb(224 138 95 / .25); }

.loading { min-height: 60dvh; display: none; place-items: center; align-content: center; gap: .9rem; font: italic 400 1.15rem/1.4 var(--serif); color: var(--ink-2); }
.loading-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--terra); animation: c-pulse 1.4s ease-in-out infinite; }

/* ---------------------------------------------------------------- cabecera */
.live { max-width: 640px; margin: 0 auto; padding-bottom: calc(var(--bar-h) + 1.5rem + env(safe-area-inset-bottom)); }
.live-head {
  display: flex; align-items: center; gap: .5rem; min-height: 52px;
  padding: max(4px, env(safe-area-inset-top)) 104px 0 calc(var(--gutter) - 10px); /* hueco a la derecha: mando de simulación */
}
.head-leave {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .6rem 0 .3rem;
  font: 500 .92rem/1 var(--sans); color: var(--ink-2); text-decoration: none; border-radius: 999px;
}
.head-leave:active { background: var(--paper-2); color: var(--ink); }
.head-title { flex: 1; min-width: 0; font: italic 400 .98rem/1.3 var(--serif); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; visibility: hidden; }
.head-info {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer;
}
.head-info:active { background: var(--paper-2); color: var(--ink); }
@media (min-width: 560px) { .head-title { visibility: visible; } }

/* ---------------------------------------------------------------- el directo: tarjeta fija arriba */
.stage-wrap {
  position: sticky; top: 0; z-index: 20;
  padding: max(6px, env(safe-area-inset-top)) var(--gutter) .7rem;
  background: var(--paper);
}
.stage-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background: linear-gradient(var(--paper), rgb(31 25 21 / 0));
}
.stage-card {
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 240 220 / .06), 0 18px 36px -18px rgb(0 0 0 / .8);
}
.stage-card .a54stage { --stage-radius: 18px; --stage-font: var(--sans); }
.stage-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .6rem;
  font: 400 .8rem/1.3 var(--sans); color: var(--ink-2);
}
.stage-meta strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.stage-minute { font-variant-numeric: tabular-nums; }
.onair-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 700 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.onair-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgb(226 103 74 / .22); animation: c-pulse 2s ease-in-out infinite; }
@keyframes c-pulse { 50% { opacity: .45; } }

/* ---------------------------------------------------------------- columna */
.column { padding: .9rem var(--gutter) 0; display: grid; gap: 1.1rem; }
.column > * { min-width: 0; }

.notice {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem; border-radius: 14px; background: var(--paper-2);
  font: 400 .92rem/1.45 var(--sans); color: var(--ink);
}
.notice-conn-lost { border: 1px solid #7a3e29; background: #33221a; }
.notice-conn-back { color: var(--ok); }
.notice-late { align-items: center; gap: .4rem; padding: .45rem .35rem .45rem .9rem; font-size: .84rem; line-height: 1.4; color: var(--ink-2); }
.notice-late p { flex: 1; }
.notice-late .btn { flex: none; min-height: 44px; margin: -.3rem 0; padding-inline: .7rem; font-size: .86rem; }
.notice-spinner {
  display: inline-block; flex: none; width: .9em; height: .9em; border-radius: 50%; vertical-align: -.12em;
  border: 2px solid currentColor; border-right-color: transparent; animation: c-spin .9s linear infinite;
}

/* Fin de la clase: una nota de papel */
.end-card {
  border-radius: 6px; padding: 1.6rem 1.3rem 1.3rem; text-align: center;
  box-shadow: 0 24px 40px -26px rgb(0 0 0 / .9);
  position: relative;
}
.end-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--rule); border-radius: 3px; pointer-events: none; }
.end-card > * { position: relative; }
.end-card .end-kicker { font: italic 400 1rem/1.3 var(--serif); color: var(--terra-ink); margin-bottom: .5rem; }
.end-card h2 { font: 500 2rem/1.1 var(--serif); letter-spacing: -.02em; margin-bottom: .9rem; }
.end-card p { font-size: 1.02rem; line-height: 1.5; }
.end-card .signature { font-size: 2.8rem; line-height: 1; }
.end-list { list-style: none; display: inline-grid; gap: .35rem; margin: .7rem auto 1.2rem; font-size: 1rem; text-align: left; }
.end-list li { padding-left: 1.2rem; text-indent: -1.2rem; }
.end-list li::before { content: "✦"; display: inline-block; width: 1.2rem; text-indent: 0; color: var(--terra-ink); font-size: .8em; }
.end-note { font-style: italic; color: var(--ink-2); }
.end-card .signature { margin: .4rem auto 1.2rem; transform: rotate(-4deg); transform-origin: center; }

/* ---------------------------------------------------------------- tu pregunta */
.question {
  background: var(--paper-2); border-radius: 18px; padding: .95rem 1.05rem 1rem;
  border: 1px solid var(--rule);
}
.question-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 32px; }
.question-head h2 { font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terra-ink); }
.question-another { margin: -.5rem -.6rem -.5rem 0; }
.question-text { font: italic 400 1.08rem/1.4 var(--serif); margin: .45rem 0 .1rem; overflow-wrap: anywhere; }
.question-text::before { content: "“"; }
.question-text::after { content: "”"; }
.question-audio-sim { font: 400 .8rem/1.45 var(--sans); color: var(--ink-2); margin-top: .35rem; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: .8rem -.4rem .65rem; }
.step {
  position: relative; display: grid; justify-items: center; gap: .4rem; text-align: center;
  font: 500 .68rem/1.2 var(--sans); color: var(--ink-2); padding: 0 .1rem;
}
.step::before {
  content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: var(--rule-strong);
  transition: background-color .4s ease;
}
.step:first-child::before { display: none; }
.step-dot {
  position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper-2); border: 2px solid var(--rule-strong); transition: background-color .4s ease, border-color .4s ease;
}
.question-now { display: grid; gap: .15rem; padding-top: .6rem; border-top: 1px solid var(--rule); }
.qn { font: 400 .88rem/1.45 var(--sans); color: var(--ink-2); }
.qn:first-child, .qn.qn-lead { color: var(--ink); }

/* ---------------------------------------------------------------- el hilo de la clase */
.section-title {
  display: flex; align-items: center; gap: .8rem;
  font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terra-ink);
  margin-bottom: .9rem;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.thread { position: relative; }
.now, .moment { display: grid; grid-template-columns: 34px 1fr; column-gap: .7rem; position: relative; }
.moment-list { list-style: none; }
/* El raíl: una línea fina que une los momentos */
.moment::before, .now-line::before {
  content: ""; position: absolute; left: 16.5px; top: 0; bottom: 0; width: 1px; background: var(--rule);
}
.moment:last-child::before { bottom: auto; height: 14px; }
.mark { position: relative; z-index: 1; justify-self: center; margin-top: .42rem; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--rule-strong); }
.moment-body { padding: .1rem 0 1rem; font: 400 .93rem/1.5 var(--sans); color: var(--ink); min-width: 0; }
.moment-time { font: 500 .74rem/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; margin-right: .45rem; white-space: nowrap; }
.moment-text { overflow-wrap: anywhere; }

/* Tipos de momento */
.moment[data-kind="slide"] .moment-body, .moment[data-kind="topic"] .moment-body, .moment[data-kind="late"] .moment-body { color: var(--ink-2); }
.moment[data-kind="topic"] .mark { border-radius: 2px; transform: rotate(45deg); width: 8px; height: 8px; }
.moment:is([data-kind="round"], [data-kind="intro"]) .mark {
  width: 26px; height: 26px; margin-top: 0; border: 0;
  background: #2b4d9e url("/media/clara/avatar-96.webp") center / cover no-repeat;
  box-shadow: 0 0 0 2px var(--paper);
}
.moment:is([data-kind="round"], [data-kind="intro"]) .moment-text { font: italic 400 1.02rem/1.5 var(--serif); }
.moment[data-kind="round"] .moment-text::before { content: "“"; }
.moment[data-kind="round"] .moment-text::after { content: "”"; }
.moment:is([data-kind="floor"], [data-kind="offered"], [data-kind="speaking"], [data-kind="hand"]) .mark { background: var(--ink-2); border-color: var(--ink-2); }
.moment:is([data-kind="pairs"], [data-kind="pairs-end"], [data-kind="paired"]) .mark { box-shadow: 5px 0 0 -1.5px var(--ink-2); }
.moment[data-kind="end"] .mark, .moment[data-kind="late"] .mark { border-color: var(--terra-ink); }
.moment[data-kind="end"] .moment-text { font: italic 500 1.05rem/1.4 var(--serif); }
.moment[data-mine="true"] .mark { background: var(--terra); border-color: var(--terra); }
.moment[data-mine="true"]:is([data-kind="round"]) .mark { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--terra); }
.moment[data-mine="true"] .moment-time { color: var(--terra-ink); }
.moment[data-fresh="true"] { animation: c-moment-in .5s var(--ease); }
@keyframes c-moment-in { from { opacity: 0; transform: translateY(-6px); } }

/* Calma: solo lo último, y el resto a un toque */
.moment-list > li:nth-child(n + 7) { display: none; }
.thread:has(.thread-toggle:checked) .moment-list > li { display: grid; }
.thread-more {
  display: none; align-items: center; justify-content: center; min-height: 44px; margin-top: -.2rem;
  font: 600 .88rem/1 var(--sans); color: var(--terra-ink); cursor: pointer; border-radius: 999px;
  border: 1px solid var(--rule);
}
.thread:has(.moment-list > li:nth-child(7)) .thread-more { display: flex; }
.thread-more-on, .thread-toggle:checked ~ .thread-more .thread-more-off { display: none; }
.thread-toggle:checked ~ .thread-more .thread-more-on { display: inline; }
.thread-toggle:focus-visible ~ .thread-more { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Ahora: Clara presentando (la ronda en curso, destacada dentro del hilo) */
.now-clara {
  grid-template-columns: 44px 1fr; column-gap: .8rem;
  margin: 0 -.35rem .9rem; padding: .95rem 1rem 1rem .8rem; border-radius: 18px;
  background: linear-gradient(160deg, #3a2c22 0%, #2b231d 70%);
  border: 1px solid #4e3d31;
  box-shadow: 0 16px 30px -22px rgb(0 0 0 / .9);
}
.mark-clara { width: 44px; height: 44px; margin: 0; border: 0; background: none; }
.mark-clara img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #3a2c22, 0 0 0 3.5px var(--terra); }
.now-body { min-width: 0; }
.clara-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; font: 400 .8rem/1.3 var(--sans); color: var(--ink-2); }
.clara-who strong { font: 600 1.05rem/1.2 var(--serif); color: var(--ink); }
.clara-round { font-weight: 600; color: var(--ink); }
.now-tag {
  display: inline-flex; align-items: center; gap: .3rem; margin-left: auto;
  font: 700 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--terra-ink);
}
.now-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); animation: c-pulse 1.6s ease-in-out infinite; }
.clara-to { font: italic 400 .86rem/1.4 var(--serif); color: var(--ink-2); margin-top: .2rem; }
.clara-text { font: 400 1.12rem/1.52 var(--serif); margin-top: .5rem; min-height: 1.5em; text-wrap: pretty; }
[data-clara-typing="true"] .clara-text::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em;
  background: var(--terra); animation: c-blink 1s steps(1) infinite;
}
@keyframes c-blink { 50% { opacity: 0; } }
.clara-mine {
  display: inline-flex; gap: .35rem; margin-top: .7rem; padding: .35rem .7rem; border-radius: 999px;
  background: rgb(224 138 95 / .14); color: var(--terra-ink); font: 600 .85rem/1.2 var(--sans);
}

/* Ahora: líneas tranquilas (Marta responde, otra persona habla, parejas practicando) */
.now-line { align-items: start; padding-bottom: .9rem; font: 500 .95rem/1.45 var(--sans); }
.now-line > span:last-child { padding-top: .05rem; }
.mark-pulse { background: var(--terra); border-color: var(--terra); animation: c-pulse 1.4s ease-in-out infinite; }
.mark-mic { background: var(--ink); border-color: var(--ink); }
.mark-pairs { background: var(--ink); border-color: var(--ink); box-shadow: 5px 0 0 -1.5px var(--ink); }

/* ---------------------------------------------------------------- lo que se pregunta */
.topics { padding-top: .4rem; }
.topics-help { font: 400 .86rem/1.5 var(--sans); color: var(--ink-2); margin: -.2rem 0 .8rem; }
.topic-list { list-style: none; display: grid; gap: .55rem; }
.topic {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem;
  padding: .8rem .8rem .8rem 1rem; border-radius: 16px; background: var(--paper-2); border: 1px solid transparent;
  transition: opacity .3s ease, border-color .3s ease;
}
.topic-main { min-width: 0; }
.topic-label { font: 500 1.02rem/1.3 var(--serif); }
.topic-meta { display: flex; flex-wrap: wrap; gap: .1rem .6rem; margin-top: .2rem; font: 400 .8rem/1.35 var(--sans); color: var(--ink-2); }
.topic-count { font-variant-numeric: tabular-nums; }
.topic-bar { display: block; height: 3px; margin-top: .55rem; border-radius: 3px; background: var(--rule); position: relative; overflow: hidden; }
.topic-bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--share, 0) * 100%);
  background: var(--terra); border-radius: 3px; transition: width .7s var(--ease);
}
.topic-status, .topic-mine { display: none; }
.topic[data-status="new"] .topic-status-new { display: inline; color: var(--terra-ink); font-weight: 600; }
.topic[data-status="answering"] .topic-status-answering { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); font-weight: 600; }
.topic[data-status="answering"] .topic-status-answering::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); animation: c-pulse 1.4s ease-in-out infinite; }
.topic[data-status="answering"] { border-color: #5a4334; }
.topic[data-status="answered"] .topic-status-answered { display: inline; color: var(--ok); }
.topic[data-status="answered"] { opacity: .62; }
.topic[data-status="answered"] .topic-bar::after { background: var(--ink-2); }
.topic[data-mine="true"] { border-color: var(--terra); }
.topic[data-mine="true"] .topic-mine { display: block; margin-top: .45rem; font: 600 .8rem/1.3 var(--sans); color: var(--terra-ink); }

.topic-metoo {
  min-height: 44px; min-width: 6.4rem; padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--ink);
  font: 600 .86rem/1.1 var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.topic-metoo:active { transform: scale(.97); }
.topic-metoo[aria-pressed="true"] { background: var(--terra); border-color: var(--terra); color: var(--on-terra); }
.topic-metoo[disabled] { opacity: .45; cursor: default; }
.metoo-on { display: none; align-items: center; gap: .3rem; }
.topic-metoo[aria-pressed="true"] .metoo-off { display: none; }
.topic-metoo[aria-pressed="true"] .metoo-on { display: inline-flex; }

/* ---------------------------------------------------------------- invitaciones (papel) */
.card-invite {
  position: fixed; z-index: 45; left: 10px; right: 10px;
  bottom: calc(var(--bar-h) + 8px + env(safe-area-inset-bottom));
  max-width: 560px; margin-inline: auto; max-height: calc(100dvh - var(--bar-h) - 90px); overflow: auto;
  border-radius: 20px; padding: 1.15rem 1.15rem 1rem;
  box-shadow: 0 -2px 0 rgb(255 255 255 / .4) inset, 0 24px 60px -10px rgb(0 0 0 / .75);
  animation: c-card-in .38s var(--ease);
}
@keyframes c-card-in { from { transform: translateY(28px); } }
.card-invite .invite-kicker { display: flex; align-items: center; gap: .45rem; font: 700 .68rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--terra-ink); margin-bottom: .35rem; }
.invite-title { font: 500 1.5rem/1.15 var(--serif); letter-spacing: -.015em; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.card-invite :where(p) { font: 400 .95rem/1.5 var(--sans); }
.card-invite .invite-title { font: 500 1.5rem/1.15 var(--serif); }
.card-invite .invite-title .notice-spinner { width: .7em; height: .7em; border-width: 2.5px; }
.card-invite .invite-topic { margin-top: .5rem; color: var(--ink-2); }
.invite-topic em { font: italic 400 1.02rem/1.45 var(--serif); color: var(--ink); }
.card-invite .invite-soft { margin-top: .5rem; color: var(--ink-2); }
.card-invite .choice { margin-top: 1rem; }
.btn-choice { background: var(--paper-3); color: var(--ink); border: 1.5px solid var(--ink); }
.btn-choice:active { background: var(--paper-2); }
.card-invite .invite-sim { margin-top: .8rem; font-size: .8rem; color: var(--ink-2); }
.partner-place { font: italic 400 1.2rem/1.2 var(--serif); color: var(--ink-2); }
.card-invite .pairs-clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin-top: .7rem; }
.pairs-clock strong { font: 500 1.6rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.pairs-voice { flex-basis: 100%; color: var(--ink-2); font-size: .88rem; }
.pairs-back { margin-top: 1rem; }
.rec-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--live); animation: c-pulse 1s ease-in-out infinite; }

/* ---------------------------------------------------------------- acciones */
.actions {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: rgb(31 25 21 / .94); border-top: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@media (min-width: 680px) { .actions { padding-inline: calc(50% - 320px + var(--gutter)); } }
.actions .btn { min-height: 50px; padding-inline: .45rem; gap: .4rem; font-size: .875rem; letter-spacing: -.01em; white-space: nowrap; }
.action-ask img { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgb(31 25 21 / .5); }
.action-hand { color: var(--ink); }
.hand-up-label { display: none; }
:is([data-hand="up"], [data-hand="offered"], [data-hand="connecting"], [data-hand="speaking"]) .action-hand { border-color: var(--terra); color: var(--terra-ink); background: rgb(224 138 95 / .1); }
:is([data-hand="up"], [data-hand="offered"], [data-hand="connecting"], [data-hand="speaking"]) .hand-up-label { display: inline; }
:is([data-hand="up"], [data-hand="offered"], [data-hand="connecting"], [data-hand="speaking"]) .hand-down-label { display: none; }
.toast { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--bar-h) + 12px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 520px; z-index: 60; }
.toast:not(:empty) { padding: .75rem 1rem; border-radius: 14px; background: var(--ink); color: var(--paper); font: 500 .9rem/1.4 var(--sans); box-shadow: 0 12px 30px -10px rgb(0 0 0 / .7); }

/* ---------------------------------------------------------------- hojas (oscuras) */
.c-room .sheet-dialog { background: var(--paper-2); color: var(--ink); overflow-y: auto; }
.c-room .sheet-dialog::backdrop { background: rgb(10 7 5 / .6); }
.c-room .sheet-grip { background: var(--rule-strong); }
.c-room .sheet-close:active { background: var(--paper-3); }
.c-room .sheet-avatar { box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3.5px var(--terra); }
.c-room .sheet :where(p) { font: 400 .98rem/1.5 var(--sans); }
.c-room .sheet .btn-secondary:active { background: var(--paper-3); }
.ask-pending { padding: .85rem 1rem; border-radius: 14px; background: var(--paper-3); }
.choice-tiles { margin-bottom: .9rem; }
.btn-tile {
  flex-direction: column; gap: .35rem; min-height: 124px; padding: 1rem .7rem; border-radius: 18px;
  background: var(--paper-3); border: 1px solid var(--rule-strong); color: var(--ink);
  font: 500 1.15rem/1.2 var(--serif);
}
.btn-tile svg { color: var(--terra-ink); margin-bottom: .2rem; }
.btn-tile small { font: 400 .78rem/1.3 var(--sans); color: var(--ink-2); }
.btn-tile:active { background: #3e332b; }
.ask-voice-note { color: var(--ink-2); font-size: .88rem !important; }
.ask-mic-problem { display: grid; gap: .9rem; }
.ask-mic-problem p { padding: .9rem 1rem; border-radius: 14px; background: var(--paper-3); border-left: 3px solid var(--terra); }
.rec-line { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; font: 500 1.05rem/1.3 var(--sans) !important; }
.rec-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ask-recorded audio { width: 100%; margin: .7rem 0 1rem; }
.ask-writing { display: grid; gap: .8rem; }
.ask-writing textarea { min-height: 120px; resize: vertical; }
.ask-sending { display: flex; align-items: center; gap: .6rem; color: var(--ink-2); }
.c-room .sheet .error { margin-top: .8rem; }
.hand-sheet-down p, .hand-up-text { margin-bottom: 1.2rem; }
.info-list { margin: 0 0 1rem; }
.info-list > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--rule); }
.info-list dt { font: 500 .78rem/1.5 var(--sans); color: var(--ink-2); }
.info-list dd { margin: 0; font: 400 .95rem/1.5 var(--sans); }
.info-stage { color: var(--ink-2); font-size: .88rem !important; }

/* ================================================================ qué se ve según el estado */

/* Fase */
.lobby, .loading, .live { display: none; }
[data-phase="lobby"] .lobby { display: block; }
[data-phase="loading"] .loading { display: grid; }
[data-phase="live"] .live, [data-phase="ended"] .live { display: block; }
.end-card { display: none; }
[data-phase="ended"] .end-card { display: block; }
[data-phase="ended"] :is(.stage-wrap, .actions, .card-invite, .now, .notice, .question-another, .thread-more) { display: none !important; }

/* Conexión */
.notice-conn-lost, .notice-conn-back { display: none; }
[data-conn="lost"] .notice-conn-lost, [data-conn="back"] .notice-conn-back { display: flex; }
[data-conn="lost"] .actions .btn { opacity: .5; }
[data-conn="lost"] .onair-dot { background: var(--ink-2); box-shadow: none; animation: none; }

/* Llegas tarde · ahora */
.notice-late, .now { display: none; }
[data-late="true"] .notice-late { display: flex; }
:is([data-clara="intro"], [data-clara="round"]) .now-clara { display: grid; }
[data-marta="answering"] .now-answering { display: grid; }
[data-floor="other"] .now-floor { display: grid; }
[data-pairs="watching"] .now-pairs { display: grid; }

/* Clara: la ronda en curso ocupa su sitio en el hilo; el momento que la repite se oculta mientras dura */
.clara-round, .clara-to, .clara-mine { display: none; }
[data-clara="round"] .clara-round { display: inline; }
[data-clara="round"] .clara-to { display: block; }
[data-clara="round"][data-clara-mine="true"] .clara-mine { display: inline-flex; }
[data-clara="round"] .moment-list > li[data-kind="round"]:not(li[data-kind="round"] ~ li),
[data-clara="intro"] .moment-list > li[data-kind="intro"]:not(li[data-kind="intro"] ~ li) { display: none !important; }

/* La palabra */
.panel-floor, .floor-offered, .floor-connecting, .floor-speaking { display: none; }
:is([data-hand="offered"], [data-hand="connecting"], [data-hand="speaking"]) .panel-floor { display: block; }
[data-hand="offered"] .floor-offered, [data-hand="speaking"] .floor-speaking { display: block; }
[data-hand="connecting"] .floor-connecting { display: block; }
.hand-sheet-down, .hand-sheet-up { display: none; }
[data-hand="down"] .hand-sheet-down { display: block; }
:is([data-hand="up"], [data-hand="offered"], [data-hand="connecting"], [data-hand="speaking"]) .hand-sheet-up { display: block; }

/* Parejas (mirando: la clase sigue, con una línea en el hilo) */
.panel-pairs, .pairs-invited, .pairs-searching, .pairs-paired, .pairs-back { display: none; }
:is([data-pairs="invited"], [data-pairs="searching"], [data-pairs="paired"]) .panel-pairs { display: block; }
[data-pairs="invited"] .pairs-invited, [data-pairs="paired"] .pairs-paired, [data-pairs="searching"] .pairs-searching { display: block; }
:is([data-pairs="searching"], [data-pairs="paired"]) .pairs-back { display: block; }
/* Si coinciden, la palabra va primero */
:is([data-hand="offered"], [data-hand="connecting"], [data-hand="speaking"]) .panel-pairs { display: none; }

/* Tu pregunta y su recorrido */
.question, .question-audio-sim, .question-another { display: none; }
[data-question]:not([data-question="none"]) .question { display: block; }
[data-question-kind="audio"] .question-audio-sim { display: block; }
[data-question-kind="audio"] .question-text { display: none; }
.question-voice { display: none; align-items: center; gap: .45rem; margin: .45rem 0 .1rem; font: italic 400 1.08rem/1.4 var(--serif); }
.question-voice svg { color: var(--terra-ink); flex: none; }
[data-question-kind="audio"] .question-voice { display: flex; }
[data-phase="ended"]:not([data-question="told"]) .question { display: none; }
[data-question="told"] .question-another { display: inline-flex; }

[data-question]:not([data-question="none"]) .step-received .step-dot,
:is([data-question="transcribed"], [data-question="grouped"], [data-question="told"]) .step-transcribed .step-dot,
:is([data-question="grouped"], [data-question="told"]) .step-grouped .step-dot,
[data-question="told"] .step-told .step-dot { background: var(--terra); border-color: var(--terra); }
:is([data-question="transcribed"], [data-question="grouped"], [data-question="told"]) .step-transcribed::before,
:is([data-question="grouped"], [data-question="told"]) .step-grouped::before,
[data-question="told"] .step-told::before { background: var(--terra); }
[data-question]:not([data-question="none"]) .step-received,
:is([data-question="transcribed"], [data-question="grouped"], [data-question="told"]) .step-transcribed,
:is([data-question="grouped"], [data-question="told"]) .step-grouped,
[data-question="told"] .step-told { color: var(--ink); }
/* El paso que viene: anillo que respira */
[data-question="received"] .step-transcribed .step-dot,
[data-question="transcribed"] .step-grouped .step-dot,
[data-question="grouped"] .step-told .step-dot { border-color: var(--terra); animation: c-pulse 1.6s ease-in-out infinite; }

.qn { display: none; }
[data-question="received"] :is(.qn-received, .qn-transcribed) { display: block; }
[data-question="transcribed"] .qn-grouped { display: block; }
[data-question="grouped"] :is(.qn-grouped, .qn-told) { display: block; }
[data-question="told"] .qn-told { display: block; }
[data-question="told"] .qn-told { color: var(--ink); }

/* Hoja de pregunta: qué se ve en cada momento (data-ask) */
.ask-pending, .ask-choose, .ask-voice-note, .ask-mic-asking, .ask-mic-problem, .ask-mic-unavailable, .ask-mic-denied,
.ask-recording, .ask-recorded, .ask-writing, .ask-sending { display: none; }
[data-ask="pending"] .ask-pending { display: block; }
[data-ask="choose"] .ask-choose { display: grid; }
[data-ask="choose"] .ask-voice-note, [data-ask="recording"] .ask-voice-note { display: block; }
[data-ask="mic-asking"] .ask-mic-asking { display: flex; align-items: center; gap: .6rem; }
:is([data-ask="mic-unavailable"], [data-ask="mic-denied"]) .ask-mic-problem { display: grid; }
[data-ask="mic-unavailable"] .ask-mic-unavailable, [data-ask="mic-denied"] .ask-mic-denied { display: block; }
[data-ask="recording"] .ask-recording { display: block; }
[data-ask="recorded"] .ask-recorded { display: block; }
[data-ask="writing"] .ask-writing { display: grid; }
[data-ask="sending"] .ask-sending { display: flex; }

/* Mientras Clara habla (presentación o ronda), su tarjeta sube justo bajo el directo, por encima de
   avisos y de «Tu pregunta»: el hilo se deshace en la columna (display: contents) y la tarjeta pasa
   la primera. Al terminar, vuelve a su sitio en el hilo. */
:is([data-clara="intro"], [data-clara="round"]) .thread { display: contents; }
:is([data-clara="intro"], [data-clara="round"]) .now-clara { order: -1; margin: 0 -.35rem; }
:is([data-clara="intro"], [data-clara="round"]) .thread > :not(.now-clara) { margin-top: -1.1rem; }
:is([data-clara="intro"], [data-clara="round"]) .thread > .section-title { margin-top: 0; }
:is([data-clara="intro"], [data-clara="round"]) .thread > template { display: none; }
@media (max-width: 375px) { .action-ask img { display: none; } }

/* Hablando en directo (o pasando a tiempo real): la tarjeta ya lo dice; la barra deja solo «Preguntar» */
:is([data-hand="connecting"], [data-hand="speaking"]) .actions { grid-template-columns: 1fr; }
:is([data-hand="connecting"], [data-hand="speaking"]) .action-hand { display: none; }