/* Foro de Tertulia: clips cortos con máscara (foro.html) */

.izq { text-align: left; }
.lista-corta { margin: 8px 0 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; }

.foro-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.foro-cabecera h2 { font-size: 1.2rem; }

.categorias { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.categorias::-webkit-scrollbar { display: none; }
.categorias .chip { flex: none; min-height: 44px; padding: 6px 14px; }
.chip .cuenta { margin-left: 6px; opacity: 0.75; font-weight: 500; }
.chip.vacia { opacity: 0.55; }

.lista-clips { display: flex; flex-direction: column; gap: 14px; }

.clip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.clip video { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background: #000; object-fit: cover; }
.clip h3 { font-size: 1.05rem; }
.clip .meta { margin: 0; color: var(--muted); font-size: 0.85rem; }
.clip .acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.clip .acciones .btn.link { padding: 2px 0; font-size: 0.9rem; }
/* "Quiero charlar de esto" (pedidos.js): lo principal de un clip ajeno */
.clip .acciones .pedir-charla { color: var(--accent); }

/* Mi cuenta y Pedidos para charlar: plegados arriba del foro (cuenta.css va después) */
.plegable {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.plegable > summary {
  position: relative;
  display: block;
  min-height: 48px;
  padding: 12px 44px 12px 16px;
  list-style: none;
  font-weight: 700;
  overflow-wrap: anywhere;
  cursor: pointer;
  border-radius: var(--radius);
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
}
.plegable[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.plegable-extra {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--next);
  color: var(--next-text);
  font-size: 0.78rem;
  vertical-align: 1px;
}
.plegable-cuerpo { padding: 0 16px 14px; }
/* La tarjeta va dentro del plegado: sin su propio borde */
.plegable .plegable-cuerpo > .info-card { padding: 0; border: 0; background: transparent; }
/* Su título ya está en el resumen: queda para los lectores de pantalla */
.plegable .plegable-cuerpo > .info-card > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Cuando cuenta.js o pedidos.js le pasan el foco a ese título, se marca el resumen */
.plegable:has(.plegable-cuerpo > .info-card > h2:focus) > summary { outline: 2px solid var(--accent); outline-offset: -2px; }
.plegable .cuenta-card.resaltada { box-shadow: none; }
.plegable.resaltada { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* Con cuenta, el apodo del clip es el de la cuenta */
#autor[readonly] { color: var(--muted); border-style: dashed; }

/* Clip de Tertulia hecho con IA: un guion que el teléfono muestra y lee */
.clip.ia { border-color: var(--next); }
.etiqueta-ia {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--next);
  color: var(--next-text);
  font-size: 0.78rem;
  font-weight: 700;
}
.escena-ia {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2a1f3d, #1a2a3d);
  min-height: 140px;
}
.avatar-ia {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #7a3a6c, var(--ciruela));
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
}
.escena-ia.hablando .avatar-ia { animation: latido 0.6s ease-in-out infinite alternate; }
@keyframes latido { from { transform: scale(1); } to { transform: scale(1.08); } }
.frases-ia { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.frases-ia li { color: var(--muted); }
.frases-ia li.actual { color: var(--text); font-weight: 600; }

/* Grabar */
.clip-box { position: relative; }
.clip-box .self-video { transform: none; }
.repaso { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.tag.rec { left: auto; right: 10px; top: 10px; bottom: auto; background: var(--danger); color: #1a0505; }

.publicado { justify-content: center; }

/* ------------------------------------------------------------------ el foro con hilos
   Como los foros de antes (tablero de categorías, barras de título, filas
   alternadas, el autor al costado del mensaje), pero con el video primero y
   las respuestas en árbol, con votos a favor y en contra a la vista. */

/* Vidrio negro (10 nov): el tablero es de vidrio, la barra en ciruela, sin filas
   alternadas y con la letra de la app; los votos, en ciruela de luz y gris. */
.foro {
  --tablero-barra: linear-gradient(180deg, rgba(91, 35, 80, 0.75) 0%, rgba(91, 35, 80, 0.35) 100%);
  --tablero-fila: transparent;
  --tablero-fila-par: transparent;
  --tablero-borde: rgba(244, 237, 226, 0.12);
  --voto-arriba: #c98bbb;
  --voto-abajo: #b9adbd;
  /* La letra de la app (style.css, body). No "inherit": dentro de `font:` deja la regla sin efecto. */
  --fuente-tablero: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.migas { display: flex; flex-wrap: wrap; gap: 4px; font: 0.82rem/1.4 var(--fuente-tablero); color: var(--muted); }
.migas a { color: var(--next); text-decoration: none; }
.migas a:hover, .migas a:focus-visible { text-decoration: underline; }
.migas .sep { opacity: 0.6; }
.migas [aria-current] { color: var(--text); overflow-wrap: anywhere; }

.vista-foro { display: flex; flex-direction: column; gap: 14px; }

.tablero {
  border: 1px solid var(--tablero-borde);
  border-radius: 10px;
  overflow: hidden;
  background: var(--tablero-fila);
  font-family: var(--fuente-tablero);
}
.tablero-barra {
  margin: 0;
  padding: 9px 12px;
  background: var(--tablero-barra);
  border-bottom: 1px solid var(--tablero-borde);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tablero-barra.con-boton { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tablero-barra.con-boton h2 { margin: 0; font-size: inherit; letter-spacing: inherit; overflow-wrap: anywhere; }
.tablero-desc { margin: 0; padding: 8px 12px; color: var(--muted); font-size: 0.85rem; border-bottom: 1px solid var(--tablero-borde); }
.btn.chico { min-height: 36px; padding: 6px 14px; font-size: 0.85rem; text-transform: none; letter-spacing: 0; }

.tablero-filas, .hilos, .arbol { list-style: none; margin: 0; padding: 0; }

/* Una categoría en el índice */
.fila-cat {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--tablero-borde);
}
.fila-cat:first-child { border-top: 0; }
.fila-cat:nth-child(even) { background: var(--tablero-fila-par); }
.fila-cat .icono {
  grid-row: span 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #2a2340;
  border: 1px solid var(--tablero-borde);
  font-size: 1.3rem;
}
.fila-cat a.nombre { color: var(--text); font-weight: 700; text-decoration: none; font-size: 0.98rem; }
.fila-cat a.nombre::after { content: ''; position: absolute; inset: 0; } /* toda la fila es tocable */
.fila-cat { position: relative; }
.fila-cat:hover, .fila-cat:focus-within { background: #241f33; }
.fila-cat .desc { margin: 0; color: var(--muted); font-size: 0.8rem; }
.fila-cat .numeros { margin: 0; color: var(--muted); font-size: 0.76rem; }
.fila-cat .numeros strong { color: var(--next); font-weight: 700; }
.fila-cat .ultima { overflow-wrap: anywhere; }

/* Una opinión en una lista */
.fila-hilo {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 4px 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--tablero-borde);
}
.fila-hilo:first-child { border-top: 0; }
.fila-hilo:nth-child(even) { background: var(--tablero-fila-par); }
.fila-hilo:hover, .fila-hilo:focus-within { background: #241f33; }
.miniatura {
  grid-row: span 3;
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 57px;
  border-radius: 6px;
  background: radial-gradient(circle at 30% 30%, #4a2a5e, #1b1526);
  border: 1px solid var(--tablero-borde);
  color: #fff;
  font-size: 1.2rem;
}
.miniatura.ia { background: radial-gradient(circle at 30% 30%, #5a4a14, #1b1526); }
.miniatura .duracion {
  position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.75); font-size: 0.68rem; line-height: 1.4;
}
.fila-hilo a.titulo { color: var(--text); font-weight: 700; font-size: 0.92rem; text-decoration: none; overflow-wrap: anywhere; }
.fila-hilo a.titulo::after { content: ''; position: absolute; inset: 0; }
.fila-hilo .por, .fila-hilo .numeros { margin: 0; color: var(--muted); font-size: 0.76rem; }
.numeros .arriba { color: var(--voto-arriba); }
.numeros .abajo { color: var(--voto-abajo); }
.etiqueta-mini { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--next); color: var(--next-text); font-size: 0.68rem; font-weight: 700; }

.orden { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--tablero-borde); }
.orden .chip { min-height: 36px; padding: 4px 12px; font-size: 0.8rem; }
.orden-select select {
  min-height: 36px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--tablero-borde);
  background: #1a1726; color: var(--text); font: 1rem var(--fuente-tablero); text-transform: none; /* 16 px: con menos, Safari agranda al tocar */
}

/* El mensaje de la opinión: el autor al costado, como en los foros de antes */
.post {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--tablero-borde);
  border-radius: 10px;
  overflow: hidden;
  background: var(--tablero-fila);
  font-family: var(--fuente-tablero);
}
.post-autor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--tablero-fila-par);
  border-bottom: 1px solid var(--tablero-borde);
}
.post-avatar {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--next); font-weight: 800; font-size: 1.2rem;
}
.post-avatar.ia { background: var(--surface-2); color: var(--oro); }
.post-autor .nombre { margin: 0; font-weight: 700; color: var(--text); }
.post-autor .detalle { margin: 0; color: var(--muted); font-size: 0.76rem; }
.post-cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.post-cuerpo h2 { margin: 0; font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }
.post-cuerpo video { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background: #000; object-fit: cover; }
.post-cuerpo .meta { margin: 0; color: var(--muted); font-size: 0.8rem; }
.post .acciones { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.post .acciones .btn.link { padding: 2px 0; font-size: 0.88rem; }
.post .acciones .pedir-charla { color: var(--accent); }

/* Los votos: a favor y en contra, con sus números a la vista */
.votos { display: inline-flex; align-items: center; gap: 6px; }
.voto {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; min-width: 44px; padding: 2px 10px;
  border: 1px solid var(--tablero-borde); border-radius: 999px;
  background: #1a1726; color: var(--muted);
  font: 700 0.82rem var(--fuente-tablero); cursor: pointer;
}
.voto .flecha { font-size: 0.9rem; line-height: 1; }
.voto.arriba[aria-pressed='true'] { border-color: var(--voto-arriba); color: var(--voto-arriba); background: rgba(70, 211, 154, 0.12); }
.voto.abajo[aria-pressed='true'] { border-color: var(--voto-abajo); color: var(--voto-abajo); background: rgba(255, 123, 123, 0.12); }
.voto:disabled { cursor: default; opacity: 0.7; }

/* Escribir una respuesta */
.comentar { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--tablero-borde); }
.comentar textarea {
  width: 100%; min-height: 72px; resize: vertical; padding: 10px;
  border: 1px solid var(--tablero-borde); border-radius: 8px;
  background: #110f18; color: var(--text); font: 1rem/1.45 var(--fuente-tablero); /* 16 px: con menos, Safari agranda al tocar */
}
.comentar-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comentar.respuesta { margin: 6px 0 4px; padding: 8px 0 0; border: 0; }
#comentar-no { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--tablero-borde); }

/* El árbol de respuestas: cada nivel con su línea, como un hilo */
.arbol { padding: 4px 8px 8px; }
.arbol .arbol { padding: 0 0 0 10px; margin-left: 9px; border-left: 2px solid var(--tablero-borde); }
.comentario { padding: 8px 4px 2px; border-radius: 8px; }
.comentario.resaltado { animation: resaltar-comentario 2.4s ease-out; }
@keyframes resaltar-comentario { from { background: rgba(255, 207, 74, 0.18); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .comentario.resaltado { animation: none; outline: 2px solid var(--next); } }
.fila-vacia { padding: 12px; margin: 0; }
.comentario-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.78rem; color: var(--muted); }
.comentario-cabeza .apodo { color: var(--next); font-weight: 700; }
.comentario-cabeza .tuyo { padding: 0 6px; border-radius: 4px; background: #2a2340; color: var(--text); }
.plegar {
  min-width: 32px; min-height: 32px; padding: 0 6px; border: 1px solid var(--tablero-borde); border-radius: 6px;
  background: transparent; color: var(--muted); font: 700 0.75rem var(--fuente-tablero); cursor: pointer;
}
.comentario-texto { margin: 4px 0 6px; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.comentario-texto.apagado { color: var(--muted); font-style: italic; }
.comentario-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.comentario-pie .btn.link { padding: 2px 0; min-height: 36px; font-size: 0.82rem; }
.comentario.plegado > .comentario-texto,
.comentario.plegado > .comentario-pie,
.comentario.plegado > .arbol,
.comentario.plegado > .comentar { display: none; }

/* La pregunta del tema, arriba de la cámara */
.pregunta-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border-radius: var(--radius);
  background: linear-gradient(135deg, #2b1840, #1a1326);
  border: 1px solid #5a3b7a;
}
.pregunta-tema { margin: 0; color: var(--next); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pregunta-texto { margin: 0; font-size: 1.35rem; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
.pregunta-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pregunta-pie .note { margin: 0; }

@media (min-width: 640px) {
  .post { grid-template-columns: 150px 1fr; }
  .post-autor { flex-direction: column; align-items: flex-start; border-bottom: 0; border-right: 1px solid var(--tablero-borde); }
  .post-avatar { width: 64px; height: 64px; font-size: 1.6rem; }
  .fila-hilo { grid-template-columns: 96px 1fr; }
  .miniatura { width: 96px; height: 72px; }
}
/* Los títulos que reciben el foco al llegar (para los lectores de pantalla) no llevan recuadro. */
#hilo-titulo:focus, #categoria-titulo:focus, .pregunta-texto:focus { outline: none; }
#grabador > .actions { margin-top: 10px; }

/* ---------- Grabar como una story (pedido de Leandra, 8 de noviembre) ----------
   La cámara a pantalla completa: arriba "Volver" y la pregunta; abajo las máscaras
   en una fila que se desliza y el botón redondo. Al terminar, el video se repite
   con "Descartar", el título (la pregunta, editable) y "Publicar". La verificación
   de edad y los términos suben como hojas sobre la cámara. Estados (foro.js):
   .grabando mientras graba y .con-video en el repaso. */
body:has(#pantalla-grabar.historia:not([hidden])) { overflow: hidden; overscroll-behavior: none; }
html:has(#pantalla-grabar.historia:not([hidden])) { overscroll-behavior: none; }
#pantalla-grabar.historia {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}
#pantalla-grabar.historia .foro-cabecera {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  z-index: 4;
  margin: 0;
  display: flex;
  align-items: center;
}
#pantalla-grabar.historia .foro-cabecera h2 {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#pantalla-grabar.historia #grabar-volver {
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  text-decoration: none;
}
#pantalla-grabar.historia .pregunta-card {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 52px);
  left: 10px;
  right: 10px;
  z-index: 3;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#pantalla-grabar.historia .pregunta-texto { font-size: 1.1rem; line-height: 1.3; }
#pantalla-grabar.historia .pregunta-pie { margin-top: 4px; }
#pantalla-grabar.historia #pregunta-edad { color: #fff; opacity: 0.85; }

#pantalla-grabar.historia #grabador { position: absolute; inset: 0; }
#pantalla-grabar.historia .clip-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: #000;
}
/* El cuadro entero (contain), no recortado: lo que se ve al grabar es lo que se
   publica (anonimato.md, A3; Simulaciones, 8 nov: con cover se veía del 34 al 42 %
   del ancho en el teléfono). */
#pantalla-grabar.historia #vista,
#pantalla-grabar.historia #repaso { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
/* El repaso, como una story: sin controles (quedaban debajo de "Descartar" y
   "Publicar"); se repite solo y un toque lo pausa o lo sigue. Pausado, un ▶. */
#pantalla-grabar.historia #repaso { cursor: pointer; }
#pantalla-grabar.historia .clip-box.pausado::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 30px;
  line-height: 72px;
  text-align: center;
  pointer-events: none;
}
/* Mientras graba, "● Grabando" ocupa el lugar del nombre de la máscara, arriba a
   la derecha: así no tapa "Volver". */
#pantalla-grabar.historia #grabando {
  top: calc(max(10px, env(safe-area-inset-top)) + 8px);
  bottom: auto;
  left: auto;
  right: 10px;
  transform: none;
  z-index: 5;
  background: #e0245e;
  color: #fff;
}
#pantalla-grabar.historia.grabando #mascara-tag { display: none; }
#pantalla-grabar.historia #mascara-tag {
  top: calc(max(10px, env(safe-area-inset-top)) + 8px);
  bottom: auto;
  left: auto;
  right: 10px;
  z-index: 5;
}

/* Las máscaras y las voces: una fila que se desliza, arriba del botón */
#pantalla-grabar.historia .look-picker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 96px);
  z-index: 3;
  gap: 6px;
}
#pantalla-grabar.historia .picker-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#pantalla-grabar.historia .look-picker .chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0 12px;
  scrollbar-width: none;
}
#pantalla-grabar.historia .look-picker .chips::-webkit-scrollbar { display: none; }
#pantalla-grabar.historia .look-picker .chip {
  flex: none;
  min-height: 40px;
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
#pantalla-grabar.historia .look-picker .chip[aria-pressed="true"] { background: var(--ciruela-vidrio); border-color: rgba(236, 196, 226, 0.85); color: var(--next-text); box-shadow: var(--ciruela-brillo); }
#pantalla-grabar.historia #mascara-estado { padding: 0 14px; color: #fff; text-shadow: 0 1px 2px #000; }

/* El botón redondo, y "Publicar" cuando hay video */
#pantalla-grabar.historia .actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0;
}
#pantalla-grabar.historia #boton-grabar {
  width: 78px;
  height: 78px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 5px solid #fff;
  background: #e0245e;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
#pantalla-grabar.historia.grabando #boton-grabar { background: #fff; color: #e0245e; }
#pantalla-grabar.historia #boton-grabar:disabled { opacity: 0.55; cursor: progress; }
#pantalla-grabar.historia #boton-publicar:disabled { display: none; }
#pantalla-grabar.historia #boton-publicar { min-height: 52px; padding: 10px 28px; }
#pantalla-grabar.historia.con-video .actions { justify-content: flex-end; padding-right: 12px; }
#pantalla-grabar.historia #boton-otra-vez {
  position: absolute;
  left: 12px;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 4px);
  z-index: 4;
  width: auto;
  min-height: 44px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
#pantalla-grabar.historia #grabar-error {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 150px);
  z-index: 5;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.8);
}

