/* Tertulia (tertulias.html, tertulias.js y sala-grupo.js). Va después de style.css y cuenta.css. */

.tertulias .screen { min-height: auto; }
.tertulias-brand { padding: 8px 0 0; }
.tertulias-brand .tertulia-marca { margin: 0; }
.tertulias-brand h1 { font-size: 2rem; }
.tertulias-que h2, .grupos-titulo { text-align: left; }
.grupos { display: flex; flex-direction: column; gap: 14px; }
.izq { text-align: left; }

/* Un grupo */
.grupo { gap: 8px; }
.grupo h2 { overflow-wrap: anywhere; }
.grupo p { margin: 0; }
.grupo-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.grupo-tema { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.grupo-estado:empty { display: none; }
.grupo-reglas summary { cursor: pointer; font-weight: 700; color: var(--accent); min-height: 44px; display: flex; align-items: center; }
.grupo-reglas ol, .reglas-completas { margin: 6px 0 0; padding-left: 22px; color: var(--muted); display: grid; gap: 4px; }
.reglas-completas { color: var(--text); }
.citas-titulo { font-size: 1rem; color: var(--accent); margin-top: 4px; }
.grupo-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grupo-acciones .btn { flex: 1 1 140px; min-height: 44px; padding: 8px 14px; }
.grupo-acciones .btn.link { flex: 0 1 auto; }
.grupo-acciones .note { flex-basis: 100%; }
.enlace input { font-size: 0.85rem; }
.grupo-ritmo { font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }

/* El ritmo del grupo (para los miembros) */
.ritmo { gap: 10px; }
.ritmo fieldset {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ritmo legend { padding: 0 6px; font-weight: 700; color: var(--accent); }
.ritmo-opcion { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
.ritmo-opcion input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
.ritmo-activo { color: var(--ok); font-weight: 600; }
.ritmo .btn { min-height: 44px; padding: 8px 14px; }

/* Las citas */
.citas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cita {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.cita.abierta { border-color: var(--ok); }
/* Se quitó porque su horario salió del ritmo del grupo */
.cita.quitada { border-style: dashed; background: transparent; }
.cita.quitada .cita-cuando strong { color: var(--muted); }
.cita-cuando strong { text-transform: capitalize; }
.cita-titulo { font-weight: 600; overflow-wrap: anywhere; }
.cita-quien { overflow-wrap: anywhere; }
.cita-ahora {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--oro); /* "en vivo", en dorado (guía de marca) */
  color: #141016;
  font-size: 0.75rem;
  font-weight: 700;
}
.cita-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cita-acciones .btn { flex: 1 1 110px; min-height: 44px; padding: 8px 12px; }
/* "Voy" marcado: con borde, para no confundirlo con "Entrar" */
.cita-acciones .btn[aria-pressed="true"] { background: var(--surface); border: 2px solid var(--ok); color: var(--ok); }
.cita-acciones .btn[aria-pressed="true"]::before { content: "✓ " / ""; } /* el estado ya lo dice aria-pressed */

/* Pasos: términos, reglas y proponer */
.paso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--bg);
}
.paso h3 { font-size: 1rem; }
.paso .actions.una { grid-template-columns: 1fr; }
.proponer-cuando { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.proponer input[type="time"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

/* La sala: más ancha en pantallas grandes */
.app.tertulias.en-sala { max-width: 1100px; }
.sala { display: flex; flex-direction: column; gap: 10px; }
.sala p { margin: 0; }
.sala-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sala-titulo { font-size: 1.25rem; text-align: left; flex: 1 1 100%; overflow-wrap: anywhere; }
.sala-grupo { color: var(--muted); }
.sala-tiempo { font-weight: 700; color: var(--next); margin-left: auto; }
.sala-estado:empty, .sala-cantidad:empty { display: none; }
.sala .btn.next.wide { min-height: 48px; }

.grilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.grilla[data-cantidad="1"] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grilla[data-cantidad="1"], .grilla[data-cantidad="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grilla[data-cantidad="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cuadro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.cuadro.propio { border-color: var(--accent); }
.cuadro-video { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #000; }
.cuadro-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cuadro-video video.espejo { transform: scaleX(-1); }
.cuadro.sin-camara .cuadro-video video { opacity: 0; }
.cuadro-pie { font-size: 0.8rem; line-height: 1.3; overflow-wrap: anywhere; }
.cuadro-apodo { font-weight: 700; }
.cuadro-mascara { display: block; color: var(--muted); }
.cuadro-marcas { color: var(--next); }
.cuadro-acciones { display: flex; flex-wrap: wrap; gap: 4px; }
.cuadro-acciones:empty { display: none; }
.btn.chico { flex: 1 1 100%; min-height: 40px; padding: 6px 8px; font-size: 0.8rem; }

/* Desnudez: el cuadro se tapa en esta pantalla */
.cuadro.tapado .cuadro-video video { filter: blur(40px) brightness(0.5); }
.cuadro-tapa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  background: rgba(14, 13, 20, 0.75);
  text-align: center;
}
.cuadro-tapa p { font-size: 0.8rem; font-weight: 700; }
.cuadro-tapa .pill { min-height: 36px; padding: 4px 10px; font-size: 0.8rem; }

.sala-controles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; position: sticky; bottom: 0; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); background: var(--bg); }
.sala-controles .btn { min-height: 48px; padding: 8px 6px; font-size: 0.9rem; }
.sala-controles .btn[aria-pressed="true"] { border-color: var(--next); color: var(--next); }
.sala .sheet .chips .chip { flex: 1 1 140px; }

/* El recibo */
.recibo-pantalla { justify-content: flex-start; padding-top: 16px; }
.recibo-card ul { color: var(--text); }
.recibo-card .note:empty { display: none; }

@media (max-width: 380px) {
  .proponer-cuando { grid-template-columns: 1fr; }
  .sala-controles .btn { font-size: 0.85rem; }
}

/* Quien mira un debate en vivo (sala-grupo.js, opción mirar): un solo botón, a lo ancho, y sin
   la barra pegada abajo (dentro de la tarjeta del panel de moderación tapaba el texto). */
.sala.mirando .sala-controles { position: static; grid-template-columns: 1fr; padding: 4px 0 0; background: none; }

/* La sala con «Mostrarme» (una sola charla): cuatro botones en dos filas. */
.sala-controles.con-mostrar { grid-template-columns: 1fr 1fr; }