:root {
  /* Vidrio negro en todo (Leandra, 10 nov: "vidrio negro es genial, quiero que todo vaya en esa
     estetica"; 02_marca/GUIA_DE_MARCA.md, sección 4): siempre oscuro, aunque el teléfono esté en claro. */
  color-scheme: dark;
  --bg: #0d0b10;
  --surface: #19161c;
  --surface-2: #241f28;
  --line: #3a3340;
  --borde: #8c8783;
  --text: #f4ede2;
  --muted: #b9adbd;
  --accent: #f4ede2;      /* botón principal: marfil con texto tinta, 16:1 */
  --accent-text: #141016;
  --next: #c98bbb;        /* lo elegido: ciruela de luz con texto tinta, 7,1:1 */
  --next-text: #141016;
  --oro: #ffb46b;         /* "en vivo" y los números */
  --voto-arriba: #c98bbb;
  --voto-abajo: #b9adbd;
  --danger: #ff7a6b;
  --ok: #7ed6a7;
  --ciruela: #5b2350;
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.app {
  max-width: 480px;
  min-height: 100%;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100dvh - 32px);
}

h1, h2, h3 { margin: 0; line-height: 1.15; }
h2 { font-size: 1.5rem; text-align: center; }
h3 { font-size: 1.2rem; }