/* El título y el apodo: solo en el repaso, arriba de los botones */
#pantalla-grabar.historia .historia-datos { display: none; }
#pantalla-grabar.historia.con-video .historia-datos {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#pantalla-grabar.historia .historia-datos .field span { color: #fff; }
#pantalla-grabar.historia .historia-datos small { color: rgba(255, 255, 255, 0.75); }
/* En el repaso no hacen falta la pregunta ni las máscaras; mientras se graba, tampoco las máscaras */
#pantalla-grabar.historia.con-video .pregunta-card,
#pantalla-grabar.historia.con-video .look-picker,
#pantalla-grabar.historia.grabando .look-picker { display: none; }

/* La verificación de edad y los términos: hojas que suben sobre la cámara */
#pantalla-grabar.historia #verificar,
#pantalla-grabar.historia #foro-terminos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  margin: 0;
  max-height: 78dvh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--surface);
  color: var(--text);
}


/* ------------------------------------------------------------------ entrada del foro limpia
   Cuatro pasos con ícono, simétrica y en vidrio negro (Leandra, 9-10 nov); el texto
   completo de "Cómo funciona", en el desplegable. */
#pantalla-entrada { gap: 16px; }
#pantalla-entrada .brand { text-align: center; }
#pantalla-entrada .brand .marca { margin: 0; font-size: 2.6rem; }
#pantalla-entrada .brand p { margin: 2px 0 0; color: var(--muted); }
#pantalla-entrada > .info-card:first-of-type { background: none; border: 0; padding: 0; box-shadow: none; gap: 12px; }
.pasos-entrada { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pasos-entrada li { display: flex; align-items: center; gap: 14px; }
.pasos-entrada .redondo { width: 52px; height: 52px; flex: none; color: var(--next); }
.pasos-entrada b { display: block; font-size: 1.02rem; color: var(--text); }
.pasos-entrada li > span:last-child { color: var(--muted); font-size: 0.86rem; line-height: 1.3; }
#pantalla-entrada .saber-mas { border-top: 0; padding-top: 0; text-align: center; }
#pantalla-entrada .saber-mas > summary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 0.9rem; }
#pantalla-entrada .saber-mas > summary .ico { width: 18px; height: 18px; }
#pantalla-entrada .saber-mas[open] > .lista-corta { text-align: left; margin-top: 10px; }
#pantalla-entrada #edad-aviso { text-align: center; font-size: 0.78rem; }
#pantalla-entrada #entrar { min-height: 56px; font-size: 1.05rem; font-weight: 800; }
#pantalla-entrada #entrada-form > .check { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
#pantalla-grabar.historia .voz-aviso { padding: 0 14px; color: #fff; text-shadow: 0 1px 2px #000; }
#pantalla-grabar.historia .identidad { padding: 6px 14px 0; }
#pantalla-grabar.historia .identidad > summary { color: #fff; text-shadow: 0 1px 2px #000; }
#pantalla-grabar.historia .identidad > p { background: rgba(0, 0, 0, 0.7); color: #fff; }


/* ------------------------------------------------------------------ foro en vidrio negro
   (10 nov) Tableros de vidrio, barra en ciruela centrada, íconos de la marca en
   círculos de vidrio y la grabación en ciruela y marfil. */
.tablero { border-color: var(--vidrio-borde); border-radius: 18px; background: var(--vidrio); box-shadow: var(--vidrio-brillo); }
.tablero-barra { text-align: center; color: var(--text); border-bottom-color: var(--vidrio-borde); letter-spacing: 0.08em; }
.tablero-barra.con-boton { text-align: left; }
.fila-cat:hover, .fila-cat:focus-within, .fila-hilo:hover, .fila-hilo:focus-within { background: rgba(244, 237, 226, 0.04); }
.fila-cat .icono { background: var(--vidrio); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-brillo); border-radius: 50%; color: var(--next); }
.fila-cat .icono .ico { filter: drop-shadow(0 0 6px rgba(201, 139, 187, 0.5)); }
.fila-cat .numeros strong { color: var(--next); }
.titulo-icono { display: inline-flex; vertical-align: -4px; margin-right: 6px; color: var(--next); }
/* Grabar: el botón redondo en ciruela con aro marfil; grabando, marfil. */
#pantalla-grabar.historia #boton-grabar { background: var(--ciruela-vidrio); border-color: #f4ede2; color: #141016; box-shadow: var(--ciruela-brillo), 0 2px 14px rgba(0, 0, 0, 0.45); }
#pantalla-grabar.historia.grabando #boton-grabar { background: #f4ede2; color: var(--ciruela); }
#pantalla-grabar.historia #grabando { background: var(--ciruela-vidrio); color: #141016; }