.muted { color: var(--muted); margin: 0; }
.center { text-align: center; }
.note { color: var(--muted); font-size: 0.85rem; margin: 0; }
.note.strong { color: var(--next); }
.error { color: var(--danger); margin: 0; font-weight: 600; white-space: pre-line; }
.app-browser {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--next);
  border-radius: var(--radius);
  background: var(--surface);
}
.app-browser p { margin: 0; font-weight: 600; }
a.btn { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.eyebrow { margin: 0; text-align: center; color: var(--accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }

/* Marca */
.brand { text-align: center; padding: 24px 0 8px; }
.brand h1 { font-size: 2.8rem; letter-spacing: -0.03em; }
/* Logotipo de texto de Tertulia (portada y foro), hasta que esté el logo */
.marca {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--text);
}
.marca.chica { font-size: 1.8rem; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.brand p { margin: 8px 0 0; color: var(--muted); }

/* Formulario */
form { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.field small { color: var(--muted); font-weight: 400; }
/* La captura del formulario de fallas (fallas.html) */
.fallas-vista { max-width: 100%; max-height: 240px; object-fit: contain; align-self: flex-start; border: 1px solid var(--line); border-radius: 12px; }
.field.inline { flex-direction: row; align-items: center; justify-content: center; gap: 10px; }

input[type="text"], input[type="email"], input[type="password"], input:not([type]), select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  /* Nunca menos de 16 px: con menos, Safari agranda la página al tocar el campo (test/reglas_telefono.js). */
  font-size: max(16px, 1em);
  font-weight: 400;
}
textarea { min-height: 72px; resize: vertical; }
.field.inline select { width: auto; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Con cuenta, el nombre es el apodo de la cuenta: se ve pero no se escribe */
input[readonly] { background: var(--surface-2); color: var(--muted); }

/* La parte de la entrada que lleva a una charla (en el iPhone, solo con un pedido) */
.entrada-charla { display: flex; flex-direction: column; gap: 14px; }

/* "Mi cuenta" y "Pedidos para charlar" en la entrada */
.lugar-tarjeta:empty { display: none; }
.join-pie { display: flex; flex-direction: column; gap: 10px; }

/* Se abrió con ?pedido=…: arriba de todo */
.pedido-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 14px;
  border: 1px solid var(--ok);
  border-radius: var(--radius);
  background: var(--surface);
}
.pedido-aviso p { margin: 0; font-weight: 700; }
.pedido-aviso .btn.link { min-height: 44px; padding: 4px 0; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
/* "Acepto todo" en la entrada: marca las tres casillas de abajo de una vez */
.check.check-todo { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }

/* Botones */
.btn {
  min-height: 50px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.wide { width: 100%; }
.btn.primary { background: var(--accent); color: var(--accent-text); }
.btn.ghost { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn.next { background: var(--next); color: var(--next-text); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }

/* Video propio */
.self-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.self-box.small { aspect-ratio: auto; height: 24dvh; min-height: 120px; }
.self-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }

.tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Filtro y voz con los que arrancás */
.look-picker { display: flex; flex-direction: column; gap: 8px; }
.picker-title { margin: 0; font-weight: 700; font-size: 0.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
/* Lo elegido: ciruela de luz con texto tinta (guía de marca, 7,1:1). */
.chip[aria-pressed="true"] { background: var(--next); border-color: var(--next); color: var(--next-text); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Búsqueda */
.radar { position: relative; height: 70px; display: flex; align-items: center; justify-content: center; }
.radar span {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: ping 2.4s ease-out infinite;
}
.radar span:nth-child(2) { animation-delay: 0.8s; }
.radar span:nth-child(3) { animation-delay: 1.6s; }
@keyframes ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }

/* Esperando a la otra persona de un pedido */
.esperando-tiempo { margin: 0; font-weight: 700; color: var(--next); }

/* Propuesta: sin foto, la inicial del apodo */
.proposal { justify-content: center; }
.peer-inicial {
  align-self: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a3a6c, var(--ciruela));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  font-weight: 800;
  color: #fff;
}
.proposal-tema { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--accent); overflow-wrap: anywhere; }
#proposal-name { overflow-wrap: anywhere; }

.timer { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
#proposal-bar { height: 100%; width: 100%; background: var(--accent); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Llamada */
.call { gap: 10px; }
.remote-box {
  position: relative;
  flex: 1;
  min-height: 46dvh;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
#remote-video { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }

.call-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.call-top > span:first-child {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  font-weight: 700;
}
.call-top .tag { position: static; }

.call-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 13, 20, 0.7);
  font-weight: 700;
  text-align: center;
  padding: 16px;
}

.call-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.call-controls .btn { min-height: 48px; padding: 10px 12px; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  max-width: 480px;
  margin: 0 auto;
  padding: 18px 16px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
}

/* Antes de entrar */
.info-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.9rem;
}
.info-card h2 { font-size: 1.1rem; text-align: left; }
.info-group h3 { font-size: 0.95rem; color: var(--accent); margin: 0 0 4px; }
.info-group ul { margin: 0; padding-left: 18px; color: var(--muted); }
.info-group li + li { margin-top: 4px; }
/* Propuesta: con qué va a aparecer la otra persona */
.proposal-look { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; }
.proposal-look img { width: 36px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
#proposal-look-text { color: var(--muted); font-size: 0.9rem; }
#proposal-extra { font-size: 0.85rem; }
.recibo { width: 100%; text-align: left; }

/* Qué pasa con tu cara (verificación de edad) */
.cara-card { width: 100%; text-align: left; }
.cara-card h3 { font-size: 1rem; color: var(--accent); margin: 0; }
.cara-card p { margin: 0; }
.cara-lista { margin: 0; display: grid; gap: 6px; }
.cara-lista dt { font-weight: 600; }
.cara-lista dd { margin: 0 0 2px; color: var(--muted); }
.borrar-datos { list-style: none; margin-left: -18px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.borrar-datos .btn.link { padding: 4px 0; }
.sheet.scroll { max-height: 85dvh; overflow-y: auto; }
.sheet .info-card { border: 0; padding: 0; background: transparent; }

.btn.link {
  min-height: 44px;
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
  font-weight: 600;
}

/* Seguridad en la llamada */
.call-safety {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.pill {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.pill.danger { color: #ff8a8a; border-color: var(--danger); }
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.call-controls .span-2 { grid-column: span 2; }
.call-top .pill.leave { margin-left: auto; min-height: 36px; padding: 6px 12px; }
.look-panel {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.look-panel .note:empty { display: none; }

/* Verificación de edad */
.verify-box {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 46dvh;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.verify-oval {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 58%;
  height: 66%;
  transform: translate(-50%, -50%);
  border: 3px dashed rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(14, 13, 20, 0.45);
}
.verify-prompt {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.65);
  text-align: center;
  font-weight: 700;
}
.verify-step { display: flex; flex-direction: column; gap: 8px; }
.sim-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px dashed var(--next);
  border-radius: var(--radius);
}
.sim-title { margin: 0; color: var(--next); font-size: 0.85rem; font-weight: 700; }
.small-list { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.9rem; }

/* Modo práctica */
.practice-banner {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #3a2a00;
  color: var(--next);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
#remote-video.practice { transform: scale(1.12); transition: filter 0.6s ease; }

/* Pausa */
.paused { justify-content: center; }

/* Aviso */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  /* Es solo texto: los toques pasan a los botones de abajo ("Siguiente", "Mostrarme"). */
  pointer-events: none;
  width: calc(100% - 32px);
  max-width: 448px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  text-align: center;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .radar span { animation: none; opacity: 0.6; }
  .btn { transition: none; }
  #remote-video.practice { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Foco visible en todo lo que se puede enfocar con teclado (WCAG 2.4.7) */
a:focus-visible, video:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Que el foco no quede tapado por lo que está fijo abajo (WCAG 2.4.11) */
html { scroll-padding-bottom: 120px; }
/* Sin el resaltado gris de Android/iOS al tocar; el estado se ve con :active */
button, a, .chip { -webkit-tap-highlight-color: transparent; }
/* Que el texto no se agrande solo al girar el iPhone */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#join-progress { white-space: pre-line; }

/* Páginas públicas: privacidad, términos, seguridad infantil, lista de espera */
.pagina { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 14px; line-height: 1.5; }
.pagina h1 { font-size: 1.5rem; text-align: left; }
.pagina h2, .pagina .info-card h2 { text-align: left; }
.pagina h2 { font-size: 1.1rem; color: var(--accent); margin-top: 8px; }
.pagina ul { margin: 0; padding-left: 20px; }
.pagina p { margin: 0; }
.pagina table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pagina th, .pagina td { text-align: left; vertical-align: top; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.pagina a { color: var(--accent); }
@media (max-width: 560px) {
  .pagina table, .pagina thead, .pagina tbody, .pagina tr, .pagina th, .pagina td { display: block; }
  .pagina thead { display: none; }
  .pagina td:first-child { font-weight: 600; padding-bottom: 0; }
  .pagina td { border-bottom: 0; }
  .pagina tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
}

.mod-video { width: 100%; border-radius: 12px; background: #000; }

/* Términos antes de la primera charla y del primer clip */
.terminos-paso ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 4px; }

/* Desnudez en la llamada (public/desnudez.js) */
#remote-video.tapado { filter: blur(40px) brightness(0.6); }
.desnudez-aviso {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 30%;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(14, 13, 20, 0.92);
  border: 1px solid var(--danger);
  text-align: center;
}
.desnudez-aviso p { margin: 0; font-weight: 600; }
.desnudez-aviso .actions { display: flex; gap: 8px; justify-content: center; }

/* "Mostrarme" de a dos: el pedido de la otra persona, y su imagen tapada en tu
   pantalla si se mostró sin tu sí o le pediste que vuelva a la máscara. */
#remote-video.sin-permiso { filter: blur(40px) brightness(0.6); }
.mostrar-aviso { border-color: var(--accent); z-index: 3; }
.desnudez-sale {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--danger);
  color: var(--text, #fff);
  background: rgba(255, 90, 90, 0.12);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Moderación: denuncia urgente (protocolo de abuso infantil) */
.info-card.urgente { border: 2px solid var(--danger); }

/* "Antes de entrar" y los términos, en corto; el detalle, en "Saber más". */
.resumen-entrada { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.resumen-entrada li { position: relative; padding-left: 22px; color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.resumen-entrada li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800; }
.resumen-entrada strong { color: var(--text); }
.saber-mas { border-top: 1px solid var(--line); padding-top: 4px; }
.saber-mas > summary {
  position: relative;
  min-height: 44px;
  padding: 11px 28px 11px 0;
  list-style: none;
  color: var(--next);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
}
.saber-mas > summary::-webkit-details-marker { display: none; }
.saber-mas > summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--next);
  border-bottom: 2px solid var(--next);
  transform: translateY(-70%) rotate(45deg);
}
.saber-mas[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.saber-mas[open] > .info-group + .info-group,
.saber-mas[open] > summary + .info-group { margin-top: 10px; }
#opinar-nota { margin-top: -4px; }


/* ------------------------------------------------------------------ portada limpia
   "Clean and intuitive, no clutter, prefer icons to text", simétrica y en vidrio
   negro (Leandra, 9-10 nov). Íconos de iconos.js; lo que no se ve está en "Saber más"
   o para lectores de pantalla (.sr-only). */
.ico { width: 24px; height: 24px; flex: none; }
.redondo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
#screen-join { gap: 16px; }
#screen-join .brand { text-align: center; }
#screen-join .brand-fila { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
#screen-join .brand .marca { margin: 0; font-size: 2.6rem; }
#screen-join .brand p { margin: 2px 0 0; color: var(--muted); font-size: 0.95rem; }
/* Cuatro por fila y la última centrada (simétrica aunque los temas no sean múltiplo de 4). */
#screen-join .tema-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#screen-join .tema-options .chip { width: calc((100% - 24px) / 4); }
#screen-join .tema-options .chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 66px; padding: 8px 4px; border-radius: 16px; font-size: 0.72rem; line-height: 1.15; text-align: center; white-space: normal;
}
#screen-join #name { text-align: center; }
#privacy-card { background: none; border: 0; padding: 0; box-shadow: none; gap: 10px; }
#screen-join .reglas-entrada { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
#screen-join .reglas-entrada li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.84rem; line-height: 1.25; }
#screen-join .reglas-entrada .ico { color: var(--next); }
#privacy-card .saber-mas { border-top: 0; padding-top: 0; text-align: center; }
#privacy-card .saber-mas > summary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 0.9rem; }
#privacy-card .saber-mas > summary .ico { width: 18px; height: 18px; }
#privacy-card .saber-mas[open] > .info-group { text-align: left; }
#screen-join .check-todo { justify-content: center; }
#screen-join #edad-aviso { text-align: center; font-size: 0.78rem; }
#opinar-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; font-size: 1.05rem; font-weight: 800; }
/* Centrados, con los que haya (sin charlas al azar son tres): simétricos siempre. */
.atajos { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin-top: 2px; }
.atajos .atajo { width: 64px; }
.atajos .btn.wide { flex: 1 1 100%; width: 100%; }
.atajo {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 0;
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.74rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.atajo > .ico { box-sizing: content-box; padding: 13px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.atajo:active > .ico { background: var(--surface-2); }
.atajo:disabled { opacity: 0.5; cursor: default; }
.atajo:focus-visible { outline: none; }
.atajo:focus-visible > .ico { outline: 2px solid var(--next); outline-offset: 2px; }
#join-pie { text-align: center; }

/* Enlaces en ciruela de luz (sin el azul y violeta del navegador), y el botón
   principal apagado (falta la casilla) en gris de vidrio, no marfil transparente. */
a, a:visited { color: var(--next); }
.btn.link, .btn.link:visited { color: var(--next); }
.btn.primary[aria-disabled="true"] { opacity: 1; background: var(--surface-2); color: var(--muted); border-color: var(--line); }

/* ------------------------------------------------------------------ vidrio líquido
   Los botones con un marfil sutil y vidrio líquido, y los detalles en ciruela que
   resalten (Leandra, 10 nov: "los botones quiero que tengan un efecto marfil sutil
   mezclado con un liquid glass. quiero que se vea mejor los detalles de ciruela so
   they pop"). El vidrio: un degradé marfil casi transparente, un borde claro, un
   brillo arriba y una sombra abajo. */
:root {
  --vidrio: linear-gradient(180deg, rgba(244, 237, 226, 0.12) 0%, rgba(244, 237, 226, 0.04) 55%, rgba(244, 237, 226, 0.02) 100%);
  --vidrio-borde: rgba(244, 237, 226, 0.17);
  --vidrio-brillo: inset 0 1px 0 rgba(255, 250, 243, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.38);
  --ciruela-vidrio: linear-gradient(180deg, #e3b5d7 0%, #c98bbb 55%, #b675a7 100%);
  --ciruela-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(201, 139, 187, 0.6), 0 6px 22px rgba(201, 139, 187, 0.38);
}
.btn.ghost, .chip, .redondo, .atajo > .ico {
  background: var(--vidrio);
  border-color: var(--vidrio-borde);
  box-shadow: var(--vidrio-brillo);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.chip { border-style: solid; border-width: 1px; }
.btn.primary {
  background: linear-gradient(180deg, #fffaf3 0%, #f4ede2 55%, #e6dbca 100%);
  color: var(--accent-text);
  border-color: rgba(255, 250, 243, 0.75);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(91, 35, 80, 0.12), 0 10px 30px rgba(244, 237, 226, 0.12), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.btn.primary .ico { color: var(--ciruela); }
.btn.primary[aria-disabled="true"] { background: var(--vidrio); color: var(--muted); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-brillo); }
.btn.primary[aria-disabled="true"] .ico { color: var(--next); }
.btn.next, .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);
}
/* Los detalles en ciruela, con un brillo suave. */
.reglas-entrada .ico, .pasos-entrada .redondo .ico, .saber-mas > summary .ico { color: var(--next); filter: drop-shadow(0 0 6px rgba(201, 139, 187, 0.6)); }
.pasos-entrada .redondo { box-shadow: var(--vidrio-brillo), 0 0 0 1px rgba(201, 139, 187, 0.3); }
.saber-mas > summary { color: var(--next); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--next); }
.check.check-todo, #entrada-form > .check { background: var(--vidrio); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-brillo); }
input[type="text"], input[type="email"], input[type="password"], input:not([type]), select, textarea {
  background: rgba(244, 237, 226, 0.05);
  border-color: var(--vidrio-borde);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--next); box-shadow: 0 0 0 3px rgba(201, 139, 187, 0.35); }
.btn:focus-visible, .chip:focus-visible, a:focus-visible { outline: 2px solid var(--next); outline-offset: 2px; }

/* El aviso de la voz, debajo de las voces (Legales, 10 nov). */
.voz-aviso { margin: 4px 0 0; color: var(--next); font-size: 0.8rem; text-align: center; }

/* "Tu cara y tu voz cambian por defecto", al grabar (Leandra, 10 nov; la frase, elegida con Legales): una línea con la
   máscara en ciruela y, al tocarla, qué hace la tecnología. */
.identidad { text-align: center; }
.identidad > summary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; list-style: none; cursor: pointer; color: var(--text); font-size: 0.85rem; font-weight: 600; }
.identidad > summary::-webkit-details-marker { display: none; }
.identidad > summary .ico { width: 20px; height: 20px; color: var(--next); filter: drop-shadow(0 0 6px rgba(201, 139, 187, 0.6)); }
.identidad > summary::after { content: 'ⓘ'; color: var(--next); font-size: 0.9rem; }
.identidad[open] > summary::after { content: '×'; }
.identidad > p { margin: 8px auto 0; max-width: 34em; padding: 10px 12px; border-radius: 14px; background: var(--vidrio); border: 1px solid var(--vidrio-borde); color: var(--muted); font-size: 0.82rem; line-height: 1.4; text-align: left; }


/* ------------------------------------------------------------------ más pantallas limpias
   (10 nov) Las tarjetas, de vidrio; los pasos con ícono y el detalle en un desplegable,
   en el debate y las tertulias; "Mi cuenta" con íconos y el título centrado. */
.info-card, .cuenta-card, .pedidos-card { background: var(--vidrio); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-brillo); }
.cuenta-card > h2, .pedidos-card > h2 { text-align: center; }
.cuenta-card a:not(.btn), .pedidos-card a:not(.btn) { color: var(--next); }
.cuenta-intro { text-align: center; }
.clave-resumen.con-iconos { list-style: none; padding-left: 0; gap: 10px; }
.clave-resumen.con-iconos li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.clave-resumen.con-iconos .ico { width: 22px; height: 22px; color: var(--next); filter: drop-shadow(0 0 6px rgba(201, 139, 187, 0.5)); }
.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; }
.debate-brand, .tertulias-brand { text-align: center; }
.saber-mas.capa { border-top: 0; padding-top: 0; text-align: center; }
.saber-mas.capa > summary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--next); font-size: 0.9rem; }
.saber-mas.capa > summary .ico { width: 18px; height: 18px; }
.saber-mas.capa[open] > .lista-corta { text-align: left; margin-top: 10px; }
.tertulias-que, #pantalla-inicio > .info-card:first-of-type { gap: 12px; }
.note a:not(.btn), .muted a:not(.btn) { color: var(--next); } /* los enlaces de las notas, también en ciruela */

/* La máscara bloquea la desnudez: mientras el detector ve algo, la vista se tapa y la
   grabación se pausa (foro.js y debate.js, taparGrabacion). */
.clip-box.tapado #vista { filter: blur(40px) brightness(0.35); }
.tapado-aviso { position: absolute; left: 12px; right: 12px; top: 50%; z-index: 6; transform: translateY(-50%); margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(13, 11, 16, 0.85); border: 1px solid var(--vidrio-borde); color: var(--text); font-size: 0.9rem; text-align: center; }

/* Moderación: la sala para mirar un debate en vivo, dentro de la tarjeta. */
.moderacion .mod-sala:empty { display: none; }
.moderacion .mod-sala { margin-top: 12px; }

/* "No pudimos cambiar tu voz" (A2 de anonimato.md): tu voz real no sale sola. */
.voz-falla { margin: 8px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--oro); background: rgba(255, 180, 107, 0.12); text-align: left; }
.voz-falla-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--oro); font-weight: 800; }
.voz-falla-titulo .ico { width: 20px; height: 20px; flex: 0 0 auto; }
.voz-falla .note { margin: 0 0 8px; color: var(--text); }
.voz-falla-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.voz-falla-botones .btn { flex: 1 1 120px; min-height: 44px; padding: 8px 12px; font-size: 0.9rem; }

/* «Fondo borroso» (fondo-borroso.js): un interruptor aparte de la máscara. */
.fondo-opcion { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.fondo-interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--vidrio-borde, var(--line)); border-radius: 999px; background: var(--vidrio, var(--surface-2)); font-weight: 700; cursor: pointer; }
.fondo-interruptor input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 46px; height: 26px; margin: 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.fondo-interruptor input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform 0.15s ease; }
.fondo-interruptor input:checked { background: var(--ciruela-vidrio, var(--next)); border-color: var(--next); }
.fondo-interruptor input:checked::after { transform: translateX(20px); background: #141016; }
.fondo-interruptor input:focus-visible { outline: 2px solid var(--next); outline-offset: 3px; }
.fondo-nota { margin: 0 14px; font-size: 0.82rem; }
@media (prefers-reduced-motion: reduce) { .fondo-interruptor input::after { transition: none; } }

/* El logo «tertulia» lleva a la portada (Leandra: "cuando apretas en tertulia arriba a la izquierda, deberia llevarte al menu principal"). */
.marca-enlace { color: inherit; text-decoration: none; }
.marca-enlace:hover { opacity: 0.85; }
.marca-enlace:focus-visible { outline: 2px solid var(--next); outline-offset: 4px; border-radius: 8px; }

/* Las máscaras como íconos chicos con el nombre corto debajo (botones-mascara.js; Leandra, 10 nov:
   "pequenias imagenes icons para que sea mas aesthetic todo"). Una fila que se desliza de costado.
   Mientras Dirección estética no pasa la imagen de una máscara, un círculo con su inicial. */
.chips.mascaras-iconos { flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 4px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.chips.mascaras-iconos::-webkit-scrollbar { display: none; }
.chip.mascara-boton {
  flex: none; width: 64px; min-height: 0; padding: 0; border: 0; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--text); scroll-snap-align: start;
}
.mascara-icono {
  position: relative; display: block; width: 52px; height: 52px; border-radius: 50%;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-brillo);
}
.mascara-icono img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mascara-icono.sin-imagen { background: radial-gradient(circle at 35% 30%, hsl(var(--tono, 320) 40% 62%) 0%, hsl(var(--tono, 320) 32% 30%) 68%, #120d12 100%); }
.mascara-icono.sin-imagen::before {
  content: attr(data-letra); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.25rem; color: #fffaf3; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.mascara-icono.es-borroso.sin-imagen { background: radial-gradient(circle, rgba(244, 237, 226, 0.55) 0%, rgba(244, 237, 226, 0.16) 55%, rgba(244, 237, 226, 0.05) 100%); }
.mascara-icono.es-borroso.sin-imagen::before { filter: blur(2px); }
.mascara-icono.muestra-cara { border-style: dashed; }
.mascara-icono[data-ia]::after {
  content: 'IA'; position: absolute; right: -4px; bottom: -2px; padding: 1px 5px; border-radius: 999px;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.3;
  background: #08070a; color: var(--next); border: 1px solid rgba(201, 139, 187, 0.6);
}
.mascara-nombre { max-width: 64px; font-size: 0.72rem; font-weight: 600; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.chip.mascara-boton[aria-pressed="true"] { background: none; border: 0; box-shadow: none; color: var(--next); }
.chip.mascara-boton[aria-pressed="true"] .mascara-icono { border-color: rgba(236, 196, 226, 0.95); box-shadow: 0 0 0 2px var(--next), 0 0 14px rgba(201, 139, 187, 0.55); }
.chip.mascara-boton:focus-visible { outline: none; }
.chip.mascara-boton:focus-visible .mascara-icono { outline: 2px solid var(--next); outline-offset: 3px; }

/* Estilo B, «miniaturas» (Leandra eligió "B, miniaturas", 10 nov; Dirección estética,
   02_marca/filtros/comparacion_filtros_debate.html): cuadrado redondeado, aro dorado al elegir
   y el sello «IA» en dorado. Pisa lo de arriba. */
.mascara-icono { border-radius: 13px; border: 0; box-shadow: none; overflow: visible; background: #1a0f1a; }
.mascara-icono img { border-radius: 13px; }
.mascara-icono.sin-imagen { background: radial-gradient(120% 100% at 20% 0%, rgba(255, 180, 107, 0.55), transparent 60%), linear-gradient(150deg, #5b2350, #1a0f1a); }
.mascara-icono.es-borroso.sin-imagen { background: radial-gradient(120% 100% at 20% 0%, rgba(255, 180, 107, 0.4), transparent 60%), linear-gradient(150deg, #3a2a38, #1a0f1a); }
.mascara-icono.muestra-cara { border: 1px dashed rgba(244, 237, 226, 0.5); }
.mascara-icono[data-ia]::after {
  right: -3px; bottom: -3px; padding: 0 4px; border-radius: 6px; border: 0;
  background: #ffb46b; color: #141016; font-size: 0.56rem; font-weight: 900; line-height: 14px; letter-spacing: 0.02em;
}
.mascara-nombre { color: #d8cfc4; font-weight: 700; }
.chip.mascara-boton[aria-pressed="true"] { color: #f4ede2; }
.chip.mascara-boton[aria-pressed="true"] .mascara-nombre { color: #f4ede2; }
.chip.mascara-boton[aria-pressed="true"] .mascara-icono { border-color: transparent; box-shadow: 0 0 0 2px #0d0b10, 0 0 0 4px #ffb46b; }
.chip.mascara-boton:focus-visible .mascara-icono { outline: 2px solid #ffb46b; outline-offset: 5px; }
.chips.mascaras-iconos { padding: 6px 4px 6px; }

/* La edad aprobada sola (edad-automatica.js; Leandra: "lo de la verificacion de edad no deberia salir
   visiblemente"): sin los avisos ni los pasos de verificar. La casilla de 18+ al entrar sigue, y la línea
   "tu teléfono calcula tu edad con la cámara…" también (Moderación: sin ella la estimación sería a escondidas). */
html.edad-automatica .cuenta-edad,
html.edad-automatica #grabar-edad,
html.edad-automatica #verificar-aviso,
html.edad-automatica #pregunta-edad { display: none !important; }

/* La campanita (campanita.js): arriba, con el número sin leer. */
.campanita-lugar { display: inline-flex; margin-left: auto; }
.campanita { position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; color: var(--text); cursor: pointer; }
.campanita .ico { width: 22px; height: 22px; }
.campanita-punto {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #ffb46b; color: #141016; font-size: 0.68rem; font-weight: 900; line-height: 18px; text-align: center;
}
.campanita-punto[hidden] { display: none; }
.hoja-avisos .avisos-prender { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 12px; border-radius: 14px; background: #241f28; }
.hoja-avisos .avisos-prender p { margin: 0; }
.avisos-lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.aviso-item {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid #3a3340; background: #19161c; color: #f4ede2; font: inherit; text-align: left; cursor: pointer;
}
.aviso-item.sin-leer { border-color: #ffb46b; }
.aviso-item.sin-leer .aviso-texto { font-weight: 800; }
.aviso-cuando { flex: none; color: #b9adbd; font-size: 0.8rem; }
/* La oferta de avisos después de publicar: una hoja abajo que no tapa la página. */
.hoja-avisos.oferta[open] { position: fixed; z-index: 60; left: 0; right: 0; top: auto; bottom: max(8px, env(safe-area-inset-bottom)); margin: 0 auto; }

/* «Español / English» (idioma.js) */
.idioma-selector { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; }
.idioma-selector .chip { min-height: 36px; padding: 6px 14px; font-size: 0.85rem; }
.cuenta-idioma { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cuenta-idioma .note { margin: 0; }

.aviso-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; }
.aviso-acciones .aviso-estado { flex: 1 1 100%; margin: 0; }

/* ------------------------------------------------------------------ la llamada de debate (llamada.js)
   Como una videollamada (Leandra, 10 nov): a pantalla completa, en vidrio negro, con la máscara de quien
   llama en un anillo que late mientras suena. Rechazar en rojo y Aceptar en verde, redondos y grandes. */
html.con-llamada, html.con-llamada body { overflow: hidden; }
.llamada {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: max(48px, env(safe-area-inset-top)) 24px max(40px, calc(env(safe-area-inset-bottom) + 24px));
  color: var(--text); text-align: center;
}
.llamada-fondo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 70% at 50% 18%, rgba(91, 35, 80, 0.55) 0%, rgba(13, 11, 16, 0) 60%),
    linear-gradient(180deg, rgba(13, 11, 16, 0.92) 0%, rgba(8, 7, 10, 0.98) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
}
.llamada-centro { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6vh; max-width: 420px; }
.llamada-anillo { position: relative; padding: 10px; border-radius: 50%; }
.llamada-anillo::before, .llamada-anillo::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(201, 139, 187, 0.55);
  opacity: 0;
}
.llamada.sonando .llamada-anillo::before { animation: llamada-late 2.2s ease-out infinite; }
.llamada.sonando .llamada-anillo::after { animation: llamada-late 2.2s ease-out 1.1s infinite; }
@keyframes llamada-late { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .llamada.sonando .llamada-anillo::before, .llamada.sonando .llamada-anillo::after { animation: none; opacity: 0.6; } }
.llamada-avatar {
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde);
  box-shadow: var(--vidrio-brillo), 0 0 0 1px rgba(201, 139, 187, 0.35), 0 0 40px rgba(201, 139, 187, 0.25);
}
.llamada-avatar img { width: 100%; height: 100%; object-fit: cover; }
.llamada-avatar .ico { width: 64px; height: 64px; color: var(--next); }
.llamada-arriba { margin: 14px 0 0; font-size: 0.95rem; color: var(--muted); letter-spacing: 0.02em; }
.llamada-titulo { margin: 0; font-size: 1.45rem; font-weight: 800; line-height: 1.25; }
.llamada-quien { margin: 2px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 1.05rem; }
.llamada-mascara { color: var(--next); font-size: 0.85rem; }
.llamada-estado { margin: 8px 0 0; min-height: 1.3em; color: var(--muted); font-size: 0.9rem; }
.llamada-botones { display: flex; justify-content: center; gap: 72px; width: 100%; }
.llamada-boton { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0; }
.llamada-circulo {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-brillo);
}
.llamada-circulo .ico { width: 32px; height: 32px; }
.llamada-boton.aceptar .llamada-circulo { background: linear-gradient(180deg, #8fe3b4 0%, #34c172 60%, #23a35c 100%); border-color: rgba(190, 255, 215, 0.7); color: #08130c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 28px rgba(52, 193, 114, 0.4); }
.llamada-boton.rechazar .llamada-circulo { background: linear-gradient(180deg, #ff9a8e 0%, #f0503f 60%, #d63b2b 100%); border-color: rgba(255, 200, 192, 0.7); color: #1a0705; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 28px rgba(240, 80, 63, 0.38); }
.llamada.sonando .llamada-boton.aceptar .llamada-circulo { animation: llamada-salta 1.4s ease-in-out infinite; }
@keyframes llamada-salta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .llamada.sonando .llamada-boton.aceptar .llamada-circulo { animation: none; } }
.llamada-boton:disabled { opacity: 0.5; cursor: default; }
.llamada-boton:focus-visible { outline: none; }
.llamada-boton:focus-visible .llamada-circulo { outline: 2px solid var(--next); outline-offset: 4px; }

/* La campanita con «Debates» (Leandra, 10 nov: "no encuentro la zona de debates"). */
.campanita.con-debate { box-shadow: var(--vidrio-brillo), 0 0 0 2px var(--oro), 0 0 18px rgba(255, 180, 107, 0.45); }
.avisos-pestanas { display: flex; gap: 8px; margin: 0 0 12px; }
.avisos-pestanas .chip { flex: 1; min-height: 40px; justify-content: center; font-weight: 800; }
.pestana-punto { margin-left: 6px; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--oro); color: #141016; font-size: 0.75rem; font-weight: 900; }
.debates-seccion { margin: 8px 0 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.debate-item { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-brillo); }
.debate-item.sin-leer { border-color: var(--oro); }
.debate-item p { margin: 0; }
.debate-mascara { color: var(--next); font-size: 0.85rem; }
.debate-tema { font-weight: 800; }
.debate-item .btn.chico { align-self: flex-start; min-height: 40px; padding: 8px 16px; text-decoration: none; }

/* La pastilla de la cola de subidas (cola-subidas.js), en todas las pantallas. */
/* La subida en segundo plano (antes en foro.css) (Leandra, 10 nov): una pastilla de vidrio arriba, chica, con un anillo de avance. */
.subida-pastilla {
  position: fixed; z-index: 900; left: 50%; transform: translateX(-50%);
  top: max(10px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 24px);
  padding: 8px 10px 8px 12px; border-radius: 999px;
  background: rgba(20, 16, 22, 0.86); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-brillo), 0 10px 30px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  color: var(--text); font-size: 0.85rem; font-weight: 700;
}
.subida-pastilla[hidden] { display: none; }
.subida-pastilla.error { border-color: rgba(255, 122, 107, 0.7); border-radius: 18px; flex-wrap: wrap; }
.subida-pastilla.listo { border-color: rgba(126, 214, 167, 0.7); }
.subida-pastilla.revision { border-radius: 18px; }
.subida-texto { min-width: 0; }
.subida-anillo {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(var(--next) calc(var(--pct, 0) * 1%), rgba(244, 237, 226, 0.15) 0);
  -webkit-mask: radial-gradient(circle, transparent 6px, #000 7px); mask: radial-gradient(circle, transparent 6px, #000 7px);
}
.subida-pastilla.procesando .subida-anillo { background: conic-gradient(var(--next) 30%, rgba(244, 237, 226, 0.15) 0); animation: subida-gira 1s linear infinite; }
@keyframes subida-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .subida-pastilla.procesando .subida-anillo { animation: none; } }
.subida-pastilla.listo .subida-anillo { background: var(--ok); -webkit-mask: none; mask: none; }
.subida-pastilla.error .subida-anillo { background: var(--danger); -webkit-mask: none; mask: none; }
.subida-pastilla.revision .subida-anillo { background: var(--oro); -webkit-mask: none; mask: none; }
.subida-boton { min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--vidrio-borde); background: var(--vidrio); color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
.subida-boton.principal { background: #f4ede2; color: #141016; border-color: #f4ede2; }
.subida-cerrar { min-width: 32px; min-height: 32px; border: 0; background: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.subida-pastilla.espera .subida-anillo { background: var(--muted); -webkit-mask: none; mask: none; }

/* Mensajes directos (mensajes.js, 10 nov): el avioncito al lado de la campanita, la bandeja y la conversación. */
.campanita-lugar { gap: 4px; align-items: center; }
.avioncito { position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; color: var(--text); cursor: pointer; }
.avioncito .ico { width: 21px; height: 21px; }
.avioncito-punto {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #ffb46b; color: #141016; font-size: 0.68rem; font-weight: 900; line-height: 18px; text-align: center;
}
.avioncito-punto[hidden] { display: none; }
.avioncito[hidden] { display: none; }
.mensajes-lista .aviso-texto { display: grid; gap: 2px; min-width: 0; }
.mensaje-vista { color: var(--muted); font-size: 0.92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mensaje-pedido { background: rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 12px 14px; margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mensaje-pedido[hidden] { display: none; }
.mensajes-hilo { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.mensajes-hilo .mensaje { align-self: flex-start; max-width: 85%; background: rgba(255, 255, 255, 0.07); border-radius: 16px 16px 16px 4px; padding: 8px 12px; }
.mensajes-hilo .mensaje.mio { align-self: flex-end; background: rgba(255, 180, 107, 0.16); border-radius: 16px 16px 4px 16px; }
.mensajes-hilo .mensaje p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mensajes-hilo .mensaje .aviso-cuando { display: block; margin-top: 2px; font-size: 0.8em; }
.mensajes-caja { display: flex; gap: 8px; align-items: flex-end; }
.mensajes-caja textarea { flex: 1; min-width: 0; resize: vertical; }
.mensajes-acciones { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mensajes-recibo { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; color: var(--muted); }
.escribirle { white-space: nowrap; }
.mod-mensajes-lista { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.mod-mensajes-lista li { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.mod-mensajes-lista li.de-quien-denuncia { background: rgba(255, 180, 107, 0.12); }
.mod-mensajes-lista p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Brillo que sigue al dedo (10 nov)
   Leandra: «que el brillo por encima de la UI se mueva en que seccion del borde refleja, segun donde se
   esta moviendo tu dedo». brillo.js pone .brilla y --lx/--ly (Dirección estética,
   02_marca/brillo/brillo_y_pregunta.html). Sin dedo, la luz queda arriba al centro. */
.brilla::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: 0;
  background: radial-gradient(170px circle at var(--lx, 50%) var(--ly, -30%), rgba(255, 220, 170, 0.95), rgba(255, 180, 107, 0.45) 35%, rgba(255, 255, 255, 0.07) 70%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.brilla::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0.55;
  background: radial-gradient(240px circle at var(--lx, 50%) var(--ly, -30%), rgba(255, 200, 140, 0.1), transparent 60%);
}

/* Sin resplandor en los íconos ni en el texto (el rediseño de Leandra: «sin burbujas ni resplandor»). */
.reglas-entrada .ico, .pasos-entrada .redondo .ico, .saber-mas > summary .ico, .identidad > summary .ico, .clave-resumen.con-iconos .ico { filter: none; }