/* Respuestas en video (F11): en su lugar del árbol, se miran ahí mismo. */
.comentario-video { margin: 6px 0 4px; }
.comentario-video .respuesta-video { display: block; width: 100%; max-width: 320px; max-height: 360px; border-radius: 12px; background: #000; }
.comentario-video figcaption { margin: 4px 0 0; color: var(--next); font-weight: 600; }
.comentar-pie #comentar-video { margin-left: auto; }
.comentar-pie #comentar-video .ico { width: 18px; height: 18px; color: var(--next); }

/* El aviso de los filtros de detalles, en el repaso: "Con este filtro te pueden reconocer". */
.aviso-detalles { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--oro); background: rgba(255, 180, 107, 0.12); }
.aviso-detalles[hidden] { display: none; }
.aviso-detalles-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--oro); font-weight: 800; }
.aviso-detalles-titulo .ico { width: 20px; height: 20px; flex: 0 0 auto; }
.aviso-detalles .note { margin: 0 0 8px; color: #fff; }
.aviso-detalles-botones { display: flex; gap: 8px; }
.aviso-detalles-botones .btn.chico { flex: 1 1 0; min-height: 44px; }
/* Mientras se ve el aviso, se elige ahí: "Publicar" no está. */
#pantalla-grabar.historia.con-aviso-detalles #boton-publicar { display: none; }

/* «Con video»: el ícono no va pegado al texto. */
.comentar-pie #comentar-video { display: inline-flex; align-items: center; gap: 6px; }

/* Debatir en vivo desde el hilo (F12). */
.btn.debatir { display: inline-flex; align-items: center; gap: 6px; }
.btn.debatir .ico { width: 18px; height: 18px; color: var(--next); flex: 0 0 auto; }
.btn.debatir.solo-icono { min-width: 36px; min-height: 36px; padding: 6px; justify-content: center; }
.btn.debatir[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.debatir-estado:empty { display: none; }
.debatir-estado { flex: 1 1 100%; }
.foro-debates-aviso {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--oro); background: rgba(255, 180, 107, 0.12); color: var(--oro); font-weight: 700; text-decoration: none;
}
.foro-debates-aviso[hidden] { display: none; }
.foro-debates-aviso .ico { width: 20px; height: 20px; flex: 0 0 auto; }
/* Los debates publicados del hilo: las dos partes a la par. */
.hilo-debates-lista { display: flex; flex-direction: column; gap: 14px; padding: 12px; }
.debate-del-hilo h3 { margin: 0 0 8px; font-size: 1rem; }
.debate-del-hilo .debate-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.debate-del-hilo .debate-lado { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.debate-del-hilo .debate-lado video { width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; background: #000; object-fit: cover; }
.debate-del-hilo .debate-lado figcaption { font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.debate-del-hilo .numeros { margin: 6px 0 0; }

/* "Debates de este hilo": el título, del mismo tamaño que el de "Respuestas". */
#hilo-debates .tablero-barra h2 { margin: 0; font-size: inherit; letter-spacing: inherit; }

/* «Fondo borroso» en la story: sobre la cámara, como las máscaras. */
#pantalla-grabar.historia .fondo-opcion { padding: 0 12px; }
#pantalla-grabar.historia .fondo-interruptor { background: rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
#pantalla-grabar.historia .fondo-nota { color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 2px #000; }
#pantalla-grabar.historia.grabando .fondo-opcion, #pantalla-grabar.historia.con-video .fondo-opcion { display: none; }

/* Las máscaras como íconos (botones-mascara.js), sobre el video al grabar. */
#pantalla-grabar.historia .look-picker .chips.mascaras-iconos { padding: 4px 12px 2px; }
#pantalla-grabar.historia .look-picker .chip.mascara-boton,
#pantalla-grabar.historia .look-picker .chip.mascara-boton[aria-pressed="true"] { min-height: 0; background: none; border: 0; box-shadow: none; color: #fff; text-shadow: 0 1px 2px #000; }
#pantalla-grabar.historia .look-picker .chip.mascara-boton[aria-pressed="true"] .mascara-nombre { color: #f4ede2; }
#pantalla-grabar.historia .look-picker .chips.mascaras-iconos { padding: 6px 12px 2px; }

/* «Mis charlas en vivo», siempre a la vista con cuenta (los debates son parte del foro; Leandra, 10 nov).
   Tranquilo de vidrio; en oro cuando te piden charlar o tenés una para entrar. */
.foro-debates-aviso:not(.hay-nuevo) { border-color: var(--vidrio-borde); background: var(--vidrio); box-shadow: var(--vidrio-brillo); color: var(--text); font-weight: 600; }
.foro-debates-aviso:not(.hay-nuevo) .ico { color: var(--next); }

/* El debate dentro de la opinión (Leandra: «Sí, dentro»; Dirección estética,
   02_marca/filtros/comparacion_filtros_debate.html, sección 2). */
.formas-responder { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid #3a3340; }
.forma {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(244, 237, 226, 0.12); background: #241f28; color: #f4ede2;
  font: inherit; font-size: 0.9rem; font-weight: 800; cursor: pointer;
}
.forma .ico { width: 18px; height: 18px; flex: none; }
.forma.principal { background: #f4ede2; color: #141016; border-color: #f4ede2; }
.forma.principal .ico { color: #5b2350; }
.forma[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.forma:focus-visible { outline: 2px solid #ffb46b; outline-offset: 2px; }
.formas-responder .debatir-estado { flex: 1 1 100%; margin: 0; }
.recibe-debates { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px 4px 14px; border-radius: 999px; background: #241f28; font-size: 0.9rem; font-weight: 700; }

/* La hoja del pedido, sobre el hilo. */
.hoja-debate {
  width: min(560px, calc(100% - 16px)); max-width: none; margin: auto auto 8px; padding: 20px 18px 16px;
  border-radius: 22px; border: 1px solid #3a3340; background: #19161c; color: #f4ede2;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
}
.hoja-debate::backdrop { background: rgba(13, 11, 16, 0.65); }
.hoja-debate .hoja-titulo { margin: 0 0 8px; font-size: 1.15rem; font-weight: 900; }
.hoja-debate .hoja-texto { margin: 0 0 8px; }
.hoja-debate .hoja-lista { margin: 0 0 14px; padding-left: 18px; color: #d8cfc4; font-size: 0.9rem; display: flex; flex-direction: column; gap: 4px; }
.hoja-debate .hoja-pedir { background: #f4ede2; color: #141016; border-color: #f4ede2; font-weight: 900; }
.hoja-debate .hoja-no { display: block; margin: 8px auto 0; color: #b9adbd; font-weight: 700; }

/* El debate publicado, entre las respuestas. */
.hilo-debates { margin: 0 0 10px; }
.hilo-debates .hilo-debates-lista { padding: 0; gap: 10px; }
.debate-del-hilo { padding: 10px; border-radius: 14px; background: #19161c; border: 1px solid #c98bbb; display: flex; flex-direction: column; gap: 8px; }
.debate-del-hilo .debate-cabecera { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.85rem; color: #b9adbd; }
.debate-del-hilo .debate-cabecera b { color: #f4ede2; }
.debate-del-hilo .debate-etiqueta { padding: 0 7px; border-radius: 6px; background: #ffb46b; color: #141016; font-size: 0.72rem; font-weight: 900; line-height: 1.5; }
.debate-del-hilo .debate-videos { position: relative; gap: 0; margin: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.debate-del-hilo .debate-lado { position: relative; gap: 0; height: 100%; }
.debate-del-hilo .debate-lado + .debate-lado { border-left: 1px solid rgba(13, 11, 16, 0.8); }
.debate-del-hilo .debate-lado video { height: 100%; aspect-ratio: auto; border-radius: 0; }
.debate-del-hilo .debate-lado figcaption { position: absolute; left: 6px; top: 6px; padding: 0 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: #f4ede2; font-size: 0.72rem; font-weight: 800; }
.debate-del-hilo .debate-duracion { position: absolute; right: 6px; bottom: 6px; padding: 0 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); font-size: 0.72rem; color: #f4ede2; }
.debate-del-hilo .debate-ver { min-height: 40px; }
.debate-del-hilo .acciones { margin: 0; }

/* Con «Fondo borroso» prendido y el fondo visible, no se publica: "Grabalo de nuevo" (Backend). */
#pantalla-grabar.historia.con-fondo-visible #boton-publicar { display: none; }
.debate-del-hilo .debate-videos { grid-template-rows: 100%; }

/* La hoja de «Grabar mi opinión» (Leandra, 10 nov; Dirección estética, 02_marca/portada/portada_foro.html):
   la categoría en miniaturas (como las máscaras, estilo B) y después la pregunta. */
.hoja-grabar { max-height: calc(100dvh - 24px); overflow-y: auto; }
.hoja-asa { display: block; width: 40px; height: 4px; margin: -8px auto 10px; border-radius: 999px; background: #3a3340; }
.hoja-paso { margin: -4px 0 12px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #b9adbd; }
.hoja-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; margin: 0 0 12px; }
.hoja-cat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #d8cfc4; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; text-align: center; }
.hoja-cat-icono {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; color: #f4ede2;
  background: radial-gradient(120% 100% at 20% 0%, rgba(255, 180, 107, 0.55), transparent 60%), linear-gradient(150deg, #5b2350, #1a0f1a);
}
.hoja-cat-icono .ico { width: 30px; height: 30px; }
.hoja-cat[aria-pressed="true"] { color: #f4ede2; }
.hoja-cat[aria-pressed="true"] .hoja-cat-icono { box-shadow: 0 0 0 2px #19161c, 0 0 0 4px #ffb46b; }
.hoja-cat:focus-visible { outline: none; }
.hoja-cat:focus-visible .hoja-cat-icono { outline: 2px solid #ffb46b; outline-offset: 5px; }
.hoja-cat-nombre { line-height: 1.15; overflow-wrap: anywhere; }
.hoja-volver { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 0; color: #c98bbb; font-weight: 800; }
.hoja-volver .ico { width: 18px; height: 18px; }
.hoja-preguntas { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.hoja-pregunta {
  padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: #241f28; color: #f4ede2;
  font: inherit; font-size: 0.92rem; font-weight: 700; text-align: left; cursor: pointer;
}
.hoja-pregunta[aria-pressed="true"] { background: #f4ede2; color: #141016; }
.hoja-pregunta.hoja-escribir { background: none; border: 1px dashed rgba(244, 237, 226, 0.3); color: #c98bbb; }
.hoja-pregunta.hoja-escribir[aria-pressed="true"] { border-style: solid; border-color: #c98bbb; color: #f4ede2; background: none; }
.hoja-propia-campo { margin: 0 0 12px; }
.hoja-ir { position: sticky; bottom: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 0 0 4px rgba(255, 180, 107, 0.18); }
.hoja-ir .ico { color: #5b2350; }
.hoja-ir:disabled { opacity: 0.5; box-shadow: none; }

/* «Debatir ahora»: quien publicó está disponible (presencia manual de Backend). Un punto que late. */
.forma.principal.ahora { box-shadow: 0 0 0 3px rgba(255, 180, 107, 0.35), 0 0 18px rgba(255, 180, 107, 0.35); }
.punto-ahora { width: 9px; height: 9px; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 0 0 rgba(62, 207, 142, 0.6); animation: punto-late 1.6s ease-out infinite; flex: none; }
.punto-ahora[hidden] { display: none; }
@keyframes punto-late { 0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0.6); } 100% { box-shadow: 0 0 0 8px rgba(62, 207, 142, 0); } }
@media (prefers-reduced-motion: reduce) { .punto-ahora { animation: none; } }
.disponible-caja { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
.disponible-caja .recibe-debates { align-self: flex-start; }
.disponible-nota { margin: 0; }
.debate-del-hilo .votos { margin: 0; }

/* La portada = el foro (Dirección estética, 02_marca/portada/portada_foro.html). */
.cat-chips { display: flex; gap: 6px; overflow-x: auto; margin: 4px -4px 2px; padding: 4px; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips[hidden] { display: none; }
.cat-chips .chip { flex: none; min-height: 36px; padding: 6px 14px; background: #241f28; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #f4ede2; font-size: 0.85rem; font-weight: 800; }
.cat-chips .chip[aria-pressed="true"] { background: #c98bbb; color: #141016; box-shadow: none; }
/* «Lo último» en tarjetas. */
.recientes-tarjetas #recientes { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.recientes-tarjetas .fila-hilo { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; border-radius: 18px; background: #19161c; border: 1px solid #3a3340; }
.recientes-tarjetas .fila-hilo .miniatura {
  position: relative; display: grid; place-items: center; width: auto; height: auto; aspect-ratio: 2 / 1; border-radius: 12px; font-size: 1.6rem; color: rgba(244, 237, 226, 0.8);
  background: radial-gradient(110% 90% at 22% 0%, rgba(255, 180, 107, 0.55), transparent 60%), linear-gradient(140deg, #4a1d42, #141016);
}
.recientes-tarjetas .fila-hilo .miniatura .duracion { position: absolute; right: 6px; bottom: 6px; padding: 0 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); font-size: 0.72rem; }
.recientes-tarjetas .fila-hilo .titulo { padding: 0 4px; font-size: 1rem; font-weight: 800; line-height: 1.25; }
.recientes-tarjetas .fila-hilo .por, .recientes-tarjetas .fila-hilo .numeros { margin: 0; padding: 0 4px; }
.con-debates { margin: 0; padding: 0 4px; }
.con-debates .debate-etiqueta { padding: 0 7px; border-radius: 6px; background: #ffb46b; color: #141016; font-size: 0.72rem; font-weight: 900; }
/* «Grabar mi opinión», fijo abajo en la zona del pulgar (en el índice y en una categoría). */
#pantalla-foro:not(.en-hilo) { padding-bottom: 110px; }
#pantalla-foro:not(.en-hilo) .grabar-fijo {
  position: fixed; z-index: 20; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(420px, calc(100% - 32px)); min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; background: #f4ede2; color: #141016; border-color: #f4ede2; font-size: 1rem; font-weight: 900;
  box-shadow: 0 0 0 4px rgba(255, 180, 107, 0.18), 0 8px 30px rgba(0, 0, 0, 0.5);
}
#pantalla-foro:not(.en-hilo)::after {
  content: ''; position: fixed; z-index: 19; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none;
  background: linear-gradient(transparent, #0d0b10 55%);
}
#pantalla-foro[hidden]::after { display: none; }
#pantalla-foro:not(.en-hilo) .grabar-fijo .ico { color: #5b2350; }

/* «Mis opiniones»: cada cosa publicada y en qué está. */
.mios-estados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mios-estados .mio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 10px 12px; border-radius: 14px; background: #19161c; border: 1px solid #3a3340; }
.mios-estados .mio-titulo { flex: 1 1 60%; font-weight: 700; overflow-wrap: anywhere; }
.mios-estados .mio-estado { flex: none; padding: 2px 8px; border-radius: 999px; background: #241f28; font-size: 0.78rem; font-weight: 800; }
.mios-estados .mio-en_revision { border-color: #ffb46b; }
.mios-estados .mio-en_revision .mio-estado { background: #ffb46b; color: #141016; }
.mios-estados .mio-rechazado .mio-estado, .mios-estados .mio-no-esta .mio-estado { background: #3a2026; color: #ffb3c1; }
.mios-estados .mio-publicado .mio-estado { color: #c98bbb; }
.mios-estados .mio .note { flex: 1 1 100%; margin: 0; }

/* El título de la hoja recibe el foco al abrirse (para lectores de pantalla): sin el recuadro. */
.hoja-debate .hoja-titulo:focus { outline: none; }

/* «posible desnudez» (Backend, posibleDesnudez): tapado y sin cargar hasta «Ver igual». */
.tapado-desnudez { position: relative; }
.tapado-desnudez:not(.visto) > :first-child { filter: blur(24px) brightness(0.5); pointer-events: none; }
.velo-desnudez {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 12px; background: rgba(13, 11, 16, 0.78); color: #f4ede2; text-align: center; font-size: 0.9rem;
}
.velo-desnudez p { margin: 0; }
.etiqueta-desnudez { display: inline-block; padding: 0 7px; border-radius: 6px; background: #3a2026; color: #ffb3c1; font-size: 0.72rem; font-weight: 900; line-height: 1.5; }
.con-desnudez { margin: 0; padding: 0 4px; }
.tapado-desnudez .velo-desnudez .btn { min-height: 40px; }
.comentario-video .tapado-desnudez .velo-desnudez { font-size: 0.8rem; }

/* El error de grabar va en la columna (mostrarError lo mueve): sin superponerse a otros textos. */
#pantalla-grabar.historia #grabar-error {
  position: static; left: auto; right: auto; bottom: auto; z-index: auto;
  margin: 0 12px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.8); color: #ffb3c1;
}
#pantalla-grabar.historia .historia-datos #grabar-error { margin: 0; }

/* La portada de cada clip (Backend) en las listas: la imagen, con ▶ y la duración. Con posible desnudez, tapada. */
.fila-hilo .miniatura.con-portada { position: relative; overflow: hidden; }
.fila-hilo .miniatura.con-portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fila-hilo .miniatura .mini-play { position: relative; z-index: 1; }
.fila-hilo .miniatura.con-portada .mini-play {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(244, 237, 226, 0.92); color: #141016; font-size: 0.95rem;
}
.fila-hilo .miniatura .duracion { z-index: 1; }
.fila-hilo .miniatura.tapada img { filter: blur(18px) brightness(0.5); transform: scale(1.1); }
#comentar-form #comentar-texto { min-height: 72px; }

/* En la cabecera del foro: el logo, la campanita y (en el hilo) «Grabar mi opinión». */
#pantalla-foro .foro-cabecera .campanita-lugar { margin-left: auto; }

/* «Lo último», corto (Leandra, 10 nov: "deberia poder scrollearse por si sola pero deberia aparecer mas corta"):
   una fila de tarjetas que se desliza de costado con el dedo (en el iPhone no se traba con el scroll de la página),
   con «Ver todo» al final, que la abre en lista. */
.recientes-tarjetas #recientes:not(.expandido) {
  flex-direction: row; align-items: stretch; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding: 0 10px; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.recientes-tarjetas #recientes:not(.expandido)::-webkit-scrollbar { display: none; }
.recientes-tarjetas #recientes:not(.expandido) > li { flex: 0 0 min(64vw, 248px); min-width: 0; scroll-snap-align: start; }
.recientes-tarjetas #recientes:not(.expandido) .fila-hilo .miniatura { aspect-ratio: 16 / 10; }
.recientes-tarjetas #recientes:not(.expandido) .fila-hilo .titulo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.95rem;
}
.recientes-tarjetas #recientes:not(.expandido) .fila-hilo .por {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.78rem;
}
.recientes-tarjetas #recientes:not(.expandido) > li.fila-vacia { flex: 1 1 100%; }
/* «Ver todo»: la última tarjeta, en vidrio. */
.recientes-tarjetas .ver-todo { display: flex; }
.recientes-tarjetas #recientes:not(.expandido) > li.ver-todo { flex: 0 0 116px; }
.ver-todo-boton {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 120px; padding: 14px 10px; border-radius: 18px; cursor: pointer;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-brillo);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 800;
}
.ver-todo-boton .ico { width: 26px; height: 26px; color: var(--next); filter: drop-shadow(0 0 6px rgba(201, 139, 187, 0.6)); }
.recientes-tarjetas #recientes.expandido .ver-todo-boton { flex-direction: row; min-height: 48px; }
.ver-todo-boton:focus-visible { outline: 2px solid var(--next); outline-offset: 2px; }
@media (min-width: 720px) {
  .recientes-tarjetas #recientes:not(.expandido) > li { flex-basis: 240px; }
}

/* «Debates» entre las categorías (10 nov): con el ícono, en dorado para que se encuentre. */
.cat-chips .chip.chip-debates { display: inline-flex; align-items: center; gap: 6px; color: var(--oro); }
.cat-chips .chip.chip-debates .ico { width: 18px; height: 18px; }
.cat-chips .chip.chip-debates[aria-pressed="true"] { background: var(--oro); color: #141016; }
#recientes-mis-debates { margin: 0 0 10px; }
#recientes-mis-debates a { display: inline-flex; align-items: center; gap: 6px; color: var(--next); font-weight: 800; }
#recientes-mis-debates .ico { width: 18px; height: 18px; }


/* Compartir (10 nov): un botón chico con ícono; en la opinión también «Copiar link». */
.btn.link.compartir, .btn.link.copiar-link { display: inline-flex; align-items: center; gap: 6px; }
.btn.link.compartir .ico, .btn.link.copiar-link .ico { width: 18px; height: 18px; }
.btn.link.compartir.solo-icono { min-width: 36px; justify-content: center; }
/* Al abrir un link compartido: el comentario o el debate, resaltado un momento. */
.debate-del-hilo.resaltado { box-shadow: 0 0 0 2px var(--next), 0 0 24px rgba(201, 139, 187, 0.4); transition: box-shadow 1.5s ease 2s; }

/* La opinión que se reproduce sola en la miniatura (reproduccion-auto.js, 10 nov). */
.fila-hilo .miniatura .mini-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: #1a1824; }
.fila-hilo .miniatura.andando .mini-play { opacity: 0; transition: opacity 0.2s; }
.fila-hilo .miniatura.andando img { opacity: 0; transition: opacity 0.2s; }

/* ------------------------------------------------------------------ Reels de una categoría (10 nov)
   Un video por pantalla, a todo el ancho (en la compu, centrado y de alto completo), encajando de a
   uno. La animación al pasar sale de --p (-1 arriba, 0 en pantalla, 1 abajo) y --a (sin signo), que
   pone foro.js (moverReels): solo transform y opacity, para que vaya fluido. data-estilo elige cuál. */
html.en-reels, html.en-reels body { overflow: hidden; overscroll-behavior: none; }
.reels { position: fixed; inset: 0; z-index: 60; background: #050407; color: var(--text); }
.reels-pista {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reels-pista::-webkit-scrollbar { display: none; }
.reel {
  position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; justify-content: center; overflow: hidden; --p: 0; --a: 0;
}
.reel-marco {
  position: relative; width: 100%; max-width: min(100vw, 760px); height: 100%; overflow: hidden;
  background: #0d0b10; will-change: transform, opacity; transform-origin: 50% 50%;
}
.reel-video, .reel-marco > .tapado-desnudez, .reel-marco > .tapado-desnudez video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0d0b10;
}
.reel-ia { position: absolute; inset: 0; display: grid; place-content: center; gap: 18px; padding: 80px 28px 160px; background: radial-gradient(circle at 30% 25%, #3a2a48, #0d0b10 70%); }
.reel-ia .frases-ia { font-size: 1.25rem; line-height: 1.45; }
.reel-sombra { position: absolute; inset: auto 0 0 0; height: 46%; pointer-events: none; background: linear-gradient(0deg, rgba(5, 4, 7, 0.86) 0%, rgba(5, 4, 7, 0) 100%); }
.reel-subs {
  position: absolute; left: 16px; right: 84px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); margin: 0;
  text-align: center; white-space: pre-line; font-size: 1.05rem; line-height: 1.35; font-weight: 600;
  color: #fffaf3; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); pointer-events: none;
}
.reel-info {
  position: absolute; left: 16px; right: 84px; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 4px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.reel-cat { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px; border-radius: 99px; font-size: 0.8rem;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-brillo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.reel-cat .titulo-icono svg { width: 14px; height: 14px; }
.reel-titulo { color: #fffaf3; font-size: 1.12rem; font-weight: 700; line-height: 1.25; text-decoration: none; }
.reel-quien { margin: 0; font-size: 0.85rem; color: rgba(244, 237, 226, 0.82); }
.reel-acciones {
  position: absolute; right: 10px; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.reel-acciones .note { display: none; }
.reel-accion {
  display: grid; justify-items: center; gap: 3px; min-width: 56px; padding: 0; border: 0; background: none;
  color: #fffaf3; font: inherit; font-size: 0.72rem; cursor: pointer; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.reel-accion svg, .reel-accion.reel-cc {
  box-sizing: border-box; width: 46px; height: 46px; padding: 11px; border-radius: 50%;
  background: var(--vidrio), rgba(12, 11, 16, 0.55); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-brillo);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.reel-accion.reel-cc { display: grid; place-items: center; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.02em; }
.reel-accion.reel-cc[aria-pressed="false"] { opacity: 0.55; }
.reel-accion .sr-only + span, .reel-accion span { pointer-events: none; }
.reel-accion[aria-disabled="true"] { opacity: 0.5; }
.reels-barra {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; width: 100%; max-width: min(100vw, 760px);
  display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 18px;
  background: linear-gradient(180deg, rgba(5, 4, 7, 0.72) 0%, rgba(5, 4, 7, 0) 100%); pointer-events: none;
}
.reels-barra > * { pointer-events: auto; }
.reels-nombre { flex: 1; margin: 0; font-size: 1.05rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.reels-boton {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 99px; color: #fffaf3; font: inherit; font-size: 0.9rem; cursor: pointer;
  background: var(--vidrio), rgba(12, 11, 16, 0.55); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-brillo);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.reels-boton svg { width: 20px; height: 20px; }
.reels-opinar { background: var(--ciruela-vidrio); color: var(--next-text); box-shadow: var(--ciruela-brillo); font-weight: 700; }
/* El botón de sonido de reproduccion-auto.js, arriba de los reels. */
html.en-reels .auto-sonido { z-index: 70 !important; bottom: auto !important; top: calc(64px + env(safe-area-inset-top, 0px)) !important; left: auto !important; right: 14px !important; }

/* Las tres de Dirección estética (02_marca/reels/comparacion_reels.html), atadas al deslizamiento.
   A · Escala con fundido: igual al entrar y al salir. */
.reels[data-estilo="escala"] .reel-marco {
  transform: scale(calc(1 - var(--a) * 0.12));
  opacity: calc(1 - var(--a) * 0.55);
  border-radius: calc(var(--a) * 28px);
}
/* B · Profundidad: el que sale queda atrás, como una carta; el que entra sube por encima. */
.reels[data-estilo="profundidad"] .reel { overflow: visible; z-index: 2; }
.reels[data-estilo="profundidad"] .reel-marco {
  transform: translateY(calc(var(--sal) * 70%)) scale(calc(1 - var(--sal) * 0.14)) perspective(900px) rotateX(calc(var(--sal) * 10deg));
  opacity: calc(1 - var(--sal) * 0.7);
  border-radius: calc(var(--a) * 26px);
}
/* C · Vidrio que se corre: el contenido con parallax y una lámina de vidrio negro con filo de luz. */
.reels[data-estilo="vidrio"] .reel-video { transform: translateY(calc(var(--p) * -18%)); }
.reel-lamina { display: none; }
.reels[data-estilo="vidrio"] .reel-lamina {
  display: block; position: absolute; inset: -10% 0; pointer-events: none; z-index: 3;
  transform: translateY(calc(var(--p) * -100%)) skewY(-6deg);
  opacity: min(1, calc(var(--a) * 50));
  background: linear-gradient(115deg, rgba(13, 11, 16, 0) 0%, rgba(13, 11, 16, 0.78) 30%, rgba(28, 20, 30, 0.92) 50%, rgba(13, 11, 16, 0.78) 70%, rgba(13, 11, 16, 0) 100%);
  will-change: transform, opacity;
}
.reels[data-estilo="vidrio"] .reel-lamina::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 2px; transform: rotate(25deg);
  background: linear-gradient(90deg, #ffd29a, #ffb46b); box-shadow: 0 0 18px 4px rgba(255, 180, 107, 0.45);
}

/* Botones y texto encima del video (Dirección estética). */
.reels .reel-acciones { right: 10px; bottom: calc(120px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
.reels .reel-accion svg, .reels .reel-accion.reel-cc {
  width: 44px; height: 44px; padding: 11px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.reels .reel-accion { font-size: 0.78rem; }
.reels .reel-accion.debatir svg { box-shadow: 0 0 0 2px #0d0b10, 0 0 0 4px #ffb46b; }
.reels .reel-sombra { height: auto; top: auto; bottom: 0; min-height: 40%; background: linear-gradient(180deg, rgba(5, 3, 6, 0) 0%, rgba(5, 3, 6, 0.85) 100%); }
.reels .reel-info { left: 16px; right: 76px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.reels .reel-cat {
  color: #ffb46b; background: rgba(255, 180, 107, 0.12); border: 1px solid rgba(255, 180, 107, 0.35); box-shadow: none;
  text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.reels .reel-cat .titulo-icono { display: none; }
.reels .reel-titulo { font-weight: 700; font-size: 1.02rem; }
.reels .reel-quien { color: #b9adbd; }
.reels .reel-subs { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
.reels .reel-subs:not([hidden]) { background: rgba(13, 11, 16, 0.62); border: 1px solid rgba(255, 255, 255, 0.12); }
@media (prefers-reduced-motion: reduce) {
  .reels .reel-marco, .reels .reel-video, .reels .reel-info, .reels .reel-acciones { transform: none !important; }
  .reels .reel-lamina { display: none !important; }
}

.reels .reel-subs { color: #fffaf3; opacity: 1; justify-self: center; }
.reels .reel-subs:not([hidden]) { display: block; width: fit-content; max-width: calc(100% - 100px); margin: 0 auto; padding: 4px 10px; border-radius: 10px; background: rgba(5, 4, 7, 0.55); }
.reels-nombre:focus { outline: none; }
.reel-accion .sr-only { position: absolute; }

/* «Escribir el mío» en la tarjeta de la pregunta (10 nov). */
.pregunta-mia { display: block; margin: 4px 0 2px; }
.pregunta-mia input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--vidrio-borde, rgba(244,237,226,.17)); background: rgba(12, 11, 16, 0.6); color: var(--text, #f4ede2); font: inherit; font-size: 16px; }

/* Íconos «duotono de línea fina sobre vidrio» (Leandra: «puede ser duotono de linea fina sobre viirio?»;
   Dirección estética, estilo D de 02_marca/rediseno_ia/iconos_estilos.html): cuadradito de vidrio
   oscuro con un filo de luz arriba, el ícono en línea marfil de 1,5 con relleno ciruela suave y un
   puntito dorado. Sin resplandor. */
.fila-cat .icono {
  position: relative; width: 44px; height: 44px; border-radius: 13px; color: #f4ede2;
  background: linear-gradient(180deg, #1d1820, #141016);
  border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.fila-cat .icono .ico { width: 24px; height: 24px; filter: none; fill: rgba(160, 80, 140, 0.45); stroke: #f4ede2; stroke-width: 1.5; }
.fila-cat .icono::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #ffb46b; }
.fila-cat { grid-template-columns: 44px 1fr; gap: 4px 12px; }
.ver-todo-boton .ico { filter: none; }

/* La pregunta al grabar: la categoría como píldora dorada y «Otra pregunta» con la transición A de los
   reels (Dirección estética). */
.pregunta-card .pregunta-tema #pregunta-tema {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #ffb46b; background: rgba(255, 180, 107, 0.1); border: 1px solid rgba(255, 180, 107, 0.3);
}
#pregunta-texto { transition: transform 0.28s ease, opacity 0.28s ease; }
#pregunta-texto.sale { transform: scale(0.88); opacity: 0; }
@media (prefers-reduced-motion: reduce) { #pregunta-texto { transition: none; } }
/* Ajustes de Dirección estética (10 nov): el relleno ciruela del duotono más visible y el chip elegido
   en dorado, como en el rediseño (02_marca/brillo/brillo_y_pregunta.html). */
.fila-cat .icono .ico { fill: rgba(160, 80, 140, 0.6); }
.cat-chips .chip[aria-pressed="true"], .orden .chip[aria-pressed="true"] {
  background: linear-gradient(180deg, #ffd6a0, #e9a65e); border-color: transparent; color: #2a1424; box-shadow: none;
}

/* ------------------------------------------------------------------ Pantalla de grabar «cromo» (10 nov)
   Leandra eligió «A · Selector» (Dirección estética, 02_marca/camara/comparacion_camara_c5.html). Una
   piel sobre la pantalla de siempre (foro.js, armarCromo): la cámara de fondo con un degradé abajo, chips
   cromados arriba, la pregunta en tornasol flotando, el selector Máscara | Voz, una fila de aros y abajo
   ↻ · grabar · ✎. Sin vidrio esmerilado ni cajas. La cámara sigue entera (contain): lo que se ve al
   grabar es lo que se publica (anonimato.md, A3). */
#pantalla-grabar.historia.cromo {
  --cromo: linear-gradient(180deg, #fff7ea 0%, #d9c3a6 45%, #f6e6cc 55%, #b7967a 100%);
  --cromo-texto: #1c0f1a;
}
#pantalla-grabar.historia.cromo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(8, 5, 9, 0) 45%, rgba(8, 5, 9, 0.65) 85%);
}
#pantalla-grabar.historia.cromo .y-chip, #pantalla-grabar.historia.cromo #grabar-volver {
  display: inline-grid; place-items: center; min-height: 0; padding: 7px 12px; border: 0; border-radius: 999px;
  font: 800 0.78rem system-ui, -apple-system, sans-serif; color: var(--cromo-texto); text-decoration: none;
  background: var(--cromo); box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(0, 0, 0, 0.4); cursor: pointer;
}
#pantalla-grabar.historia.cromo #grabar-volver { width: 40px; height: 40px; padding: 0; font-size: 1rem; }
#pantalla-grabar.historia.cromo .foro-cabecera { justify-content: space-between; left: 14px; right: 14px; top: calc(14px + env(safe-area-inset-top, 0px)); }
#pantalla-grabar.historia.cromo .y-tiempo { font-variant-numeric: tabular-nums; }
#pantalla-grabar.historia.cromo .y-tiempo.grabando::before { content: "●"; color: #d92f55; margin-right: 6px; }
#pantalla-grabar.historia.cromo #mascara-tag, #pantalla-grabar.historia.cromo #grabando { display: none; }
#pantalla-grabar.historia.cromo .y-chip.r { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 1rem; }

/* La pregunta, flotando abajo y al centro, arriba del selector. */
#pantalla-grabar.historia.cromo .pregunta-card {
  top: auto; left: 16px; right: 16px; bottom: calc(222px + env(safe-area-inset-bottom, 0px));
  padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  text-align: center;
}
#pantalla-grabar.historia.cromo .pregunta-card::before, #pantalla-grabar.historia.cromo .pregunta-card::after { display: none; }
#pantalla-grabar.historia.cromo .pregunta-tema { margin: 0; font: 800 0.7rem/1 system-ui, -apple-system, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #ffd7a8; }
#pantalla-grabar.historia.cromo .pregunta-tema > span:first-child { display: none; }
#pantalla-grabar.historia.cromo #pregunta-tema-caja { font-size: 0; }
#pantalla-grabar.historia.cromo #pregunta-tema-caja::before { content: "✦ "; font-size: 0.7rem; }
#pantalla-grabar.historia.cromo #pregunta-tema-caja::after { content: " ✦"; font-size: 0.7rem; }
#pantalla-grabar.historia.cromo .pregunta-card .pregunta-tema #pregunta-tema {
  font-size: 0.7rem; padding: 0; border: 0; background: none; color: #ffd7a8; letter-spacing: 0.18em;
}
#pantalla-grabar.historia.cromo .pregunta-texto, #pantalla-grabar.historia.cromo #respuesta-texto {
  margin: 8px 0 0; font: 900 1.6rem/1.08 "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif; letter-spacing: -0.02em;
  background: linear-gradient(175deg, #fffaf0 0%, #f2d7b0 30%, #b88a6a 46%, #fbe9d0 54%, #d9a9c9 72%, #fff3e3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(40, 15, 35, 0.6)); text-wrap: balance;
}
#pantalla-grabar.historia.cromo .pregunta-pie { justify-content: center; margin-top: 6px; }
#pantalla-grabar.historia.cromo #pregunta-otra, #pantalla-grabar.historia.cromo #pregunta-propia { display: none; }
#pantalla-grabar.historia.cromo #pregunta-edad { font-size: 0.78rem; text-shadow: 0 1px 2px #000; }
#pantalla-grabar.historia.cromo .pregunta-mia input { text-align: center; background: rgba(8, 5, 9, 0.55); }
#pantalla-grabar.historia.cromo #respuesta-card {
  top: auto; left: 16px; right: 16px; bottom: calc(222px + env(safe-area-inset-bottom, 0px));
  padding: 0; background: none; text-align: center; -webkit-backdrop-filter: none; backdrop-filter: none;
}
#pantalla-grabar.historia.cromo #respuesta-texto { font-size: 1.25rem; }

/* El selector Máscara | Voz y una sola fila de aros. */
#pantalla-grabar.historia.cromo .look-picker {
  bottom: calc(108px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px;
}
#pantalla-grabar.historia.cromo .y-seg {
  display: inline-flex; padding: 3px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 247, 234, 0.18), rgba(183, 150, 122, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 0.5px rgba(255, 235, 205, 0.35);
}
#pantalla-grabar.historia.cromo .y-seg button {
  min-height: 30px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: #f4ede2;
  font: 800 0.74rem system-ui, -apple-system, sans-serif; cursor: pointer;
}
#pantalla-grabar.historia.cromo .y-seg button[aria-pressed="true"] { color: var(--cromo-texto); background: var(--cromo); box-shadow: inset 0 1px 0 #fff; }
#pantalla-grabar.historia.cromo .y-seg button:focus-visible { outline: 2px solid #ffd7a8; outline-offset: 2px; }
#pantalla-grabar.historia.cromo .look-picker:not(.ver-voz) #voces,
#pantalla-grabar.historia.cromo .look-picker.ver-voz #mascaras,
#pantalla-grabar.historia.cromo .look-picker.ver-voz .fondo-lugar,
#pantalla-grabar.historia.cromo .look-picker.ver-voz .fondo-opcion { display: none; }
#pantalla-grabar.historia.cromo .look-picker .chips { width: 100%; justify-content: safe center; gap: 10px; padding: 2px 12px; }
#pantalla-grabar.historia.cromo .look-picker .chip.mascara-boton { gap: 3px; padding: 0; min-width: 40px; }
#pantalla-grabar.historia.cromo .look-picker .mascara-icono {
  width: 40px; height: 40px; padding: 2px; border-radius: 50%; border: 0; opacity: 0.85;
  background: linear-gradient(180deg, #fff2df, #a98a70 50%, #f1dcc0); box-shadow: none;
}
#pantalla-grabar.historia.cromo .look-picker .mascara-icono img { border-radius: 50%; }
#pantalla-grabar.historia.cromo .look-picker .mascara-icono[data-ia]::after { display: none; }
#pantalla-grabar.historia.cromo .look-picker .chip.mascara-boton[aria-pressed="true"] .mascara-icono {
  opacity: 1; padding: 3px; box-shadow: none; background: conic-gradient(from 0deg, #ffb46b, #fff3e3, #d9a9c9, #ffb46b);
}
/* Las máscaras sin nombre (como en la referencia); las voces, con el nombre chico abajo. */
#pantalla-grabar.historia.cromo #mascaras .mascara-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#pantalla-grabar.historia.cromo #voces .mascara-nombre { font: 700 0.6rem system-ui, -apple-system, sans-serif; color: #e9d9c4; letter-spacing: 0.02em; }
#pantalla-grabar.historia.cromo #mascara-estado { margin: 0; font-size: 0.72rem; text-align: center; }
#pantalla-grabar.historia.cromo .identidad { padding: 0; text-align: center; }
#pantalla-grabar.historia.cromo .identidad > summary { font-size: 0.7rem; opacity: 0.85; }
#pantalla-grabar.historia.cromo .fondo-opcion { padding: 0; }
#pantalla-grabar.historia.cromo .fondo-interruptor { min-height: 0; padding: 4px 12px; font-size: 0.72rem; background: rgba(8, 5, 9, 0.45); }
#pantalla-grabar.historia.cromo .fondo-nota { display: none; }

/* Abajo: ↻ · grabar · ✎. El de grabar: aro cónico metálico y centro rojo; grabando, un cuadrado. */
#pantalla-grabar.historia.cromo .actions { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); gap: 24px; }
#pantalla-grabar.historia.cromo #boton-grabar {
  position: relative; width: 76px; height: 76px; padding: 5px; border: 0; border-radius: 50%; font-size: 0; color: transparent;
  background: radial-gradient(circle at 40% 30%, #ff9aa8, #d92f55 70%) content-box, conic-gradient(from 210deg, #fff7ea, #b7967a, #f6e6cc, #8e6d57, #fff7ea) border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.5);
}
#pantalla-grabar.historia.cromo.grabando #boton-grabar { background: rgba(8, 5, 9, 0.35) content-box, conic-gradient(from 210deg, #fff7ea, #b7967a, #f6e6cc, #8e6d57, #fff7ea) border-box; }
#pantalla-grabar.historia.cromo.grabando #boton-grabar::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 7px;
  background: radial-gradient(circle at 40% 30%, #ff9aa8, #d92f55 70%);
}
#pantalla-grabar.historia.cromo.grabando #y-otra, #pantalla-grabar.historia.cromo.grabando #y-mia,
#pantalla-grabar.historia.cromo.con-video #y-otra, #pantalla-grabar.historia.cromo.con-video #y-mia,
#pantalla-grabar.historia.cromo.respondiendo #y-otra, #pantalla-grabar.historia.cromo.respondiendo #y-mia { visibility: hidden; }
#pantalla-grabar.historia.cromo.grabando .pregunta-card { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }

/* La columna de abajo (foro.js, .y-pie): cada parte en su lugar, sin posiciones sueltas. */
#pantalla-grabar.historia.cromo .y-pie {
  position: absolute; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; pointer-events: none;
}
#pantalla-grabar.historia.cromo .y-pie > * { pointer-events: auto; }
#pantalla-grabar.historia.cromo .y-pie > .pregunta-card,
#pantalla-grabar.historia.cromo .y-pie > #respuesta-card,
#pantalla-grabar.historia.cromo .y-pie > .look-picker,
#pantalla-grabar.historia.cromo .y-pie > .actions { position: static; left: auto; right: auto; top: auto; bottom: auto; width: 100%; margin: 0; }
#pantalla-grabar.historia.cromo .y-pie > .look-picker { gap: 6px; }
#pantalla-grabar.historia.cromo .y-pie > .actions { margin-top: 4px; }
#pantalla-grabar.historia.cromo.grabando .y-pie > .pregunta-card { display: block; }
/* El video entero, pegado arriba (debajo de los chips): queda más lugar abajo para la columna. */
#pantalla-grabar.historia.cromo #vista, #pantalla-grabar.historia.cromo #repaso { object-position: 50% 12%; }

/* El aviso de las preguntas que piden contar algo que pasó (Backend, contar: true). */
.pregunta-contar { margin: 6px 0 0; font-size: 0.82rem; color: var(--muted); }
#pantalla-grabar.historia.cromo .pregunta-contar { color: #e9d9c4; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); text-align: center; }

/* ------------------------------------------------------------------ El video entero, con fondo borroso (10 nov)
   Leandra: "videos should stay shown their full width, if theres empty spaces, use a blurred out version of the
   video to fill out the background". fondo-video.js envuelve el video en .video-fondo y pone detrás un lienzo
   chiquito con el mismo cuadro (al agrandarlo queda borroso). El video, entero (contain). */
.video-fondo { position: relative; display: block; width: 100%; overflow: hidden; background: #0d0b10; border-radius: inherit; isolation: isolate; }
.video-fondo-lienzo { position: absolute; inset: -6%; width: 112%; height: 112%; z-index: 0; opacity: 0.9; }
.video-fondo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(8, 5, 9, 0.3); }
.video-fondo > video.con-fondo { position: relative; z-index: 2; display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; background: transparent; border-radius: 0; }

.post-cuerpo .video-fondo, .clip .video-fondo { aspect-ratio: 4 / 5; max-height: 72vh; border-radius: 10px; }
.comentario-video .video-fondo { max-width: 320px; aspect-ratio: 4 / 5; max-height: 400px; border-radius: 12px; }
.debate-del-hilo .debate-lado .video-fondo { aspect-ratio: 3 / 4; border-radius: 10px; }
/* En los reels: la pantalla entera. */
.reel-marco > .video-fondo, .reel-marco > .tapado-desnudez > .video-fondo { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; border-radius: 0; }
.reels .video-fondo > .reel-video.con-fondo { position: absolute; inset: 0; object-fit: contain; }
.reels[data-estilo="vidrio"] .video-fondo > .reel-video.con-fondo { transform: translateY(calc(var(--p) * -18%)); }

/* ------------------------------------------------------------------ El post como reel (10 nov)
   Leandra: "when you go to a post, it should also show like the reels aesthetic, but then you can scroll down
   and see the replies. turn the buttons… as little round miniatures in a reel format". El video a todo el
   ancho de la tarjeta (con el fondo borroso de fondo-video.js) y, al costado, la columna de íconos redondos
   de 44 px con su etiqueta corta (data-corto), como en los reels (Dirección estética). Las etiquetas
   largas quedan para lectores de pantalla. La columna va arriba de los controles del video. */
.post-cuerpo.con-reel { gap: 10px; }
.post-reel { position: relative; margin: 0 -14px; }
.post-reel .video-fondo { aspect-ratio: 9 / 14; max-height: 78vh; border-radius: 0; }
.post-reel > .tapado-desnudez { border-radius: 0; }
.post-columna {
  position: absolute; right: 8px; bottom: 64px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none;
}
.post-columna > * { pointer-events: auto; }
.post-columna .formas-responder, .post-columna .acciones { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; background: none; }
.post-columna .formas-responder > .note, .post-columna .debatir-estado:empty { display: none; }
.post-columna .forma, .post-columna .btn, .post-columna .acciones > button {
  display: grid; justify-items: center; gap: 3px; width: auto; min-width: 56px; min-height: 0; padding: 0; margin: 0;
  border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #fffaf3; font-size: 0; text-decoration: none; cursor: pointer; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.post-columna .forma::after, .post-columna .btn::after, .post-columna .acciones > button::after {
  content: attr(data-corto); font-size: 0.72rem; font-weight: 600; line-height: 1.1; max-width: 64px; text-align: center;
}
.post-columna .forma.debatir::after { content: "Debatir"; }
.post-columna .forma:not(.debatir):not([data-corto])::after { content: "Responder"; }
.post-columna svg, .post-columna .post-cc::before {
  box-sizing: border-box; width: 44px; height: 44px; padding: 11px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08), rgba(12, 11, 16, 0.55); background-color: rgba(12, 11, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14); color: #fffaf3; stroke: currentColor;
}
.post-columna .post-cc::before { content: "CC"; display: grid; place-items: center; padding: 0; font-size: 0.82rem; font-weight: 800; }
.post-columna .post-cc[aria-pressed="false"]::before { opacity: 0.6; }
.post-columna .forma.debatir svg { box-shadow: 0 0 0 2px #0d0b10, 0 0 0 4px #ffb46b; }
.post-columna .forma.debatir .punto-ahora { position: absolute; top: 0; right: 6px; }
.post-columna .forma.debatir { position: relative; }
.post-columna [aria-disabled="true"] { opacity: 0.55; }
.post-columna .escribirle[hidden] { display: none; }
/* En el hilo, el botón de sonido flotante no hace falta: está en la columna. */
body:has(#vista-hilo:not([hidden]) .post-sonido) .auto-sonido { display: none !important; }
/* Las respuestas en video, con el mismo estilo: a todo el ancho y con el fondo borroso. */
.comentario-video .video-fondo { max-width: none; width: 100%; aspect-ratio: 9 / 14; max-height: 70vh; border-radius: 12px; }
/* Ajustes del post como reel: ganarles a las reglas de .btn, .forma y .compartir del foro. */
#hilo-post .post-columna { gap: 8px; bottom: 58px; }
#hilo-post .post-columna .formas-responder, #hilo-post .post-columna .acciones { gap: 8px; }
#hilo-post .post-columna button { font-size: 0 !important; min-height: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
#hilo-post .post-columna button > span:not(.punto-ahora) { display: none !important; }
#hilo-post .post-columna button::after { font-size: 0.68rem !important; }
#hilo-post .post-columna button > svg {
  width: 40px !important; height: 40px !important; padding: 10px !important; margin: 0 !important; filter: none !important;
  border-radius: 50% !important; background-color: rgba(12, 11, 16, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fffaf3 !important; stroke: currentColor !important; fill: none !important;
}
#hilo-post .post-columna .post-cc::before { width: 40px; height: 40px; }
#hilo-post .post-columna button { display: grid !important; justify-items: center; gap: 3px; width: auto !important; }

/* ------------------------------------------------------------------ Rediseño de la app (10 nov)
   Elegido por Leandra («la A pero que la B sea como se ve la sección explorar»); maqueta de Dirección
   estética: 02_marca/rediseno_ui/propuesta_ui.html. Barra fija abajo (Inicio · Explorar · Grabar ·
   Debates · Yo), Inicio = «Para vos» en reels, Explorar = la pregunta de hoy, lo último y las categorías. */
#pantalla-foro { --rd-card: #19161c; --rd-luz: #c98bbb; --rd-cromo: linear-gradient(180deg, #fff7ea 0%, #d9c3a6 45%, #f6e6cc 55%, #b7967a 100%); }
#pantalla-foro, #pantalla-foro:not(.en-hilo) { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
#pantalla-foro:not(.en-hilo)::after { height: 96px; }

/* La barra de abajo. */
.tabbar {
  position: fixed; z-index: 65; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100% - 20px)); height: 68px; box-sizing: border-box; padding: 0 6px;
  display: flex; align-items: center; justify-content: space-around;
  border-radius: 26px; background: rgba(25, 22, 28, 0.82); border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
#pantalla-foro[hidden] .tabbar, html.en-reels:not(.reels-inicio) .tabbar { display: none; }
.tabbar .tab {
  flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0; border: 0; background: none; color: #8f8496; font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer;
}
.tabbar .tab .ico, .tabbar .tab svg { width: 24px; height: 24px; }
.tabbar .tab.on { color: var(--text); }
.tabbar .tab.on .ico, .tabbar .tab.on svg { color: var(--rd-luz); filter: drop-shadow(0 0 6px rgba(201, 139, 187, 0.55)); }
.tabbar .tab:focus-visible, .tabbar .tab-grabar:focus-visible { outline: 2px solid var(--rd-luz); outline-offset: 2px; border-radius: 14px; }
.tabbar .tab-grabar {
  flex: none; width: 58px; height: 58px; margin: -22px 4px 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: conic-gradient(#fff7ea, #b7967a, #f6e6cc, #a98a70, #fff7ea);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(13, 11, 16, 0.9);
}
.tabbar .tab-grabar .ico, .tabbar .tab-grabar > svg { display: none; }
.tabbar .tab-grabar-centro { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff8fa0, #d4294f 70%); }
.tabbar .tab-grabar:active { transform: scale(0.96); }

/* Yo: la cuenta, «Mis opiniones», pedidos y charlas. En las otras pestañas, esas cajas no se ven
   (salvo «Mi cuenta» abierta por algo que la pidió, como debatir sin cuenta). */
#pantalla-foro:not([data-tab="yo"]) #foro-cuenta-plegable:not([open]),
#pantalla-foro:not([data-tab="yo"]) #foro-mios-plegable,
#pantalla-foro:not([data-tab="yo"]) #foro-pedidos-plegable,
#pantalla-foro:not([data-tab="yo"]) #foro-debates-aviso { display: none; }
#pantalla-foro[data-tab="yo"] #migas, #pantalla-foro[data-tab="yo"] #cat-chips,
#pantalla-foro[data-tab="yo"] #vista-indice, #pantalla-foro[data-tab="yo"] #foro-estado { display: none; }

/* Inicio («Para vos»): los reels de todas, con la barra de abajo encima. */
html.reels-inicio #pantalla-foro .foro-cabecera {
  position: fixed; z-index: 66; top: calc(8px + env(safe-area-inset-top, 0px)); right: 12px; left: auto; padding: 0; background: none;
}
html.reels-inicio #pantalla-foro .foro-cabecera .marca { display: none; }
.reels.inicio .reels-barra { justify-content: center; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.reels-pestanas { display: flex; gap: 18px; }
.reels-pestana {
  padding: 2px 0; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  color: rgba(244, 237, 226, 0.6); font: inherit; font-size: 15px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.reels-pestana.on { color: var(--text); border-bottom-color: var(--text); }
.reels.inicio .reel-sombra { height: 58%; }
.reels.inicio .reel-info { right: 80px; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
.reels.inicio .reel-titulo { font-family: Nunito, system-ui, sans-serif; font-weight: 900; font-size: 24px; line-height: 1.12; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.reels.inicio .reel-cat { font-weight: 700; font-size: 12px; padding: 5px 10px; background: rgba(36, 31, 40, 0.7); border-color: rgba(255, 255, 255, 0.12); }
.reels.inicio .reel-quien { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reel-av {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, #5b2350, #2a1f30); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 11px; font-weight: 800; color: var(--text);
}
.reel-progreso { height: 3px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.reel-progreso i { display: block; height: 100%; width: 0; background: var(--text); border-radius: 3px; transition: width 0.25s linear; }
.reels.inicio .reel-subs { bottom: calc(250px + env(safe-area-inset-bottom, 0px)); right: 80px; }
.reels.inicio .reel-acciones { right: 8px; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); gap: 12px; }
.reels.inicio .reel-accion { font-weight: 700; font-size: 11px; }
/* Votar: solo ▲ con su número, en el mismo círculo de vidrio. */
.reels.inicio .reel-votos { display: grid; justify-items: center; gap: 0; }
.reels.inicio .reel-votos .voto.abajo { display: none; }
.reels.inicio .reel-votos .voto.arriba {
  display: grid; justify-items: center; gap: 3px; min-width: 56px; min-height: 0; padding: 0; border: 0; background: none;
  color: #fffaf3; font: inherit; font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.reels.inicio .reel-votos .voto.arriba .flecha {
  box-sizing: border-box; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 1.05rem;
  background: var(--vidrio), rgba(12, 11, 16, 0.55); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-brillo);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.reels.inicio .reel-votos .voto.arriba[aria-pressed="true"] { color: var(--rd-luz); background: none; }
.reels.inicio .reel-votos .voto.arriba[aria-pressed="true"] .flecha { border-color: var(--rd-luz); box-shadow: 0 0 14px rgba(201, 139, 187, 0.45); }
.reels.inicio .reel-votos .voto:disabled { opacity: 0.75; }
/* Debatir, en dorado. */
.reels.inicio .reel-accion.debatir svg { border-color: var(--oro); color: var(--oro); box-shadow: 0 0 14px rgba(255, 180, 107, 0.35); }
.reels.inicio .reel-accion.debatir { color: var(--oro); }
/* «···» y su menú. */
.reel-mas-puntos {
  box-sizing: border-box; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 1.15rem; font-weight: 900; letter-spacing: 1px;
  background: var(--vidrio), rgba(12, 11, 16, 0.55); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-brillo);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.reel-menu {
  position: absolute; right: 64px; bottom: 0; z-index: 4; min-width: 200px; padding: 6px; display: grid;
  border-radius: 16px; background: rgba(25, 22, 28, 0.94); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.reel-menu[hidden] { display: none; }
.reel-menu button {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer;
  color: var(--text); font: inherit; font-size: 0.92rem; font-weight: 600;
}
.reel-menu button:hover, .reel-menu button:focus-visible { background: rgba(244, 237, 226, 0.08); outline: none; }

/* Explorar: la pregunta de hoy. */
#pantalla-foro:not([data-tab="explorar"]) #pregunta-hoy { display: none; }
.hero-hoy {
  margin: 4px 0 14px; padding: 20px 18px; border-radius: 26px; text-align: center;
  background: linear-gradient(160deg, rgba(91, 35, 80, 0.55), rgba(25, 22, 28, 0.9) 60%); border: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-hoy[hidden] { display: none; }
.hero-hoy-ojo { margin: 0; color: var(--oro); letter-spacing: 0.2em; font-weight: 800; font-size: 10.5px; text-transform: uppercase; }
.hero-hoy-texto {
  margin: 10px 0 14px; font-family: Nunito, system-ui, sans-serif; font-weight: 900; font-size: 22px; line-height: 1.15;
  background: linear-gradient(175deg, #fffaf0, #f2d7b0 30%, #b88a6a 46%, #fbe9d0 54%, #d9a9c9 72%, #fff3e3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-hoy-boton {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 11px 18px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--rd-cromo); color: #1c0f1a; font: inherit; font-size: 14px; font-weight: 800;
}
.hero-hoy-boton .ico, .hero-hoy-boton svg { width: 18px; height: 18px; color: #5b2350; }

/* Explorar: «Lo último» en tarjetas verticales de 150 px, con el texto encima del video. */
#pantalla-foro[data-tab="explorar"] .recientes-tarjetas #recientes:not(.expandido) > li.fila-hilo {
  flex: 0 0 150px; position: relative; isolation: isolate; min-height: 232px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 34px 10px 9px;
  border-radius: 18px; background: var(--rd-card); border: 1px solid rgba(255, 255, 255, 0.08);
}
#pantalla-foro[data-tab="explorar"] .recientes-tarjetas #recientes:not(.expandido) > li.fila-hilo .miniatura {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0;
}
#pantalla-foro[data-tab="explorar"] .recientes-tarjetas #recientes:not(.expandido) > li.fila-hilo::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 70%; z-index: -1; pointer-events: none;
  background: linear-gradient(transparent, rgba(13, 11, 16, 0.95));
}
#pantalla-foro[data-tab="explorar"] .recientes-tarjetas #recientes:not(.expandido) > li.fila-hilo .titulo {
  padding: 0; font-family: Nunito, system-ui, sans-serif; font-size: 13px; font-weight: 800; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#pantalla-foro[data-tab="explorar"] .recientes-tarjetas #recientes:not(.expandido) > li.fila-hilo .por,
#pantalla-foro[data-tab="explorar"] .recientes-tarjetas #recientes:not(.expandido) > li.fila-hilo .numeros { padding: 0; font-size: 10.5px; }
#pantalla-foro[data-tab="explorar"] .recientes-tarjetas #recientes:not(.expandido) > li.fila-hilo .por {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pantalla-foro[data-tab="explorar"] .recientes-tarjetas #recientes:not(.expandido) > li.fila-hilo .duracion { top: 8px; bottom: auto; right: 8px; font-weight: 700; font-size: 10.5px; }
#pantalla-foro[data-tab="explorar"] .recientes-tarjetas #recientes:not(.expandido) > li.fila-hilo .mini-play { display: none; }
#pantalla-foro[data-tab="explorar"] .recientes-tarjetas #recientes:not(.expandido) > li.ver-todo { flex: 0 0 104px; }

/* Explorar: las categorías en una grilla de 3. */
#pantalla-foro[data-tab="explorar"] #categorias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
#pantalla-foro[data-tab="explorar"] #categorias .fila-cat {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: var(--rd-card);
}
#pantalla-foro[data-tab="explorar"] #categorias .fila-cat:hover, #pantalla-foro[data-tab="explorar"] #categorias .fila-cat:focus-within { background: #221d27; }
#pantalla-foro[data-tab="explorar"] #categorias .fila-cat .icono { width: 40px; height: 40px; }
#pantalla-foro[data-tab="explorar"] #categorias .fila-cat .icono .ico, #pantalla-foro[data-tab="explorar"] #categorias .fila-cat .icono svg { color: var(--rd-luz); }
#pantalla-foro[data-tab="explorar"] #categorias .fila-cat a.nombre { font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; }
#pantalla-foro[data-tab="explorar"] #categorias .fila-cat .desc,
#pantalla-foro[data-tab="explorar"] #categorias .fila-cat .ultima { display: none; }
#pantalla-foro[data-tab="explorar"] #categorias .fila-cat .numeros { font-size: 10px; }
/* Explorar, como la maqueta: sin «Foro» ni los chips arriba (las categorías están en la grilla y Debates en la
   barra), y «Lo último» / «Categorías» como títulos sueltos, sin la barra de tablero. */
#pantalla-foro[data-tab="explorar"]:has(#vista-indice:not([hidden])) #migas,
#pantalla-foro[data-tab="explorar"]:has(#vista-indice:not([hidden])) #cat-chips { display: none; }
#pantalla-foro[data-tab="explorar"] #vista-indice .tablero { background: none; border: 0; box-shadow: none; overflow: visible; }
#pantalla-foro[data-tab="explorar"] #vista-indice .tablero::before, #pantalla-foro[data-tab="explorar"] #vista-indice .tablero::after { display: none; }
#pantalla-foro[data-tab="explorar"] #vista-indice .tablero-barra {
  margin: 18px 2px 10px; padding: 0; background: none; border: 0; box-shadow: none; text-align: left;
  font-family: Nunito, system-ui, sans-serif; font-size: 16px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--text);
}
#pantalla-foro[data-tab="explorar"] .recientes-tarjetas #recientes:not(.expandido) { padding: 0 0 4px; }
#pantalla-foro[data-tab="explorar"] #categorias { padding: 0; }
#pantalla-foro[data-tab="explorar"] #categorias .fila-cat .numeros .resp { display: none; }
#pantalla-foro[data-tab="explorar"] #vista-indice .hero-hoy { margin-top: 10px; }

/* Categoría (rediseño, «Van como están»): sin el logo, «Foro» ni chips arriba; volver y el nombre, la
   cabecera con el ícono de 68 px y los números en dorado, el orden de una línea y la grilla de 2. */
#pantalla-foro:has(#vista-categoria:not([hidden])) > .foro-cabecera,
#pantalla-foro:has(#vista-categoria:not([hidden])) #migas,
#pantalla-foro:has(#vista-categoria:not([hidden])) #cat-chips { display: none; }
.btn-redondo {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(36, 31, 40, 0.75); color: var(--text);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn-redondo .ico, .btn-redondo svg { width: 20px; height: 20px; }
.cat-top { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; margin: 8px 0 14px; }
.cat-top-nombre { text-align: center; font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 20px; }
.cat-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.cat-hero-ico {
  flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; color: var(--rd-luz); font-size: 34px;
  background: linear-gradient(160deg, rgba(91, 35, 80, 0.7), #19161c); border: 1px solid rgba(255, 255, 255, 0.12);
}
.cat-hero-ico .ico, .cat-hero-ico svg { width: 34px; height: 34px; }
.cat-hero-texto { min-width: 0; }
.cat-hero #categoria-titulo { margin: 0; font-family: Nunito, system-ui, sans-serif; font-weight: 900; font-size: 24px; line-height: 1.1; }
.cat-hero #categoria-titulo:focus { outline: none; }
.cat-hero .tablero-desc { padding: 2px 0 0; border: 0; color: var(--muted); font-size: 13px; }
.cat-hero-num { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.cat-hero-num strong { color: var(--oro); }
.orden.segm {
  display: flex; gap: 0; margin: 0 0 14px; padding: 4px; border-radius: 14px; background: #241f28; border: 1px solid rgba(255, 255, 255, 0.06); overflow: visible;
}
.orden.segm .chip {
  flex: 1 1 0; min-width: 0; min-height: 36px; padding: 8px 4px; border: 0; border-radius: 10px; background: none; box-shadow: none;
  color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-transform: none; letter-spacing: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.orden.segm .chip::before, .orden.segm .chip::after { display: none; }
.orden.segm .chip[aria-pressed="true"] { background: var(--text); color: #141016; font-weight: 800; }
#lista.grid-v { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#lista.grid-v > li.fila-vacia { grid-column: 1 / -1; }
#lista.grid-v > li.gv {
  position: relative; isolation: isolate; height: 200px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 30px 9px 8px;
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: var(--rd-card);
}
#lista.grid-v > li.gv:nth-child(even) { background: var(--rd-card); }
#lista.grid-v > li.gv .miniatura { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
#lista.grid-v > li.gv::after { content: ''; position: absolute; inset: auto 0 0 0; height: 70%; z-index: -1; pointer-events: none; background: linear-gradient(transparent, rgba(13, 11, 16, 0.92)); }
#lista.grid-v > li.gv .mini-play { display: none; }
#lista.grid-v > li.gv .duracion { top: 8px; right: 8px; bottom: auto; font-weight: 700; font-size: 10.5px; }
#lista.grid-v > li.gv .titulo {
  padding: 0; font-family: Nunito, system-ui, sans-serif; font-size: 13px; font-weight: 800; line-height: 1.15; text-shadow: 0 1px 8px #000;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#lista.grid-v > li.gv .por { display: none; }
#lista.grid-v > li.gv .numeros { padding: 0; font-size: 11px; }
#lista.grid-v > li.gv .numeros .arriba { color: var(--rd-luz); }
#lista.grid-v > li.gv .numeros .abajo, #lista.grid-v > li.gv .numeros > :not(.arriba) { display: none; }
#lista.grid-v > li.gv .numeros { font-size: 0; }
#lista.grid-v > li.gv .numeros .arriba { font-size: 11px; }
#lista.grid-v > li.gv .con-debates, #lista.grid-v > li.gv .con-desnudez { padding: 0; }
.fab-opinar {
  position: fixed; z-index: 64; right: max(16px, calc(50% - 244px)); bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 12px 16px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--rd-cromo); color: #1c0f1a; font: inherit; font-size: 13.5px; font-weight: 800; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.fab-opinar .ico, .fab-opinar svg { width: 18px; height: 18px; color: #5b2350; }
#vista-categoria[hidden] .fab-opinar, html.en-reels .fab-opinar { display: none; }

/* «Una opinión» (rediseño): el video quieto arriba (62% del alto) y la hoja de las respuestas que sube por
   encima desde el 44%. Sin logo, «Foro» ni barra de abajo: volver, la categoría y «···» van sobre el video. */
#pantalla-foro.en-hilo:has(#vista-hilo.op) > .foro-cabecera,
#pantalla-foro.en-hilo:has(#vista-hilo.op) #migas,
#pantalla-foro.en-hilo .tabbar { display: none; }
#pantalla-foro.en-hilo:has(#vista-hilo.op) { padding-bottom: 0; }
#pantalla-foro.en-hilo:has(#vista-hilo.op)::after { display: none; }
#vista-hilo.op #hilo-post { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#vista-hilo.op #hilo-post::before, #vista-hilo.op #hilo-post::after { display: none; }
.op-escena {
  position: fixed; z-index: 0; top: 0; left: 50%; transform: translateX(-50%); width: min(100vw, 760px); height: 62vh; height: 62dvh;
  overflow: hidden; background: #050407;
}
.op-escena > .tapado-desnudez, .op-escena > video, .op-escena > .video-fondo, .op-escena .tapado-desnudez > .video-fondo {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; border-radius: 0;
}
.op-escena video { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.op-sombra { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 4, 7, 0.55) 0%, rgba(5, 4, 7, 0) 22%, rgba(5, 4, 7, 0) 60%, rgba(5, 4, 7, 0.55) 100%); }
.op-top {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; right: 14px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.op-chip {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 10px; border-radius: 99px; text-decoration: none;
  color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(36, 31, 40, 0.7); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.op-chip .titulo-icono svg, .op-chip .titulo-icono .ico { width: 14px; height: 14px; color: var(--rd-luz); }
.op-mas-lugar { position: relative; }
.op-mas-puntos { font-size: 1rem; font-weight: 900; letter-spacing: 1px; }
.op-menu {
  position: absolute; top: 46px; right: 0; z-index: 5; min-width: 230px; padding: 6px; display: grid;
  border-radius: 16px; background: rgba(25, 22, 28, 0.96); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.op-menu[hidden] { display: none; }
.op-menu .btn, .op-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; margin: 0; border: 0; border-radius: 10px;
  background: none; box-shadow: none; color: var(--text); font: inherit; font-size: 0.92rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.op-menu .btn::before, .op-menu .btn::after { display: none; }
.op-menu button:hover, .op-menu button:focus-visible { background: rgba(244, 237, 226, 0.08); outline: none; }
.op-menu .ico, .op-menu svg { width: 18px; height: 18px; color: var(--rd-luz); flex: none; }
.op-menu .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: nowrap; }
.op-menu [data-corto]::after { content: none; }
.op-acciones {
  position: absolute; right: 14px; bottom: calc(18vh + 14px); bottom: calc(18dvh + 14px); z-index: 3;
  display: flex; flex-direction: row; align-items: center; gap: 8px;
}
.op-acciones .note { display: none; }
.op-acciones .votos.op-votos { display: flex; gap: 0; }
.op-acciones .votos .voto.abajo { display: none; }
.op-acciones .votos .voto.arriba, .op-acciones .debatir, .op-acciones .op-compartir {
  display: inline-flex; align-items: center; gap: 5px; min-height: 40px; height: 40px; padding: 0 12px 0 0; margin: 0; border: 0; border-radius: 99px;
  background: none; box-shadow: none; color: var(--text); font: inherit; font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); cursor: pointer;
}
.op-acciones .debatir::before, .op-acciones .debatir::after, .op-acciones .op-compartir::before, .op-acciones .op-compartir::after { display: none; }
.op-acciones .voto.arriba .flecha, .op-acciones .debatir svg, .op-acciones .op-compartir svg {
  box-sizing: border-box; display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; border-radius: 50%; flex: none;
  background: rgba(20, 16, 22, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.op-acciones .voto.arriba .flecha { font-size: 0.95rem; }
.op-acciones .voto.arriba[aria-pressed="true"] .flecha { border-color: var(--rd-luz); color: var(--rd-luz); }
.op-acciones .debatir { color: var(--oro); }
.op-acciones .debatir svg { border-color: var(--oro); color: var(--oro); box-shadow: 0 0 14px rgba(255, 180, 107, 0.35); }
.op-acciones .debatir .debatir-texto, .op-acciones .debatir .punto-ahora + .debatir-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.op-acciones .debatir .punto-ahora { position: absolute; top: 2px; left: 30px; }
.op-acciones .debatir { position: relative; }
.op-acciones .op-compartir { padding-right: 0; }
.op-acciones .op-compartir span:not(.sr-only) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.op-acciones [data-corto]::after { content: none; }
/* La hoja. */
#vista-hilo.op .op-cabeza, #vista-hilo.op > .tablero {
  position: relative; z-index: 1; margin: 0; background: rgba(19, 16, 22, 0.94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
#vista-hilo.op .op-cabeza {
  margin-top: 44vh; margin-top: 44dvh; padding: 8px 16px 0; border-radius: 26px 26px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.op-asa { display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); }
#vista-hilo.op #hilo-titulo { margin: 0 0 6px; font-family: Nunito, system-ui, sans-serif; font-weight: 900; font-size: 19px; line-height: 1.15; }
#vista-hilo.op #hilo-titulo:focus { outline: none; }
.op-autor { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0; color: var(--muted); font-size: 12.5px; }
.op-autor .nombre { margin-left: 3px; color: var(--muted); }
.op-av, .com-av {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: #5b2350; color: var(--text); font-size: 12px; font-weight: 800;
}
#vista-hilo.op .op-cabeza .formas-responder { margin: 10px 0 0; }
#vista-hilo.op > .tablero { min-height: 56vh; min-height: 56dvh; padding: 0 16px 0; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; overflow: visible; }
#vista-hilo.op > .tablero::before, #vista-hilo.op > .tablero::after { display: none; }
#vista-hilo.op > .tablero > .tablero-barra {
  order: 0; margin: 12px 0 8px; padding: 0; background: none; border: 0; box-shadow: none; display: flex; align-items: baseline; justify-content: space-between;
}
#vista-hilo.op #respuestas-titulo { font-family: Nunito, system-ui, sans-serif; font-size: 16px; font-weight: 800; text-transform: none; letter-spacing: 0; }
#vista-hilo.op .orden-select select { border: 0; background: none; color: var(--rd-luz); font: inherit; font-size: 13px; font-weight: 600; padding: 4px 0; }
#vista-hilo.op #hilo-debates { order: 1; }
#vista-hilo.op #comentarios { order: 2; padding: 0 0 8px; }
#vista-hilo.op #comentarios-vacio, #vista-hilo.op #comentar-no { order: 3; }
/* El campo de abajo: «A la idea, no a la persona…» con el botón cromo de responder con video. */
#vista-hilo.op #comentar-form {
  order: 4; position: sticky; bottom: 0; z-index: 2; margin: auto -16px 0; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  border: 0; background: linear-gradient(transparent, rgba(19, 16, 22, 0.98) 30%);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px;
}
#vista-hilo.op #comentar-form textarea {
  grid-column: 1; grid-row: 1; min-height: 48px; max-height: 140px; padding: 13px 96px 13px 16px; border-radius: 24px; resize: none;
  background: #241f28; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text); font: inherit; font-size: 14px; line-height: 1.4;
}
#vista-hilo.op #comentar-form .comentar-pie { grid-column: 1; grid-row: 1; justify-self: end; align-self: end; display: flex; gap: 6px; margin: 0 5px 5px 0; }
#vista-hilo.op #comentar-cuenta { display: none; }
#vista-hilo.op #comentar-form:not(:focus-within) #comentar-enviar:not(:hover) { opacity: 0.85; }
#vista-hilo.op #comentar-enviar { min-height: 38px; height: 38px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; }
.btn-video-cromo {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--rd-cromo, linear-gradient(180deg, #fff7ea 0%, #d9c3a6 45%, #f6e6cc 55%, #b7967a 100%)); color: #1c0f1a;
}
.btn-video-cromo .ico, .btn-video-cromo svg { width: 16px; height: 16px; color: #5b2350; }
#vista-hilo.op #comentar-error { grid-column: 1 / -1; }
/* Las respuestas como globos. */
#vista-hilo.op .comentario { display: grid; grid-template-columns: 24px 1fr; gap: 0 8px; padding: 0; margin: 0 0 9px; }
#vista-hilo.op .comentario > .arbol, #vista-hilo.op .comentario > .comentar { grid-column: 2; }
#vista-hilo.op .arbol .arbol { margin: 6px 0 0; padding: 0; border: 0; }
#vista-hilo.op .burbuja { min-width: 0; padding: 8px 11px; border-radius: 4px 16px 16px 16px; background: #241f28; }
#vista-hilo.op .comentario-cabeza { gap: 2px 6px; font-size: 11px; }
#vista-hilo.op .comentario-cabeza .apodo { color: #c98bbb; font-size: 12px; font-weight: 700; }
#vista-hilo.op .comentario-cabeza .plegar { margin-left: auto; min-width: 28px; min-height: 24px; padding: 0 4px; border: 0; background: none; color: var(--muted); }
.com-vid { padding: 1px 6px; border-radius: 6px; background: rgba(255, 180, 107, 0.15); color: var(--oro); font-size: 11px; font-weight: 700; }
#vista-hilo.op .comentario-texto { margin: 2px 0 4px; font-size: 13px; }
#vista-hilo.op .comentario-video figcaption { display: none; }
#vista-hilo.op .comentario-pie { position: relative; gap: 0 14px; margin-top: 2px; }
#vista-hilo.op .comentario-pie .votos .voto.abajo { display: none; }
#vista-hilo.op .comentario-pie .voto.arriba, #vista-hilo.op .comentario-pie > .btn.link, .com-mas {
  min-height: 32px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; text-decoration: none; cursor: pointer;
}
#vista-hilo.op .comentario-pie .voto.arriba { display: inline-flex; gap: 3px; align-items: center; }
#vista-hilo.op .comentario-pie .voto.arriba[aria-pressed="true"] { color: var(--rd-luz); background: none; }
#vista-hilo.op .comentario-pie > .btn.link::before, #vista-hilo.op .comentario-pie > .btn.link::after { display: none; }
.com-mas { font-weight: 900; letter-spacing: 1px; }
.com-menu {
  position: absolute; left: 0; top: 100%; z-index: 4; min-width: 220px; padding: 6px; display: grid;
  border-radius: 14px; background: rgba(25, 22, 28, 0.97); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
.com-menu[hidden] { display: none; }
.com-menu .btn, .com-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 10px; margin: 0; border: 0; border-radius: 8px;
  background: none; box-shadow: none; color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.com-menu .btn::before, .com-menu .btn::after { display: none; }
.com-menu button:hover, .com-menu button:focus-visible { background: rgba(244, 237, 226, 0.08); outline: none; }
.com-menu .ico, .com-menu svg { width: 16px; height: 16px; color: var(--rd-luz); flex: none; }
.com-menu .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: nowrap; }
.com-menu .note { display: none; }
.comentario.plegado .burbuja > .comentario-texto, .comentario.plegado .burbuja > .comentario-video, .comentario.plegado .burbuja > .comentario-pie { display: none; }

/* «Yo» (rediseño): perfil, selector y, abajo, una cosa según el selector. El orden lo pone la columna. */
#yo-perfil { display: none; }
#pantalla-foro[data-tab="yo"] { display: flex; flex-direction: column; }
#pantalla-foro[data-tab="yo"][hidden] { display: none; }
#pantalla-foro[data-tab="yo"] > * { order: 10; }
#pantalla-foro[data-tab="yo"] > .foro-cabecera { order: 0; }
#pantalla-foro[data-tab="yo"] > #yo-perfil:not([hidden]) { display: block; order: 1; }
#pantalla-foro[data-tab="yo"] > #foro-mios-plegable { order: 2; }
#pantalla-foro[data-tab="yo"] > #foro-debates-aviso { order: 3; }
#pantalla-foro[data-tab="yo"] > #foro-pedidos-plegable { order: 4; }
#pantalla-foro[data-tab="yo"] > #foro-cuenta-plegable { order: 5; }
#pantalla-foro[data-tab="yo"] > .tabbar, #pantalla-foro[data-tab="yo"] > #reels { order: 20; }
/* Con perfil: el selector elige. */
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden]))[data-yo="opiniones"] #foro-debates-aviso,
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden]))[data-yo="opiniones"] #foro-pedidos-plegable,
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden]))[data-yo="charlas"] #foro-mios-plegable,
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden]))[data-yo="charlas"] #foro-cuenta-plegable,
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden]))[data-yo="ajustes"] #foro-mios-plegable,
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden]))[data-yo="ajustes"] #foro-debates-aviso,
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden]))[data-yo="ajustes"] #foro-pedidos-plegable { display: none; }
/* Con perfil, «Mi cuenta» y «Mis opiniones» van abiertos y sin su título de plegable (el perfil ya dice quién sos). */
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-cuenta-plegable > summary,
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios-plegable > summary,
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-cuenta .cuenta-card > h2,
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-cuenta .cuenta-datos { display: none; }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) .plegable { border: 0; background: none; box-shadow: none; padding: 0; }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) .plegable::before, #pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) .plegable::after { display: none; }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) .plegable-cuerpo { padding: 0; }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios-plegable:not([open]) > .plegable-cuerpo { display: block; }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-cuenta .cuenta-card { padding: 0; border: 0; background: none; box-shadow: none; }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-cuenta .cuenta-card::before, #pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-cuenta .cuenta-card::after { display: none; }
/* «Yo» como título en vez del logo. */
#pantalla-foro[data-tab="yo"] > .foro-cabecera .marca { visibility: hidden; position: relative; }
#pantalla-foro[data-tab="yo"] > .foro-cabecera .marca::after {
  content: attr(data-titulo); visibility: visible; text-transform: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 30px; letter-spacing: 0; color: var(--text);
}
.yo-perfil { margin: 4px 0 14px; text-align: center; }
.yo-disco {
  display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 8px; border-radius: 50%; color: var(--text);
  background: radial-gradient(circle at 35% 30%, #5b2350, #1a1220 75%); box-shadow: 0 0 0 3px #0d0b10, 0 0 0 4.5px #b7967a, 0 0 22px rgba(201, 139, 187, 0.25);
}
.yo-disco .ico, .yo-disco svg { width: 46px; height: 46px; }
.yo-apodo { margin: 0; font-family: Nunito, system-ui, sans-serif; font-weight: 900; font-size: 24px; }
.yo-lema { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.yo-stats { display: flex; justify-content: center; gap: 28px; margin: 10px 0 14px; }
.yo-stats p { margin: 0; display: grid; justify-items: center; }
.yo-stats strong { font-family: Nunito, system-ui, sans-serif; font-weight: 900; font-size: 20px; color: var(--oro); line-height: 1.1; }
.yo-stats span { color: var(--muted); font-size: 11px; }
.segm.yo-segm { display: flex; margin: 0; padding: 4px; border-radius: 14px; background: #241f28; border: 1px solid rgba(255, 255, 255, 0.06); }
.segm.yo-segm .chip {
  flex: 1 1 0; min-width: 0; min-height: 36px; padding: 8px 4px; border: 0; border-radius: 10px; background: none; box-shadow: none;
  color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.segm.yo-segm .chip::before, .segm.yo-segm .chip::after { display: none; }
.segm.yo-segm .chip[aria-pressed="true"] { background: var(--text); color: #141016; font-weight: 800; }
/* Mis opiniones: miniaturas en grilla de 3 con su estado. */
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios .mio {
  position: relative; isolation: isolate; height: 96px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  padding: 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.07);
  background: radial-gradient(110% 90% at 22% 0%, rgba(201, 139, 187, 0.35), transparent 60%), linear-gradient(140deg, #3a1d36, #141016);
}
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios .mio::after { content: ''; position: absolute; inset: 35% 0 0 0; z-index: -1; background: linear-gradient(transparent, rgba(13, 11, 16, 0.92)); }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios .mio-portada { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios .mio-titulo {
  flex: none; font-size: 10.5px; font-weight: 700; line-height: 1.2; color: var(--text); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios a.mio-titulo::after { content: ''; position: absolute; inset: 0; }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios .mio-estado {
  align-self: flex-start; padding: 2px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 700; line-height: 1.3;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(36, 31, 40, 0.8); color: var(--text);
}
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios .mio-publicado .mio-estado { background: rgba(126, 214, 167, 0.18); color: #7ed6a7; }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios .mio-en_revision { border-color: rgba(255, 180, 107, 0.5); }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios .mio-en_revision .mio-estado { background: rgba(255, 180, 107, 0.18); color: var(--oro); }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios .mio-rechazado .mio-estado { background: rgba(255, 123, 123, 0.16); color: #ffb3c1; }
#pantalla-foro[data-tab="yo"]:has(#yo-perfil:not([hidden])) #foro-mios .mio .note { display: none; }
/* Ajustes: grupos de filas. */
.yo-grupo { margin: 0 0 10px; overflow: hidden; border-radius: 16px; background: #19161c; border: 1px solid rgba(255, 255, 255, 0.07); }
.yo-grupo > * { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.yo-grupo > :last-child { border-bottom: 0; }
.yo-grupo > .note, .yo-grupo .cuenta-disponible > .note, .yo-grupo .cuenta-idioma > .note { padding: 0 12px 8px; font-size: 11.5px; color: var(--muted); border: 0; }
.yo-grupo > .note { padding-top: 8px; }
.btn.yo-fila {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px; margin: 0; padding: 10px 12px; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; text-transform: none; letter-spacing: 0;
}
.btn.yo-fila::before { display: none; }
.btn.yo-fila .ico, .btn.yo-fila svg { width: 20px; height: 20px; flex: none; color: var(--rd-luz, #c98bbb); }
.btn.yo-fila::after {
  content: attr(data-valor) '  ›'; margin-left: auto; padding-left: 8px; white-space: pre; color: var(--muted); font-size: 12.5px; font-weight: 500;
  position: static; inset: auto; width: auto; height: auto; background: none; border: 0; opacity: 1;
}
.btn.yo-fila:hover, .btn.yo-fila:focus-visible { background: rgba(244, 237, 226, 0.05); }
.yo-grupo-peligro .btn.yo-fila { color: #ffb3c1; }
.yo-grupo-peligro .btn.yo-fila svg { color: #ffb3c1; }
.yo-grupo .cuenta-disponible { padding: 0; }
.yo-grupo .fondo-interruptor { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; }
.yo-grupo .fondo-interruptor > span { flex: 1; }
.yo-grupo .cuenta-idioma { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 12px; }
.yo-grupo .cuenta-idioma > .note { padding: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.yo-grupo .clave-falta { padding: 8px 12px; }

/* Debates (rediseño): su pestaña, sin la pregunta, «Lo último» ni categorías; «Debates» como título. */
#debates-tab { display: none; }
#pantalla-foro[data-tab="debates"] #debates-tab:not([hidden]), #pantalla-foro[data-tab="debates"] #debates-tab { display: block; }
#pantalla-foro[data-tab="debates"] #vista-indice > :not(#debates-tab),
#pantalla-foro[data-tab="debates"] #migas, #pantalla-foro[data-tab="debates"] #cat-chips { display: none; }
#pantalla-foro[data-tab="debates"] > .foro-cabecera .marca { visibility: hidden; position: relative; }
#pantalla-foro[data-tab="debates"] > .foro-cabecera .marca::after {
  content: attr(data-titulo); visibility: visible; text-transform: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 30px; letter-spacing: 0; color: var(--text);
}
.segm.deb-segm { display: flex; margin: 4px 0 14px; padding: 4px; border-radius: 14px; background: #241f28; border: 1px solid rgba(255, 255, 255, 0.06); }
.segm.deb-segm .chip {
  flex: 1 1 0; min-width: 0; min-height: 36px; padding: 8px 4px; border: 0; border-radius: 10px; background: none; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.segm.deb-segm .chip::before, .segm.deb-segm .chip::after { display: none; }
.segm.deb-segm .chip[aria-pressed="true"] { background: var(--text); color: #141016; font-weight: 800; }
.deb-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--oro); color: #1c0f1a; font-size: 11px; font-weight: 800; }
.deb-badge[hidden] { display: none; }
.deb-lista { display: grid; gap: 14px; }
.deb-tarjeta { display: block; overflow: hidden; border-radius: 22px; background: #19161c; border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); text-decoration: none; }
.deb-tarjeta:focus-visible { outline: 2px solid var(--rd-luz); outline-offset: 2px; }
.deb-video { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 150px; background: #0d0b10; }
.deb-mitad { position: relative; overflow: hidden; }
.deb-mitad video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0.75; }
.deb-mitad.tapada video { filter: blur(18px) brightness(0.5); transform: scale(1.1); }
.deb-mitad + .deb-mitad { border-left: 1px solid rgba(0, 0, 0, 0.6); }
.deb-vs { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 18px; pointer-events: none; }
.deb-vs b { font-family: Nunito, system-ui, sans-serif; font-weight: 900; font-size: 20px; color: var(--oro); text-shadow: 0 0 12px rgba(255, 180, 107, 0.6); }
.deb-disco { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--text); background: radial-gradient(circle at 35% 30%, #5b2350, #1a1220 75%); box-shadow: 0 0 0 2px #b7967a; }
.deb-disco .ico, .deb-disco svg { width: 24px; height: 24px; }
.deb-etq { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 99px; background: rgba(0, 0, 0, 0.55); color: var(--muted); font-size: 11px; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.deb-etq.nuevo { color: var(--oro); }
.deb-etq.nuevo::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 8px var(--oro); vertical-align: 1px; }
.deb-pie { padding: 12px 14px; }
.deb-pie h3 { margin: 0 0 9px; font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 16px; line-height: 1.2; }
.deb-barra { height: 6px; overflow: hidden; border-radius: 6px; background: #3a3340; }
.deb-barra i { display: block; height: 100%; background: linear-gradient(90deg, #c98bbb, #ffb46b); }
.deb-lados { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; }
.deb-lados small { font-size: 11.5px; color: var(--muted); }
.deb-lados .deb-votos { color: var(--rd-luz); font-weight: 700; }
.deb-inv { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: #19161c; border: 1px solid rgba(255, 180, 107, 0.35); color: var(--text); text-decoration: none; }
.deb-inv strong { color: var(--oro); font-size: 13px; }
.deb-inv span { font-size: 13.5px; }
/* Ajustes después de las capturas. */
#vista-hilo.op { gap: 0; row-gap: 0; }
#vista-hilo.op > #hilo-post { margin: 0 !important; }
#vista-hilo.op > .tablero { margin-top: 0 !important; }
#vista-hilo.op .op-cabeza, #vista-hilo.op #hilo-titulo { text-align: left; }
#hilo-post .op-acciones .op-compartir svg, #hilo-post .op-acciones .debatir svg {
  width: 40px !important; height: 40px !important; min-width: 40px; padding: 9px !important; stroke: currentColor;
}
#hilo-post .op-acciones .op-compartir { color: var(--text); }
#hilo-post .op-acciones .debatir svg { color: var(--oro) !important; }
.cat-hero-texto, .cat-hero #categoria-titulo { text-align: left; }
.yo-grupo .fondo-interruptor { margin: 0; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.yo-grupo .fondo-interruptor::before, .yo-grupo .fondo-interruptor::after { display: none; }
.yo-grupo .cuenta-idioma { justify-content: space-between; text-align: left; }
.yo-grupo .cuenta-idioma > .note { text-align: left; }
#vista-hilo.op .op-cabeza .debatir-estado { margin: 8px 0 0; font-size: 12.5px; color: var(--oro); }
#vista-hilo.op .op-cabeza .debatir-estado:empty { display: none; }
/* En «Una opinión», si algo abre «Mi cuenta» (o verificar la edad): va arriba del video, que está fijo. */
#pantalla-foro.en-hilo > #foro-cuenta-plegable[open], #pantalla-foro.en-hilo > #verificar:not([hidden]) {
  position: relative; z-index: 3; background: #0d0b10; border-radius: 0 0 22px 22px;
}
#vista-hilo.op #hilo-post { border-radius: 0 !important; overflow: visible !important; }
#vista-hilo.op #hilo-debates .btn.link, #vista-hilo.op #hilo-debates a { text-decoration: none; }
.yo-grupo .cuenta-idioma { flex-direction: row; }
.yo-grupo .cuenta-idioma > .note { flex: 1; }

/* Revisión de Dirección estética (10 nov). */
/* 1. El menú «···» de Una opinión, por encima de la fila de botones; todos con ícono y la misma sangría. */
.op-top { z-index: 5; }
.op-menu .btn > svg:first-child, .op-menu button > svg:first-child { margin: 0; }
/* 2. El botón flotante de sonido, solo con un video a pantalla completa (los reels). */
body:has(#pantalla-foro:not([hidden])) .auto-sonido { display: none !important; }
html.en-reels body .auto-sonido:not([hidden]) { display: block !important; }
/* 3. La hoja de respuestas, una sola superficie, con un separador fino entre el autor y las respuestas. */
#vista-hilo.op .op-cabeza, #vista-hilo.op > .tablero { background: #141117 !important; box-shadow: none !important; }
#vista-hilo.op .op-cabeza { padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
#vista-hilo.op > .tablero { border-top: 0 !important; }
/* La máscara en el botón de grabar (Leandra, 10 nov: «agregar una mascara al boton de grabar»). */
.tabbar .tab-grabar .tab-grabar-centro { display: grid; place-items: center; }
.tabbar .tab-grabar .tab-grabar-centro > svg, .tabbar .tab-grabar .tab-grabar-centro .ico {
  display: block; width: 26px; height: 26px; color: #fff7ea; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(90, 10, 30, 0.6));
}
.op-menu .btn.copiar-link, .op-menu .btn.compartir { padding: 0 12px !important; gap: 10px !important; }