/* ============================================================
   Entre Líneas — estilos
   Paleta: cherry, blossom pink, truffle, ivory.
   Para cambiar colores, tocá solo las variables de :root.
   ============================================================ */

/* Tipografías alojadas en el sitio (licencia SIL OFL, ver assets/fonts)
   Work Sans: títulos en MAYÚSCULAS, etiquetas, botones y textos.
   Libre Baskerville: en cursiva, para frases, opciones y resultados. */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/work-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-latin-700-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-latin-400-normal.woff2") format("woff2");
}

:root {
  --fondo: #65232b;       /* cherry — fondo */
  --fondo-2: #561d24;     /* cherry más oscuro — tarjetas */
  --tarjeta: #72303a;     /* cherry un poco más claro — cada escrito de la biblioteca */
  --texto: #f8e5d7;       /* ivory — texto */
  --texto-suave: #ecd2c9; /* ivory apagado — textos secundarios */
  --detalle: #ecaab2;     /* blossom pink — etiquetas */
  --acento: #ecaab2;      /* blossom pink — botones y destacados */
  --acento-2: #f8e5d7;    /* ivory — segundo destacado */
  --linea: rgba(248, 229, 215, .2);
  --truffle: #432720;     /* truffle — popups y lo que tiene que llamar la atención */
  --ruleta: #8e4552;      /* rosa viejo — relatos que salieron de la ruleta */
  --sobre-acento: #65232b;

  /* la hoja de escritura: papel ivory con tinta truffle */
  --papel: #f8e5d7;
  --papel-tinta: #432720;
  --papel-renglon: #ecc9c4;

  --serif: "Libre Baskerville", Baskerville, Georgia, serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 720px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 450;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }
[hidden] { display: none !important; }

/* ---------- Encabezado ---------- */

.top {
  width: 100%;
  max-width: calc(var(--ancho) + 32px);
  margin: 0 auto;
  padding: 24px 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.marca { text-decoration: none; }
.marca img { height: 40px; width: auto; display: block; }
.logo-grande { display: block; width: min(300px, 66vw); height: auto; margin: 0 auto 32px; }
.marca-texto {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.5rem;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: 0 2px;
}
.hoja-link { font-size: .95rem; color: var(--texto-suave); text-decoration: none; }
.hoja-link:hover { color: var(--texto); }

/* ---------- Estructura ---------- */

main {
  flex: 1;
  width: 100%;
  max-width: calc(var(--ancho) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}
.vista { padding: 40px 0 48px; animation: aparecer .4s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Inicio ---------- */

.vista-inicio {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.pregunta { margin: 0 0 44px; line-height: 1.05; }
.pregunta-cursiva {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 4vw, 2rem);
  letter-spacing: -.02em;
}
.pregunta-mayus {
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 10vw, 4.3rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--acento);
}

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .dos { grid-template-columns: 1fr; } }

.opcion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 24px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  text-decoration: none;
  text-align: left;
  transition: background .2s, border-color .2s, transform .2s;
}
.opcion:hover, .opcion:focus-visible { background: var(--fondo-2); border-color: var(--acento); transform: translateY(-2px); }
.opcion-t { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.45rem; line-height: 1.1; }
.opcion-d { font-size: 1rem; color: var(--texto-suave); }
.dos .opcion:first-child .opcion-t { color: var(--acento); }
.dos .opcion:nth-child(2) .opcion-t { color: var(--texto); }
.dos .opcion-grupo { grid-column: 1 / -1; }
.dos .opcion-grupo .opcion-t { color: var(--detalle); }

.del-dia { text-align: center; margin-top: 28px; font-size: 1rem; }
.del-dia a { color: var(--texto-suave); text-decoration: none; }
.del-dia a:hover { color: var(--texto); }

/* ---------- Títulos y textos ---------- */

.volver { margin: 0 0 16px; font-size: .95rem; }
.volver a { color: var(--texto-suave); text-decoration: none; }
.volver a:hover { color: var(--texto); }

.titulo {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.03em;
  font-size: clamp(1.9rem, 6vw, 2.7rem);
  line-height: .95;
  margin: 0 0 20px;
}
.titulo.grande { font-size: clamp(2.2rem, 8vw, 3.4rem); margin-bottom: 32px; text-align: center; }
.bajada { color: var(--texto-suave); margin: -8px 0 24px; }
.bajada em { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.1em; }

.contador, .etiqueta, .filtro legend, .ruleta dt, .subtitulo {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--detalle);
  font-weight: 700;
}
.contador { margin: 0 0 6px; }

/* ---------- Opciones: chips y lista ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit;
  font-size: .97rem;
  padding: 7px 16px;
  border: 1px solid var(--linea);
  background: transparent;
  color: var(--texto);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.chip:hover { border-color: var(--texto-suave); }
.chip[aria-checked="true"] { font-weight: 600; background: var(--texto); border-color: var(--texto); color: var(--fondo); }

.lista { display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
.item {
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linea);
  padding: 16px 0;
  color: var(--texto);
  cursor: pointer;
  transition: padding-left .2s;
}
.item:hover, .item:focus-visible { padding-left: 10px; }
.item-t { display: block; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.15rem; line-height: 1.2; }
.item:hover .item-t { color: var(--acento); }
.item-d { display: block; font-size: .97rem; color: var(--texto-suave); }

.filtro { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.filtro legend { padding: 0; margin-bottom: 10px; }

textarea, select {
  font: inherit;
  color: var(--texto);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 12px;
}
textarea:focus, select:focus { outline: none; border-color: var(--detalle); }
#b-escena { width: 100%; padding: 14px 16px; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.1rem; resize: vertical; margin-bottom: 16px; }

/* ---------- Botones ---------- */

.boton {
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .92rem;
  background: var(--acento);
  color: var(--sobre-acento);
  border: 0;
  border-radius: 999px;
  padding: 13px 30px;
  cursor: pointer;
  transition: transform .1s, opacity .15s;
}
.boton:hover { opacity: .9; }
.boton:active { transform: scale(.98); }
.boton:disabled { opacity: .5; cursor: default; }

.link {
  font: inherit;
  font-size: .97rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--texto-suave);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linea);
}
.link:hover { color: var(--texto); }

.acciones, .acciones-extra { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.acciones { margin-top: 8px; }
.atras { margin-top: 32px; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

/* ---------- Resultados ---------- */

.resultado { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--linea); animation: aparecer .4s ease; }
.etiqueta { display: block; margin-bottom: 10px; }
.subtitulo { margin: 32px 0 12px; }
.subtitulo:first-of-type { margin-top: 0; }

.premisa {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.2rem, 3.6vw, 1.45rem);
  line-height: 1.3;
  margin: 0 0 20px;
}
.escena-cita {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.3rem;
  color: var(--texto-suave);
  margin: 0 0 8px;
}

.completar { list-style: none; padding: 0; margin: 0; }
.completar li {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: var(--fondo-2);
  border-left: 2px solid var(--acento);
  border-radius: 0 12px 12px 0;
  cursor: pointer;
}
.completar li:hover { border-left-color: var(--texto); background: #4c1920; }
/* En modo claro el fondo oscuro dejaba el texto (oscuro) invisible al pasar el mouse. */
:root[data-tema="claro"] .completar li:hover, :root[data-tema="claro"] .completar li:focus-visible { background: color-mix(in srgb, var(--acento) 14%, var(--fondo-2)); border-left-color: var(--acento); color: var(--texto); }

.preguntas { padding-left: 1.3em; margin: 0; }
.preguntas li { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.05rem; line-height: 1.35; margin-bottom: 10px; }
.preguntas li::marker { color: var(--detalle); font-family: var(--sans); font-size: .95rem; }

.situacion {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  padding: 16px 18px;
  border: 1px solid var(--acento-2);
  border-radius: 12px;
  color: var(--texto);
  margin: 0;
}

.detalles { list-style: none; padding: 0; margin: 0 0 24px; }
.detalles li { padding: 8px 0; border-bottom: 1px dashed var(--linea); }
.detalles li:last-child { border-bottom: 0; }
.detalles b { display: block; font-weight: 600; color: var(--detalle); font-size: .95rem; }

.frase {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.3rem;
  padding: 14px 18px;
  background: var(--fondo-2);
  border-left: 2px solid var(--acento);
  border-radius: 0 12px 12px 0;
  margin: 0 0 24px;
}

/* ---------- Ruleta ---------- */

.ruleta { margin: 0 0 32px; border-top: 1px solid var(--linea); }
.rueda {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
}
@media (max-width: 480px) { .rueda { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.ruleta dd {
  --alto: 2.3rem;
  margin: 0;
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  line-height: 1.25;
  min-height: var(--alto);
  display: flex;
  align-items: center;
  min-width: 0;
}
.ruleta dd[data-rueda="dato"] { font-weight: 700; color: var(--acento); }

/* la tira que gira, como una tragamonedas */
.ventana { display: block; width: 100%; height: var(--alto); overflow: hidden; position: relative; }
.tira { display: block; will-change: transform; }
.tira span {
  display: block;
  height: var(--alto);
  line-height: var(--alto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tira.rapida { filter: blur(1.2px); opacity: .75; }
.tira { transition: filter .3s, opacity .3s; }

.rueda { transition: background .4s; border-radius: 4px; }
.rueda.cayo { animation: destello .7s ease; }
.rueda.cayo dd { animation: cayo .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes destello { 0% { background: rgba(236, 170, 178, .18); } 100% { background: transparent; } }

.estrella { display: inline-block; animation: rotar .8s linear infinite; margin-right: 4px; }
@keyframes rotar { to { transform: rotate(360deg); } }
@keyframes cayo { 0% { transform: scale(1.06); } 100% { transform: none; } }

/* ---------- Hoja de escritura ---------- */

.consigna {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.15rem;
  color: var(--texto-suave);
  padding: 0 0 16px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 8px;
  white-space: pre-line;
}
.hoja .editor {
  width: 100%;
  min-height: 55vh;
  border: 0;
  border-radius: 14px;
  --pad-y: 12px;
  padding: var(--pad-y) 24px;
  /* La hoja crece con el texto (no tiene scroll propio): así los renglones
     acompañan siempre a lo escrito, también en el iPhone. */
  resize: none;
  overflow: hidden;
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.15rem;
  line-height: 2.2rem;
  color: var(--papel-tinta);
  background-color: var(--papel);
  /* renglones de cuaderno: el nombre de la comunidad, literal */
  background-image: linear-gradient(to bottom, transparent calc(2.2rem - 1px), var(--papel-renglon) calc(2.2rem - 1px));
  background-size: 100% 2.2rem;
  /* el renglón va 3px debajo de la base de la letra (que cae a ~1.3em del
     borde de cada línea), así lo escrito queda apoyado sobre la línea */
  background-position: 0 calc(var(--pad-y) + 1.3em + 3px - 2.2rem);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.hoja .editor { font-style: normal; }
.hoja .editor:empty::before { content: attr(data-placeholder); color: #9c7a70; pointer-events: none; }
.hoja .editor:focus { border: 0; }
.hoja { margin-bottom: 16px; }
.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  font-size: .95rem;
  color: var(--texto-suave);
  padding-top: 12px;
  border-top: 1px solid var(--linea);
}
select option { color: var(--papel-tinta); background: var(--papel); }
.barra select { padding: 2px 6px; font-size: .95rem; margin-left: 4px; border-radius: 8px; }
.progreso { flex: 1; min-width: 80px; height: 3px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.progreso span { display: block; height: 100%; width: 0; background: var(--acento-2); transition: width .3s; }
.timer-activo { color: var(--acento) !important; }
.reloj { font-variant-numeric: tabular-nums; text-decoration: none; border: 1px solid var(--linea); border-radius: 999px; padding: 3px 12px; }
.reloj:hover { border-color: var(--texto-suave); }
.nota { font-size: .9rem; color: var(--texto-suave); margin-top: 16px; }

/* ---------- Pie y aviso ---------- */

.pie { text-align: center; font-size: .92rem; color: var(--texto-suave); padding: 32px 16px 96px; }
.pie p { margin: 4px 0; }
.pie a { color: var(--texto); text-decoration-color: var(--linea); text-underline-offset: 3px; }

.aviso {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 20px);
  background: var(--texto);
  color: var(--fondo);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: .95rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Computadora ---------- */
@media (min-width: 900px) {
  .top { padding-top: 32px; }
  .vista { padding-top: 56px; }
  .opcion { padding: 36px 32px; }
  .rueda { grid-template-columns: 150px 1fr; padding: 20px 0; }
  .hoja .editor { min-height: 60vh; --pad-y: 16px; padding: var(--pad-y) 40px; }
}

/* ---------- Botón de Instagram (siempre visible) ---------- */
.insta {
  font-family: var(--sans);
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  background: var(--texto);
  color: var(--fondo);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transition: transform .2s, background .2s;
}
.insta:hover { transform: translateY(-2px); background: var(--acento); }
@media (max-width: 480px) {
  .insta {
  font-family: var(--sans); right: 16px; bottom: 16px; padding: 12px; }
  .insta span { display: none; }
  /* en el celu el botón flotante tapaba el texto: solo en la portada
     (en las demás pantallas está el @tl.author del pie) */
  body:not([data-vista="inicio"]) .insta { display: none; }
  /* y en la portada, que no tape el pie */
  body[data-vista="inicio"] .pie { padding-bottom: 72px; }
  .acciones { gap: 10px 16px; }
}

/* ---------- Menú de arriba ---------- */
.menu { display: flex; align-items: center; gap: 18px; font-size: .95rem; }
.menu a { color: var(--texto-suave); text-decoration: none; white-space: nowrap; }
.sesion { white-space: nowrap; }
.menu a:hover, .menu a.activo { color: var(--texto); }
.menu a.activo { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--acento); }
.sesion {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  background: none;
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
}
.sesion:hover { border-color: var(--texto-suave); }
.sesion:not(.con-sesion) { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
@media (max-width: 420px) { .menu { gap: 10px; font-size: .86rem; } .sesion { padding: 4px 10px; font-size: .8rem; } }
@media (max-width: 350px) { .menu { gap: 7px; font-size: .8rem; } }

/* ---------- Hoja: título del escrito ---------- */
.titulo-escrito {
  display: block;
  width: 100%;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  color: var(--texto);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed transparent;
  padding: 4px 0;
  margin: 0 0 14px;
}
.titulo-escrito::placeholder { color: var(--texto-suave); opacity: .6; }
.titulo-escrito:hover, .titulo-escrito:focus { outline: none; border-bottom-color: var(--linea); }
.boton-chico { padding: 8px 18px; font-size: .8rem; margin-left: auto; }

/* ---------- Mis escritos ---------- */
.escritos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.escritos li { border-bottom: 1px solid var(--linea); }
.escrito {
  display: block; width: 100%;
  font: inherit; text-align: left; color: var(--texto);
  background: none; border: 0; padding: 16px 0; cursor: pointer;
  transition: padding-left .2s;
}
.escrito:hover { padding-left: 10px; }
.escrito-t { display: block; font-family: var(--serif); font-style: italic; font-size: 1.2rem; }
.escrito:hover .escrito-t { color: var(--acento); }
.escrito-d { display: block; font-size: .9rem; color: var(--texto-suave); }
.escritos .vacio { padding: 20px 0; color: var(--texto-suave); }

/* ---------- Formulario de publicar ---------- */
.formulario { display: flex; flex-direction: column; gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--detalle); font-weight: 700; }
.campo small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--texto-suave); }
.campo input {
  font: inherit;
  color: var(--texto);
  background: var(--fondo-2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 12px 14px;
}
.campo input:focus { outline: none; border-color: var(--acento); }
.check { display: flex; gap: 10px; align-items: flex-start; color: var(--texto-suave); }
.check input { accent-color: var(--acento); width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.vista-previa { border: 0; padding: 0; }
.vista-previa .relato { border: 0 !important; margin: 0; }
.nota-grande { font-size: 1.05rem; color: var(--texto-suave); margin: 8px 0 20px; }
.nota-grande a { color: var(--texto); }

/* ---------- Biblioteca ---------- */
.biblioteca-controles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 24px; }
.filtro-clave { background: var(--acento) !important; color: var(--sobre-acento) !important; border-color: var(--acento) !important; font-weight: 600; }
.relato {
  padding: 26px 28px;
  margin-bottom: 20px;
  background: var(--tarjeta);
  border-radius: 18px;
}
@media (max-width: 520px) { .relato { padding: 22px 18px; } }
.relato-claves { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.clave {
  font: inherit; font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--acento); background: none;
  border: 1px solid var(--linea); border-radius: 999px;
  padding: 3px 10px; cursor: pointer;
}
.clave:hover:not(:disabled) { border-color: var(--acento); }
.clave:disabled { cursor: default; }
.relato-titulo {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; font-size: clamp(1.4rem, 4.5vw, 1.9rem); line-height: 1;
  margin: 0 0 16px;
}
.relato-texto {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.relato-texto.corto {
  max-height: 16em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.leer-mas { margin-top: 8px; }
.relato-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-top: 20px; font-size: .95rem; }
.relato-autor { color: var(--texto-suave); }
.relato-autor b { color: var(--texto); font-weight: 600; }
.relato-autor a { color: var(--acento); text-decoration: none; }
.relato-autor a:hover { text-decoration: underline; }
/* Cada tarjeta elige sus dos colores (vacía / llena) con estas variables. */
.estrellas { display: inline-flex; align-items: center; gap: 2px; --e-vacia: var(--linea); --e-llena: var(--acento); }
.estrella-voto {
  font-size: 1.45rem; line-height: 1;
  background: none; border: 0; padding: 2px; cursor: pointer;
  color: var(--e-vacia);
  transition: color .15s, transform .15s;
}
.estrella-voto.llena { color: var(--e-llena); }
.estrella-voto:disabled { cursor: default; }
/* al pasar el mouse se iluminan las estrellas hasta la elegida (solo con
   mouse: en el celular el «hover» queda pegado y tapaba el voto) */
@media (hover: hover) {
  .estrellas:hover .estrella-voto:not(:disabled) { color: var(--e-llena); }
  .estrellas .estrella-voto:not(:disabled):hover ~ .estrella-voto { color: var(--e-vacia); }
  .estrella-voto:not(:disabled):hover { transform: scale(1.15); }
}
.estrellas-resumen { font-size: .85rem; color: var(--texto-suave); margin-left: 8px; }
.borrar-relato { margin-top: 14px; font-size: .85rem; }

/* ---------- Cuenta ---------- */
.pestanas { margin-bottom: 24px; }
.error-form { color: var(--acento); font-weight: 600; margin: 0; min-height: 1em; }
.error-form:empty { display: none; }
.campo .error-campo, .error-campo { display: block; margin-top: 6px; color: var(--acento); font-weight: 600; font-size: .9rem; letter-spacing: 0; text-transform: none; }
.error-campo[hidden] { display: none; }
.codigo {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  letter-spacing: .08em;
  text-align: center;
  color: var(--sobre-acento);
  background: var(--papel);
  border-radius: 16px;
  padding: 20px 12px;
  margin: 0 0 12px;
  user-select: all;
  font-variant-numeric: tabular-nums;
}

/* ---------- Autora en los relatos ---------- */
.autor-link {
  font: inherit; font-weight: 600; color: var(--texto);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px;
}
.autor-link:hover:not(:disabled) { text-decoration-color: var(--acento); }
.autor-link:disabled { cursor: default; text-decoration: none; }
.relato-acciones { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.relato-acciones .borrar-relato { margin-top: 0; }

/* ---------- Comentarios ---------- */
.comentarios { margin-top: 16px; padding: 16px 18px; background: var(--fondo-2); border-radius: 14px; }
.lista-comentarios { list-style: none; margin: 0 0 14px; padding: 0; }
.lista-comentarios li { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista-comentarios li:first-child { padding-top: 0; }
.comentario-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .92rem; }
.comentario-cabeza b { font-weight: 700; }
.comentario-fecha { color: var(--texto-suave); font-size: .82rem; }
.comentario-cabeza .borrar-comentario { font-size: .8rem; margin-left: auto; }
.comentario-texto { margin: 4px 0 0; font-family: var(--serif); font-size: 1rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.comentario-vacio { margin: 0 0 12px; color: var(--texto-suave); font-size: .95rem; }
.form-comentario { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.form-comentario textarea {
  width: 100%; padding: 10px 12px; resize: vertical;
  font-family: var(--serif); font-size: 1rem;
  background: var(--fondo); border-radius: 12px;
}
.form-comentario .boton-chico { margin-left: 0; }

/* ---------- Ranking ---------- */
.ranking { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--linea); }
.puesto {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--linea);
}
.puesto-numero {
  font-family: var(--sans); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em;
  color: var(--texto-suave); text-align: center;
}
.podio .puesto-numero { color: var(--sobre-acento); background: var(--acento); border-radius: 999px; width: 44px; height: 44px; line-height: 44px; font-size: 1.35rem; justify-self: center; }
.podio:first-child .puesto-numero { background: var(--papel); width: 52px; height: 52px; line-height: 52px; font-size: 1.6rem; }
.puesto-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.puesto-nombre { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.3rem; text-align: left; text-decoration: none; }
.puesto-nombre:hover { color: var(--acento); }
.podio:first-child .puesto-nombre { font-size: 1.5rem; }
.puesto-insta { color: var(--acento); text-decoration: none; font-size: .92rem; }
.puesto-insta:hover { text-decoration: underline; }
.puesto-detalle { color: var(--texto-suave); font-size: .85rem; }
.puesto-estrellas { font-family: var(--sans); font-weight: 800; font-size: 1.15rem; color: var(--acento); white-space: nowrap; }
.como-funciona { margin-top: 24px; color: var(--texto-suave); font-size: .95rem; }
.como-funciona summary { cursor: pointer; color: var(--texto); font-weight: 600; }
.como-funciona p { margin: 10px 0 0; }
.bajada a, .nota a { color: var(--texto); }

/* ---------- Menú en celular: pasa debajo del logo ---------- */
@media (max-width: 520px) {
  .top { flex-wrap: wrap; row-gap: 10px; }
  .menu { width: 100%; justify-content: space-between; }
}

/* ---------- Campanita de avisos ---------- */
.campana { position: relative; text-decoration: none; font-size: 1.1rem; line-height: 1; }
.globito {
  position: absolute; top: -8px; right: -10px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--acento); color: var(--sobre-acento);
  font-size: .7rem; font-weight: 800; line-height: 18px; text-align: center;
}
.avisos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.avisos li { border-bottom: 1px solid var(--linea); }
.avisos .vacio { padding: 20px 0; color: var(--texto-suave); }
.aviso-boton {
  display: block; width: 100%; text-align: left; font: inherit; color: var(--texto);
  background: none; border: 0; padding: 16px 0; line-height: 1.5; cursor: pointer; text-decoration: none;
}
.aviso-boton i { font-family: var(--serif); }
.aviso-item.fijado .aviso-boton { padding: 16px; margin: 12px 0; border: 1px solid var(--linea); border-radius: 14px; background: var(--tarjeta); }
.aviso-pin { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--detalle); margin-bottom: 4px; }
.aviso-ir { color: var(--detalle); white-space: nowrap; }
.aviso-item.nuevo .aviso-boton { padding-left: 14px; border-left: 3px solid var(--acento); }
.aviso-fecha { display: block; font-size: .82rem; color: var(--texto-suave); margin-top: 2px; }

/* ---------- Mi cuenta / recuperar ---------- */
.estado-correo { margin: -8px 0 0; font-size: .9rem; color: var(--texto-suave); }
.con-codigo { margin-top: 28px; }
.con-codigo summary { cursor: pointer; color: var(--texto-suave); font-size: .95rem; margin-bottom: 16px; }
.con-codigo[open] summary { color: var(--texto); }
#f-olvide .error-form { color: var(--texto); font-weight: 500; }

/* ---------- Hilos de comentarios ---------- */
.lista-comentarios li.hilo { padding: 12px 0; }
.comentario + .comentario { margin-top: 10px; }
.es-respuesta { margin-left: 18px; padding-left: 14px; border-left: 2px solid var(--linea); }
.comentario-autor { font-weight: 700; color: var(--texto); }
a.comentario-autor { text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
a.comentario-autor:hover { color: var(--acento); }
.es-autor { color: var(--acento); font-size: .85rem; font-weight: 600; }
.hilo .responder { font-size: .85rem; margin-top: 8px; margin-left: 32px; }
.hilo .form-comentario { margin: 10px 0 0 32px; }
@media (max-width: 520px) { .es-respuesta { margin-left: 8px; } .hilo .responder, .hilo .form-comentario { margin-left: 22px; } }

/* ---------- Hoja: ánimo y público/privado ---------- */
.opciones-escrito { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -4px 0 14px; }
.animo {
  font: inherit; font-size: .9rem; color: var(--texto);
  background: transparent; border: 1px solid var(--linea); border-radius: 999px;
  padding: 6px 12px; max-width: 100%;
}
.privacidad {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  color: var(--texto); background: transparent;
  border: 1px solid var(--linea); border-radius: 999px; padding: 6px 14px;
}
.privacidad[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.mas-opciones { margin: -4px 0 14px; }
.mas-opciones summary { cursor: pointer; font-size: .9rem; color: var(--texto-suave); }
.mas-opciones input {
  width: 100%; margin-top: 8px; font: inherit; color: var(--texto);
  background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px;
}

/* ---------- Fotos de perfil ---------- */
.avatar { display: inline-block; flex: none; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.avatar.micro { width: 22px; height: 22px; }
.avatar.mini { width: 36px; height: 36px; }
.avatar.mediano { width: 56px; height: 56px; }
.avatar.grande { width: 96px; height: 96px; box-shadow: 0 0 0 3px var(--tarjeta), 0 0 0 4px var(--linea); }
.avatar-inicial {
  display: inline-grid; place-items: center;
  background: var(--acento); color: var(--sobre-acento);
  font-family: var(--serif); font-style: italic; font-weight: 700;
}
.avatar-inicial.micro { font-size: .7rem; }
.avatar-inicial.mini { font-size: 1rem; }
.avatar-inicial.mediano { font-size: 1.5rem; }
.avatar-inicial.grande { font-size: 2.6rem; }

/* ---------- Firma en las tarjetas ---------- */
.firma-fila { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.campanita-sub { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 30px; min-width: 30px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--texto); font-size: .85rem; cursor: pointer; opacity: .75; transition: opacity .2s, background .2s; }
.campanita-sub:hover { opacity: 1; border-color: var(--acento); }
.campanita-sub.activa { opacity: 1; background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.campanita-sub span { font-size: .75rem; font-weight: 700; }
.firma { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); min-width: 0; }
.firma-texto { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.firma-texto b { font-weight: 700; }
.firma-texto small { color: var(--texto-suave); font-size: .82rem; }
.firma:hover b { color: var(--acento); }
.relato-animo { margin: -8px 0 14px; font-size: .9rem; color: var(--texto-suave); }
.relato-fecha { color: var(--texto-suave); font-size: .9rem; }
.relato-cuando { margin: -4px 0 10px; color: var(--texto-suave); font-size: .8rem; }
.perfil-suscriptores { font-size: .9rem; color: var(--texto-suave); }
.perfil-suscriptores b { color: var(--texto); }
.perfil-suscribir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 0 4px; }
.perfil-suscribir .boton-chico { margin-left: 0; }
.perfil-suscribir small { color: var(--texto-suave); font-size: .82rem; }
.comentario-autor { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
a.comentario-autor { text-decoration: none; }
a.comentario-autor:hover { color: var(--acento); }

/* ---------- Perfil ---------- */
.perfil-cabeza { display: flex; align-items: center; gap: 20px; margin: 8px 0 20px; }
.perfil-datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.perfil-nombre { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1.1; margin: 0; }
.perfil-insta { color: var(--acento); text-decoration: none; font-weight: 600; }
.perfil-insta:hover { text-decoration: underline; }
.perfil-estado {
  align-self: flex-start; margin-top: 4px;
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--acento); color: var(--acento);
}
.perfil-bio { font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.6; margin: 0 0 16px; }
.perfil-gustos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: .9rem; }
.perfil-gustos > span:first-child { color: var(--texto-suave); margin-right: 4px; }
.gusto { padding: 2px 10px; border-radius: 999px; background: var(--tarjeta); }
.perfil-libro { margin: 0 0 16px; }
.perfil-libro span { color: var(--texto-suave); }
.perfil-numeros { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 0; margin: 0 0 8px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); color: var(--texto-suave); font-size: .9rem; }
.perfil-numeros b { color: var(--texto); font-size: 1.05rem; }
.perfil-subtitulo { margin-top: 28px; }

/* ---------- Ranking con foto y mejor escrito ---------- */
.puesto-persona { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--texto); }
.puesto-persona:hover .puesto-nombre { color: var(--acento); }
.puesto-mejor { font-size: .85rem; color: var(--texto); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Mi cuenta: desplegables ---------- */
.elegir-avatar summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.elegir-avatar summary::-webkit-details-marker { display: none; }
.avatares { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; margin-top: 14px; }
.avatares .elegir { background: none; border: 2px solid transparent; border-radius: 50%; padding: 2px; cursor: pointer; justify-self: center; }
.avatares .elegir.elegido { border-color: var(--acento); }
.desplegable { border-top: 1px solid var(--linea); padding-top: 14px; }
.desplegable summary { cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--detalle); font-weight: 700; }
.desplegable summary small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--texto-suave); }
.desplegable[open] summary { margin-bottom: 14px; }
.desplegable > * + * { margin-top: 14px; }
.chip[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); font-weight: 600; }
#f-cuenta textarea { font: inherit; color: var(--texto); background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; resize: vertical; }
#f-cuenta select, #f-registro select, .pedir-pais select { font: inherit; color: var(--texto); background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; }

/* ---------- Barra de arriba: logo al centro, secciones debajo ---------- */
.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "izq marca der" "menu menu menu";
  align-items: center;
  row-gap: 14px;
  flex-wrap: nowrap;
}
.top-izq { grid-area: izq; justify-self: start; display: flex; align-items: center; min-height: 36px; }
.marca { grid-area: marca; justify-self: center; }
.top-der { grid-area: der; justify-self: end; display: flex; align-items: center; }
.top .menu { grid-area: menu; width: 100%; justify-content: center; gap: 32px; padding-top: 12px; border-top: 1px solid var(--linea); }
.campana { font-size: 1.2rem; }
@media (max-width: 520px) {
  .top { row-gap: 10px; }
  .top .menu { justify-content: space-around; gap: 8px; font-size: .95rem; }
}

/* Estado de publicación en la hoja */
.estado-pub { font-size: .9rem; color: var(--texto-suave); }
.estado-pub.publicado { color: var(--acento); font-weight: 600; }
.opciones-escrito .boton-chico { margin-left: 0; }

/* ---------- Panel de administración ---------- */
.admin-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 0 0 20px; }
.admin-numeros div { background: var(--tarjeta); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.admin-numeros b { font-family: var(--sans); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.admin-numeros span { font-size: .82rem; color: var(--texto-suave); }
.copias-lista { list-style: none; margin: 6px 0 10px; padding: 0; font-size: .9rem; }
.copias-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--linea); }
.copias-lista li.vacio { color: var(--texto-suave); display: block; }
.mails-auto { margin: 4px 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.mails-prueba { gap: 10px; flex-wrap: wrap; }
.mails-prueba .boton-chico { margin-left: 0; }
.prefs-mail { border: 0; padding: 0; margin: 14px 0 10px; display: grid; gap: 8px; }
.prefs-mail legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.prefs-mail .nota { margin: 4px 0 0; }
#f-envio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
#f-envio select, #f-envio input, #f-envio textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
#f-envio label { display: grid; gap: 4px; font-size: .9rem; }
#f-envio .envio-novedades:not([hidden]) { display: grid; gap: 10px; }
#f-envio .boton-chico { justify-self: start; margin-left: 0; }
.envios-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.envios-lista li { padding: 10px 0; border-top: 1px solid var(--linea); }
.envios-lista li.vacio { color: var(--texto-suave); font-size: .9rem; }
.envios-lista .nota { margin: 2px 0 6px; }
.envio-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.envio-estado { font-size: .82rem; color: var(--texto-suave); white-space: nowrap; }
.envio-aprobar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.envio-aprobar input { width: 11em; font-family: var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.envio-aprobar .boton-chico, .envios-lista .acciones .boton-chico { margin-left: 0; }
.en-vivo { background: var(--tarjeta); border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; }
.en-vivo:empty { display: none; }
.en-vivo-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-family: var(--sans); font-weight: 700; }
.en-vivo-titulo b { font-size: 1.3rem; }
.en-vivo-titulo small { font-weight: 400; font-size: .75rem; color: var(--texto-suave); margin-left: auto; }
.punto-vivo { width: 10px; height: 10px; border-radius: 50%; background: #7e8c6b; box-shadow: 0 0 0 0 rgba(126, 140, 107, .6); animation: latido-vivo 2s infinite; }
@keyframes latido-vivo { 70% { box-shadow: 0 0 0 8px rgba(126, 140, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 140, 107, 0); } }
@media (prefers-reduced-motion: reduce) { .punto-vivo { animation: none; } }
.en-vivo-cifras { margin: 4px 0 8px; }
.en-vivo-lista { list-style: none; margin: 0; padding: 0; }
.en-vivo-lista li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linea); font-size: .88rem; }
.en-vivo-lista li.vacio { display: block; color: var(--texto-suave); }
.en-vivo-quien { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--texto); text-decoration: none; }
.en-vivo-quien > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-vivo-quien small, .en-vivo-cuando { color: var(--texto-suave); font-size: .78rem; }
.en-vivo-cuando { white-space: nowrap; }
@media (max-width: 560px) {
  .en-vivo-lista li { grid-template-columns: minmax(0, 1fr) auto; }
  .en-vivo-donde { grid-column: 1 / -1; grid-row: 2; padding-left: 30px; color: var(--texto-suave); }
}
.admin-descargas { margin-bottom: 4px; gap: 12px; }
.admin-descargas .boton-chico { margin-left: 0; }
.tabla-admin { overflow-x: auto; }
.tabla-admin table { width: 100%; border-collapse: collapse; font-size: .85rem; white-space: nowrap; }
.tabla-admin th { text-align: left; font-weight: 700; color: var(--detalle); padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.tabla-admin td { padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.tabla-admin a, .movimientos a { color: var(--texto); }
.movimientos { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.movimientos li { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.mov-fecha { color: var(--texto-suave); font-size: .8rem; margin-right: 6px; }
.mov-detalle { display: block; color: var(--texto-suave); font-size: .82rem; margin-top: 2px; }
.suave { color: var(--texto-suave); }

/* ---------- Invitación a sumarse ---------- */
.invitacion {
  width: min(360px, calc(100vw - 32px)); padding: 32px 28px 24px; border: 1px solid var(--linea); border-radius: 20px;
  background: var(--truffle); color: var(--texto); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.invitacion[open] { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: invitacion-entra .35s ease-out; }
.invitacion::backdrop { background: rgba(40, 12, 16, .6); backdrop-filter: blur(2px); }
.invitacion h2 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1.25; }
.invitacion p { margin: 0; color: var(--texto-suave); line-height: 1.55; }
.invitacion .invitacion-marca { color: var(--acento); font-size: 1.4rem; }
.invitacion .boton { margin-top: 8px; }
.invitacion-cerrar { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: var(--texto-suave); font-size: 1.6rem; cursor: pointer; line-height: 1; }
@keyframes invitacion-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .invitacion[open] { animation: none; } }

.bandera { font-style: normal; font-weight: 400; margin-left: .2em; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* De dónde salió la idea del escrito */
.relato-origen { margin: 0 0 14px; font-size: .85rem; color: var(--detalle); }
.relato-origen summary { cursor: pointer; width: fit-content; }
.relato-origen ul { list-style: none; margin: 8px 0 0; padding: 10px 14px; border-left: 2px solid var(--acento); color: var(--texto-suave); font-size: .88rem; line-height: 1.5; }
.relato.destacado { box-shadow: 0 0 0 2px var(--acento); }

/* ---------- Sorpresa (primer escrito publicado) ---------- */
.sorpresa-bloqueada { margin: 20px 0 0; font-size: .9rem; color: var(--texto-suave); }
.sorpresa-perfil { margin: 24px 0 8px; padding: 20px; border: 1px solid var(--linea); border-radius: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sorpresa-perfil .etiqueta { margin: 0; }
.sorpresa-perfil .boton { text-decoration: none; text-align: center; }
.sorpresa-info { width: 100%; }
.sorpresa-info p { margin: 8px 0 0; color: var(--texto-suave); line-height: 1.55; }
.invitacion .boton { text-decoration: none; }

/* ---------- Mi perfil: la cuenta adentro ---------- */
.perfil-cuenta { margin: 8px 0 28px; }
.perfil-editar > summary { font-size: .95rem; }
.perfil-editar .formulario { margin-top: 12px; }
.perfil-cuenta-pie { margin-top: 16px; }
.sorpresa-perfil { margin: 20px 0 20px; }

.pedir-pais { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 4px; }
.pedir-pais select { width: 100%; }

/* ---------- Cupos para publicar ---------- */
.cupos-nota { margin: 6px 0 0; font-size: .85rem; color: var(--texto-suave); }
.cupos-nota a { color: var(--detalle); }

/* ---------- Frase del día ---------- */
.frase-caja { margin: 0 0 24px; }
.frase-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.frase-form textarea { font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.frase-contador { margin: 0; font-size: .8rem; color: var(--texto-suave); text-align: right; }
.frase-contador.pasada { color: var(--acento); font-weight: 700; }
.chip-radio { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--linea); border-radius: 999px; font-size: .9rem; cursor: pointer; }
.chip-radio:has(input:checked) { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.relato-frase .frase-etiqueta, .relato-frase .frase-texto { text-align: center; }
.frase-etiqueta { margin: 0 0 10px; font-size: .85rem; color: var(--detalle); }
.frase-etiqueta i { font-family: var(--serif); }
.frase-texto { margin: 0 0 18px; font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.5; color: var(--texto); }
.frase-texto::before { content: "“"; }
.frase-texto::after { content: "”"; }

/* ---------- Top 5: podio ---------- */
.ranking { border-top: 0; display: flex; flex-direction: column; gap: 10px; }
.puesto { border: 0; background: var(--tarjeta); border-radius: 16px; padding: 14px 16px; }
.puesto:nth-child(n+4) { background: none; border-bottom: 1px solid var(--linea); border-radius: 0; }
.podio:first-child { background: var(--papel); padding: 18px 16px 20px; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.podio:first-child::before { content: "👑  Relato de la semana"; grid-column: 1 / -1; font-size: .7rem; letter-spacing: .16em; font-weight: 800; text-transform: uppercase; color: var(--fondo); }
.podio:first-child .puesto-persona, .podio:first-child .puesto-nombre, .podio:first-child .puesto-mejor { color: var(--papel-tinta); }
.podio:first-child .puesto-detalle { color: #8a5a50; }
.podio:first-child .puesto-numero { background: var(--fondo); color: var(--papel); }
.podio:first-child .puesto-estrellas { color: var(--fondo); }
.podio:nth-child(2), .podio:nth-child(3) { box-shadow: inset 3px 0 0 var(--acento); }
@media (max-width: 520px) {
  .puesto-nombre, .podio:first-child .puesto-nombre { font-size: 1.12rem; }
  .puesto { grid-template-columns: 46px minmax(0, 1fr) auto; }
}

/* ---------- Comunidad: un tono por tipo ---------- */
.fila-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.fila-pills .clave { margin: 0; }
.tipo-pill, .insignia-top { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.insignia-top { background: var(--acento); color: var(--sobre-acento); }
.relato.en-top { box-shadow: inset 0 0 0 1.5px var(--acento); }
/* ruleta: rosa viejo */
.relato.de-ruleta { background: var(--ruleta); }
.de-ruleta .tipo-pill { background: var(--papel); color: var(--fondo); }
.de-ruleta .clave { border-color: rgba(248, 229, 215, .45); color: var(--papel); }
.de-ruleta .relato-cuando, .de-ruleta .relato-animo, .de-ruleta .firma-texto small, .de-ruleta .estrellas-resumen, .de-ruleta .relato-origen { color: #f6dcd3; }
.de-ruleta .estrellas { --e-vacia: rgba(248, 229, 215, .35); --e-llena: var(--papel); }
.de-ruleta .relato-origen ul { border-left-color: var(--papel); color: #f6dcd3; }
/* frase: papel, compacta para no ganarle a los relatos */
.relato-frase { background: var(--papel); padding-top: 18px; padding-bottom: 18px; }
.relato-frase .fila-pills { justify-content: center; margin-bottom: 8px; }
.relato-frase .tipo-pill { background: var(--fondo); color: var(--papel); }
.relato-frase .frase-texto { font-size: 1.15rem; margin-bottom: 12px; }
.relato-frase .frase-texto, .relato-frase .firma, .relato-frase .firma-texto b, .relato-frase .estrellas-resumen, .relato-frase .ver-comentarios { color: var(--papel-tinta); }
.relato-frase .frase-etiqueta, .relato-frase .firma-texto small, .relato-frase .borrar-relato { color: #9b4a55; }
.relato-frase .estrellas { --e-vacia: #e3c4bd; --e-llena: var(--fondo); }
.relato-frase .campanita-sub { color: var(--papel-tinta); border-color: #e3c4bd; }
.relato-frase .campanita-sub.activa { background: var(--fondo); border-color: var(--fondo); color: var(--papel); }
.relato-frase .comentarios { color: var(--texto); }
/* filtros por tipo */
.filtros-tipo { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 2px; }
.filtro-tipo { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--texto); font: inherit; font-size: .85rem; white-space: nowrap; cursor: pointer; }
.filtro-tipo[aria-checked="true"] { background: var(--texto); color: var(--fondo); border-color: var(--texto); font-weight: 700; }
.filtro-tipo i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(248, 229, 215, .35); }
.filtro-tipo i.t-relato { background: var(--tarjeta); }
.filtro-tipo i.t-ruleta { background: var(--ruleta); }
.filtro-tipo i.t-frase { background: var(--papel); }
#b-orden .chip { padding: 6px 14px; font-size: .88rem; }
/* avisos fijados, en marrón como los popups */
.aviso-item.fijado .aviso-boton { background: var(--truffle); border-color: rgba(236, 170, 178, .35); }
.biblioteca-controles .filtros-tipo { flex-basis: 100%; margin-bottom: 4px; }

/* ============================================================
   NOVELAS Y HOJA PROFESIONAL
   ============================================================ */
/* formato del texto (hoja y lectura) */
.fuente-maquina { font-family: "Courier Prime", "Courier New", Courier, monospace !important; }
.fuente-moderna { font-family: var(--sans) !important; }
.alinear-justificado { text-align: justify; hyphens: auto; }
.alinear-centrado { text-align: center; }
.hoja .editor.fuente-moderna, .hoja .editor.fuente-maquina { font-size: 1.05rem; }
.relato-texto b { font-weight: 700; }

/* barra de herramientas de la hoja */
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; margin-bottom: 10px; border-radius: 14px; background: var(--truffle); }
.herramientas select { padding: 6px 8px; border-radius: 10px; background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); font: inherit; font-size: .85rem; }
.herramientas button { min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--linea); background: none; color: var(--texto); font: inherit; font-size: 1rem; cursor: pointer; }
.herramientas button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.herramientas .herr-texto { font-size: .82rem; margin-left: auto; }
.herramientas .sep { width: 1px; height: 24px; background: var(--linea); }
.herr-ayuda { margin: -6px 0 16px; font-size: .8rem; }
.hoja-vista { min-height: 55vh; padding: 12px 24px; border-radius: 14px; background-color: var(--papel); color: var(--papel-tinta);
  font-size: 1.15rem; line-height: 2.2rem; box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
  background-image: linear-gradient(to bottom, transparent calc(2.2rem - 1px), var(--papel-renglon) calc(2.2rem - 1px));
  background-size: 100% 2.2rem; background-position: 0 calc(12px + 1.3em + 3px - 2.2rem); }

/* ¿es parte de una novela? */
.parte-desafio { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .85rem; color: var(--texto-suave); cursor: pointer; }
.parte-desafio input { accent-color: var(--acento); width: 16px; height: 16px; flex: none; margin: 0; }
.parte-desafio b { color: var(--texto); }
.parte-novela { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 14px; font-size: .9rem; }
.parte-novela select, .parte-novela input { padding: 6px 8px; border-radius: 10px; background: var(--fondo-2); color: var(--texto); border: 1px solid var(--linea); font: inherit; font-size: .85rem; }
.parte-novela select { flex: 1 1 160px; }
.parte-cap { display: inline-flex; align-items: center; gap: 6px; }
.parte-cap input { width: 64px; }

/* diálogo de novela */
.dialogo-novela { width: min(440px, calc(100vw - 32px)); }
.form-novela { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.form-novela .campo { margin-bottom: 10px; }
.form-novela input, .form-novela textarea { width: 100%; box-sizing: border-box; }
.form-novela .boton { align-self: center; margin-top: 6px; }
.form-novela .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.picantes-elegir { display: flex; flex-wrap: wrap; gap: 6px; }
.picantes-elegir button { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--texto); font: inherit; font-size: .85rem; cursor: pointer; }
.picantes-elegir button[aria-checked="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }

/* pastilla de novela en las tarjetas */
.pill-novela { background: var(--truffle); color: var(--papel); text-decoration: none; }
.leer-novela { display: inline-block; margin-top: 10px; }
.filtro-tipo i.t-novela { background: var(--truffle); }
.picantes { letter-spacing: 1px; }

/* tarjeta de novela (perfil) */
.novelas-lista { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.tarjeta-novela { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; background: var(--truffle); color: var(--texto); text-decoration: none; }
.tarjeta-novela:hover { box-shadow: inset 0 0 0 1.5px var(--acento); }
.nov-tipo { font-size: .68rem; font-weight: 800; letter-spacing: .14em; color: var(--acento); text-transform: uppercase; }
.nov-titulo { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--papel); margin: 2px 0; font-weight: 400; }
.nov-datos { display: flex; flex-wrap: wrap; gap: 6px; }
.nov-datos .pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid rgba(248, 229, 215, .3); }
.nov-datos .pill.rosa { background: var(--acento); color: var(--fondo); border-color: var(--acento); }
.nov-desc { font-family: var(--serif); font-size: .95rem; line-height: 1.55; color: var(--texto-suave); }

/* página de la novela */
.nov-cabeza { background: var(--truffle); border-radius: 20px; padding: 22px 20px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.nov-cabeza .nov-titulo { font-size: 2rem; }
.sinopsis { font-family: var(--serif); font-size: 1rem; line-height: 1.6; margin: 0; }
.avance { display: flex; justify-content: space-between; font-size: .8rem; color: var(--texto-suave); }
.avance-barra { height: 8px; border-radius: 999px; background: rgba(248, 229, 215, .15); overflow: hidden; }
.avance-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--acento), var(--papel)); border-radius: 999px; transition: width .4s; }
.caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cap { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--tarjeta); color: var(--texto); text-decoration: none; }
.cap .n { font-weight: 800; font-size: 1.1rem; color: var(--acento); text-align: center; }
.cap .t { font-family: var(--serif); font-style: italic; font-size: 1.05rem; }
.cap .m { display: block; margin-top: 2px; font: .75rem var(--sans); color: var(--texto-suave); }
.cap .e { font-size: .8rem; font-weight: 700; color: var(--acento); white-space: nowrap; }
.cap.leido .e { color: var(--texto-suave); }
.cap.actual { box-shadow: inset 0 0 0 1.5px var(--acento); }
.cap.bloq { opacity: .55; background: none; border: 1px dashed var(--linea); }
a.cap:hover { box-shadow: inset 0 0 0 1.5px var(--acento); }

/* leyendo un capítulo */
.lectura-barra { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 50; background: rgba(248, 229, 215, .12); }
.lectura-barra span { display: block; height: 100%; width: 0; background: var(--acento); transition: width .1s linear; }
.migas { font-size: .85rem; color: var(--texto-suave); margin: 0 0 14px; }
.migas a { color: var(--acento); font-weight: 700; text-decoration: none; }
.lectura .relato-texto { font-size: 1.1rem; line-height: 1.8; }
.candado { background: var(--truffle); border-radius: 18px; padding: 18px; margin: 4px 0 24px; }
.candado p { margin: 0 0 12px; font-size: .92rem; }
.candado .paso { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(248, 229, 215, .06); margin-bottom: 8px; font-size: .92rem; }
.candado .paso .ok { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; border: 1.5px solid var(--acento); }
.candado .paso.hecho .ok { background: var(--acento); color: var(--fondo); }
.siguiente-bloq { width: 100%; margin-top: 8px; padding: 14px; border-radius: 999px; border: 0; font: 800 .85rem var(--sans); letter-spacing: .1em; text-transform: uppercase; background: rgba(248, 229, 215, .12); color: var(--texto-suave); }
.siguiente-cap { display: block; width: 100%; box-sizing: border-box; text-align: center; margin-top: 8px; text-decoration: none; }

/* biblioteca: carpeta por novela */
.carpeta details { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.carpeta summary { cursor: pointer; font-size: 1rem; }
.carpeta .escritos { margin: 10px 0 6px 14px; border-top: 0; }
.escrito-cap { font: 800 .72rem var(--sans); letter-spacing: .08em; color: var(--acento); text-transform: uppercase; margin-right: 4px; }

/* ============================================================
   AJUSTES: hoja cómoda, carpeta de novela, chiles, sugerencias
   ============================================================ */
/* el cartelito ("¡Listo!", "creada") en marrón: resalta sobre cualquier fondo */
.aviso { background: var(--truffle); color: var(--papel); border: 1px solid rgba(236, 170, 178, .55); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); z-index: 1000; }

/* ¿es parte de una novela?: una línea discreta */
.parte-novela { border: 0; padding: 0; margin: 0 0 6px; gap: 6px 8px; color: var(--texto-suave); font-size: .85rem; }
.parte-novela select { flex: 0 1 auto; max-width: 62%; padding: 4px 26px 4px 10px; border-radius: 999px; background-color: transparent; }
.parte-novela .parte-cap input { width: 54px; padding: 4px 8px; border-radius: 999px; background: transparent; }
@media (max-width: 520px) { .parte-novela select { max-width: none; flex: 1 1 100%; } }

/* barra de herramientas pegada a la hoja, como un procesador de texto */
.herramientas {
  position: sticky; top: 0; z-index: 5;
  flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 6px 10px; margin: 0;
  background: #ecd2c3; border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--papel-renglon);
  scrollbar-width: none;
}
.herramientas::-webkit-scrollbar { display: none; }
.herramientas select { flex: none; padding: 5px 8px; border-radius: 8px; background: transparent; color: var(--papel-tinta); border: 1px solid rgba(67, 39, 32, .2); font-size: .82rem; }
.herramientas button { flex: none; min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--papel-tinta); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.herramientas button:hover { background: rgba(67, 39, 32, .08); }
.herramientas button[aria-pressed="true"] { background: var(--papel-tinta); color: var(--papel); }
.herramientas svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.herramientas .sep { flex: none; width: 1px; height: 20px; background: rgba(67, 39, 32, .2); margin: 0 4px; }
.herramientas .herr-vista { margin-left: auto; font-size: .8rem; }
@media (max-width: 420px) { .herramientas .herr-vista span { display: none; } }
.herramientas + .hoja .editor, .herramientas + .hoja .hoja-vista { border-radius: 0 0 14px 14px; }
.herramientas + .hoja { box-shadow: 0 18px 40px rgba(0, 0, 0, .25); border-radius: 0 0 14px 14px; }
.herramientas + .hoja .editor, .herramientas + .hoja .hoja-vista { box-shadow: none; }
.hoja-vista { white-space: pre-wrap; }

/* spicy: 5 chiles */
.picantes-elegir { gap: 2px; }
.picantes-elegir button { padding: 2px 4px; border: 0; background: none; font-size: 1.5rem; line-height: 1; filter: grayscale(1); opacity: .35; transition: transform .15s, opacity .15s; }
.picantes-elegir button.on { filter: none; opacity: 1; }
.picantes-elegir button:hover { transform: scale(1.15); }
.picantes-elegir button[aria-checked="true"] { background: none; }

/* género: lista plegable + elegidos */
.form-novela select { width: 100%; padding: 10px 12px; border-radius: 12px; background: var(--fondo-2); color: var(--texto); border: 1px solid var(--linea); font: inherit; }
.generos-elegidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.genero-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 0; background: var(--acento); color: var(--sobre-acento); font: inherit; font-size: .82rem; font-weight: 700; text-transform: capitalize; cursor: pointer; }
.genero-pill span { font-size: .7rem; opacity: .7; }

/* biblioteca: carpeta de la novela */
.carpeta { list-style: none; margin: 14px 0; }
.carpeta details { padding: 0; border: 0; border-radius: 18px; background: var(--truffle); overflow: hidden; }
.carpeta summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; }
.carpeta summary::-webkit-details-marker { display: none; }
.carp-datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.carp-tipo { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.carp-titulo { font-family: var(--serif); font-style: italic; font-size: 1.45rem; color: var(--papel); line-height: 1.2; }
.carp-meta { font-size: .8rem; color: var(--texto-suave); }
.carp-flecha { flex: none; font-size: 1.3rem; color: var(--acento); transition: transform .2s; }
.carpeta details[open] .carp-flecha { transform: rotate(180deg); }
.carp-caps { list-style: none; margin: 0; padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(236, 170, 178, .2); }
.carp-cap { width: 100%; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 10px 8px; border: 0; border-radius: 12px; background: rgba(248, 229, 215, .05); color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.carp-cap:hover { background: rgba(248, 229, 215, .1); }
.carp-cap .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--fondo); font-weight: 800; font-size: .85rem; }
.carp-cap .t { font-family: var(--serif); font-style: italic; font-size: 1.02rem; }
.carp-cap small { display: block; font: .75rem var(--sans); font-style: normal; color: var(--texto-suave); margin-top: 2px; }
.carp-acciones { display: flex; align-items: center; gap: 14px; padding: 6px 18px 18px; }
.carp-acciones .boton-chico { margin-left: 0; }

/* sugerencias */
.sugerir-link { margin: 26px 0 0; text-align: center; font-size: .9rem; }
.pie-sugerir { margin: 0 0 6px; font-size: .85rem; opacity: .8; }
.form-sugerir { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.form-sugerir textarea { width: 100%; box-sizing: border-box; }
.form-sugerir .boton { align-self: center; }
.sugerencia-texto { display: block; margin-top: 4px; font-family: var(--serif); white-space: pre-wrap; }
@media (max-width: 380px) { .herramientas { padding: 6px; } .herramientas button { min-width: 30px; padding: 0 5px; } .herramientas .sep { margin: 0 2px; } .herramientas select { padding: 5px 4px; } }

/* compartir */
.compartir-opciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 6px; }
.compartir-opciones .boton { flex-basis: 100%; }
.compartir-red { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(236, 170, 178, .45); background: none; color: var(--texto); font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer; }
.compartir-red:hover { background: var(--acento); color: var(--sobre-acento); }
.relato-frase .compartir { color: var(--papel-tinta); }
.de-ruleta .compartir { color: var(--papel); }
/* copia de seguridad (panel) */
.respaldo { margin: 18px 0; padding: 16px 18px; border-radius: 16px; background: var(--truffle); }
.respaldo-titulo { margin: 0 0 4px; font-weight: 800; }
.respaldo .acciones { margin: 10px 0; }
.respaldo input[type=file] { margin: 8px 0; color: var(--texto); }
#e-conteo.pasado { color: var(--acento); font-weight: 700; }
.contador-campo { display: block; text-align: right; font-size: .75rem; color: var(--texto-suave); margin-top: 4px; }
.contador-campo.lleno { color: var(--acento); font-weight: 700; }

/* el editor de la hoja (muestra el formato mientras se escribe) */
.hoja .editor { display: block; box-sizing: border-box; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; cursor: text; }
.hoja .editor b, .hoja .editor strong { font-weight: 700; }
.hoja .editor i, .hoja .editor em { font-style: italic; }

/* dividir textos largos */
.largo-partes { text-align: left; margin: 6px 0 10px; padding-left: 20px; font-size: .9rem; }
.largo-partes li { margin: 4px 0; }
.largo-partes span { color: var(--texto-suave); font-size: .8rem; margin-left: 4px; }
.largo-acciones { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ============================================================
   MODO CLARO: la misma paleta, en tonos claros
   ============================================================ */
.tema-btn { margin-left: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); background: none; font-size: 1rem; line-height: 1; cursor: pointer; }
.tema-btn:hover { border-color: var(--acento); }
/* Modo Mundo (en prueba): el botón de arriba y la pastilla para volver al mapa */
.mundo-btn { margin-left: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); background: none; font-size: 1rem; line-height: 1; cursor: pointer; }
.mundo-btn:hover { border-color: var(--acento); }
.mundo-btn[hidden], .mundo-volver[hidden] { display: none; }
.mundo-volver { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 60;
  padding: 10px 16px; border: 0; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font: 700 .85rem var(--sans);
  box-shadow: 0 8px 22px rgba(0,0,0,.28); cursor: pointer; }
@media (min-width: 900px) { .mundo-volver { bottom: 24px; } }
.lupa-btn { display: flex; align-items: center; margin-left: 16px; padding: 4px; border: 0; background: none; color: var(--texto); cursor: pointer; }
.lupa-btn:hover { color: var(--acento); }
.top-der .tema-btn { margin: 0 10px 0 0; width: auto; height: auto; padding: 4px; border: 0; font-size: 1.05rem; }
/* Celus chicos: todo un poco más compacto, para que el logo no quede pegado. */
@media (max-width: 360px) {
  .lupa-btn { margin-left: 12px; }
  .top-der .tema-btn { margin-right: 6px; padding: 2px; }
  .top .sesion { padding-left: 9px; padding-right: 9px; }
  .marca img { width: 112px; height: auto; }
}
@media (max-width: 340px) { .marca img { width: 102px; } }
.campana[hidden] + .lupa-btn { margin-left: -4px; }
/* La lupa: buscar escritores */
.dialogo-buscar { max-height: min(620px, calc(100vh - 48px)); }
.buscar-campo { width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--linea); background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 1rem; }
.buscar-campo:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.dialogo-buscar .nota { color: var(--texto-suave); font-size: .9rem; }

:root[data-tema="claro"] {
  --fondo: #f8e5d7;        /* ivory */
  --fondo-2: #f1d6c6;
  --tarjeta: #fff8f2;      /* papel blanco cálido */
  --texto: #432720;        /* truffle */
  --texto-suave: #6b4a41;
  --detalle: #a2404e;      /* blossom más profundo, para que se lea */
  --acento: #65232b;       /* cherry: botones */
  --acento-2: #432720;
  --linea: rgba(67, 39, 32, .14);
  --truffle: #65232b;      /* popups y destacados en cherry */
  --ruleta: #f6d3d6;       /* rosa suave */
  --sobre-acento: #f8e5d7;
  --papel: #fffaf6;
  --papel-tinta: #432720;
  --papel-renglon: #f0d6cf;
  color-scheme: light;
}
/* "Islas" oscuras (popups, cabecera de la novela, candado, carpetas…):
   adentro se usa la paleta nocturna, así todo se lee bien. */
[data-tema="claro"] :is(dialog.invitacion, .candado, .nov-cabeza, .tarjeta-novela, .carpeta details, .respaldo, .aviso-item.fijado .aviso-boton, .relato-frase, .aviso, .podio:first-child) {
  --fondo: #65232b; --fondo-2: #561d24; --tarjeta: #72303a; --texto: #f8e5d7; --texto-suave: #ecd2c9;
  --detalle: #ecaab2; --acento: #ecaab2; --linea: rgba(248, 229, 215, .2); --sobre-acento: #65232b;
  color: var(--texto);
}
[data-tema="claro"] .relato, [data-tema="claro"] .puesto, [data-tema="claro"] .cap, [data-tema="claro"] .opcion { box-shadow: 0 1px 0 rgba(67, 39, 32, .06), 0 8px 24px rgba(101, 35, 43, .06); }
[data-tema="claro"] .opcion { background: var(--tarjeta); }
[data-tema="claro"] .boton { color: var(--sobre-acento); }
[data-tema="claro"] .estrellas { --e-vacia: rgba(67, 39, 32, .2); --e-llena: #65232b; }
[data-tema="claro"] .avatar-inicial { background: #ecaab2; color: #65232b; }
[data-tema="claro"] .insignia-top, [data-tema="claro"] .podio .puesto-numero { background: #ecaab2; color: #65232b; }
[data-tema="claro"] .herramientas { background: #f3dfd3; }
[data-tema="claro"] .filtro-tipo i.t-relato { background: #fff8f2; box-shadow: 0 0 0 1px rgba(67, 39, 32, .3); }
[data-tema="claro"] .filtro-tipo i.t-frase { background: #65232b; }
/* ruleta: rosa suave con letra oscura */
[data-tema="claro"] .de-ruleta .clave, [data-tema="claro"] .de-ruleta .tipo-pill { color: #65232b; border-color: rgba(101, 35, 43, .3); }
[data-tema="claro"] .de-ruleta .tipo-pill { background: #fff8f2; }
[data-tema="claro"] .de-ruleta :is(.relato-cuando, .relato-animo, .firma-texto small, .estrellas-resumen, .relato-origen) { color: #7d5a50; }
[data-tema="claro"] .de-ruleta .estrellas { --e-vacia: rgba(101, 35, 43, .25); --e-llena: #65232b; }
[data-tema="claro"] .de-ruleta .relato-titulo { color: #65232b; }
[data-tema="claro"] .de-ruleta .compartir { color: var(--texto); }
/* frase: bordó con letra marfil */
[data-tema="claro"] .relato-frase { background: #65232b; }
[data-tema="claro"] .relato-frase :is(.frase-texto, .firma, .firma-texto b, .estrellas-resumen, .ver-comentarios, .compartir) { color: #f8e5d7; }
[data-tema="claro"] .relato-frase :is(.frase-etiqueta, .firma-texto small, .borrar-relato) { color: #ecaab2; }
[data-tema="claro"] .relato-frase .tipo-pill { background: #ecaab2; color: #65232b; }
[data-tema="claro"] .relato-frase .estrellas { --e-vacia: rgba(248, 229, 215, .3); --e-llena: #ecaab2; }
[data-tema="claro"] .relato-frase .campanita-sub { color: #f8e5d7; border-color: rgba(248, 229, 215, .3); }
/* top 5: el #1 en bordó */
[data-tema="claro"] .podio:first-child { background: #65232b; }
[data-tema="claro"] .podio:first-child::before, [data-tema="claro"] .podio:first-child .puesto-estrellas { color: #ecaab2; }
[data-tema="claro"] .podio:first-child :is(.puesto-persona, .puesto-nombre, .puesto-mejor) { color: #f8e5d7; }
[data-tema="claro"] .podio:first-child .puesto-detalle { color: #ecd2c9; }
.seguir-parte { font-weight: 600; }

/* ---------- Puntos de la semana (barrita de arriba) ---------- */
.barra-puntos {
  grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px;
  padding: 0; margin: 0; background: none; border: 0; color: var(--texto-suave); font: inherit; font-size: .82rem; text-align: left; cursor: pointer;
}
.barra-puntos[hidden] { display: none; }
.bp-texto b { color: var(--texto); font-size: .95rem; }
.bp-meta { justify-self: end; white-space: nowrap; }
.bp-barra { grid-column: 1 / -1; position: relative; display: block; height: 5px; border-radius: 999px; background: var(--linea); overflow: visible; }
.bp-barra i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--acento); transition: width .6s ease; }
.bp-barra em { position: absolute; top: -2px; width: 2px; height: 9px; margin-left: -1px; border-radius: 2px; background: var(--texto-suave); opacity: .45; }
.bp-extra { display: inline-block; margin-left: 6px; color: var(--acento); font-weight: 700; opacity: 0; }
.bp-extra.sube { animation: bp-sube 1.4s ease-out; }
@keyframes bp-sube { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.barra-puntos:hover .bp-barra i { filter: brightness(1.1); }

.dialogo-puntos { width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.dialogo-puntos #puntos-cuerpo { width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.pts-grande { text-align: center; font-size: 1.05rem; }
.pts-grande b { font-size: 1.8rem; color: var(--acento); }
.pts-tabla { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.pts-tabla li { display: grid; grid-template-columns: 1fr auto 44px; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: .92rem; }
.pts-tabla b { color: var(--acento); }
.pts-tabla small { color: var(--texto-suave); text-align: right; }
.pts-medallas { display: flex; justify-content: space-between; gap: 8px; }
.pts-medallas span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--linea); font-size: 1.5rem; opacity: .55; }
.pts-medallas span.lograda { opacity: 1; border-color: var(--acento); }
.pts-medallas b { font-size: .8rem; }
.pts-medallas small { font-size: .72rem; color: var(--texto-suave); }
.pts-regalo { padding: 12px; border-radius: 14px; background: rgba(248, 229, 215, .06); display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
.pts-regalo .bp-barra { grid-column: auto; }
.pts-regalo a { color: var(--acento); }
.perfil-medalla { display: inline-block; margin: 2px 0 4px; padding: 3px 10px; border-radius: 999px; background: var(--truffle); color: var(--papel); font-size: .82rem; font-weight: 600; }
.sorpresa-bloqueada.link { text-align: left; }

/* ---------- Frases para comentar ---------- */
.fc-frases {
  align-self: flex-start; max-width: 100%; padding: 5px 28px 5px 12px; border-radius: 999px;
  background-color: transparent; color: var(--texto-suave); border: 1px solid var(--linea); font: inherit; font-size: .82rem; cursor: pointer;
}
.fc-falta { align-self: flex-end; color: var(--acento); font-size: .8rem; }
.fc-falta[hidden] { display: none; }
.form-comentario .boton-chico:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Actividad de la comunidad (avisitos de abajo) ---------- */
.actividad {
  position: fixed; left: 20px; bottom: 20px; z-index: 900; width: min(340px, calc(100vw - 40px));
  padding: 12px 34px 12px 14px; border-radius: 16px; border: 1px solid rgba(236, 170, 178, .35);
  background: #432720; color: #f8e5d7; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-size: .86rem; line-height: 1.4;
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .35s ease, transform .35s ease;
}
.actividad.visible { opacity: 1; transform: none; pointer-events: auto; }
.actividad p { margin: 0; }
.act-linea small { color: rgba(248, 229, 215, .6); white-space: nowrap; }
.act-cita { margin-top: 4px !important; padding-left: 8px; border-left: 2px solid #ecaab2; font-family: var(--serif); font-style: italic; color: rgba(248, 229, 215, .85); }
.act-estrellas { color: #ecaab2; letter-spacing: 1px; }
.act-ir { display: inline-block; margin-top: 6px; color: #ecaab2; font-weight: 600; font-size: .82rem; }
.act-cerrar { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: rgba(248, 229, 215, .6); font-size: 1.2rem; line-height: 1; cursor: pointer; }
@media (max-width: 520px) {
  .actividad { left: 12px; right: 12px; bottom: 12px; width: auto; font-size: .82rem; padding: 10px 32px 10px 12px; }
  body[data-vista="inicio"] .actividad { right: 76px; }
}
body.en-chat .actividad, body.en-chat .burbuja-chat, body[data-vista="charlas"] .burbuja-chat { display: none !important; }
@media (prefers-reduced-motion: reduce) { .actividad, .bp-barra i { transition: none; } .bp-extra.sube { animation: none; opacity: 1; } }

/* ---------- Debates ---------- */
.abrir-debate { margin: 0 0 24px; }
.debate { margin: 0 0 16px; padding: 20px 22px; border-radius: 20px; background: var(--tarjeta); }
.debate-pregunta { margin: 0 0 8px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.3; }
.debate-detalle { margin: 0 0 10px; color: var(--texto-suave); line-height: 1.55; white-space: pre-line; }
.debate-meta { margin: 0 0 10px; font-size: .85rem; color: var(--texto-suave); }
.debate-meta a { display: inline-flex; align-items: center; gap: 6px; color: var(--texto); text-decoration: none; font-weight: 600; }
.debate-acciones { display: flex; flex-wrap: wrap; gap: 16px; }
.debate-hilo { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 12px; }
.debate-hilo[hidden] { display: none; }
.form-debate { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.form-debate textarea { width: 100%; padding: 10px 12px; resize: vertical; font-family: var(--serif); font-size: 1rem; background: var(--fondo); border-radius: 12px; }
@media (max-width: 520px) { .debate { padding: 18px 16px; } .debate-pregunta { font-size: 1.15rem; } }
[data-tema="claro"] .debate { box-shadow: 0 1px 0 rgba(67, 39, 32, .06), 0 8px 24px rgba(101, 35, 43, .06); }
/* si hay un avisito de actividad abajo, el cartelito de «¡Listo!» sube */
body:has(.actividad.visible) .aviso { bottom: 150px; }
@media (min-width: 521px) { body:has(.actividad.visible) .aviso { bottom: 84px; } }

/* ---------- Medallas de la semana (en el top 5) ---------- */
.medallas-semana { margin: 32px 0 24px; }
.medallas-semana .nota { margin: 0 0 14px; }
.medallistas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.medallista {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: start; gap: 10px 12px;
  padding: 14px 16px; border-radius: 16px; background: var(--tarjeta); border-left: 4px solid transparent;
}
.medallista.medalla-oro { background: var(--truffle); color: var(--papel); border-left-color: #ecaab2; }
.medallista-medalla { font-size: 1.7rem; line-height: 1; padding-top: 4px; }
.medallista-foto { text-decoration: none; }
.medallista-datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.medallista-nombre { font-weight: 700; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.medallista-hizo { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--texto-suave); }
.medalla-oro .medallista-hizo { color: rgba(248, 229, 215, .8); }
.medallista-insta { align-self: flex-start; margin-top: 2px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--acento); color: var(--acento); font-size: .8rem; font-weight: 600; text-decoration: none; }
.medalla-oro .medallista-insta { border-color: #ecaab2; color: #ecaab2; }
.medallista-pts { font-size: .8rem; color: var(--texto-suave); white-space: nowrap; padding-top: 4px; }
.medalla-oro .medallista-pts { color: rgba(248, 229, 215, .7); }
@media (max-width: 520px) {
  .medallista { grid-template-columns: auto auto minmax(0, 1fr); padding: 12px; }
  .medallista-pts { grid-column: 3; grid-row: 2; padding-top: 0; }
}
[data-tema="claro"] .medallista:not(.medalla-oro) { box-shadow: 0 1px 0 rgba(67, 39, 32, .06), 0 8px 24px rgba(101, 35, 43, .06); }

/* ---------- Ortografía ---------- */
.herramientas .herr-orto { margin-left: auto; font-size: .82rem; font-weight: 700; gap: 4px; }
.herramientas .herr-orto.revisando { opacity: .6; cursor: progress; }
.herr-orto.con-errores { color: #c2415a; font-weight: 700; }
::highlight(orto) { text-decoration: underline wavy #c2415a; text-decoration-thickness: 1.5px; text-underline-offset: 3px; background-color: rgba(236, 170, 178, .35); }
.orto-panel { margin: 12px 0 4px; padding: 14px 16px; border-radius: 16px; background: var(--truffle); color: var(--papel); font-size: .9rem; }
.orto-panel[hidden] { display: none; }
.orto-titulo { margin: 0 0 10px; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; }
.orto-titulo:only-child { margin: 0; }
.orto-titulo .link { font-weight: 400; color: rgba(248, 229, 215, .7); }
.orto-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.orto-lista li { display: flex; flex-direction: column; gap: 4px; padding: 10px 0 0; border-top: 1px solid rgba(248, 229, 215, .12); }
.orto-palabra { align-self: flex-start; padding: 0; background: none; border: 0; font: inherit; font-weight: 700; color: #ecaab2; text-decoration: underline wavy #c2415a; text-underline-offset: 3px; cursor: pointer; }
.orto-gramatica .orto-palabra { text-decoration-color: #e8b04a; }
.orto-mensaje { color: rgba(248, 229, 215, .75); font-size: .82rem; line-height: 1.4; }
.orto-sugerencias { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.orto-sugerencias button:not(.link) { padding: 4px 12px; border-radius: 999px; border: 1px solid #ecaab2; background: none; color: #f8e5d7; font: inherit; font-size: .85rem; cursor: pointer; }
.orto-sugerencias button:not(.link):hover { background: #ecaab2; color: #432720; }
.orto-sugerencias .link { color: rgba(248, 229, 215, .6); font-size: .8rem; }
.orto-nota { margin: 12px 0 0; font-size: .75rem; color: rgba(248, 229, 215, .55); }

/* ---------- Celu: que no quede nada cortado ---------- */
@media (max-width: 520px) {
  .filtros-tipo { flex-wrap: wrap; overflow: visible; }
  .filtro-tipo { padding: 6px 11px; font-size: .82rem; gap: 6px; }
  .herramientas { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
}
/* La barrita de puntos solo en biblioteca, comunidad, debates y el perfil propio */
body:not([data-vista="escritos"]):not([data-vista="comunidad"]):not([data-vista="debates"]):not([data-vista="perfil"]) .barra-puntos,
body[data-vista="perfil"]:not(.perfil-propio) .barra-puntos { display: none; }

/* ---------- Cabecera de cada comentario: todo centrado en una línea ---------- */
.comentario-cabeza { align-items: center; }
.es-autor { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento, var(--fondo)); font-size: .7rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
@media (max-width: 520px) {
  .comentario-cabeza { gap: 2px 8px; }
  .comentario-cabeza .comentario-autor { min-width: 0; overflow-wrap: anywhere; }
  .comentario-cabeza .borrar-comentario { order: 2; }
  .comentario-cabeza .comentario-fecha { order: 3; flex-basis: 100%; padding-left: 28px; font-size: .76rem; }
}

/* Cuadritos de la portada: un tono más oscuro que el fondo, para que resalten */
.opcion { background: var(--fondo-2); border-color: rgba(248, 229, 215, .14); }
html:not([data-tema="claro"]) .opcion:hover, html:not([data-tema="claro"]) .opcion:focus-visible { background: #4b1920; }
/* Debates: respuestas en hilos, igual que en los escritos */
.debate-hilo .lista-comentarios { margin: 0; }
.hilo .form-debate { margin: 10px 0 0 32px; }
@media (max-width: 520px) { .hilo .form-debate { margin-left: 22px; } }
.comentario-cabeza .borrar-respuesta { font-size: .8rem; margin-left: auto; }
@media (max-width: 520px) { .comentario-cabeza .borrar-respuesta { order: 2; } }
/* «semanal», chiquito abajo del promedio del top 5 */
.puesto-estrellas { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.puesto-estrellas small { font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }

/* «Me gusta» en los comentarios */
.me-gusta { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px 2px 0; background: none; border: 0; color: var(--texto-suave); font: inherit; font-size: .95rem; cursor: pointer; }
.me-gusta span { font-size: .8rem; }
.me-gusta.activo { color: var(--acento); }
.me-gusta:hover { color: var(--acento); }
.me-gusta:disabled { opacity: .6; }

/* ---------- Perfil personalizado ---------- */
.perfil-cabeza.perfil-color { padding: 22px 20px; border-radius: 22px; }
.perfil-color.color-bordo { background: #65232b; color: #f8e5d7; }
.perfil-color.color-rosa { background: #8e4552; color: #f8e5d7; }
.perfil-color.color-truffle { background: #432720; color: #f8e5d7; }
.perfil-color.color-marfil { background: #f8e5d7; color: #432720; }
.perfil-color.color-salvia { background: #7e8c6b; color: #f8e5d7; }
.perfil-color .perfil-nombre, .perfil-color .perfil-suscriptores b { color: inherit; }
.perfil-color .perfil-suscriptores { color: inherit; opacity: .8; }
.perfil-color .perfil-insta { color: inherit; }
.perfil-color.color-bordo, .perfil-color.color-rosa { box-shadow: inset 0 0 0 1px rgba(248, 229, 215, .12); }
[data-tema="claro"] .perfil-color.color-marfil { box-shadow: inset 0 0 0 1px rgba(67, 39, 32, .15); }
html:not([data-tema="claro"]) .perfil-color.color-bordo { background: #4b1920; }
.perfil-nombre.letra-maquina { font-family: "Courier Prime", "Courier New", Courier, monospace; font-style: normal; }
.perfil-nombre.letra-moderna { font-family: var(--sans); font-style: normal; font-weight: 800; letter-spacing: -.01em; }
.perfil-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.perfil-chips:empty { display: none; }
.perfil-frase { margin: 0 0 18px; padding: 4px 0 4px 16px; border-left: 3px solid var(--acento); font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--texto); }
.perfil-redes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.perfil-redes a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--linea); color: var(--texto); text-decoration: none; font-size: .85rem; }
.perfil-redes a:hover { border-color: var(--acento); color: var(--acento); }

/* Elegir color y letra (en «editar mi perfil») */
.colores-perfil { display: flex; flex-wrap: wrap; gap: 10px; }
.color-perfil { width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(248, 229, 215, .25); }
.color-perfil[aria-checked="true"] { border-color: var(--acento); outline: 2px solid var(--fondo); outline-offset: -5px; }
.color-perfil.color-ninguno { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(248, 229, 215, .15) 6px 8px); }
.color-perfil.color-bordo { background: #65232b; } .color-perfil.color-rosa { background: #8e4552; }
.color-perfil.color-truffle { background: #432720; } .color-perfil.color-marfil { background: #f8e5d7; }
.color-perfil.color-salvia { background: #7e8c6b; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chip.letra-maquina { font-family: "Courier Prime", "Courier New", monospace; }
.chip.letra-clasica { font-family: var(--serif); font-style: italic; }
.chip small { opacity: .7; font-family: var(--sans); font-style: normal; }

/* ✨ letras */
.con-letras { position: relative; display: flex; flex-direction: column; gap: 6px; }
.con-letras input, .con-letras textarea { width: 100%; }
.boton-letras { align-self: flex-end; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--texto-suave); font: inherit; font-size: .8rem; cursor: pointer; }
.boton-letras:hover { color: var(--acento); border-color: var(--acento); }
.menu-letras { position: absolute; right: 0; top: 100%; z-index: 20; width: min(320px, 90vw); max-height: 360px; overflow-y: auto; padding: 8px; border-radius: 14px; background: #432720; color: #f8e5d7; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 2px; }
.menu-letras button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font-size: 1.05rem; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.menu-letras button:hover { background: rgba(248, 229, 215, .08); }
.menu-letras button small { font-size: .7rem; color: #ecaab2; text-transform: uppercase; letter-spacing: .08em; }
.menu-letras-nota { margin: 6px 4px 2px; font-size: .72rem; color: rgba(248, 229, 215, .6); }

/* Escritos del perfil: filas compactas que se abren al tocarlas */
.perfil-escritos { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--linea); }
.escrito-compacto { border-bottom: 1px solid var(--linea); }
.compacto-abrir { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 16px 4px; background: none; border: 0; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.compacto-abrir:hover .compacto-titulo { color: var(--acento); }
.compacto-titulo { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.25; }
.compacto-datos { font-size: .8rem; color: var(--texto-suave); }
.compacto-inicio { font-family: var(--serif); font-size: .95rem; line-height: 1.5; color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.escrito-abierto { list-style: none; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.escrito-abierto .relato { margin-bottom: 6px; }
.compacto-cerrar { font-size: .85rem; }
.perfil-color .perfil-medalla { background: rgba(248, 229, 215, .16); color: inherit; }
.perfil-color.color-marfil .perfil-medalla { background: rgba(67, 39, 32, .1); }
.perfil-color .perfil-estado { color: inherit; border-color: currentColor; }
.aviso-vip { margin-top: 10px; align-self: flex-start; }
.aviso-item.fijado .aviso-boton { display: flex; flex-direction: column; gap: 6px; }
.color-perfil.color-bordo, .color-perfil.color-ninguno { box-shadow: inset 0 0 0 1.5px rgba(248, 229, 215, .55); }
.chip[aria-pressed="true"] small { opacity: .75; color: inherit; }

/* Cabeceras de color: que resalten en los dos modos */
html:not([data-tema="claro"]) .perfil-color { box-shadow: inset 0 0 0 1px rgba(248, 229, 215, .14); }
html:not([data-tema="claro"]) .perfil-color.color-bordo { background: #4b1920; }
[data-tema="claro"] .perfil-color { box-shadow: 0 1px 0 rgba(67, 39, 32, .06), 0 10px 26px rgba(101, 35, 43, .1); }
[data-tema="claro"] .perfil-color.color-marfil { background: #fffaf6; box-shadow: inset 0 0 0 1px rgba(67, 39, 32, .14), 0 10px 26px rgba(101, 35, 43, .08); }
/* los circulitos para elegir el color */
[data-tema="claro"] .color-perfil { box-shadow: inset 0 0 0 1.5px rgba(67, 39, 32, .3); }
[data-tema="claro"] .color-perfil.color-ninguno { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(67, 39, 32, .14) 6px 8px); }
[data-tema="claro"] .color-perfil.color-marfil { background: #fffaf6; }
[data-tema="claro"] .color-perfil[aria-checked="true"] { outline-color: #f8e5d7; }
/* botón «pasar a privado» y borrar en la hoja */
.boton-suave { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--texto); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.boton-suave:hover { border-color: var(--acento); color: var(--acento); }
.borrar-hoja { margin-left: auto; font-size: .85rem; color: var(--texto-suave); }
.acciones-propias { display: inline-flex; flex-wrap: wrap; gap: 14px; }
.acciones-propias .link { font-size: .85rem; }

/* «✨ letras» adentro del cuadro de texto, en la esquina, para que se vea que es de ese campo */
.con-letras { position: relative; display: block; }
.con-letras input { padding-right: 128px; }
.con-letras .boton-letras { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0; background: var(--fondo); border-color: var(--acento); color: var(--acento); font-weight: 600; z-index: 2; }
/* Corazón y «responder» en la misma línea, alineados con el comentario */
.comentario-pie { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.comentario-pie .me-gusta { margin: 0; padding: 0; }
.comentario-pie .responder { margin: 0; font-size: .85rem; }
.para-quien { color: var(--texto-suave); font-size: .8rem; white-space: nowrap; }
.hilo > .form-comentario { margin-left: 22px; }

/* «Sobre mí»: el recuadro incluye el texto y, abajo, una franjita con «✨ letras» (nunca tapa el texto) */
.con-letras:has(textarea) { display: flex; flex-direction: column; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 12px; }
.con-letras:has(textarea):focus-within { border-color: var(--acento); }
#f-cuenta .con-letras textarea { border: 0; background: transparent; border-radius: 12px 12px 0 0; padding-bottom: 4px; }
#f-cuenta .con-letras textarea:focus { outline: none; box-shadow: none; }
.con-letras textarea ~ .boton-letras { position: static; transform: none; align-self: flex-end; margin: 0 8px 8px 0; }

/* Burbujita de ortografía (al tocar una palabra subrayada) */
.burbuja-orto { position: absolute; z-index: 950; max-width: min(320px, calc(100vw - 16px)); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; border-radius: 14px; background: #432720; color: #f8e5d7; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.burbuja-orto button:not(.link) { padding: 5px 12px; border-radius: 999px; border: 1px solid #ecaab2; background: none; color: #f8e5d7; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.burbuja-orto button:not(.link):hover { background: #ecaab2; color: #432720; }
.burbuja-orto .link { color: rgba(248, 229, 215, .7); font-size: .8rem; }
.burbuja-orto small { flex-basis: 100%; font-size: .72rem; color: rgba(248, 229, 215, .6); }
.burbuja-nada { font-size: .85rem; color: rgba(248, 229, 215, .7); }

/* Papelera (en la biblioteca) */
.papelera-caja { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--linea); }
.papelera-lista { margin-top: 12px; }
.en-papelera { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--linea); opacity: .9; }
.en-papelera .escrito-t { text-decoration: line-through; text-decoration-color: rgba(236, 170, 178, .6); }
.papelera-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.papelera-acciones .link { font-size: .85rem; }

/* ---------- App instalable ---------- */
.app-celu { background: var(--tarjeta); border-radius: 14px; padding: 14px 16px; margin: 16px 0 6px; }
.app-celu-titulo { margin: 0 0 4px; font-weight: 700; }
.app-celu .acciones { gap: 10px 14px; flex-wrap: wrap; }
.app-celu .boton-chico { margin-left: 0; }
.pasos-iphone { text-align: left; margin: 6px 0 18px; padding-left: 22px; line-height: 1.6; display: grid; gap: 6px; }
.banner-app { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 10px;
  background: var(--truffle); color: var(--texto); border: 1px solid var(--linea); border-radius: 16px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.banner-app[hidden] { display: none; }
.banner-app img { border-radius: 10px; flex-shrink: 0; }
.banner-app p { margin: 0; flex: 1; font-size: .85rem; line-height: 1.3; }
.banner-app p span { display: block; color: var(--texto-suave); font-size: .78rem; }
.banner-app .boton-chico { margin: 0; }
.banner-app-cerrar { background: none; border: 0; color: var(--texto-suave); font-size: 1.3rem; padding: 0 4px; cursor: pointer; }
/* Instalada en iPhone: la barra de arriba es transparente, se deja su lugar. */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* Lo que ya hizo y lo que le falta para publicar */
.bloqueo-estado { display: grid; gap: 6px; justify-items: center; margin: 4px 0 12px; font-weight: 600; font-size: .92rem; color: var(--texto-suave); }
.bloqueo-estado .hecho { color: var(--acento); }
.bloqueo-sugerencias { text-align: left; margin: 0 0 10px; }
.bloqueo-sug-tit { margin: 4px 0 6px; font-weight: 700; font-size: .92rem; }
.bloqueo-sug-tit small { font-weight: 400; color: var(--texto-suave); }
.bloqueo-sug { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bloqueo-sug a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 12px; color: inherit; text-decoration: none; background: color-mix(in srgb, var(--acento) 5%, transparent); }
.bloqueo-sug a:hover, .bloqueo-sug a:focus-visible { border-color: var(--acento); }
.bloqueo-sug b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.bloqueo-sug small { display: block; color: var(--texto-suave); font-size: .78rem; line-height: 1.35; }
.bloqueo-sug i { font-style: normal; color: var(--acento); font-weight: 700; }
.buscar-persona { width: 100%; box-sizing: border-box; margin: 8px 0 10px; }
.celda-publicar { white-space: nowrap; }

/* ---------- Escritura en grupo ---------- */
:root { --gr-esc: #f3d27a; --gr-lee: #9fc3e0; --gr-listo: #b5d19a; --gr-oro: #f3d27a; }
:root[data-tema="claro"] { --gr-esc: #8a5a00; --gr-lee: #2a6591; --gr-listo: #4c6b2c; --gr-oro: #9a6b00; }
.gr-pestanas { display: flex; gap: 4px; background: var(--fondo-2); border-radius: 999px; padding: 4px; margin: 0 0 22px; }
.gr-pestanas a { flex: 1; text-align: center; padding: 10px 6px; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--texto-suave); text-decoration: none; line-height: 1.2; }
.gr-pestanas a.activa { background: var(--acento); color: var(--sobre-acento); }
.gr-reloj { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: .85rem; color: var(--texto-suave); margin: 0 0 14px; }
.gr-reloj b { color: var(--texto); }
.gr-aviso { background: var(--fondo-2); border-left: 3px solid var(--acento); border-radius: 0 12px 12px 0; padding: 10px 14px; font-size: .9rem; line-height: 1.5; margin: 0 0 14px; }
.gr-tarjeta { background: var(--tarjeta); border-radius: 18px; padding: 16px 18px; margin: 0 0 12px; border: 1px solid transparent; }
.gr-tarjeta.mio { border-color: var(--acento); }
.gr-cat { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--detalle); }
.gr-titulo { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.35rem; line-height: 1.25; margin: 6px 0 8px; }
.gr-titulo.grande { font-size: 1.7rem; margin: 4px 0 6px; }
.gr-sinopsis { font-size: .95rem; line-height: 1.55; margin: 0 0 10px; }
.gr-meta { display: grid; gap: 6px; font-size: .85rem; color: var(--texto-suave); margin: 0 0 12px; }
.gr-meta b { color: var(--texto); }
.gr-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gr-fila .boton-chico { margin-left: 0; }
.gr-suave { font-size: .82rem; color: var(--texto-suave); }
.gr-progreso-txt { margin: 8px 0 0; }
.gr-avs { display: inline-flex; align-items: center; }
.gr-avs .avatar { width: 30px; height: 30px; border: 2px solid var(--tarjeta); margin-left: -8px; }
.gr-avs > :first-child { margin-left: 0; }
.gr-vacio { display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 2px dashed var(--linea); margin-left: -8px; box-sizing: border-box; background: var(--tarjeta); }
.gr-avs small { margin-left: 8px; font-size: .8rem; color: var(--texto-suave); }
.gr-sub { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--detalle); margin: 22px 0 10px; }
.gr-miembros { display: grid; gap: 8px; }
.gr-miembro { display: flex; align-items: center; gap: 10px; background: var(--tarjeta); border-radius: 12px; padding: 8px 12px; color: var(--texto); text-decoration: none; }
.gr-miembro.vacio { color: var(--texto-suave); }
.gr-miembro .gr-vacio { margin-left: 0; width: 32px; height: 32px; }
.gr-miembro-n { flex: 1; min-width: 0; font-size: .92rem; }
.gr-miembro-n small { display: block; color: var(--texto-suave); font-size: .75rem; }
.gr-estado { font-size: .78rem; font-weight: 700; text-align: right; color: var(--texto-suave); }
.gr-estado.esc { color: var(--gr-esc); } .gr-estado.lee { color: var(--gr-lee); } .gr-estado.listo { color: var(--gr-listo); }
.gr-barra { height: 8px; background: var(--linea); border-radius: 99px; overflow: hidden; margin: 6px 0 4px; }
.gr-barra i { display: block; height: 100%; background: var(--acento); border-radius: 99px; }
.gr-barra.gana i { background: var(--gr-oro); }
.gr-etapas { display: flex; justify-content: space-between; gap: 6px; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 8px; }
.gr-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gr-cap { display: flex; align-items: center; gap: 12px; background: var(--tarjeta); border-radius: 14px; padding: 12px 14px; }
.gr-cap-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--fondo-2); flex-shrink: 0; }
.gr-cap-inf { flex: 1; min-width: 0; }
.gr-cap-et { display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--detalle); font-weight: 800; }
.gr-cap-tit { display: block; font-weight: 700; font-size: .92rem; }
.gr-cap-inf small { color: var(--texto-suave); font-size: .8rem; line-height: 1.4; }
.gr-cap .boton-chico { margin-left: 0; }
.gr-cap.publicado .gr-cap-num { background: #7e8c6b; color: #fff; }
.gr-cap.turno { outline: 2px solid var(--gr-esc); }
.gr-cap.turno .gr-cap-num { background: var(--gr-esc); color: var(--fondo); }
.gr-cap.mio .gr-cap-num { background: var(--acento); color: var(--sobre-acento); }
.gr-cap.bloqueado { opacity: .5; background: transparent; border: 1px dashed var(--linea); }
.gr-chat { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; margin: 0 0 10px; }
.gr-msg { max-width: 82%; background: var(--tarjeta); border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.gr-msg small { display: block; font-size: .7rem; color: var(--detalle); font-weight: 700; margin-bottom: 2px; }
.gr-msg.yo { justify-self: end; background: var(--fondo-2); border-radius: 14px 14px 4px 14px; }
.gr-form-chat, .gr-form-titulo { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.gr-form-chat input, .gr-form-titulo input { flex: 1; min-width: 0; }
.gr-form-chat .boton-chico { margin-left: 0; }
.gr-enc { background: var(--tarjeta); border-radius: 14px; padding: 12px 14px; margin: 0 0 10px; }
.gr-enc > p { margin: 0 0 8px; font-weight: 700; font-size: .95rem; }
.gr-op { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; background: none; border: 0; padding: 4px 0; margin: 0 0 6px; color: var(--texto); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.gr-op .gr-barra { grid-column: 1 / -1; margin: 2px 0 0; }
.gr-op.elegida span { font-weight: 700; color: var(--detalle); }
.gr-nueva-enc { margin: 0 0 8px; }
.gr-form-enc { display: grid; gap: 8px; margin-top: 8px; }
.gr-form-enc .boton-chico { justify-self: start; margin-left: 0; }
.gr-listo { margin: 22px 0 8px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.gr-listo .boton[disabled] { opacity: .45; cursor: not-allowed; }
.gr-guia { font-size: .88rem; color: var(--texto-suave); margin: 4px 0 8px; }
.gr-texto { font-family: var(--serif); font-size: 1.05rem; line-height: 1.8; white-space: pre-wrap; margin: 14px 0 18px; overflow-wrap: anywhere; }
.gr-leer { border-top: 1px solid var(--linea); padding-top: 18px; margin-top: 18px; }
.gr-nota { background: var(--tarjeta); border-left: 3px solid var(--gr-esc); border-radius: 0 12px 12px 0; padding: 10px 12px; font-size: .88rem; line-height: 1.5; margin: 0 0 8px; overflow-wrap: anywhere; }
.gr-nota b { display: block; font-size: .78rem; color: var(--gr-esc); margin-bottom: 2px; }
.gr-nav { display: flex; justify-content: space-between; margin: 20px 0 0; }
.gr-editor { display: grid; gap: 10px; margin: 10px 0; }
.gr-editor textarea { font-family: var(--serif); font-size: 1.02rem; line-height: 1.7; min-height: 320px; }
.gr-editor .boton-chico { margin-left: 0; }
.gr-contador { font-size: .8rem; color: var(--texto-suave); text-align: right; margin: -4px 0 0; }
.gr-contador.pasado { color: #d9534f; font-weight: 700; }
.gr-reglas { text-align: left; padding-left: 20px; line-height: 1.55; margin: 0 0 18px; display: grid; gap: 8px; }
.dialogo-grupo h2 { margin-bottom: 10px; }
.gr-li { list-style: none; }
.gr-premio { background: linear-gradient(135deg, #8e4552, #432720); color: #f8e5d7; border: 1px solid #f3d27a; border-radius: 20px; padding: 18px; margin: 10px 0; }
.gr-premio .gr-cat { color: #f3d27a; } .gr-premio .gr-suave { color: #ecd2c9; } .gr-premio a { color: #f8e5d7; }
.gr-premio .gr-titulo { font-size: 1.55rem; }
.gr-premio .gr-avs .avatar, .gr-premio .gr-vacio { border-color: #6b2f36; }
.gr-premio .boton { background: #ecaab2; color: #65232b; }
.gr-votable { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--tarjeta); border-radius: 14px; padding: 12px 14px; margin: 0 0 8px; }
.gr-votable a { color: var(--texto); } .gr-votable small { display: block; color: var(--texto-suave); font-size: .8rem; }
.gr-votable .boton-chico { margin-left: 0; }
@media (max-width: 420px) {
  .gr-pestanas a { font-size: .78rem; }
  .gr-miembro { flex-wrap: wrap; }
  .gr-estado { flex-basis: 100%; text-align: left; padding-left: 42px; }
}
/* Campos de los grupos (y del panel) con el mismo estilo que el resto de la página */
:is(.gr-form-chat, .gr-form-titulo, .gr-editor, .gr-form-enc) :is(input, textarea),
:is(#admin-contenido, #f-confirmar-publicar) input:not([type="checkbox"]):not([type="file"]) {
  font: inherit; color: var(--texto); background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 12px; padding: 11px 14px; box-sizing: border-box;
}
:is(.gr-form-chat, .gr-form-titulo, .gr-editor, .gr-form-enc) :is(input, textarea):focus,
:is(#admin-contenido, #f-confirmar-publicar) input:focus { outline: none; border-color: var(--acento); }
:is(.gr-form-chat, .gr-form-titulo, .gr-editor, .gr-form-enc, #admin-contenido) input::placeholder { color: var(--texto-suave); opacity: .8; }
.gr-editor textarea { width: 100%; padding: 14px 16px; resize: vertical; }
.gr-editor input { width: 100%; }

/* Foto de perfil propia */
.avatar-foto { background: var(--fondo-2); }
.elegir.subir-foto { display: grid; place-items: center; align-content: center; gap: 2px; font-size: 1.3rem; border: 1px dashed var(--linea); border-radius: 14px; color: var(--texto); }
.elegir.subir-foto small { font-size: .62rem; font-weight: 700; line-height: 1.1; color: var(--texto-suave); }

/* ---------- Perfil con pestañas ---------- */
.pf-portada { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 22px; overflow: hidden; margin: 8px 0 12px; }
.pf-banda { height: 92px; background: linear-gradient(135deg, #8e4552, #ecaab2); position: relative; }
.pf-banda::after { content: "✦  ✦  ✦"; position: absolute; right: 18px; top: 14px; color: rgba(255, 255, 255, .6); letter-spacing: 6px; font-size: .9rem; }
.pf-color-bordo .pf-banda { background: linear-gradient(135deg, #4b1920, #8e4552); }
.pf-color-rosa .pf-banda { background: linear-gradient(135deg, #8e4552, #ecaab2); }
.pf-color-truffle .pf-banda { background: linear-gradient(135deg, #2e1a15, #6b4436); }
.pf-color-marfil .pf-banda { background: linear-gradient(135deg, #ecd2c9, #fff8f2); }
.pf-color-marfil .pf-banda::after { color: rgba(101, 35, 43, .45); }
.pf-color-salvia .pf-banda { background: linear-gradient(135deg, #5d6a4d, #b5c49a); }
.pf-cuerpo { padding: 0 20px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pf-cuerpo .pf-avatar { width: 104px; height: 104px; margin-top: -54px; box-shadow: 0 0 0 4px var(--tarjeta); font-size: 2.4rem; }
.pf-cuerpo .perfil-nombre { margin-top: 6px; }
.pf-usuario { color: var(--texto-suave); font-weight: 600; }
.pf-cuerpo .perfil-chips { margin: 4px 0 0; }
.pf-medalla { margin: 0; }
.pf-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pf-acciones .boton-chico { margin-left: 0; }
.pf-nota-suscribir { color: var(--texto-suave); font-size: .8rem; }
.pf-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 14px; }
.pf-numeros div { background: var(--tarjeta); border-radius: 14px; padding: 12px 4px; text-align: center; min-width: 0; }
.pf-numeros b { display: block; font-size: 1.25rem; font-weight: 800; }
.pf-numeros span { font-size: .72rem; color: var(--texto-suave); }
.pf-pestanas { display: flex; gap: 4px; background: var(--fondo-2); border-radius: 999px; padding: 4px; margin: 0 0 14px; }
.pf-pestanas button { flex: 1; border: 0; background: none; color: var(--texto-suave); font: inherit; font-size: .88rem; font-weight: 700; padding: 10px 4px; border-radius: 999px; cursor: pointer; }
.pf-pestanas button[aria-selected="true"] { background: var(--acento); color: var(--sobre-acento); }
.pf-panel { margin: 0 0 18px; }
.pf-sobre { background: var(--tarjeta); border-radius: 18px; padding: 18px; }
.pf-frase { font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1.55; margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--acento); background: var(--fondo-2); border-radius: 0 12px 12px 0; }
.pf-bio { line-height: 1.6; margin: 0 0 14px; }
.pf-datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: .9rem; margin: 0 0 12px; }
.pf-datos dt { color: var(--texto-suave); }
.pf-datos dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.pf-cuenta-titulo { margin-top: 30px; }
@media (max-width: 420px) {
  .pf-numeros span { font-size: .66rem; }
  .pf-numeros b { font-size: 1.1rem; }
}
.pf-cuerpo .pf-avatar { position: relative; z-index: 1; }
.pf-datos .gusto { display: inline-block; font-size: .78rem; padding: 2px 10px; border-radius: 999px; background: var(--fondo-2); }

/* ---------- Recortar fotos ---------- */
.recortar-marco { position: relative; width: min(280px, 70vw); margin: 12px auto; overflow: hidden; border-radius: 14px; touch-action: none; cursor: grab; background: #1c0f0c; box-shadow: 0 0 0 2px var(--acento); }
.recortar-marco:active { cursor: grabbing; }
.recortar-marco.redonda { border-radius: 50%; }
.recortar-marco:not(.redonda) { width: min(220px, 56vw); }
#recortar-img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; pointer-events: none; }
.recortar-zoom { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 4px 0 16px; }
.recortar-zoom input { width: min(220px, 60vw); accent-color: var(--acento); }

/* ---------- Portadas de novela ---------- */
.portada { display: block; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; flex-shrink: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.portada-vacia { display: flex; align-items: flex-end; padding: 10px; box-sizing: border-box; color: #f8e5d7; font-family: var(--serif); font-style: italic; line-height: 1.2; overflow: hidden; }
.portada-vacia span { overflow-wrap: anywhere; }
.portada.chica { width: 76px; }
.portada.chica.portada-vacia { font-size: .78rem; padding: 7px; }
.portada.grande { width: 140px; margin: 0 auto 14px; }
.portada.grande.portada-vacia { font-size: 1.1rem; }
.tarjeta-novela.con-portada { flex-direction: row; align-items: flex-start; gap: 14px; }
.tn-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nov-cabeza .portada.grande { margin-bottom: 14px; }
.portada-elegir { display: flex; gap: 14px; align-items: center; }
.portada-botones { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.portada-botones small { color: var(--texto-suave); font-size: .78rem; }

/* Perfil en tarjetas (opción A) */
.pf-tarjeta { background: var(--tarjeta); border-radius: 18px; padding: 16px 18px; margin: 0 0 12px; }
.pf-tarjeta-titulo { margin: 0 0 12px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--detalle); font-family: var(--sans); }
.pf-tarjeta.pf-sobre { padding: 16px 18px; }
.pf-tarjeta .perfil-escritos { margin: 0; }
.pf-novelas { display: flex; gap: 10px; overflow-x: auto; padding: 0 0 6px; scroll-snap-type: x mandatory; }
.pf-novela { flex: 0 0 150px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--truffle); color: #f8e5d7; text-decoration: none; }
.pf-tapa-caja { position: relative; display: block; }
.pf-novela .pf-tapa { width: 100%; aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; }
.pf-novela .pf-tapa.portada-vacia { font-size: 1.1rem; padding: 12px; }
.pf-novela-t { position: absolute; inset: auto 0 0 0; padding: 30px 12px 12px; font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1.2; background: linear-gradient(transparent, rgba(40, 20, 16, .85)); }
.pf-novela small { display: block; padding: 8px 10px; color: rgba(248, 229, 215, .75); font-size: .72rem; }
.pf-novela:hover .pf-tapa { filter: brightness(1.08); }
.pf-chip { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linea); color: var(--texto-suave); }
.pf-tarjeta .perfil-escritos { border-top: 0; }
.pf-tarjeta .escrito-compacto:last-child { border-bottom: 0; }
.pf-tarjeta .compacto-abrir { padding: 12px 0; }
.pf-tarjeta .escrito-compacto:first-child .compacto-abrir { padding-top: 0; }
.pf-tarjeta .compacto-titulo { font-size: 1.1rem; }
.pf-tarjeta .compacto-inicio { font-family: var(--sans); font-size: .88rem; line-height: 1.45; }
.pf-cuerpo .perfil-chips { align-items: center; }
.pf-cuerpo .perfil-chips > * { margin: 0; font-size: .8rem; font-weight: 600; padding: 3px 10px; line-height: 1.4; }

/* Panel: cuántas personas interactuaron hoy */
.interacciones-hoy { background: linear-gradient(135deg, #8e4552, #65232b); color: #f8e5d7; border-radius: 18px; padding: 16px 18px; margin: 0 0 12px; }
.interacciones-hoy summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.interacciones-hoy summary::-webkit-details-marker { display: none; }
.interacciones-hoy summary > b { font-size: 2.4rem; font-weight: 800; line-height: 1; min-width: 1.4em; text-align: center; }
.ih-texto { display: flex; flex-direction: column; gap: 2px; }
.ih-texto strong { font-size: 1rem; }
.ih-texto small { opacity: .8; font-size: .8rem; line-height: 1.4; }
.interacciones-hoy summary::after { content: "▾"; margin-left: auto; opacity: .7; }
.interacciones-hoy[open] summary::after { content: "▴"; }
.ih-tipos, .ih-quienes { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.ih-tipos span, .ih-quienes > * { background: rgba(248, 229, 215, .14); border-radius: 999px; padding: 3px 10px; font-size: .8rem; }
.ih-quienes a { color: inherit; }
.ih-quienes small { opacity: .7; margin-left: 2px; }
.interacciones-hoy .suave, .interacciones-hoy .nota { color: inherit; opacity: .85; }
/* Más colores para la cabecera del perfil (rosas, verdes, celestes), dentro de la paleta */
.pf-color-frambuesa .pf-banda, .color-perfil.color-frambuesa { background: linear-gradient(135deg, #7a2f45, #c2607a); }
.pf-color-blossom .pf-banda, .color-perfil.color-blossom { background: linear-gradient(135deg, #d98c98, #f6d3d8); }
.pf-color-blossom .pf-banda::after { color: rgba(101, 35, 43, .45); }
.pf-color-petalo .pf-banda, .color-perfil.color-petalo { background: linear-gradient(135deg, #ecaab2, #fbe7ea); }
.pf-color-petalo .pf-banda::after { color: rgba(101, 35, 43, .45); }
.pf-color-durazno .pf-banda, .color-perfil.color-durazno { background: linear-gradient(135deg, #d9967a, #f6d5c3); }
.pf-color-durazno .pf-banda::after { color: rgba(101, 35, 43, .45); }
.pf-color-lavanda .pf-banda, .color-perfil.color-lavanda { background: linear-gradient(135deg, #8a7aa0, #d4c8e2); }
.pf-color-musgo .pf-banda, .color-perfil.color-musgo { background: linear-gradient(135deg, #3e4a33, #7e8c6b); }
.pf-color-eucalipto .pf-banda, .color-perfil.color-eucalipto { background: linear-gradient(135deg, #5f7f78, #a9c4bb); }
.pf-color-menta .pf-banda, .color-perfil.color-menta { background: linear-gradient(135deg, #8fae9c, #dbeadf); }
.pf-color-menta .pf-banda::after { color: rgba(101, 35, 43, .45); }
.pf-color-noche .pf-banda, .color-perfil.color-noche { background: linear-gradient(135deg, #243447, #5b7690); }
.pf-color-niebla .pf-banda, .color-perfil.color-niebla { background: linear-gradient(135deg, #5e7a90, #a9bfcf); }
.pf-color-cielo .pf-banda, .color-perfil.color-cielo { background: linear-gradient(135deg, #8fb0c9, #dbe8f1); }
.pf-color-cielo .pf-banda::after { color: rgba(101, 35, 43, .45); }
.color-perfil.color-bordo { background: linear-gradient(135deg, #4b1920, #8e4552); } .color-perfil.color-rosa { background: linear-gradient(135deg, #8e4552, #ecaab2); }
.color-perfil.color-truffle { background: linear-gradient(135deg, #2e1a15, #6b4436); } .color-perfil.color-salvia { background: linear-gradient(135deg, #5d6a4d, #b5c49a); }
.color-perfil.color-marfil, [data-tema="claro"] .color-perfil.color-marfil { background: linear-gradient(135deg, #ecd2c9, #fff8f2); }
.gr-sin-corte { white-space: nowrap; }
/* Prueba de un envío cuando Gmail no tiene cupo: se ve en el panel */
.envio-sin-cupo { margin-top: 10px; }
.envio-codigo { letter-spacing: .08em; color: var(--acento); }
.envio-vista { width: 100%; height: 520px; border: 0; border-radius: 12px; background: #65232b; margin-top: 6px; }
/* Panel: totales del día (sin contar a la admin) */
.hoy-totales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.hoy-totales div { background: var(--tarjeta); border-radius: 14px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.hoy-totales b { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.hoy-totales span { font-size: .72rem; color: var(--texto-suave); line-height: 1.25; }
@media (max-width: 480px) { .hoy-totales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Perfil: tocar «suscriptores» abre la lista */
.pf-num-boton { background: var(--tarjeta); border-radius: 14px; padding: 12px 4px; text-align: center; min-width: 0; border: 0; color: var(--texto); font: inherit; cursor: pointer; display: block; }
.pf-num-boton:hover, .pf-num-boton:focus-visible { box-shadow: inset 0 0 0 1.5px var(--acento); }
.pf-num-boton b { display: block; font-size: 1.25rem; font-weight: 800; }
.pf-num-boton span { font-size: .72rem; color: var(--texto-suave); text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px; }
@media (max-width: 400px) { .pf-num-boton span { font-size: .66rem; } .pf-num-boton b { font-size: 1.1rem; } }
.dialogo-suscriptores { width: min(420px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 64px)); padding: 24px 20px 18px; border: 1px solid var(--linea); border-radius: 20px; background: var(--fondo); color: var(--texto); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: auto; }
.dialogo-suscriptores::backdrop { background: rgba(40, 12, 16, .6); backdrop-filter: blur(2px); }
.dialogo-suscriptores h2 { margin: 0 34px 14px 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.4rem; line-height: 1.25; }
.dialogo-suscriptores .dialogo-cerrar { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: var(--texto-suave); font-size: 1.6rem; cursor: pointer; line-height: 1; }
.susc-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.susc-lista a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--tarjeta); color: var(--texto); text-decoration: none; }
.susc-lista a:hover { box-shadow: inset 0 0 0 1.5px var(--acento); }
.susc-lista a > span:not(.susc-ir):not(.avatar):not(.tapa) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.susc-lista b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .susc-ir-txt { display: none; } }
.susc-lista small { color: var(--texto-suave); font-size: .8rem; }
.susc-ir { margin-left: auto; font-size: .78rem; color: var(--acento); white-space: nowrap; }
/* Comunidad: filtros juntos en un desplegable */
.filtros-com { margin: 0 0 14px; width: 100%; flex: 1 1 100%; }
.filtros-com summary { display: flex; align-items: center; gap: 10px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; cursor: pointer; list-style: none; }
.filtros-com summary::-webkit-details-marker { display: none; }
.filtros-com[open] summary { border-radius: 14px 14px 0 0; border-bottom-color: transparent; }
.filtros-com summary b { font-size: .92rem; }
.filtros-res { flex: 1; min-width: 0; color: var(--texto-suave); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filtros-flecha { color: var(--acento); transition: transform .2s; }
.filtros-com[open] .filtros-flecha { transform: rotate(180deg); }
.filtros-panel { display: grid; gap: 12px; background: var(--tarjeta); border: 1px solid var(--linea); border-top: 0; border-radius: 0 0 14px 14px; padding: 4px 14px 14px; }
.filtros-panel label { display: grid; gap: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.filtros-panel select { font: inherit; font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; width: 100%; }
.filtros-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .82rem; color: var(--texto-suave); }
@media (min-width: 700px) { .filtros-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filtros-pie { grid-column: 1 / -1; } }
.pill-genero { background: var(--fondo-2); color: var(--acento); }
/* Editor de los capítulos de grupo: el mismo de la hoja */
.gr-editor .hoja .editor { min-height: 340px; }
.gr-editor .gr-titulo-cap { margin: 4px 0 0; }
.gr-contador { display: flex; justify-content: space-between; gap: 10px; }
.herramientas .herr-raya { font-weight: 800; }
/* Biblioteca: pestañas y «ideas y frases» */
.bib-pestanas { display: flex; gap: 4px; background: var(--fondo-2); border-radius: 999px; padding: 4px; margin: 0 0 18px; }
.bib-pestanas button { flex: 1; border: 0; background: none; color: var(--texto-suave); font: inherit; font-size: .88rem; font-weight: 700; padding: 10px 6px; border-radius: 999px; cursor: pointer; }
.bib-pestanas button[aria-selected="true"] { background: var(--acento); color: var(--sobre-acento); }
.idea-nueva { background: var(--tarjeta); border-radius: 16px; padding: 12px; margin: 0 0 14px; display: grid; gap: 10px; }
.idea-nueva textarea, .idea-editar textarea { width: 100%; box-sizing: border-box; font-family: var(--serif); font-size: 1rem; line-height: 1.5; padding: 12px; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo); color: var(--texto); resize: vertical; }
.idea-nueva .boton-chico { justify-self: start; margin-left: 0; }
.idea-tipos { margin: 0; }
.ideas-lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.idea-item { background: var(--tarjeta); border-radius: 14px; padding: 12px 14px; border-left: 3px solid var(--acento); }
.idea-item.editando .idea-editar { display: grid; gap: 10px; }
.idea-tipo { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.idea-texto { margin: 4px 0 8px; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .82rem; }
.idea-acciones .idea-usar { color: var(--acento); font-weight: 700; }
.idea-fecha { margin-left: auto; color: var(--texto-suave); font-size: .78rem; }
.dialogo-ideas .ideas-hoja ul { list-style: none; margin: 0; padding: 0; }
.dialogo-ideas .ideas-hoja li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linea); font-family: var(--serif); line-height: 1.4; }
.dialogo-ideas .ideas-hoja li span { overflow-wrap: anywhere; }
.dialogo-ideas .ideas-hoja .boton-chico { flex: none; margin: 0; font-family: var(--sans); }
/* ---------- Modo lectura ---------- */
.lector { --lec-fondo: #65232b; --lec-texto: #f8e5d7; --lec-suave: rgba(248, 229, 215, .82); --lec-linea: rgba(248, 229, 215, .18); --lec-acento: #ecaab2; --lec-tarjeta: rgba(248, 229, 215, .08);
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--lec-fondo); color: var(--lec-texto); overflow-y: auto; overscroll-behavior: contain; }
.lector::backdrop { background: rgba(0, 0, 0, .6); }
.lector.lec-fondo-sepia { --lec-fondo: #f1e3cc; --lec-texto: #3b2a1e; --lec-suave: rgba(59, 42, 30, .8); --lec-linea: rgba(59, 42, 30, .16); --lec-acento: #8e4552; --lec-tarjeta: rgba(59, 42, 30, .06); }
.lector.lec-fondo-papel { --lec-fondo: #fffaf6; --lec-texto: #2b1d18; --lec-suave: rgba(43, 29, 24, .78); --lec-linea: rgba(43, 29, 24, .14); --lec-acento: #8e4552; --lec-tarjeta: rgba(101, 35, 43, .05); }
.lector.lec-fondo-noche { --lec-fondo: #1c1412; --lec-texto: #e9dccf; --lec-suave: rgba(233, 220, 207, .76); --lec-linea: rgba(233, 220, 207, .14); --lec-acento: #ecaab2; --lec-tarjeta: rgba(233, 220, 207, .06); }
.lector-progreso { position: sticky; top: 0; height: 4px; background: var(--lec-linea); z-index: 2; }
.lector-progreso span { display: block; height: 100%; width: 0; background: var(--lec-acento); transition: width .1s linear; }
.lector-marco { max-width: 680px; margin: 0 auto; padding: 14px 20px 60px; box-sizing: border-box; }
.lector-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 18px; font-size: .88rem; color: var(--lec-suave); }
.lector-top .link { color: var(--lec-suave); font-size: .92rem; }
.lector-aa { border: 1px solid var(--lec-linea); background: none; color: var(--lec-texto); border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 800; cursor: pointer; }
.lector-aa[aria-expanded="true"] { background: var(--lec-acento); color: var(--lec-fondo); border-color: transparent; }
.lector-panel { background: var(--lec-tarjeta); border: 1px solid var(--lec-linea); border-radius: 16px; padding: 14px; margin: 0 0 22px; display: grid; gap: 12px; }
.lector-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lector-fila > span { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lec-suave); }
.lector-seg { display: flex; gap: 6px; }
.lector-seg button { border: 1px solid var(--lec-linea); background: none; color: var(--lec-texto); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .85rem; cursor: pointer; }
.lector-seg button[aria-pressed="true"] { background: var(--lec-acento); color: var(--lec-fondo); border-color: transparent; }
.lector-seg .lector-fondo { width: 30px; height: 30px; padding: 0; border: 2px solid var(--lec-linea); }
.lector-seg .lector-fondo[aria-pressed="true"] { border: 3px solid var(--lec-acento); background-clip: padding-box; }
.lector-fondo.f-bordo { background: #65232b !important; } .lector-fondo.f-sepia { background: #f1e3cc !important; } .lector-fondo.f-papel { background: #fffaf6 !important; } .lector-fondo.f-noche { background: #1c1412 !important; }
.lector-kicker { margin: 0; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lec-acento); }
.lector-titulo { margin: 8px 0 12px; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 6vw, 2.5rem); line-height: 1.15; color: var(--lec-texto); }
.lector-autor { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 28px; font-size: .88rem; color: var(--lec-suave); }
.lector-autor b { color: var(--lec-texto); }
.lector-texto { font-family: var(--serif); font-size: 1.16rem; line-height: 1.85; overflow-wrap: anywhere; }
.lector.lec-tam-1 .lector-texto { font-size: 1.02rem; } .lector.lec-tam-3 .lector-texto { font-size: 1.34rem; }
.lector.lec-letra-moderna .lector-texto:not(.fuente-maquina) { font-family: var(--sans); }
.lector-texto p { margin: 0; text-indent: 1.5em; }
.lector-texto p.lector-primero { text-indent: 0; }
.lector-texto p.lector-primero::first-letter { float: left; font-size: 3.3em; line-height: .82; padding: .08em .12em 0 0; color: var(--lec-acento); font-family: var(--serif); }
.lector-texto .lector-espacio { height: .9em; }
.lector-texto.es-verso { text-align: center; } .lector-verso { white-space: pre-wrap; }
.lector-fin { text-align: center; color: var(--lec-acento); letter-spacing: 10px; margin: 30px 0; }
.lector-cierre { background: var(--lec-tarjeta); border: 1px solid var(--lec-linea); border-radius: 16px; padding: 18px; text-align: center; }
.lector-cierre p { margin: 0 0 12px; color: var(--lec-suave); }
.lector-cierre .boton { margin: 0; }
.migas-lector { margin: -6px 0 14px; }
@media (min-width: 700px) {
  .lector-texto { font-size: 1.26rem; }
  .lector.lec-tam-1 .lector-texto { font-size: 1.1rem; } .lector.lec-tam-3 .lector-texto { font-size: 1.44rem; }
}
/* «¿Te gustó?»: reseña después de poner estrellas */
.dialogo-resena { width: min(420px, calc(100vw - 32px)); }
.dialogo-resena .form-resena { width: 100%; display: grid; gap: 10px; text-align: left; margin-top: 4px; }
.dialogo-resena textarea { width: 100%; box-sizing: border-box; font-family: var(--serif); font-size: 1rem; line-height: 1.5; padding: 12px; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo); color: var(--texto); resize: vertical; }
.dialogo-resena .fc-frases { width: 100%; }
.dialogo-resena .boton { margin: 4px 0 0; justify-self: center; }
.dialogo-resena .resena-no { font-size: .82rem; color: var(--texto-suave); margin-top: -2px; }
/* Avisos cortitos: en una línea, con los colores de la marca */
.aviso { width: max-content; max-width: min(92vw, 520px); box-sizing: border-box; text-align: center; line-height: 1.35;
  background: #ecaab2; color: #65232b; border: 0; font-weight: 700; padding: 11px 22px; box-shadow: 0 10px 28px rgba(40, 12, 16, .35); }
[data-tema="claro"] .aviso { background: #65232b; color: #f8e5d7; box-shadow: 0 10px 28px rgba(101, 35, 43, .28); }
/* ---------- Desafío del día ---------- */
.boton-desafio { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #8e4552, #65232b); color: #f8e5d7; border-radius: 16px; padding: 14px 16px; margin: 0 0 16px; text-decoration: none; box-shadow: 0 10px 24px rgba(40, 12, 16, .25); }
.boton-desafio:hover { filter: brightness(1.06); }
.bd-emoji { font-size: 1.8rem; line-height: 1; }
.bd-texto { flex: 1; min-width: 0; }
.bd-texto small { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ecaab2; }
.bd-texto b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-texto i { display: block; font-style: normal; font-size: .76rem; color: rgba(248, 229, 215, .85); }
.bd-flecha { color: #ecaab2; font-size: 1.2rem; }
.des-card { background: linear-gradient(160deg, #8e4552, #65232b); color: #f8e5d7; border-radius: 20px; padding: 20px; margin: 0 0 14px; box-shadow: 0 12px 30px rgba(40, 12, 16, .3); }
.des-kicker { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ecaab2; }
.des-por { margin: 2px 0 10px; font-size: .82rem; color: rgba(248, 229, 215, .85); }
.des-por a { color: #fff; font-weight: 700; }
.des-titulo { margin: 0 0 12px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.6rem; line-height: 1.2; color: #f8e5d7; }
.des-consigna { font-family: var(--serif); font-size: 1.02rem; line-height: 1.65; white-space: pre-wrap; margin: 0 0 12px; }
.des-reto { background: rgba(248, 229, 215, .12); border-left: 3px solid #ecaab2; border-radius: 0 12px 12px 0; padding: 10px 12px; font-size: .92rem; line-height: 1.5; margin: 0 0 12px; white-space: pre-wrap; }
.des-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.des-chips span { font-size: .76rem; font-weight: 700; background: rgba(248, 229, 215, .14); border-radius: 999px; padding: 4px 10px; }
.des-card .des-sumarme { background: #ecaab2; color: #65232b; margin: 0; }
.des-cerrado { margin: 0; font-size: .88rem; color: rgba(248, 229, 215, .85); }
.des-semana { background: var(--tarjeta); border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; font-size: .88rem; }
.des-semana p { margin: 0; }
.des-semana small { color: var(--texto-suave); font-size: .8rem; }
.des-barra { height: 8px; border-radius: 8px; background: var(--fondo-2); margin: 8px 0 6px; overflow: hidden; }
.des-barra span { display: block; height: 100%; background: var(--acento); border-radius: 8px; }
.des-sub { margin: 20px 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--detalle); }
.des-respuestas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.des-respuestas a { display: flex; align-items: center; gap: 10px; background: var(--tarjeta); border-radius: 14px; padding: 10px 12px; color: var(--texto); text-decoration: none; }
.des-respuestas a:hover { box-shadow: inset 0 0 0 1.5px var(--acento); }
.dr-texto { flex: 1; min-width: 0; }
.dr-texto b { display: block; font-size: .8rem; }
.dr-texto i { display: block; font-family: var(--serif); font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-ir { font-size: .78rem; color: var(--acento); font-weight: 700; white-space: nowrap; }
.des-anterior { display: block; background: var(--tarjeta); border-radius: 14px; padding: 12px 14px; margin: 0 0 8px; color: var(--texto); text-decoration: none; }
.des-anterior .des-kicker { color: var(--detalle); }
.des-ant-titulo { display: block; font-family: var(--serif); font-style: italic; font-size: 1.1rem; margin: 4px 0 2px; }
.des-ant-meta { font-size: .8rem; color: var(--texto-suave); }
.des-editora-link { text-align: center; margin: 18px 0 0; }
.dc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dc-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--tarjeta); border-radius: 14px; padding: 10px 12px; }
.dc-fila.mio { box-shadow: inset 0 0 0 1.5px var(--acento); }
.dc-dia { font-weight: 800; min-width: 104px; text-transform: capitalize; }
.dc-estado { flex: 1; min-width: 0; font-size: .88rem; }
.dc-libre { color: var(--texto-suave); }
.dc-mio { color: var(--acento); font-weight: 700; }
.dc-fila .boton-chico, .dc-fila .boton-suave { margin: 0; }
/* En celus angostos, el estado del día va en su propia línea, debajo de la fecha. */
@media (max-width: 400px) {
  .dc-fila { display: grid; grid-template-columns: 1fr auto; }
  .dc-dia { min-width: 0; }
  .dc-estado { grid-column: 1 / -1; grid-row: 2; }
  .dc-form { grid-column: 1 / -1; }
}
.dc-form { flex-basis: 100%; display: grid; gap: 10px; margin-top: 8px; }
.dc-form label { display: grid; gap: 5px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.dc-form input, .dc-form textarea, .dc-form select { font: inherit; font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; width: 100%; box-sizing: border-box; }
.dc-form textarea { font-family: var(--serif); resize: vertical; }
.dc-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dc-dos .dc-emoji { max-width: 90px; } .dc-dos:has(.dc-emoji) { grid-template-columns: 90px 1fr; }
.dc-acciones { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ed-lista, .ed-resultados { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.ed-lista li, .ed-resultados li { display: flex; align-items: center; gap: 10px; background: var(--fondo-2); border-radius: 12px; padding: 8px 12px; }
.ed-lista li > span:not(.avatar), .ed-resultados li > span:not(.avatar) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ed-lista small, .ed-resultados small { color: var(--texto-suave); font-size: .78rem; overflow-wrap: anywhere; }
.ed-resultados .boton-chico { margin: 0; flex: none; }
.ed-buscar { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; margin-top: 10px; }
.ed-buscar input { font: inherit; font-weight: 400; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linea); background: var(--fondo); color: var(--texto); }
/* Modo lectura: estrellas y comentarios adentro, con los colores del fondo elegido */
.lector { --texto: var(--lec-texto); --texto-suave: var(--lec-suave); --linea: var(--lec-linea); --tarjeta: var(--lec-tarjeta); --fondo: var(--lec-fondo); --fondo-2: var(--lec-tarjeta); --acento: var(--lec-acento); --detalle: var(--lec-acento); }
.lector-interaccion { background: var(--lec-tarjeta); border: 1px solid var(--lec-linea); border-radius: 18px; padding: 16px; margin: 0; box-shadow: none; }
.lector-interaccion .lector-pregunta { margin: 0 0 12px; text-align: center; color: var(--lec-suave); }
.lector-interaccion .relato-pie { border-top: 0; padding-top: 0; }
.lector.lec-fondo-sepia .lector-interaccion .boton, .lector.lec-fondo-papel .lector-interaccion .boton { color: #fffaf6; background: #8e4552; }
/* Avisos → Beneficios */
.beneficios { display: grid; gap: 10px; }
.beneficio { background: var(--tarjeta); border-radius: 16px; padding: 14px 16px; }
.beneficio.desbloqueado { box-shadow: inset 0 0 0 1.5px var(--acento); }
.beneficio p { margin: 0 0 8px; line-height: 1.5; font-size: .92rem; }
.beneficio p:last-child { margin-bottom: 0; }
.beneficio .ben-titulo { font-weight: 800; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ben-ok { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.beneficio .boton-chico { margin: 4px 0 0; }
.beneficio .bp-barra { margin-top: 6px; }
.pill-desafio { background: #8e4552; color: #f8e5d7; text-decoration: none; }
.pill-desafio:hover { filter: brightness(1.1); }
/* Capítulos del desafío del mes: sello naranja calabaza */
.sello-mes { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; margin: 0 6px 6px 0; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .04em;
  text-decoration: none; color: #2a1206; background: linear-gradient(135deg, #ffb066, #ff7a1a); box-shadow: 0 0 12px rgba(255, 122, 26, .35); }
/* Hoja de un capítulo del desafío del mes: solo lectura (sin privado, borrar ni cambiar de novela). */
.hoja-fija #e-publico, .hoja-fija #e-borrar, .hoja-fija #e-parte, .hoja-fija .herramientas { display: none !important; }
.relato.de-mes { box-shadow: inset 0 0 0 1px rgba(255, 140, 50, .45); }


/* ============================================================
   APP — íconos de línea, portadas, barra de abajo, Inicio y Explorar
   ============================================================ */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }

/* Siluetas de carga */
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.esqueleto { display: grid; gap: 14px; }
.esq-tarjeta { padding: 20px; border-radius: 18px; background: var(--tarjeta); display: grid; gap: 10px; }
.esq-linea, .esq-tapa { display: block; height: 12px; border-radius: 8px; background: linear-gradient(90deg, var(--linea) 25%, color-mix(in srgb, var(--linea) 40%, transparent) 50%, var(--linea) 75%); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
.esq-linea.corta { width: 40%; } .esq-linea.media { width: 70%; }
.esq-lib { pointer-events: none; }
.esq-lib .esq-linea { margin-top: 8px; }

/* Portadas automáticas (según el género) */
.tapa { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 118px; aspect-ratio: 118 / 172; padding: 11px 10px 10px; border-radius: 10px; overflow: hidden; color: #f8e5d7; text-align: left; box-shadow: 0 8px 20px rgba(0, 0, 0, .28); isolation: isolate; }
.tapa::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(248, 229, 215, .35); border-radius: 6px; pointer-events: none; }
.tapa-g { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; opacity: .88; line-height: 1.2; }
.tapa-t { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.18; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.tapa-a { font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tapa-adorno { position: absolute; right: -10px; top: 34%; font-family: var(--serif); font-size: 64px; line-height: 1; opacity: .14; z-index: -1; }
.tapa-romance { background: linear-gradient(160deg, #ecaab2 0%, #b85a6b 55%, #65232b 100%); }
.tapa-fantasia { background: linear-gradient(165deg, #8e4552, #432720 80%); }
.tapa-terror { background: linear-gradient(170deg, #2b1512, #120807); }
.tapa-poesia { background: linear-gradient(160deg, #fff4ea, #ecaab2); color: #65232b; }
.tapa-poesia::before { border-color: rgba(101, 35, 43, .3); }
.tapa-scifi { background: linear-gradient(160deg, #6f8a93, #33424a 70%, #1f262b); }
.tapa-drama { background: linear-gradient(160deg, #b98a5e, #6b4226 70%, #432720); }
.tapa-cotidiano { background: linear-gradient(160deg, #a6b89a, #5d6b4f 75%, #3b4331); }
.tapa.tapa-mini { width: 54px; padding: 7px 6px; border-radius: 7px; }
.tapa-mini::before { inset: 3px; }
.tapa-mini .tapa-g, .tapa-mini .tapa-a { display: none; }
.tapa-mini .tapa-t { font-size: 9px; -webkit-line-clamp: 4; }
.tapa-mini .tapa-adorno { font-size: 34px; }

/* Secciones con carril horizontal */
.fila-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 30px 0 12px; }
.fila-sec a { font-size: .85rem; font-weight: 600; color: var(--acento); text-decoration: none; }
h2.sec { margin: 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.carril { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
.carril::-webkit-scrollbar { display: none; }
.lib { position: relative; flex: none; width: 118px; scroll-snap-align: start; text-decoration: none; color: var(--texto); }
.lib:hover .tapa { transform: translateY(-3px); }
.lib .tapa { transition: transform .2s; }
.lib-t { display: block; margin-top: 8px; font-size: .82rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-d { display: block; font-size: .74rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carril-top { padding-left: 38px; gap: 30px; }
.carril-top .lib-puesto { position: absolute; left: -26px; top: 100px; z-index: 2; font-family: var(--serif); font-style: italic; font-size: 64px; line-height: 1; color: var(--texto); text-shadow: 0 3px 12px rgba(0, 0, 0, .45); pointer-events: none; }
:root[data-tema="claro"] .carril-top .lib-puesto { color: #65232b; text-shadow: 0 3px 10px rgba(255, 248, 242, .8); }

/* Inicio */
.ini-saludo { margin: 6px 0 0; }
.ini-saludo p { margin: 0; font-size: .9rem; color: var(--texto-suave); }
.ini-titulo { margin: 2px 0 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.15; letter-spacing: -.01em; }
.ini-seguir { display: flex; gap: 14px; align-items: center; margin-top: 18px; padding: 12px; border-radius: 18px; background: var(--tarjeta); text-decoration: none; color: var(--texto); }
.ini-seguir-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ini-seguir small, .ini-desafio small { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--acento); }
.ini-seguir b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-seguir span > span, .ini-seguir-txt > span:not(.prog) { font-size: .8rem; color: var(--texto-suave); }
.prog { display: block; height: 4px; border-radius: 4px; background: var(--linea); margin-top: 8px; overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 4px; background: var(--acento); }
.ini-desafio { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding: 16px; border-radius: 20px; background: linear-gradient(120deg, var(--truffle), #6b3440); color: #f8e5d7; text-decoration: none; }
.ini-desafio-icono { width: 46px; height: 46px; border-radius: 14px; background: rgba(248, 229, 215, .12); display: grid; place-items: center; flex: none; }
.ini-desafio-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ini-desafio small { color: #ecaab2; }
.ini-desafio b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; margin: 2px 0; }
.ini-desafio-txt > span { font-size: .8rem; opacity: .85; }
.ini-flecha { width: 20px; height: 20px; opacity: .8; }
.ini-escribir { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linea); text-align: center; }
.ini-escribir .pregunta { margin-bottom: 24px; }
.ini-escribir .pregunta-mayus { font-size: clamp(2rem, 8vw, 3.2rem); }

/* Explorar */
.exp-buscar { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 16px; background: var(--tarjeta); color: var(--texto-suave); cursor: text; }
.exp-buscar input { flex: 1; min-width: 0; border: 0; background: none; color: var(--texto); font: inherit; font-size: 1rem; outline: none; }
.exp-buscar:focus-within { box-shadow: 0 0 0 2px var(--acento); }
.exp-resultados:not(:empty) { margin-top: 12px; }
.exp-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; }
.exp-accesos a { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 14px; border-radius: 16px; background: var(--tarjeta); color: var(--texto); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.exp-accesos a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--acento); }
.exp-accesos .ico { grid-row: span 2; color: var(--acento); }
.exp-accesos b { font-size: .9rem; line-height: 1.2; }
.exp-accesos small { font-size: .74rem; color: var(--texto-suave); line-height: 1.3; }
.exp-generos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.genero-tile { position: relative; height: 78px; padding: 12px 14px; border: 0; border-radius: 16px; overflow: hidden; display: flex; align-items: flex-end; text-align: left; cursor: pointer; color: #f8e5d7; font: inherit; isolation: isolate; transition: transform .2s; }
.genero-tile:hover { transform: translateY(-2px); }
.genero-tile b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; line-height: 1.15; }
.genero-tile .tapa-adorno { right: 8px; top: 4px; font-size: 44px; opacity: .22; }
.genero-mas { grid-column: 1 / -1; justify-self: center; background: none; border: 0; color: var(--acento); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; padding: 6px; }
.exp-personas { gap: 16px; }
.persona { flex: none; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; text-decoration: none; color: var(--texto); scroll-snap-align: start; }
.persona .avatar.grande { width: 64px; height: 64px; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--acento); margin-bottom: 6px; }
.persona b { font-size: .8rem; line-height: 1.2; white-space: nowrap; }
.persona small { font-size: .7rem; color: var(--texto-suave); }

/* Menú de arriba (compu): botón «escribir» */
.menu-escribir { display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px 5px 10px; border: 0; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.menu-escribir .ico { width: 16px; height: 16px; stroke-width: 2.4; }
:root[data-tema="claro"] .menu-escribir { color: #f8e5d7; }

/* «Escribir»: hoja de opciones (abajo en el celu, al centro en la compu) */
.hoja-escribir { width: min(520px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 48px)); padding: 26px 20px 20px; border: 1px solid var(--linea); border-radius: 24px; background: var(--fondo); color: var(--texto); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: auto; }
.hoja-escribir::backdrop { background: rgba(40, 12, 16, .6); backdrop-filter: blur(2px); }
.hoja-escribir h2 { margin: 0 34px 16px 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.45rem; }
.hoja-escribir .dialogo-cerrar { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--texto-suave); font-size: 1.6rem; cursor: pointer; line-height: 1; }
.esc-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.esc-opciones > * { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 14px; border: 0; border-radius: 16px; background: var(--tarjeta); color: var(--texto); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.esc-opciones > [hidden] { display: none; }
.esc-opciones > *:hover { box-shadow: 0 0 0 1.5px var(--acento); }
.esc-opciones .ico { grid-row: span 2; color: var(--acento); }
.esc-opciones b { font-size: .92rem; line-height: 1.2; }
.esc-opciones small { font-size: .74rem; color: var(--texto-suave); line-height: 1.3; }
.esc-opciones > :first-child { grid-column: 1 / -1; background: var(--acento); color: var(--sobre-acento); }
.esc-opciones > :first-child .ico, .esc-opciones > :first-child small { color: inherit; }
/* El desafío del día va solo en su fila (y el último, si queda suelto, también). */
#esc-desafio, .esc-opciones > :last-child:nth-child(odd) { grid-column: 1 / -1; }
:root[data-tema="claro"] .esc-opciones > :first-child { color: #f8e5d7; }

/* Barra de abajo: solo en el celu */
.tabs { display: none; }
@media (max-width: 760px) {
  .app-nueva .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: space-around; align-items: flex-end; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--fondo-2) 94%, transparent); border-top: 1px solid var(--linea); backdrop-filter: blur(12px); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0; border: 0; background: none; font: inherit; font-size: .66rem; font-weight: 600; color: var(--texto-suave); text-decoration: none; opacity: .8; cursor: pointer; }
  .tab .ico { width: 23px; height: 23px; }
  .tab.activa { color: var(--acento); opacity: 1; }
  .tab.activa .ico { stroke-width: 2.2; }
  .tab-escribir { opacity: 1; }
  .tab-mas { width: 46px; height: 46px; margin-top: -24px; border-radius: 16px; background: var(--acento); color: var(--sobre-acento); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
  :root[data-tema="claro"] .tab-mas { color: #f8e5d7; }
  .tab-mas .ico { width: 24px; height: 24px; stroke-width: 2.3; }
  body.app-nueva { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .app-nueva .top .menu { display: none; }
  .app-nueva .top-der .sesion.con-sesion { display: none; }
  /* En la hoja de escribir, la barra se esconde para dejar lugar al texto */
  body.app-nueva[data-vista="escribir"] .tabs { display: none; }
  body.app-nueva[data-vista="escribir"] { padding-bottom: 0; }
  .hoja-escribir { margin: auto auto 0; width: 100%; max-width: none; border-radius: 24px 24px 0 0; border-bottom: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .esc-opciones { grid-template-columns: 1fr; }
  .esc-opciones > * { padding: 12px 14px; }
}
@media (min-width: 761px) { .carril { margin: 0; padding-left: 0; padding-right: 0; } .carril-top { padding-left: 30px; } }
.esc-opciones > *:focus:not(:focus-visible) { outline: none; }
.carril { scroll-padding-left: 16px; }
.carril-top { scroll-padding-left: 38px; }
@media (max-width: 760px) { [data-vista="explorar"] { padding-top: 12px; } }
.ico-accion { width: 17px; height: 17px; margin: -2px 5px 0 0; }
.relato-acciones .link { display: inline-flex; align-items: center; }
.compacto-abrir.con-tapa { display: grid; grid-template-columns: 54px 1fr; column-gap: 14px; row-gap: 3px; align-content: start; }
.compacto-abrir.con-tapa .tapa { grid-row: 1 / span 3; align-self: start; }
.compacto-abrir.con-tapa > span:not(.tapa) { grid-column: 2; }

/* ---------- Editar perfil: pantalla propia ---------- */
.editor-perfil { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--linea); border-radius: 24px; background: var(--fondo); color: var(--texto); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: auto; overscroll-behavior: contain; }
.editor-perfil::backdrop { background: rgba(40, 12, 16, .6); backdrop-filter: blur(2px); }
.editor-perfil .formulario { margin: 0; gap: 0; display: block; }
.ep-cab { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 12px 16px; background: color-mix(in srgb, var(--fondo) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.ep-cab h2 { margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: .02em; }
.ep-cab .link { justify-self: start; }
.ep-cab .boton { justify-self: end; margin: 0; }
.ep-vista { position: relative; text-align: center; padding-bottom: 14px; }
.ep-vista .pf-banda { height: 110px; }
.ep-foto { position: relative; display: inline-block; margin-top: -52px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.ep-foto .avatar.grande { width: 104px; height: 104px; box-shadow: 0 0 0 4px var(--fondo); }
.ep-camara { position: absolute; right: -2px; bottom: 4px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: var(--acento); box-shadow: 0 0 0 3px var(--fondo); }
.ep-nombre { margin: 8px 16px 0; font-size: 1.5rem; line-height: 1.2; }
.ep-usuario { margin: 2px 0 0; }
.ep-avatares { margin: 0 16px 8px; padding: 14px; border-radius: 18px; background: var(--tarjeta); }
.ep-mini { margin: 0 0 10px; font-size: .82rem; color: var(--texto-suave); }
.ep-avatares .avatares { margin-top: 0; }
.ep-seccion { margin: 12px 16px 0; padding: 16px; border-radius: 18px; background: var(--tarjeta); display: grid; gap: 14px; }
.ep-seccion h3 { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--acento); }
.ep-seccion .campo { margin: 0; }
.ep-seccion .prefs-mail { margin: 0; }
.editor-perfil .error-form { margin: 12px 16px 0; }
.ep-pie { position: sticky; bottom: 0; z-index: 3; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); margin-top: 12px; background: linear-gradient(transparent, var(--fondo) 30%); }
.ep-pie .boton { width: 100%; margin: 0; }
@media (max-width: 760px) {
  .editor-perfil { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
}
/* En tu perfil, la foto se toca para editar */
.pf-avatar-editar { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.pf-avatar-editar .ep-camara { width: 30px; height: 30px; font-size: 13px; right: -4px; bottom: 2px; z-index: 2; }
.ep-seccion > * { min-width: 0; }
.ep-seccion input:not([type="checkbox"]):not([type="radio"]), .ep-seccion select, .ep-seccion textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.ep-seccion .check { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.4; }
.ep-seccion .check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acento); }
.ep-seccion .prefs-mail { display: grid; gap: 12px; border: 0; padding: 0; }
.ep-seccion .prefs-mail legend { padding: 0; margin-bottom: 10px; font-weight: 700; }
.ep-seccion .con-letras { max-width: 100%; }
/* Escritos sueltos en los carriles: tarjetita de texto (solo las novelas llevan portada) */
.carta { display: flex; flex-direction: column; gap: 6px; width: 150px; height: 172px; padding: 14px 13px; border-radius: 14px; background: var(--tarjeta); border: 1px solid var(--linea); overflow: hidden; transition: transform .2s; }
.lib:hover .carta { transform: translateY(-3px); }
.carta-g { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--acento); }
.carta-t { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carta-i { font-family: var(--serif); font-size: 11.5px; line-height: 1.5; color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lib:has(.carta) { width: 150px; }
.carta + .lib-d { margin-top: 8px; }

/* App nueva en prueba: qué se ve en cada versión */
body:not(.app-nueva) .solo-nuevo { display: none !important; }
.app-nueva .solo-viejo { display: none !important; }
body:not(.app-nueva) .ico-accion { display: none; }
.app-nueva .emo { display: none; }
/* Versión de siempre: el formulario de perfil en su desplegable, como antes */
.perfil-editar .ep-cab, .perfil-editar .ep-vista { display: none; }
.perfil-editar .ep-avatares { margin: 12px 0 0; padding: 0; background: none; }
.perfil-editar .ep-seccion { margin: 18px 0 0; padding: 0; background: none; border-radius: 0; }
.perfil-editar .ep-pie { position: static; margin-top: 16px; padding: 0; background: none; }
.perfil-editar .ep-pie .boton { width: auto; }
.perfil-editar .formulario { margin-top: 12px; }

/* ---------- Feed «Leer» (app nueva) ---------- */
.app-nueva [data-vista="comunidad"] .feed-col > .bajada { display: none; }
.app-nueva #biblioteca-controles .filtros-com { display: none; }
.feed-explorar { margin: 10px 0 0; font-size: .88rem; }
.feed-explorar a { color: var(--acento); font-weight: 600; text-decoration: none; }
.feed-pastillas { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 4px; padding: 10px 16px; background: var(--fondo); }
.feed-pastillas::-webkit-scrollbar { display: none; }
.pas { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--texto-suave); font: inherit; font-size: .82rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pas.on { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.pas-sep { flex: none; width: 1px; margin: 4px 2px; background: var(--linea); }
/* Géneros: en el celu se deslizan de costado; en la compu, un desplegable */
.pas-sel { display: none; position: relative; padding: 0; }
.pas-sel select { appearance: none; -webkit-appearance: none; width: auto; max-width: 150px; field-sizing: content; min-width: 0; margin: 0; text-overflow: ellipsis; border: 0; background: none; color: inherit; font: inherit; padding: 7px 32px 7px 14px; border-radius: 999px; cursor: pointer; box-shadow: none; }
.pas-sel select:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.pas-sel::after { content: "▾"; position: absolute; right: 13px; top: 50%; transform: translateY(-52%); pointer-events: none; font-size: .8rem; }
.pas-sel select option { color: var(--texto); background: var(--fondo); }
@media (min-width: 761px) {
  .feed-pastillas { flex-wrap: wrap; overflow: visible; gap: 6px; }
  .feed-pastillas .pas { padding-left: 12px; padding-right: 12px; }
  .feed-pastillas .pas-sel { padding: 0; }
  .feed-pastillas [data-pas-genero]:not(.pas-poesia) { display: none; }
  .pas-sel { display: inline-flex; }
}
.app-nueva #biblioteca-lista { display: grid; gap: 14px; }
.app-nueva #biblioteca-lista > .relato { margin: 0; padding: 16px 16px 12px; border-radius: 20px; border: 0; }
/* Las frases y los relatos de la ruleta conservan su fondo propio (distinto en día y noche) */
.app-nueva #biblioteca-lista > .relato:not(.relato-frase):not(.de-ruleta) { background: var(--tarjeta); }
.feed-quien { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: .82rem; }
.feed-quien .firma-fila { flex: 0 1 auto; min-width: 0; }
.feed-quien .firma-texto small { display: none; }
.feed-hace { color: var(--texto-suave); font-size: .78rem; }
.feed-hace::before { content: "· "; }
.feed-gen { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--acento) 16%, transparent); color: var(--acento); font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.relato-feed .relato-titulo { margin-top: 2px; }
.relato-feed .relato-pie { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea); }
.relato-feed .relato-pie:empty { display: none; }
.leer-completo { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--acento); text-decoration: none; }
.leer-completo .ico-accion { margin: 0 0 0 4px; }
.relato-cap { background: linear-gradient(135deg, color-mix(in srgb, var(--truffle) 55%, transparent), var(--tarjeta)) !important; }
.cap-fila { display: flex; gap: 14px; }
.cap-fila .tapa { width: 84px; flex: none; }
.cap-txt { min-width: 0; display: flex; flex-direction: column; }
.cap-txt small { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--acento); }
.cap-txt b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1rem; margin: 3px 0 0; }
.cap-nombre { font-size: .8rem; color: var(--texto-suave); }
.cap-txt p { margin: 6px 0 0; font-family: var(--serif); font-size: .86rem; line-height: 1.55; color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cap-ir { align-self: flex-start; margin-top: 10px; }
.app-nueva #biblioteca-mas { display: none; }
#feed-seguir:not(:empty) { margin-top: 12px; }
/* La barra de abajo se esconde al bajar leyendo y con el teclado abierto */
@media (max-width: 760px) {
  .app-nueva .tabs { transition: transform .25s ease; }
  .app-nueva.tabs-ocultas .tabs, .app-nueva.con-teclado .tabs { transform: translateY(110%); }
}
.relato-feed .relato-titulo { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.4rem; line-height: 1.2; }
.app-nueva [data-vista="comunidad"] .feed-col > .volver { display: none; }
.app-nueva [data-vista="comunidad"] .feed-col > .titulo { font-size: clamp(1.4rem, 5vw, 1.9rem); margin-top: 6px; }
.relato-feed .relato-acciones { gap: 4px 16px; }
/* App nueva, modo noche: tarjetas dos tonos más oscuras para que el texto se lea mejor */
:root:not([data-tema="claro"]) body.app-nueva { --tarjeta: #4a181e; }
.app-nueva .relato-feed .relato-texto { color: var(--texto); }
:root[data-tema="claro"] .relato.de-ruleta { --texto-suave: #64443c; }
:root[data-tema="claro"] .de-ruleta .estrellas-resumen, :root[data-tema="claro"] .de-ruleta .relato-origen, :root[data-tema="claro"] .de-ruleta .relato-origen summary { color: #64443c; }

/* En el celu la página no «baila» de costado: solo se deslizan las pastillas y los carriles */
html, body { overflow-x: clip; overscroll-behavior-x: none; }
.carril, .feed-pastillas { overscroll-behavior-x: contain; }
/* Feed nuevo: comentar · modo lectura · compartir en una sola línea; lo demás en «⋯» */
.relato-feed .relato-acciones, .app-nueva .relato-frase .relato-acciones { display: flex; flex-wrap: nowrap; align-items: center; gap: 18px; }
.relato-feed .relato-acciones .txt, .app-nueva .relato-frase .relato-acciones .compartir .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.relato-feed .relato-acciones .ico-accion { width: 19px; height: 19px; margin-right: 5px; }
.relato-feed .relato-acciones .abrir-lector .ico-accion, .relato-feed .relato-acciones .compartir .ico-accion, .app-nueva .relato-frase .compartir .ico-accion { margin-right: 0; }
.mas-acciones { position: relative; margin-left: auto; }
.mas-acciones > summary { list-style: none; cursor: pointer; padding: 0 6px; font-size: 1.3rem; line-height: 1; color: var(--texto-suave); }
.mas-acciones > summary::-webkit-details-marker { display: none; }
.mas-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; display: grid; gap: 4px; min-width: 190px; padding: 8px; border-radius: 14px; background: var(--fondo-2); border: 1px solid var(--linea); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
.mas-menu .link { text-align: left; padding: 6px 8px; white-space: nowrap; }

/* ---------- Avisos → ✨ Mejoras de la app ---------- */
.mejoras-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mejora { display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--tarjeta); }
.mejora.nueva { box-shadow: inset 0 0 0 1.5px var(--acento); }
.mejora-emoji { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; background: color-mix(in srgb, var(--acento) 16%, transparent); }
.mejora > div { min-width: 0; flex: 1; }
.mejora-t { margin: 2px 0 2px; font-weight: 800; font-size: .95rem; line-height: 1.3; }
.mejora-nueva { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.mejora-d { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--texto-suave); }
.mejora-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0 0; font-size: .78rem; color: var(--texto-suave); }
.mejora-pie a { color: var(--acento); font-weight: 700; text-decoration: none; }
#tab-mejoras.con-punto::after, .campana.con-mejora::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--acento); vertical-align: 6px; }
.campana.con-mejora::after { position: absolute; left: 16px; top: -2px; margin: 0; box-shadow: 0 0 0 2px var(--fondo); }
.campana.con-mejora:has(.globito:not([hidden]))::after { display: none; }
/* Avisos: las tres pestañas en una línea también en el celu */
#avisos-pestanas button { white-space: nowrap; }
@media (max-width: 520px) { #avisos-pestanas button { padding-left: 8px; padding-right: 8px; font-size: .78rem; } }
@media (max-width: 360px) { #avisos-pestanas { gap: 2px; } #avisos-pestanas button { padding-left: 4px; padding-right: 4px; font-size: .7rem; letter-spacing: -.01em; } }
/* Capítulos en el feed: la portada real de la novela; si no tiene, la automática */
.cap-portada { flex: none; width: 84px; }
.cap-portada img { display: block; width: 84px; aspect-ratio: 118 / 172; object-fit: cover; border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
.cap-portada .tapa { display: none; width: 84px; }
.cap-portada.sin-portada img { display: none; }
.cap-portada.sin-portada .tapa { display: flex; }
/* Top 5 en el celu: sin la fotito, el número más chico y el texto con más ancho */
@media (max-width: 520px) {
  .ranking .puesto { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 10px; padding: 12px; }
  .ranking .puesto-persona > .avatar { display: none; }
  .podio .puesto-numero { width: 34px; height: 34px; line-height: 34px; font-size: 1.1rem; }
  .podio:first-child .puesto-numero { width: 38px; height: 38px; line-height: 38px; font-size: 1.25rem; }
  .ranking .puesto-detalle { font-size: .8rem; }
  .ranking .puesto:not(.podio) .puesto-numero { font-size: 1.2rem; }
  .ranking .puesto-estrellas { font-size: 1rem; text-align: right; }
}

/* ---------- Subrayar y comentar frases (modo lectura) ---------- */
.lec-parrafo { position: relative; transition: background-color .6s; border-radius: 6px; }
.lec-parrafo.lec-destello { background-color: color-mix(in srgb, #ecaab2 30%, transparent); }
::highlight(citas) { background-color: rgba(236, 170, 178, .5); }
.lec-burbuja { position: absolute; right: -34px; top: .2em; min-width: 26px; height: 22px; padding: 0 6px; border: 0; border-radius: 11px 11px 11px 3px; background: rgba(101, 35, 43, .12); color: #65232b; font: 700 11px/22px var(--sans); cursor: pointer; text-indent: 0; }
.lec-burbuja.activa, .lec-burbuja:hover { background: #65232b; color: #f8e5d7; }
.lec-fondo-noche .lec-burbuja, .lec-fondo-bordo .lec-burbuja { background: rgba(248, 229, 215, .16); color: #f8e5d7; }
.lec-fondo-noche .lec-burbuja.activa, .lec-fondo-bordo .lec-burbuja.activa { background: #ecaab2; color: #65232b; }
.lector-texto { padding-right: 34px; }
.lec-hilo { margin: 4px 0 18px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 250, 246, .92); color: #432720; box-shadow: 0 8px 24px rgba(67, 39, 32, .14); font-family: var(--sans); font-size: .88rem; line-height: 1.45; text-align: left; }
.lec-fondo-noche .lec-hilo, .lec-fondo-bordo .lec-hilo { background: #3a1a1e; color: #f8e5d7; }
.lec-hilo-c + .lec-hilo-c { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(67, 39, 32, .1); }
.lec-hilo-c.resp { margin-left: 22px; }
.lec-hilo-de { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: .8rem; }
.lec-hilo-de span { opacity: .65; }
.lec-hilo-cita { margin: 0 0 6px; padding-left: 10px; border-left: 3px solid #ecaab2; font-family: var(--serif); font-style: italic; font-size: .85rem; opacity: .85; }
.lec-hilo-t { margin: 0; }
.lec-form { display: grid; gap: 8px; margin-top: 10px; }
.lec-form textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(67, 39, 32, .15); background: rgba(241, 227, 216, .7); color: inherit; font: inherit; resize: vertical; }
.lec-fondo-noche .lec-form textarea, .lec-fondo-bordo .lec-form textarea { background: rgba(248, 229, 215, .08); border-color: rgba(248, 229, 215, .2); }
.lec-form .boton { justify-self: end; margin: 0; }
.lec-form-pie { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.lec-comentar-sel { position: fixed; z-index: 30; padding: 8px 14px; border: 0; border-radius: 999px; background: #65232b; color: #f8e5d7; font: 700 .85rem var(--sans); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); cursor: pointer; }
.lec-comentar-sel[hidden] { display: none; }
.com-cita { display: block; width: 100%; margin: 4px 0 4px; padding: 2px 0 2px 10px; border: 0; border-left: 3px solid var(--acento); background: none; color: inherit; font-family: var(--serif); font-style: italic; font-size: .88rem; text-align: left; opacity: .85; cursor: pointer; }
.com-cita:hover { opacity: 1; }
@keyframes burbuja-nueva { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.lec-burbuja.recien { animation: burbuja-nueva .5s ease-out; background: #65232b; color: #f8e5d7; }
/* Modo lectura de una novela: el siguiente capítulo abajo */
.lector-siguiente:empty { display: none; }
.lector-siguiente { margin: 22px 0 8px; text-align: center; font-family: var(--sans); }
.lec-sig { width: 100%; max-width: 460px; }
.lec-sig-fin { font-size: .95rem; line-height: 1.5; }
.lec-sig-fin small { opacity: .75; }
.lec-sig-bloq { padding: 16px; border-radius: 16px; border: 1px dashed currentColor; text-align: left; font-size: .9rem; line-height: 1.45; opacity: .95; }
.lec-sig-bloq p { margin: 0 0 8px; }
.lec-sig-bloq .paso { display: flex; gap: 8px; align-items: center; margin: 6px 0 0; }
.lec-sig-bloq .ok { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: .75rem; flex: none; }
.lec-sig-bloq .hecho .ok { background: #ecaab2; border-color: #ecaab2; color: #65232b; }

/* ---------- Lecturas: contador, 🔖 y la pestaña de la biblioteca ---------- */
.lecturas { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: .8rem; color: var(--texto-suave); white-space: nowrap; }
.lecturas b { font-weight: 700; }
.lecturas .ico-accion { margin: 0 2px 0 0; width: 17px; height: 17px; }
.relato-pie:has(.lecturas:not([hidden])) { display: flex; flex-wrap: wrap; align-items: center; }
.guardar-lect { display: inline-flex; align-items: center; gap: 6px; }
.guardar-lect .ico-accion { margin-right: 0; }
.guardar-lect.on { color: var(--acento); }
.guardar-lect.on .ico { fill: currentColor; }
.relato-feed .guardar-lect .ico-accion { width: 19px; height: 19px; }
.lecturas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lectura-item { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--tarjeta); }
.lectura-ir { flex: 1; min-width: 0; text-decoration: none; color: var(--texto); display: flex; flex-direction: column; }
.lectura-ir b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1rem; line-height: 1.25; }
.lectura-ir small { font-size: .78rem; color: var(--texto-suave); margin-top: 2px; }
.lectura-ir .prog { margin-top: 8px; max-width: 220px; }
.lectura-acc { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lectura-accion { font-size: .8rem; font-weight: 700; color: var(--acento); text-decoration: none; white-space: nowrap; }
.lectura-acc .link { font-size: .75rem; color: var(--texto-suave); }
.bib-sub { margin: 22px 0 4px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--acento); }
.bib-sub:first-child { margin-top: 6px; }
.leyendo-lista { margin-bottom: 8px; }
.leyendo-item { align-items: center; }
.leyendo-tapa.cap-portada { width: 54px; }
.leyendo-tapa.cap-portada img { width: 54px; border-radius: 7px; box-shadow: 0 5px 12px rgba(0, 0, 0, .25); }
.leyendo-tapa.cap-portada .tapa { width: 54px; }
.leyendo-item .lectura-ir small + small { margin-top: 1px; }
@media (max-width: 420px) {
  .leyendo-item { flex-wrap: wrap; }
  .leyendo-item .lectura-ir { flex: 1 1 calc(100% - 70px); }
  .leyendo-item .lectura-acc { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: center; padding-left: 66px; }
}
.bib-pestanas button { white-space: nowrap; }

/* ---------- En la compu: a lo ancho ----------
   En pantallas anchas el encabezado ocupa todo el ancho; la comunidad suma una
   columna al costado y Explorar y la biblioteca se ven en grilla. La lectura y
   la hoja de escribir siguen centradas y angostas, y en el celu no cambia nada. */
.feed-lado { display: none; }
@media (min-width: 1100px) {
  .app-nueva .top { max-width: 1212px; }
  body.app-nueva[data-vista="comunidad"] main,
  body.app-nueva[data-vista="explorar"] main,
  body.app-nueva[data-vista="escritos"] main { max-width: 1212px; }
  .app-nueva .vista[data-vista="comunidad"] { display: grid; grid-template-columns: minmax(0, 720px) 330px; gap: 44px; justify-content: center; align-items: start; }
  .app-nueva .feed-col { min-width: 0; }
  .app-nueva .feed-lado { display: grid; gap: 14px; position: sticky; top: 16px; padding-top: 12px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: none; }
  .app-nueva .feed-col > #desafio-boton, .app-nueva .feed-col > #feed-seguir, .app-nueva .feed-col > .feed-explorar { display: none !important; }
  /* Una sola columna que nunca se estira: los títulos largos no empujan la caja */
  .app-nueva .feed-lado { grid-template-columns: minmax(0, 1fr); }
  .feed-lado > * { min-width: 0; }
  .feed-lado .boton-desafio { margin: 0; box-shadow: none; }
  .feed-lado .bd-texto b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; }
  .feed-lado .ini-seguir { margin: 0; }
  .lado-caja { background: var(--tarjeta); border-radius: 18px; padding: 16px 18px 10px; }
  .lado-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
  .lado-cab h3 { margin: 0; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--acento); }
  .lado-cab a { font-size: .78rem; color: var(--texto-suave); }
  .lado-cab a:hover { color: var(--acento); }
  .lado-top, .lado-personas { list-style: none; margin: 0; padding: 0; }
  .lado-top li + li, .lado-personas li + li { border-top: 1px solid var(--linea); }
  .lado-top a, .lado-personas a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 0; color: var(--texto); text-decoration: none; }
  .lado-top a:hover b, .lado-personas a:hover b { color: var(--acento); }
  .lado-top .avatar, .lado-personas .avatar { width: 32px; height: 32px; flex: none; }
  .lado-top a > span, .lado-personas a > span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .lado-top b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1rem; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .lado-personas b { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lado-top small, .lado-personas small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .76rem; color: var(--texto-suave); }
  .lado-top em { font-style: normal; font-size: .8rem; color: var(--texto-suave); white-space: nowrap; }
  .lado-personas li { display: flex; align-items: center; gap: 10px; }
  .lado-personas li a { flex: 1; }
  .lado-seguir { flex: none; font: inherit; font-size: .76rem; font-weight: 700; color: var(--acento); background: none; border: 1px solid var(--acento); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
  .lado-seguir:hover { background: var(--acento); color: var(--sobre-acento); }
  .lado-seguir.sigo { border-color: var(--linea); color: var(--texto-suave); }
  .lado-seguir.sigo:hover { background: none; color: var(--texto); }
  .lado-seguir:disabled { opacity: .6; }
  /* Explorar: los accesos en una fila */
  .app-nueva .exp-accesos { grid-template-columns: repeat(6, 1fr); }
  /* Biblioteca: escritos en tres columnas; ideas y lecturas en dos */
  .app-nueva #escritos-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; border-top: 0; }
  .app-nueva #escritos-lista > li { border-top: 0; }
  .app-nueva #escritos-lista > li:nth-child(-n+3) { border-top: 1px solid var(--linea); }
  .app-nueva #escritos-lista > li.vacio, .app-nueva #escritos-lista > .vacio { grid-column: 1 / -1; }
  .app-nueva #bib-lecturas .lecturas-lista, .app-nueva #bib-ideas .ideas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- El libro de Tamara Lucía (link a su página) ---------- */
/* Inicio: tarjetita del libro. En la compu, fija abajo a la izquierda
   (como el botón de Instagram a la derecha); en el celu, al final de la página. */
.libro-flota { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 34px 0 0; padding: 10px 18px 10px 10px; border-radius: 18px; background: var(--tarjeta); border: 1px solid var(--linea); color: var(--texto); text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: transform .2s, box-shadow .2s; }
@media (hover: hover) { .libro-flota:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .24); } }
.lf-tapa { flex: none; width: 38px; height: 54px; border-radius: 5px 7px 7px 5px; background: linear-gradient(160deg, #eaa6b2, #a4425a 70%, #7d2c40); box-shadow: inset 3px 0 0 rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; padding: 4px; }
.lf-tapa span { font-family: var(--serif); font-style: italic; font-size: 7px; line-height: 1.15; color: #fff4f1; text-align: center; }
.lf-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.lf-txt small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--acento); }
.lf-txt b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; margin: 2px 0 3px; }
.lf-txt em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--acento); }
.libro-flota .libro-nieve i { top: -10px; }
@media (max-width: 760px) { .libro-flota { display: none; } }
@media (min-width: 761px) {
  .libro-flota { position: fixed; left: 20px; bottom: 20px; z-index: 10; margin: 0; }
}
.libro-pie-caja { text-align: center; margin: 36px 0 0; }
.libro-pie { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--acento); color: var(--acento); font-size: .85rem; font-weight: 700; text-decoration: none; }
@media (hover: hover) { .libro-pie:hover { background: var(--acento); color: var(--sobre-acento); } }
.libro-pie-caja.pf-libro { margin: 4px 0 18px; }
/* Copitos de nieve que caen solo adentro de los botones del libro: la misma
   nieve de la portada (cada copo a su ritmo), con un recorrido corto. */
.libro-pie { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s, box-shadow .2s; }
.libro-pie .libro-nieve { z-index: -1; }
.libro-pie .libro-nieve i { color: #fff; animation-name: nieve-boton; }
.libro-pie .libro-nieve i:nth-child(3n) { color: #d6f0ff; }
@keyframes nieve-boton {
  0% { transform: translate(0, -2px) rotate(0); opacity: 0; }
  12% { opacity: .95; }
  50% { transform: translate(5px, 22px) rotate(90deg); }
  88% { opacity: .95; }
  100% { transform: translate(-2px, 46px) rotate(180deg); opacity: 0; }
}
/* En modo día el botón va lleno (bordó) para que el texto y los copos contrasten como en el oscuro */
:root[data-tema="claro"] .libro-pie { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); box-shadow: 0 6px 16px rgba(100, 30, 45, .25); }
:root[data-tema="claro"] .libro-pie .libro-nieve i { color: #fff; text-shadow: 0 0 3px rgba(150, 210, 245, .9); }
:root[data-tema="claro"] .libro-pie .libro-nieve i:nth-child(3n) { color: #cdeeff; }
@media (hover: hover) { :root[data-tema="claro"] .libro-pie:hover { background: var(--acento); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(100, 30, 45, .3); } }

/* ---------- «Lo que queda de nosotros»: el libro como una novela más ---------- */
.libro-nieve { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.libro-nieve i { position: absolute; top: -12px; font-style: normal; line-height: 1; color: #fff; text-shadow: 0 0 3px rgba(90, 160, 210, .8); opacity: .95; animation: nieve-libro linear infinite; }
.libro-nieve i:nth-child(3n) { color: #cdeeff; }
@keyframes nieve-libro {
  from { transform: translate(0, -12px) rotate(0); }
  50% { transform: translate(6px, 80px) rotate(90deg); }
  to { transform: translate(-3px, 190px) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .libro-nieve { display: none; } }
.libro-cap .cap-portada, .libro-lib-tapa { position: relative; overflow: hidden; border-radius: 10px; text-decoration: none; }
.libro-cap .cap-portada .tapa { display: flex; }
.libro-cap-autora { font-weight: 700; font-size: .9rem; }
.libro-lib-tapa { display: block; }
.libro-lib, .libro-lib:hover { text-decoration: none; }
.libro-cap .cap-portada { align-self: flex-start; height: fit-content; line-height: 0; }
.libro-flota { text-align: left; }
/* En modo día los copos de la portada y la tarjeta van celestes (blancos no se ven) */
:root[data-tema="claro"] .libro-nieve i { color: #8fcff2; text-shadow: 0 0 1px rgba(40, 110, 160, .7); }
:root[data-tema="claro"] .libro-nieve i:nth-child(3n) { color: #b3e0f8; }
/* sobre la portada rosa, en modo día, siguen blancos */
:root[data-tema="claro"] .libro-cap-tapa .libro-nieve i, :root[data-tema="claro"] .libro-lib-tapa .libro-nieve i { color: #fff; text-shadow: 0 0 3px rgba(90, 160, 210, .8); }

/* Pie: el botón del libro solo en la página principal del celu (en la compu está la tarjetita) */
.pie-libro { display: none; margin: 4px 0 14px; }
@media (max-width: 760px) { body[data-vista="inicio"] .pie-libro { display: block; } }
.pie .pie-libro { margin: 10px 0 18px; }

/* ---------- Inicio en el celu: todo en una pantalla, sin scrollear ---------- */
@media (max-width: 760px) {
  body.app-nueva[data-vista="inicio"] { min-height: 100dvh; }
  body.app-nueva[data-vista="inicio"] .top { padding-top: 14px; }
  body.app-nueva[data-vista="inicio"] main { display: flex; flex-direction: column; }
  body.app-nueva[data-vista="inicio"] .vista-inicio { flex: 1; min-height: 0; justify-content: center; padding: 10px 0 4px; }
  body.app-nueva[data-vista="inicio"] .pregunta { margin-bottom: 20px; }
  body.app-nueva[data-vista="inicio"] .pregunta-cursiva { font-size: clamp(1.2rem, 5.4vw, 1.5rem); }
  body.app-nueva[data-vista="inicio"] .pregunta-mayus { font-size: clamp(2.3rem, 12vw, 3.1rem); }
  body.app-nueva[data-vista="inicio"] .dos { gap: 10px; }
  body.app-nueva[data-vista="inicio"] .opcion { padding: 16px 20px; gap: 2px; }
  body.app-nueva[data-vista="inicio"] .opcion-t { font-size: 1.3rem; }
  body.app-nueva[data-vista="inicio"] .opcion-d { font-size: .9rem; }
  body.app-nueva[data-vista="inicio"] .del-dia { margin-top: 14px; font-size: .95rem; }
  body.app-nueva[data-vista="inicio"] .pie { padding: 8px 16px 10px; font-size: .85rem; }
  body.app-nueva[data-vista="inicio"] .pie .pie-libro { margin: 6px 0 8px; }
}
@media (max-width: 760px) and (max-height: 600px) {
  body.app-nueva[data-vista="inicio"] .pregunta { margin-bottom: 12px; }
  body.app-nueva[data-vista="inicio"] .opcion { padding: 12px 16px; }
  body.app-nueva[data-vista="inicio"] .opcion-d { font-size: .82rem; }
  body.app-nueva[data-vista="inicio"] .del-dia { margin-top: 8px; }
  body.app-nueva[data-vista="inicio"] .top { padding-top: 8px; }
  body.app-nueva[data-vista="inicio"] .pie { padding: 4px 12px 6px; }
  body.app-nueva[data-vista="inicio"] .pie .pie-libro { margin: 4px 0 6px; }
}

/* El cartelito de «Instalá la app» va arriba de la barra de abajo del celu */
@media (max-width: 760px) { body.app-nueva .banner-app { bottom: calc(86px + env(safe-area-inset-bottom)); } }

/* ---------- «¿Te gustó?» (reseña después de votar): colores propios y con buen contraste ---------- */
dialog.dialogo-resena {
  --r-fondo: #3b1a20; --r-texto: #fbece4; --r-suave: #e3c3bd; --r-campo: #24100f; --r-borde: rgba(251, 236, 228, .28);
  --r-boton: #ecaab2; --r-boton-texto: #4a1219; --r-titulo: #f4b9c1;
  background: var(--r-fondo); color: var(--r-texto); border: 1px solid var(--r-borde); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
:root[data-tema="claro"] dialog.dialogo-resena {
  --r-fondo: #fffaf7; --r-texto: #3a1c1f; --r-suave: #7a5a56; --r-campo: #ffffff; --r-borde: #e7cfc8;
  --r-boton: #65232b; --r-boton-texto: #fbece4; --r-titulo: #65232b;
}
dialog.dialogo-resena h2 { color: var(--r-titulo); }
dialog.dialogo-resena p { color: var(--r-texto); }
dialog.dialogo-resena p b { color: var(--r-titulo); }
dialog.dialogo-resena textarea {
  background: var(--r-campo); color: var(--r-texto); -webkit-text-fill-color: var(--r-texto);
  border: 1.5px solid var(--r-borde); opacity: 1;
}
dialog.dialogo-resena textarea::placeholder { color: var(--r-suave); -webkit-text-fill-color: var(--r-suave); opacity: 1; }
dialog.dialogo-resena textarea:focus { outline: none; border-color: var(--r-boton); box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-boton) 30%, transparent); }
dialog.dialogo-resena select {
  -webkit-appearance: none; appearance: none; background-color: var(--r-campo); color: var(--r-texto); -webkit-text-fill-color: var(--r-texto);
  border: 1.5px solid var(--r-borde); border-radius: 999px; padding: 9px 36px 9px 14px; font: inherit; font-size: .9rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--r-suave) 50%), linear-gradient(135deg, var(--r-suave) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
dialog.dialogo-resena select option { color: #3a1c1f; background: #fff; }
dialog.dialogo-resena .boton { background: var(--r-boton); color: var(--r-boton-texto); border-color: var(--r-boton); }
dialog.dialogo-resena .resena-no, dialog.dialogo-resena .fc-falta { color: var(--r-suave); }
dialog.dialogo-resena .invitacion-cerrar { color: var(--r-suave); }

/* ---------- Panel de administración (moderno) ---------- */
#admin-contenido {
  --viz-con: #d6607b; --viz-sin: #b88828; --viz-1: #d6607b;
  --adm-carta: var(--tarjeta); --adm-borde: var(--linea);
}
:root[data-tema="claro"] #admin-contenido { --viz-con: #b8435a; --viz-sin: #d39a4a; --viz-1: #b8435a; }
.adm-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 18px; padding: 4px; border-radius: 999px; background: var(--fondo-2); position: sticky; top: 8px; z-index: 5; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs button { flex: 1 0 auto; font: inherit; font-size: .88rem; font-weight: 700; padding: 9px 16px; border: 0; border-radius: 999px; background: none; color: var(--texto-suave); cursor: pointer; }
.adm-tabs button[aria-selected="true"] { background: var(--acento); color: var(--sobre-acento); }
@media (max-width: 520px) { .adm-tabs { gap: 2px; } .adm-tabs button { flex: 1 1 auto; padding: 9px 6px; font-size: .8rem; letter-spacing: -.01em; } }
.adm-rangos { display: inline-flex; gap: 4px; padding: 3px; margin: 14px 0 12px; border: 1px solid var(--adm-borde); border-radius: 999px; }
.adm-rangos button { font: inherit; font-size: .8rem; font-weight: 700; padding: 6px 13px; border: 0; border-radius: 999px; background: none; color: var(--texto-suave); cursor: pointer; }
.adm-rangos button[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }
.adm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; text-align: left; font: inherit; color: var(--texto);
  padding: 14px 16px 12px; border-radius: 16px; background: var(--adm-carta); border: 1.5px solid transparent; cursor: pointer; transition: border-color .15s, transform .15s; }
.adm-kpi:hover { transform: translateY(-1px); border-color: var(--adm-borde); }
.adm-kpi[aria-expanded="true"] { border-color: var(--acento); }
.adm-kpi-nombre { font-size: .8rem; font-weight: 700; color: var(--texto-suave); }
.adm-kpi b { font-size: 2rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.adm-delta { font-size: .72rem; color: var(--texto-suave); }
.adm-delta.sube { color: var(--texto); font-weight: 700; }
.adm-kpi-ver { margin-top: 6px; font-size: .74rem; font-weight: 700; color: var(--acento); }
.esq-kpi { min-height: 116px; background: linear-gradient(90deg, var(--adm-carta), var(--fondo-2), var(--adm-carta)); background-size: 200% 100%; animation: esq-brillo 1.4s linear infinite; }
@keyframes esq-brillo { to { background-position: -200% 0; } }
.adm-detalle { margin-top: 12px; padding: 16px 18px; border-radius: 16px; background: var(--adm-carta); border: 1px solid var(--adm-borde); }
.adm-detalle-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.adm-detalle-cab h3 { margin: 0; font-size: 1rem; }
.adm-lista { list-style: none; margin: 0; padding: 0; }
.adm-item { padding: 10px 0; border-top: 1px solid var(--adm-borde); }
.adm-item:first-child { border-top: 0; }
.adm-item-cab { font-size: .88rem; line-height: 1.45; }
.adm-item-cab a { color: inherit; }
.adm-hora { float: right; margin-left: 10px; font-size: .75rem; color: var(--texto-suave); }
.adm-texto { margin: 4px 0 0; font-family: var(--serif); font-size: .95rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.adm-cita { margin: 4px 0 0; padding-left: 10px; border-left: 2px solid var(--acento); font-family: var(--serif); font-style: italic; font-size: .85rem; color: var(--texto-suave); }
.adm-meta { margin: 3px 0 0; font-size: .78rem; color: var(--texto-suave); }
.adm-sin { color: var(--texto); font-weight: 700; }
.adm-grafico { padding: 18px 18px 14px; margin-bottom: 14px; border-radius: 18px; background: var(--adm-carta); }
.adm-grafico h3 { margin: 0 0 4px; font-size: 1.05rem; }
.adm-titular { margin: 0 0 8px; font-size: .92rem; line-height: 1.5; }
.adm-titular span { display: block; color: var(--texto-suave); font-size: .82rem; }
.adm-leyenda { display: flex; gap: 16px; margin: 0 0 6px; font-size: .8rem; color: var(--texto-suave); }
.adm-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg-con { background: var(--viz-con); }
.lg-sin { background: var(--viz-sin); }
.viz { display: block; width: 100%; height: auto; overflow: visible; }
.viz-grilla { stroke: var(--adm-borde); stroke-width: 1; }
.viz-eje { fill: var(--texto-suave); font-size: 11px; font-family: var(--sans); }
.viz-etiqueta { fill: var(--texto); font-size: 12px; font-weight: 700; font-family: var(--sans); }
.viz-con { fill: var(--viz-con); }
.viz-sin { fill: var(--viz-sin); }
.viz-1 { fill: var(--viz-1); }
.viz-hit { fill: transparent; }
.viz-grupo.activo .viz-hit { fill: var(--adm-borde); }
.viz-mini .viz-eje { font-size: 10px; }
.adm-tabla { margin-top: 8px; font-size: .82rem; }
.adm-tabla summary { cursor: pointer; color: var(--texto-suave); }
.adm-tabla table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.adm-tabla th, .adm-tabla td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--adm-borde); }
.adm-sub { margin: 22px 0 10px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--acento); }
.adm-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .adm-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .adm-minis { grid-template-columns: 1fr; } }
.adm-mini { padding: 14px 14px 10px; border-radius: 16px; background: var(--adm-carta); min-width: 0; }
.adm-mini header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 6px; }
.adm-mini h4 { margin: 0; font-size: .82rem; color: var(--texto-suave); width: 100%; }
.adm-mini b { font-size: 1.5rem; font-weight: 800; }
.viz-tip { position: fixed; z-index: 100; pointer-events: none; max-width: 260px; padding: 7px 10px; border-radius: 10px; background: var(--texto); color: var(--fondo); font-size: .78rem; font-weight: 600; line-height: 1.35; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
/* El panel usa el ancho de la compu */
@media (min-width: 1100px) { body.app-nueva[data-vista="admin"] main { max-width: 1212px; } }
/* Tarjeta «📲 tienen la app»: ocupa toda la fila (es el total, no el período). */
.adm-kpi[data-adm-kpi="app"] { grid-column: 1 / -1; }
.adm-nueva { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--viz-1); color: var(--tarjeta); }
/* Panel: los comentarios se tocan para ir a verlos. */
.adm-ir { cursor: pointer; padding-inline: 8px; margin-inline: -8px; border-radius: 8px; }
@media (hover: hover) { .adm-ir:hover { background: color-mix(in srgb, var(--acento) 7%, transparent); } }
.adm-ver { display: inline-block; margin-top: 4px; font-size: .85rem; font-weight: 700; }
/* Al llegar desde un link a un comentario puntual, queda resaltado un rato. */
.comentario.comentario-destacado { border-radius: 12px; animation: comentario-luz 3.5s ease-out both; }
@keyframes comentario-luz {
  0%, 60% { background: color-mix(in srgb, var(--acento) 18%, transparent); box-shadow: 0 0 0 2px var(--acento); }
  100% { background: color-mix(in srgb, var(--acento) 10%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .comentario.comentario-destacado { animation: none; background: color-mix(in srgb, var(--acento) 10%, transparent); box-shadow: 0 0 0 2px var(--acento); } }
/* Atajo al panel en la barra de arriba: solo admin y solo en la compu (en el celu está en «mi perfil»). */
.admin-atajo { display: none; }
@media (min-width: 761px) {
  .admin-atajo:not([hidden]) { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; padding: 5px 12px; border: 1px solid var(--linea); border-radius: 999px; color: var(--texto); font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .admin-atajo:hover { border-color: var(--acento); }
  body[data-vista="admin"] .admin-atajo { background: var(--acento); border-color: var(--acento); color: var(--fondo); }
}
/* Tendencias: período a elección y comparación. */
.adm-t-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 6px; }
.adm-t-filtros .adm-rangos { margin: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.adm-t-filtros .adm-rangos button { white-space: nowrap; }
.adm-t-fechas { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.adm-t-fechas label, .adm-t-comparar { display: flex; flex-direction: column; gap: 3px; font-size: .75rem; font-weight: 700; color: var(--texto-suave); }
.adm-t-fechas input, .adm-t-comparar select { font: inherit; font-size: .88rem; font-weight: 500; padding: 6px 10px; border: 1px solid var(--adm-borde); border-radius: 10px; background: var(--adm-carta); color: var(--texto); -webkit-text-fill-color: var(--texto); color-scheme: dark; }
:root[data-tema="claro"] .adm-t-fechas input, :root[data-tema="claro"] .adm-t-comparar select { color-scheme: light; }
.adm-t-periodo { margin: 10px 0 12px; font-size: .9rem; color: var(--texto-suave); }
.adm-t-periodo b { color: var(--texto); }
#adm-t-cuerpo[aria-busy="true"] { opacity: .55; transition: opacity .2s; }
.adm-kpi-quieta { cursor: default; }
.adm-kpi-quieta:hover { transform: none; }
.adm-kpi .adm-delta small { font-weight: 500; opacity: .85; }
@media (max-width: 560px) { .adm-kpis-t .adm-kpi:first-child { grid-column: 1 / -1; } }
.lg-1 { background: var(--viz-1); }
.lg-previo { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed var(--texto-suave); }
.adm-leyenda-in { display: inline-flex; margin: 0 0 0 12px; text-transform: none; letter-spacing: 0; font-weight: 600; vertical-align: middle; }
.viz-previo { fill: none; stroke: var(--texto-suave); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .9; pointer-events: none; }
@media (min-width: 1100px) { body.app-nueva[data-vista="admin"] .adm-minis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* El gráfico grande no crece de más en pantallas anchas; y aire entre el resumen y los gráficos. */
.adm-grafico > .viz:not(.viz-mini) { max-height: 300px; }
.adm-kpis-t { margin-bottom: 14px; }
/* «Avisos»: invitación a activar las notificaciones en este celu. */
.avisos-push { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 14px; font-size: .9rem; }
.avisos-push[hidden] { display: none; }
.avisos-push .boton-chico { margin: 0; }
/* «Mi cuenta»: usuario, mail y contraseña. */
.mi-cuenta { margin: 0 0 16px; }
.mc-datos { display: grid; gap: 0; margin: 0 0 8px; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.mc-datos > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 12px 14px; }
.mc-datos > div + div { border-top: 1px solid var(--linea); }
.mc-datos dt { font-size: .8rem; font-weight: 700; color: var(--texto-suave); }
.mc-datos dd { margin: 0; overflow-wrap: anywhere; }
.mc-datos dd .link { margin-left: 6px; font-size: .88rem; }
.mc-ok { color: var(--acento); font-weight: 700; }
.mc-falta { color: var(--texto-suave); font-weight: 700; }
@media (max-width: 420px) { .mc-datos > div { grid-template-columns: 1fr; gap: 2px; } }
.mc-form { margin: 12px 0 4px; padding: 14px; border: 1px solid var(--linea); border-radius: 14px; }
.mc-form[hidden], .mc-opciones[hidden], .mc-codigo-nuevo[hidden] { display: none; }
.mc-olvide { margin: -4px 0 10px; font-size: .88rem; }
.mc-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.mc-opciones p { width: 100%; margin: 0; font-size: .88rem; color: var(--texto-suave); }
.mc-codigo-nuevo { margin: 12px 0; padding: 14px; border: 1px dashed var(--acento); border-radius: 14px; }
/* Modo lectura en la app instalada: nada debajo de la hora y la batería del celu. */
.lector-progreso { box-sizing: content-box; border-top: env(safe-area-inset-top, 0px) solid var(--lec-fondo); }
.lector-marco { padding-top: 14px; }
.lector-top [data-lector-cerrar] { padding: 8px 10px 8px 0; }
/* Celu (app nueva): los avisitos de actividad y los carteles de abajo salen pegados
   a la barra de abajo, como una hoja que asoma, en vez de flotar separados. */
@media (max-width: 760px) {
  body.app-nueva .actividad, body.app-nueva .banner-app {
    left: 0; right: 0; width: auto; bottom: var(--alto-tabs, 0px);
    border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .22);
  }
  body.app-nueva[data-vista="inicio"] .actividad { right: 0; }
  body.app-nueva .actividad { padding: 12px 40px 12px 16px; }
  body.app-nueva .banner-app { padding: 12px 14px; }
  /* Sin barra abajo (por ejemplo, escribiendo): se apoyan en el borde, respetando la rayita del iPhone. */
  body.app-nueva .actividad, body.app-nueva .banner-app { padding-bottom: var(--relleno-abajo, 12px); }
}
@media (max-width: 760px) {
  /* Si la barra de abajo se esconde (bajando o con el teclado), el cartel baja con ella. */
  body.app-nueva .actividad, body.app-nueva .banner-app { transition: opacity .35s ease, transform .35s ease, bottom .25s ease; }
  body.app-nueva.tabs-ocultas .actividad, body.app-nueva.con-teclado .actividad,
  body.app-nueva.tabs-ocultas .banner-app, body.app-nueva.con-teclado .banner-app { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
/* Carteles de abajo («La app», «Activá las notificaciones», «Entrá a tu cuenta»):
   colores propios que se leen bien en oscuro y en claro. */
.banner-app { --b-fondo: #432720; --b-texto: #f8e5d7; --b-suave: rgba(248, 229, 215, .75); --b-borde: rgba(236, 170, 178, .35); --b-boton: #ecaab2; --b-boton-texto: #3a1c1f;
  background: var(--b-fondo); color: var(--b-texto); border-color: var(--b-borde); }
:root[data-tema="claro"] .banner-app { --b-fondo: #fffaf7; --b-texto: #3a1c1f; --b-suave: #6b4a46; --b-borde: rgba(101, 35, 43, .2); --b-boton: #65232b; --b-boton-texto: #fff8f2; }
.banner-app p b { color: var(--b-texto); }
.banner-app p span { color: var(--b-suave); }
.banner-app .boton-chico { background: var(--b-boton); color: var(--b-boton-texto); border-color: var(--b-boton); white-space: nowrap; }
.banner-app-cerrar { color: var(--b-suave); }
/* Con un cartel abierto abajo, el avisito de actividad no se le encima. */
body:has(.banner-app:not([hidden])) .actividad { visibility: hidden; }
/* El «+» de Escribir asoma por encima de la barra: que quede delante del cartel pegado a ella. */
@media (max-width: 760px) { body.app-nueva .actividad, body.app-nueva .banner-app { z-index: 45; } }
/* Renglones: nada adentro de la hoja puede cambiar el alto de las líneas
   (márgenes de párrafos, títulos o tamaños que vengan de otro lado). */
.hoja .editor :is(p, div, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, li, pre, section, article) { margin: 0 !important; padding: 0 !important; }
.hoja .editor * { font-size: inherit !important; line-height: inherit !important; }
/* Racha: el emoji del nivel junto al nombre y la tarjeta del perfil. */
.racha-slot:empty { display: none; }
.racha-chip { display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; padding: 0 2px; border: 0; background: none; font-size: .95em; line-height: 1; cursor: pointer; vertical-align: middle; }
.racha-chip:hover { transform: scale(1.15); }
.perfil-nombre .racha-chip { font-size: .6em; margin-left: 8px; vertical-align: .25em; }
.pf-racha { display: grid; gap: 8px; }
.pf-racha .racha-cab { display: flex; align-items: center; gap: 12px; }
.pf-racha .racha-cab .racha-emoji { font-size: 2.4rem; line-height: 1; flex: none; }
.pf-racha .racha-cab b { display: block; font-size: 1.1rem; }
.pf-racha .racha-cab span { font-size: .9rem; color: var(--acento); font-weight: 700; }
.pf-racha p { margin: 0; font-size: .9rem; }
.pf-racha .racha-prox { color: var(--texto-suave); }
.racha-niveles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.racha-niveles span { display: inline-flex; flex-direction: column; align-items: center; min-width: 44px; padding: 6px 4px; border: 1px solid var(--linea); border-radius: 12px; font-size: 1.2rem; opacity: .45; filter: grayscale(.8); }
.racha-niveles span small { font-size: .68rem; font-weight: 700; color: var(--texto-suave); }
.racha-niveles span.logrado { opacity: 1; filter: none; border-color: var(--acento); }
.pf-racha.sin-racha .racha-emoji { filter: grayscale(1); opacity: .6; }
/* La campanita del feed va abajo, a la derecha de las acciones (no se pisa con la insignia del nombre). */
.relato-acciones .campanita-accion { margin-left: auto; height: 28px; min-width: 28px; padding: 0 7px; }

/* ---------- Insignias animadas ----------
   Cada una se mueve a su manera, suave y con pausas (en el feed hay muchas):
   🪶 se mece · ✍️ escribe · 🌟 titila · 👑 flota y brilla · 💎 destella en colores ·
   medallas y trofeo: un brillo que cruza la insignia, el trofeo salta. */
.racha-ico, .insignia-ico { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  :is(.racha-chip[data-nivel="2"] .racha-ico, .racha-emoji[data-nivel="2"]) { transform-origin: 50% 50%; animation: ins-lupa 3s ease-in-out infinite; }
  :is(.racha-chip[data-nivel="3"] .racha-ico, .racha-emoji[data-nivel="3"]) { transform-origin: 70% 80%; animation: ins-escribe 2.8s ease-in-out infinite; }
  :is(.racha-chip[data-nivel="7"] .racha-ico, .racha-emoji[data-nivel="7"]) { animation: ins-titila 2.4s ease-in-out infinite; }
  :is(.racha-chip[data-nivel="12"] .racha-ico, .racha-emoji[data-nivel="12"]) { animation: ins-corona 3s ease-in-out infinite; }
  :is(.racha-chip[data-nivel="20"] .racha-ico, .racha-emoji[data-nivel="20"]) { animation: ins-diamante 3.6s ease-in-out infinite; }
  :is(.racha-chip[data-nivel="30"] .racha-ico, .racha-emoji[data-nivel="30"]) { animation: ins-leyenda 2.2s ease-in-out infinite; }
  .medalla-ico { transform-origin: 50% 0; animation: ins-medalla 4s ease-in-out infinite; }
  .trofeo-ico { animation: ins-trofeo 3.4s ease-in-out infinite; }
  .insignia-brilla { position: relative; overflow: hidden; isolation: isolate; }
  .insignia-brilla::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-120%); animation: ins-brillo 5s ease-in-out infinite; }
  .insignia-brilla + .insignia-brilla::after { animation-delay: 1.2s; }
}
@keyframes ins-pluma { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(10deg) translateY(-1px); } }
@keyframes ins-escribe { 0%, 55%, 100% { transform: none; } 62% { transform: rotate(-8deg) translateX(-1px); } 69% { transform: rotate(5deg) translateX(1px); } 76% { transform: rotate(-6deg); } 83% { transform: rotate(3deg) translateX(1px); } }
@keyframes ins-titila { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 215, 90, 0)); } 50% { transform: scale(1.18) rotate(8deg); filter: drop-shadow(0 0 5px rgba(255, 215, 90, .95)); } }
@keyframes ins-corona { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 1px rgba(255, 200, 60, .3)); } 50% { transform: translateY(-2px); filter: drop-shadow(0 0 6px rgba(255, 200, 60, .95)); } }
@keyframes ins-diamante { 0%, 100% { filter: drop-shadow(0 0 2px rgba(120, 220, 255, .5)); transform: scale(1); }
  33% { filter: drop-shadow(0 0 7px rgba(120, 220, 255, 1)); transform: scale(1.12) rotate(-6deg); }
  66% { filter: drop-shadow(0 0 7px rgba(255, 140, 220, .95)); transform: scale(1.06) rotate(6deg); } }
@keyframes ins-medalla { 0%, 70%, 100% { transform: rotate(0); } 77% { transform: rotate(14deg); } 84% { transform: rotate(-10deg); } 91% { transform: rotate(5deg); } }
@keyframes ins-trofeo { 0%, 70%, 100% { transform: translateY(0) scale(1); } 78% { transform: translateY(-4px) scale(1.12); } 86% { transform: translateY(0) scale(.96); } 92% { transform: translateY(-1px); } }
@keyframes ins-brillo { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.cap-acciones { display: flex; align-items: center; gap: 10px; }
.cap-acciones .campanita-accion { margin-left: auto; }
/* ---------- Modo lectura como un libro ----------
   Para todos: el texto centrado en la hoja (el lugar de la 💬 de las citas queda a los dos lados)
   y justificado con cortes de palabra en castellano, como en un libro. La poesía sigue centrada. */
.lector-texto { padding-inline: 14px; }
.lec-burbuja { right: -30px; }
.lector-texto:not(.es-verso):not(.alinear-centrado) p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.lector-autor { flex-wrap: wrap; }
.lector-autor-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.lector-autor-link:hover b { text-decoration: underline; text-underline-offset: 3px; }
.lector-pie-pag, .lector-volver-texto { display: none; }

/* Modo «hojas» (a prueba, solo admin): páginas del tamaño de la pantalla. */
/* (Solo con el diálogo abierto: si no, al cerrarlo quedaba dibujado, flotando.) */
.lector.lec-paginado[open]:not(.lec-en-final) { overflow: hidden; display: flex; flex-direction: column; }
.lec-paginado:not(.lec-en-final) .lector-marco { flex: 1; min-height: 0; width: 100%; position: relative; display: flex; flex-direction: column; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.lec-paginado:not(.lec-en-final) .lector-top { margin-bottom: 12px; }
.lec-paginado:not(.lec-en-final) .lector-panel { position: absolute; top: 56px; left: 16px; right: 16px; z-index: 6; background: var(--lec-fondo); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.lec-paginado:not(.lec-en-final) .lector-hoja { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lec-paginado .lector-paginas { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: pan-y; cursor: default; }
.lec-paginado .lector-columnas { height: 100%; column-width: var(--pag-ancho, 100vw); column-gap: var(--pag-gap, 48px); column-fill: auto; }
.lec-paginado .lector-columnas > * { break-inside: avoid-column; }
.lec-paginado .lector-columnas > .lector-texto { break-inside: auto; }
.lec-paginado .lector-texto { padding-inline: 0; }
.lec-paginado .lector-texto p { orphans: 2; widows: 2; }
.lec-paginado .lec-burbuja { position: static; display: inline-block; margin-left: 6px; vertical-align: .1em; }
.lec-paginado .lector-titulo { margin-top: 18px; }
.lec-paginado .lector-pie-pag { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--lec-linea); color: var(--lec-suave); font: 600 .82rem var(--sans); }
.lector-pag-btn { width: 40px; height: 34px; border-radius: 999px; border: 1px solid var(--lec-linea); background: none; color: var(--lec-texto); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.lector-pag-btn:disabled { opacity: .3; cursor: default; }
.lec-paginado .lector-despues { display: none; }
/* Después de la última hoja: estrellas, comentarios y lo que sigue, con scroll normal. */
.lec-paginado.lec-en-final .lector-paginas, .lec-paginado.lec-en-final .lector-pie-pag { display: none; }
.lec-paginado.lec-en-final .lector-despues { display: block; }
.lec-paginado.lec-en-final .lector-volver-texto { display: block; margin: 0 0 14px; }


/* La hoja que se levanta desde la esquina: la copia de la página (frente), el dorso que se
   ve al doblarse y la sombra que cae sobre la página de abajo. */
.lector-curl { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.curl-frente { position: absolute; inset: 0; overflow: hidden; background: var(--lec-fondo); }
.curl-frente > .lector-columnas { height: 100%; }
.curl-sombra { position: absolute; left: 0; top: 0; width: 70px; transform-origin: 0 50%; background: linear-gradient(to right, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0)); }
.curl-dorso-caja { position: absolute; inset: 0; filter: drop-shadow(-6px 4px 10px rgba(0, 0, 0, .35)); }
.curl-dorso { position: absolute; inset: 0;
  background: linear-gradient(var(--curl-ang, 270deg), rgba(0, 0, 0, .22), rgba(255, 255, 255, .14) 35%, rgba(0, 0, 0, .06)) , color-mix(in srgb, var(--lec-texto) 10%, var(--lec-fondo)); }

/* Modo lectura: cuadros para escribir, citas y estrellas con los colores de cada fondo. */
.lector .form-comentario textarea, .lector .lec-form textarea {
  background: color-mix(in srgb, var(--lec-texto) 7%, var(--lec-fondo)); color: var(--lec-texto); -webkit-text-fill-color: var(--lec-texto);
  border: 1px solid color-mix(in srgb, var(--lec-texto) 28%, transparent); }
.lector .form-comentario textarea:focus, .lector .lec-form textarea:focus { outline: 2px solid var(--lec-acento); outline-offset: 1px; }
.lector textarea::placeholder { color: var(--lec-suave); opacity: 1; -webkit-text-fill-color: var(--lec-suave); }
.lector .lec-hilo { background: color-mix(in srgb, var(--lec-texto) 7%, var(--lec-fondo)); color: var(--lec-texto); border: 1px solid var(--lec-linea); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.lector .lec-hilo-c + .lec-hilo-c { border-top-color: var(--lec-linea); }
.lector .estrellas { --e-vacia: color-mix(in srgb, var(--lec-texto) 32%, transparent); --e-llena: var(--lec-acento); }
.lector .comentario-fecha, .lector .lec-hilo-de span { color: var(--lec-suave); opacity: 1; }

/* Campanita: al suscribirte suena (se hamaca), así se nota que tocó. */
.campanita-sub.suena { animation: campanita-suena .9s ease-in-out; transform-origin: 50% 10%; }
@keyframes campanita-suena { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .campanita-sub.suena { animation: none; } }

/* ---------- Contraste: textos que no se leían bien (revisión en claro y oscuro) ---------- */
/* «ver qué salió en la ruleta» en modo claro: la lista usaba el color crema del modo oscuro. */
:root[data-tema="claro"] .de-ruleta .relato-origen ul { color: #4a2a26; border-left-color: #65232b; }
/* Barra de abajo del celu: los nombres de las pestañas sin transparencia. */
.tabs .tab { opacity: 1; }
/* «¿Una idea para la app?» y otros pies suaves. */
.pie-sugerir { opacity: 1; }
.sugerir-link .link { color: var(--texto-suave); }
/* Top 5: «semanal» junto al promedio. */
.puesto-estrellas small { color: inherit; opacity: .9; }
/* El menú «⋯» tiene su propio fondo: sus opciones usan el texto normal (en las frases quedaban casi invisibles). */
.mas-menu .link, .relato-frase .mas-menu .borrar-relato { color: var(--texto); }
/* Racha: los niveles que faltan se ven apagados pero legibles. */
.racha-niveles span { opacity: .75; }
.racha-niveles span small { color: var(--texto); }
/* Modo lectura: el botón «Comentar» con los colores del fondo elegido (en modo claro quedaba rosa sobre rosa). */
.lector .lector-interaccion .boton, .lector .lec-form .boton { background: var(--lec-acento); border-color: var(--lec-acento); color: var(--lec-fondo); }
.lector.lec-fondo-sepia .lector-interaccion .boton, .lector.lec-fondo-papel .lector-interaccion .boton,
.lector.lec-fondo-sepia .lec-form .boton, .lector.lec-fondo-papel .lec-form .boton { background: #8e4552; border-color: #8e4552; color: #fffaf6; }
.lector .lector-interaccion select { color: var(--lec-texto); background: color-mix(in srgb, var(--lec-texto) 7%, var(--lec-fondo)); border-color: color-mix(in srgb, var(--lec-texto) 28%, transparent); }
/* Subrayar con el dedo: en el celu el texto del modo lectura no usa la selección del sistema
   (que trae «copiar / buscar en Google»); se subraya manteniendo apretado y arrastrando. */
@media (pointer: coarse) {
  .lector .lector-texto { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
.lector :is(.lw, .le).sub { background: color-mix(in srgb, var(--lec-acento) 45%, transparent); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--lec-acento) 45%, transparent); }
/* Celu: los cuadros para escribir con letra de 16 px. Con menos, el iPhone agranda la pantalla
   al tocarlos y no la vuelve a achicar (el «zoom que no se podía sacar»). */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: max(16px, 1em) !important; }
}

/* ---------- Lo que subrayó la comunidad ----------
   La frase con un resaltado muy suave (y una línea punteada), y al final un puntito con
   cuántas personas subrayaron ese párrafo. Se toca la frase o el puntito y se abren los comentarios. */
.lector .citada { background: color-mix(in srgb, var(--lec-acento) 16%, transparent); cursor: pointer; }
.lector .lw.citada { border-bottom: 1px dotted color-mix(in srgb, var(--lec-acento) 70%, transparent); }
.lector .citada:hover { background: color-mix(in srgb, var(--lec-acento) 26%, transparent); }
.lector .lec-burbuja { position: static; right: auto; top: auto; display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: 18px; margin-left: 5px; padding: 0 7px 0 6px;
  border: 0; border-radius: 9px; background: color-mix(in srgb, var(--lec-acento) 18%, transparent); color: var(--lec-texto);
  font: 700 11px/18px var(--sans); vertical-align: .18em; text-indent: 0; cursor: pointer; }
.lector .lec-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--lec-acento); flex: none; }
.lector .lec-burbuja.activa, .lector .lec-burbuja:hover { background: var(--lec-acento); color: var(--lec-fondo); }
.lector .lec-burbuja.activa .lec-punto, .lector .lec-burbuja:hover .lec-punto { background: var(--lec-fondo); }
.lector .lec-burbuja.recien { animation: burbuja-nueva .5s ease-out; background: var(--lec-acento); color: var(--lec-fondo); }
.lector:focus { outline: none; }
/* Modo hojas: la hoja ocupa hasta el borde de la pantalla (se agarra desde ahí) y el navegador
   no se queda con los gestos horizontales. */
.lec-paginado .lector-paginas { margin-inline: -20px; padding-inline: 20px; touch-action: none; }
.lec-paginado .lector-curl { left: 20px; right: 20px; }
/* La barra de arriba del modo lectura (volver · minutos · Aa) queda siempre a mano: fija arriba
   al bajar leyendo (en «Deslizar» y en el final de las hojas). El panel «Aa» abre justo debajo. */
.lector .lector-top { position: sticky; top: calc(4px + env(safe-area-inset-top, 0px)); z-index: 5; margin: 0 -20px 18px; padding: 10px 20px; background: var(--lec-fondo); box-shadow: 0 1px 0 var(--lec-linea); }
.lector:not(.lec-paginado) .lector-panel, .lector.lec-en-final .lector-panel { position: sticky; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 5; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); background: var(--lec-fondo); }
.lec-paginado[open]:not(.lec-en-final) .lector-top { box-shadow: none; }
/* El feed nunca se estira más que la pantalla: si la fila de botones de una tarjeta trae uno de
   más (por ejemplo, el «⋯» de la admin), se achica el espacio entre botones en vez de ensanchar todo. */
.app-nueva #biblioteca-lista { grid-template-columns: minmax(0, 1fr); }
.app-nueva #biblioteca-lista > * { min-width: 0; }
.relato-feed .relato-acciones, .app-nueva .relato-frase .relato-acciones { min-width: 0; gap: clamp(8px, 3.6vw, 18px); }
@media (max-width: 400px) { .relato-feed .ver-comentarios .txt-com, .relato-frase .ver-comentarios .txt-com { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* Racha, nueva escala: 🔍 la lupa explora (va de un lado al otro) y la leyenda (30+) brilla fuerte. */
@keyframes ins-lupa { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, -1px) rotate(-10deg); } 50% { transform: translate(2px, 0) rotate(6deg); } 75% { transform: translate(-1px, 1px) rotate(-4deg); } }
@keyframes ins-leyenda { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(150, 225, 255, .9)) drop-shadow(0 0 6px rgba(255, 200, 240, .6)); }
  50% { transform: scale(1.18) rotate(-6deg); filter: drop-shadow(0 0 8px rgba(150, 225, 255, 1)) drop-shadow(0 0 14px rgba(255, 170, 230, .95)); } }
/* En el perfil los emojis brillan todo el tiempo: un halo de luz detrás, para que se vea y motive. */
.pf-racha .racha-cab .racha-emoji, .perfil-nombre .racha-chip { position: relative; isolation: isolate; }
.pf-racha .racha-cab .racha-emoji[data-nivel]:not([data-nivel="0"])::before, .perfil-nombre .racha-chip::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento) 55%, transparent) 0%, transparent 68%); animation: ins-halo 2.4s ease-in-out infinite; }
.pf-racha .racha-cab .racha-emoji[data-nivel="30"]::before, .perfil-nombre .racha-chip[data-nivel="30"]::before { background: radial-gradient(circle, rgba(150, 225, 255, .75) 0%, rgba(255, 170, 230, .35) 45%, transparent 70%); }
@keyframes ins-halo { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
/* Escalera de niveles del perfil: los logrados brillan. */
.racha-niveles span.logrado { box-shadow: 0 0 0 1px var(--acento), 0 0 14px color-mix(in srgb, var(--acento) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .pf-racha .racha-cab .racha-emoji::before, .perfil-nombre .racha-chip::before { animation: none; } }

/* 🐉 Leyenda (30+): el dragón vuela (sube, baja y se inclina) con un resplandor dorado y fuego. */
@keyframes ins-dragon { 0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); filter: drop-shadow(0 0 3px rgba(255, 200, 80, .85)) drop-shadow(0 0 7px rgba(255, 120, 60, .55)); }
  30% { transform: translateY(-3px) rotate(5deg) scale(1.12); filter: drop-shadow(0 0 7px rgba(255, 210, 90, 1)) drop-shadow(0 0 14px rgba(255, 110, 50, .9)); }
  60% { transform: translateY(-1px) rotate(-2deg) scale(1.06); filter: drop-shadow(0 0 5px rgba(255, 200, 80, .95)) drop-shadow(0 0 10px rgba(255, 120, 60, .7)); } }
@media (prefers-reduced-motion: no-preference) {
  :is(.racha-chip[data-nivel="30"] .racha-ico, .racha-emoji[data-nivel="30"]) { animation: ins-dragon 2.6s ease-in-out infinite; }
}
.pf-racha .racha-cab .racha-emoji[data-nivel="30"]::before, .perfil-nombre .racha-chip[data-nivel="30"]::before { background: radial-gradient(circle, rgba(255, 205, 90, .8) 0%, rgba(255, 110, 60, .35) 45%, transparent 70%); }
/* 🐉 El dragón tira fuego por la boca: cada tanto sale una llamarada que crece y se desvanece
   (la cabeza del emoji mira a la izquierda, arriba). */
:is(.racha-chip[data-nivel="30"] .racha-ico, .racha-emoji[data-nivel="30"]) { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  :is(.racha-chip[data-nivel="30"] .racha-ico, .racha-emoji[data-nivel="30"])::after {
    content: "🔥"; position: absolute; left: -.5em; top: -.12em; font-size: .62em; line-height: 1; pointer-events: none;
    transform-origin: 50% 50%; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 140, 40, .9));
    animation: ins-fuego 2.6s ease-out infinite; }
}
@keyframes ins-fuego {
  0%, 38% { opacity: 0; transform: translateX(0) rotate(-90deg) scale(.2); }
  46% { opacity: 1; transform: translateX(-.15em) rotate(-90deg) scale(.8); }
  60% { opacity: 1; transform: translateX(-.45em) rotate(-90deg) scale(1.25); }
  74% { opacity: .75; transform: translateX(-.8em) rotate(-90deg) scale(1.45); }
  86%, 100% { opacity: 0; transform: translateX(-1.1em) rotate(-90deg) scale(1.6); }
}
.pf-racha .racha-cab .racha-emoji[data-nivel="30"] { margin-left: 22px; }
/* Escalera: los niveles bloqueados se asoman un instante (color + brillo) y vuelven a gris; el próximo late. */
.racha-niveles span.bloqueado { position: relative; }
.racha-niveles span.bloqueado::after { content: "🔒"; position: absolute; top: -7px; right: -5px; font-size: .62rem; line-height: 1; filter: grayscale(1); }
.racha-niveles span.proximo { opacity: .9; border-style: dashed; border-color: var(--acento); }
@media (prefers-reduced-motion: no-preference) {
  .racha-niveles span.bloqueado { animation: ins-asoma 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.1s); }
  .racha-niveles span.proximo { animation: ins-asoma 7s ease-in-out infinite, ins-late 1.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.1s), 0s; }
  .racha-niveles span.bloqueado::after { animation: ins-candado 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.1s); }
}
@keyframes ins-asoma {
  0%, 80%, 100% { filter: grayscale(.8); opacity: .75; transform: none; }
  86% { filter: none; opacity: 1; transform: translateY(-3px) scale(1.12); box-shadow: 0 0 14px color-mix(in srgb, var(--acento) 55%, transparent); }
  92% { filter: none; opacity: 1; transform: scale(1.05); }
}
@keyframes ins-late {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 0%, transparent); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent); }
}
@keyframes ins-candado { 0%, 82%, 96%, 100% { transform: none; } 85% { transform: rotate(-18deg); } 88% { transform: rotate(14deg); } 91% { transform: rotate(-8deg); } }

/* Panel: la última copia de seguridad, siempre a mano abajo de todo. */
.adm-ultima-copia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 24px 0 0; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 14px; background: color-mix(in srgb, var(--acento) 6%, transparent); font-size: .92rem; }
.adm-ultima-copia[hidden] { display: none; }

/* Las barras que quedan fijas arriba al bajar respetan la hora y la batería del celu
   (en la app instalada): se corren debajo y tapan esa franja con el fondo. */
feed-pastillas, ep-cab { top: env(safe-area-inset-top, 0px); box-shadow: 0 calc(-1 * env(safe-area-inset-top, 0px)) 0 0 var(--fondo); }
adm-tabs { top: calc(8px + env(safe-area-inset-top, 0px)); }
/* Portadas de poesía y microrrelatos: en modo claro se perdían contra el fondo. */
html[data-tema="claro"] tapa-poesia { background: linear-gradient(160deg, #d9939d, #a8505f 60%, #6e2a36); color: #fff6ef; }
html[data-tema="claro"] tapa-poesia::before { border-color: rgba(255, 246, 239, .4); }
/* En Explorar, los cuadritos de Poesía y Microrrelatos tenían letras claras sobre fondo claro. */
genero-tile.tapa-poesia { color: #65232b; }
html[data-tema="claro"] genero-tile.tapa-poesia { color: #fff6ef; }

.gen-marca .ico { width: 34px; height: 34px; stroke-width: 1.6; color: var(--acento); }
#gen-otros .ico { width: 18px; height: 18px; stroke-width: 2.2; margin-right: 4px; vertical-align: -3px; }

/* Generador de nombres */
.gen-nombres { max-width: 440px; }
.gen-campo { display: grid; gap: 4px; margin: 6px 0 10px; text-align: left; font-size: .85rem; font-weight: 700; }
.gen-campo select { font-size: 16px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--linea); background: var(--tarjeta); color: var(--texto); }
.gen-tipos { display: flex; gap: 6px; justify-content: center; margin: 0 0 12px; flex-wrap: wrap; }
.gen-apellido[hidden] { display: none; }
.gen-apellido button { font-size: .8rem; padding: 4px 10px; }
.gen-tipos button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: inherit; font: inherit; font-size: .88rem; cursor: pointer; }
.gen-tipos button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--fondo); font-weight: 700; }
.gen-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.gen-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.gen-nombre { text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea); background: color-mix(in srgb, var(--acento) 6%, transparent); color: inherit; font-family: var(--serif); font-style: italic; font-size: 1.05rem; cursor: pointer; }
.gen-nombre small { font-style: normal; font-family: inherit; margin-right: 8px; opacity: .6; font-size: .8rem; }
.gen-guardar { width: 42px; border-radius: 12px; border: 1px solid var(--linea); background: transparent; color: var(--acento); font-size: 1.1rem; cursor: pointer; }

/* «¿Te gusta Entre Líneas?»: chiquito, abajo, en verde agua (distinto al bordó de siempre). */
.opinion { position: fixed; left: 50%; bottom: calc(var(--alto-tabs, 0px) + 12px + env(safe-area-inset-bottom, 0px) * 0); z-index: 60; width: min(380px, calc(100vw - 24px)); padding: 14px 16px 14px; border-radius: 20px; background: linear-gradient(150deg, #2f6b64, #1f4a46); color: #f1f7f2; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); transform: translate(-50%, 20px); opacity: 0; transition: transform .25s, opacity .25s; text-align: center; }
.opinion.visible { transform: translate(-50%, 0); opacity: 1; }
.opinion-cerrar { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: inherit; opacity: .7; font-size: 1.3rem; cursor: pointer; }
.opinion-titulo { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; }
.opinion-estrellas { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.opinion-estrellas button { border: 0; background: none; font-size: 1.7rem; line-height: 1; color: rgba(241, 247, 242, .35); cursor: pointer; padding: 2px; transition: transform .15s, color .15s; }
.opinion-estrellas button[aria-checked="true"] { color: #f6c453; transform: scale(1.08); }
.opinion textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(241, 247, 242, .25); background: rgba(255, 255, 255, .1); color: inherit; resize: none; }
.opinion textarea::placeholder { color: rgba(241, 247, 242, .65); }
.opinion-enviar { margin-top: 8px; padding: 8px 22px; border: 0; border-radius: 999px; background: #f1f7f2; color: #1f4a46; font: inherit; font-weight: 700; cursor: pointer; }
.opinion-enviar:disabled { opacity: .45; cursor: default; }
.sug-estrellas { color: #d9a334; letter-spacing: 1px; margin-left: 4px; }
/* «Generador de nombres» en Escritura creativa: igual a las otras opciones (es un botón). */
button.opcion { font: inherit; color: inherit; background: var(--fondo-2, transparent); cursor: pointer; width: 100%; }
.dos button.opcion[data-abrir-nombres] { grid-column: 1 / -1; }

/* 🎲 Ideas de título en la hoja */
.titulo-fila { display: flex; align-items: center; gap: 8px; }
.titulo-fila .titulo-escrito { flex: 1; min-width: 0; }
.titulo-dado { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linea); border-radius: 12px; background: none; color: var(--acento); cursor: pointer; }
.titulo-dado:hover { border-color: var(--acento); }
.titulo-ideas { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 14px; background: color-mix(in srgb, var(--acento) 5%, transparent); }
.titulo-ideas[hidden] { display: none; }
.titulo-ideas .nota { margin: 0; }
.titulo-ideas-tit { margin: 0 0 8px; font-size: .8rem; color: var(--texto-suave); }
.titulo-ideas-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.titulo-ideas-lista button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); background: var(--tarjeta); color: var(--texto); font-family: var(--serif); font-style: italic; font-size: .95rem; cursor: pointer; }
.titulo-ideas-lista button:hover { border-color: var(--acento); }

/* ---- Escritura guiada (tipo chat, sin IA) ---- */
.f-modo-nota { margin: 10px 0 0; font-size: .85rem; }
.guiada { display: flex; flex-direction: column; gap: 14px; }
.gu-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gu-cabeza .etiqueta { margin: 0; }
.gu-pasos { display: inline-flex; gap: 5px; }
.gu-pasos i { width: 18px; height: 5px; border-radius: 3px; background: var(--linea); }
.gu-pasos i.hecho { background: var(--acento); }
.gu-pasos i.ahora { background: color-mix(in srgb, var(--acento) 45%, transparent); }
.gu-chat { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.gu-msg { margin: 0; max-width: 86%; padding: 10px 14px; border-radius: 16px; line-height: 1.45; font-size: .95rem; overflow-wrap: anywhere; }
.gu-bot { align-self: flex-start; background: var(--tarjeta); color: var(--texto); border-bottom-left-radius: 4px; }
.gu-yo { align-self: flex-end; background: var(--acento); color: var(--sobre-acento); border-bottom-right-radius: 4px; font-family: var(--serif); }
.gu-opciones { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.gu-opcion { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linea); background: none; color: var(--texto); font: inherit; font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.4; cursor: pointer; }
.gu-opcion:hover { border-color: var(--acento); }
.gu-opciones .link { align-self: flex-start; }
.gu-caja { display: flex; flex-direction: column; gap: 8px; }
.gu-caja .boton { align-self: flex-end; }
.gu-escribir { width: 100%; box-sizing: border-box; font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; }
.gu-texto { border: 1px solid var(--linea); border-radius: 14px; padding: 10px 14px; }
.gu-texto summary { cursor: pointer; font-size: .88rem; color: var(--texto-suave); }
.gu-texto-cuerpo { margin-top: 10px; font-family: var(--serif); line-height: 1.7; white-space: normal; }
.gu-texto-cuerpo p { margin: 0 0 .7em; }

/* ---- Sorpresa a los 7 días de racha: papelitos y regalo que salta ---- */
.sorpresa-vip { overflow: hidden; }
.sorpresa-confeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sorpresa-confeti i { position: absolute; top: -14px; width: 8px; height: 13px; border-radius: 2px; background: var(--c); opacity: 0;
  animation: confeti-cae 2.6s cubic-bezier(.25, .6, .4, 1) forwards; }
@keyframes confeti-cae {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(520px) rotate(calc(var(--g) * 12)); opacity: 0; }
}
.sorpresa-regalo { display: inline-block; animation: regalo-salta 1s ease .2s 2 both; }
@keyframes regalo-salta {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-14px) scale(1.15) rotate(-6deg); }
  60% { transform: translateY(0) scale(.96) rotate(4deg); }
}
.sorpresa-nivel { display: inline-block; margin: 0 0 6px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: color-mix(in srgb, var(--acento) 18%, transparent); }
.sorpresa-vip .link { display: block; margin-top: 12px; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .sorpresa-confeti { display: none; } .sorpresa-regalo { animation: none; } }

/* Escalera de racha: el nivel de la sorpresa lleva un regalo que flota y brilla (en vez del candado). */
.racha-niveles span.con-regalo { filter: none; opacity: 1; animation: none; }
.racha-niveles span.con-regalo::after { content: none; }
.racha-niveles span.con-regalo .niv-e { font-style: normal; filter: grayscale(.8); opacity: .55; }
.racha-niveles span.con-regalo .regalo-flota { position: absolute; top: -12px; right: -8px; font-size: .95rem; }
.regalo-flota { display: inline-block; line-height: 1; filter: drop-shadow(0 0 5px rgba(243, 201, 105, .85)); }
.regalo-flota.en-linea { position: static; }
@media (prefers-reduced-motion: no-preference) {
  .regalo-flota { animation: regalo-flota 2.2s ease-in-out infinite; }
  .racha-niveles span.con-regalo.proximo { animation: ins-late 1.8s ease-in-out infinite; }
}
@keyframes regalo-flota {
  0%, 100% { transform: translateY(0) rotate(-6deg); filter: drop-shadow(0 0 3px rgba(243, 201, 105, .6)); }
  50% { transform: translateY(-5px) rotate(6deg) scale(1.1); filter: drop-shadow(0 0 9px rgba(243, 201, 105, 1)); }
}

/* ---- Burbujita «💬 mensajes nuevos» de los grupos de escritura ---- */
.burbuja-chat { position: fixed; right: 24px; bottom: 100px; z-index: 60; display: flex; align-items: center; gap: 10px; max-width: min(340px, calc(100vw - 24px));
  padding: 10px 34px 10px 12px; border-radius: 22px; background: var(--acento); color: var(--sobre-acento); cursor: pointer;
  box-shadow: 0 10px 28px rgba(42, 18, 21, .28); animation: burbuja-entra .35s ease both; }
.burbuja-chat[hidden] { display: none; }
.bc-ico { position: relative; flex: none; font-size: 1.5rem; line-height: 1; }
.bc-n { position: absolute; top: -8px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff;
  font-size: .68rem; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--acento); }
.bc-txt { display: flex; flex-direction: column; min-width: 0; }
.bc-txt b { font-size: .88rem; line-height: 1.25; }
.bc-txt small { font-size: .76rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-cerrar { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: inherit; font-size: 1.1rem; line-height: 1; opacity: .7; cursor: pointer; padding: 4px; }
:root[data-tema="claro"] .burbuja-chat { color: #f8e5d7; }
/* En el celu va arriba, como una notificación (abajo la tapaban la barra y los cartelitos). */
@media (max-width: 760px) {
  .burbuja-chat { left: 12px; right: 12px; bottom: auto; top: calc(10px + env(safe-area-inset-top)); max-width: none; animation-name: burbuja-baja; }
}
@keyframes burbuja-baja { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .bc-ico { animation: burbuja-salta 2.4s ease-in-out infinite; } }
@keyframes burbuja-entra { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes burbuja-salta { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-4px) rotate(-8deg); } 90% { transform: translateY(0) rotate(6deg); } }

/* ---- El destacado de la hora: fijo arriba de todo en Comunidad ---- */
.destacado-hora { margin: 0 0 18px; padding: 4px; border-radius: 24px; background: linear-gradient(135deg, #e9a9b2, #f3c969 55%, #e9a9b2); }
.destacado-hora.destacado-top5 { background: linear-gradient(135deg, #f3c969, #e8b04a 55%, #f3c969); }
.destacado-hora.destacado-racha { background: linear-gradient(135deg, #f0a35e, #e9a9b2 55%, #f0a35e); }
.destacado-cinta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0; padding: 8px 14px 9px; color: #3a1f1c; font-size: .9rem; line-height: 1.35; }
.destacado-cinta small { font-size: .74rem; opacity: .75; white-space: nowrap; }
.destacado-hora > .relato { margin: 0; }

/* ---- «¡Publicado!»: la racha y el pedido de notificaciones ---- */
.publicado-racha { display: inline-block; margin: 2px auto 10px; padding: 5px 14px; border-radius: 999px; font-size: .9rem;
  background: color-mix(in srgb, var(--acento) 16%, transparent); }
.publicado-notis { margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--linea); background: color-mix(in srgb, var(--acento) 7%, transparent); }
.publicado-notis p { margin: 0 0 8px; }
.publicado-notis-bot { display: flex; align-items: center; justify-content: center; gap: 16px; }

/* ---- Lectores y escritores: elegir cómo disfrutar Entre Líneas ---- */
.uso-elegir { border: 0; padding: 0; margin: 0 0 16px; }
.uso-elegir legend { padding: 0; margin-bottom: 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--detalle); font-weight: 700; }
/* El desafío de lectura se lee entero (no se corta con «…»). */
.desafio-lectura .bd-texto b { white-space: normal; font-size: 1.02rem; line-height: 1.3; }
.uso-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.uso-opciones label, .uso-opciones button { position: relative; display: block; cursor: pointer; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: center; }
.uso-opciones input { position: absolute; opacity: 0; pointer-events: none; }
.uso-opciones span { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; box-sizing: border-box; padding: 12px 6px; border: 1.5px solid var(--linea); border-radius: 16px; font-size: 1.3rem; line-height: 1.2; }
.uso-opciones b { font-size: .92rem; }
.uso-opciones small { font-size: .72rem; color: var(--texto-suave); }
.uso-opciones input:checked + span, .uso-opciones button[aria-pressed="true"] span { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); }
.uso-opciones input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.uso-botones button span:hover { border-color: var(--acento); }
.uso-cuenta span { padding: 10px 6px; }
#pedir-uso .uso-opciones { margin-top: 14px; }
.pf-lectora { font-weight: 600; }

/* ---- Descargar la app: la flechita de arriba y el globito que sale de ella ---- */
.app-pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 34px; padding: 0 12px 0 9px; border: 1.5px solid var(--acento); border-radius: 999px;
  background: none; color: var(--acento); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.app-pill[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .app-pill svg { animation: app-flecha 2.2s ease-in-out infinite; } }
@keyframes app-flecha { 0%, 60%, 100% { transform: none; } 75% { transform: translateY(3px); } 90% { transform: translateY(-1px); } }
/* En el celu angosto: solo el circulito con la flecha. */
@media (max-width: 520px) {
  .app-pill { width: 34px; padding: 0; }
  .app-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.globo-app { position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 12px 34px 12px 14px; border-radius: 16px;
  background: var(--acento); color: var(--sobre-acento); box-shadow: 0 12px 30px rgba(42, 18, 21, .3); cursor: pointer; animation: globo-app-entra .35s ease both; }
.globo-app[hidden] { display: none; }
.globo-app::before { content: ""; position: absolute; top: -7px; left: calc(var(--cola, 50%) - 8px); width: 16px; height: 16px; background: inherit; border-radius: 3px; transform: rotate(45deg); }
.globo-app b { position: relative; font-size: .95rem; line-height: 1.25; }
.globo-app small { position: relative; font-size: .78rem; opacity: .85; }
.globo-app-cerrar { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: inherit; font-size: 1.15rem; line-height: 1; opacity: .75; cursor: pointer; padding: 4px; }
:root[data-tema="claro"] .globo-app { color: #f8e5d7; }
@keyframes globo-app-entra { from { opacity: 0; transform: translateY(-8px) scale(.95); } to { opacity: 1; transform: none; } }

/* Debates nuevos sin respuestas: arriba de todo durante 24 h, con su etiqueta. */
.debate-nuevo { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acento) 55%, transparent); }
.debate-nuevo-tag { margin: 0 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--acento); }

/* Modo claro: los comentarios de un relato de la ruleta (tarjeta rosa) se perdían, beige
   sobre rosa. Van sobre papel blanco, y el cuadro para escribir siempre con borde. */
:root[data-tema="claro"] .de-ruleta .comentarios { background: #fff8f2; color: var(--texto); }
:root[data-tema="claro"] .form-comentario textarea, :root[data-tema="claro"] .form-comentario select { background: #fffdfb; border: 1px solid rgba(101, 35, 43, .22); color: #3b2420; }
/* (En las tarjetas oscuras —la frase del día— el texto heredaba el color claro y no se leía lo que escribías.) */
:root[data-tema="claro"] .form-comentario textarea::placeholder { color: rgba(59, 36, 32, .5); }
:root[data-tema="claro"] .form-comentario textarea:focus { border-color: var(--acento); }

/* ---- Admins de las dinámicas: todas en dorado (el nombre con un brillo que le pasa por arriba) ---- */
[data-estilo] { --oro-1: #e2ad4a; --oro-2: #fff0c2; --brillo: rgba(243, 201, 105, .6); }
:root[data-tema="claro"] [data-estilo] { --oro-1: #9a6a12; --oro-2: #e8c063; --brillo: rgba(214, 160, 40, .55); }
/* En el perfil, la insignia de admin no lleva el halo redondo de la racha común. */
.perfil-nombre .insignia-editora::before { display: none !important; }
.firma:has(+ .racha-slot .insignia-editora) .firma-texto .nombre, .comentario-autor:has(+ .racha-slot .insignia-editora) .nombre { --oro-1: #e2ad4a; --oro-2: #fff0c2; }
:root[data-tema="claro"] .firma:has(+ .racha-slot .insignia-editora) .firma-texto .nombre, :root[data-tema="claro"] .comentario-autor:has(+ .racha-slot .insignia-editora) .nombre { --oro-1: #9a6a12; --oro-2: #e8c063; }
/* El top 5: lo mismo pero en plata brillante (y la medalla con brillo blanco). */
[data-estilo="top"] { --brillo: rgba(235, 240, 248, .75); }
:root[data-tema="claro"] [data-estilo="top"] { --brillo: rgba(150, 162, 178, .6); }
.firma:has(+ .racha-slot .insignia-podio) .firma-texto .nombre, .comentario-autor:has(+ .racha-slot .insignia-podio) .nombre { --oro-1: #c9d1dc; --oro-2: #ffffff; }
:root[data-tema="claro"] .firma:has(+ .racha-slot .insignia-podio) .firma-texto .nombre, :root[data-tema="claro"] .comentario-autor:has(+ .racha-slot .insignia-podio) .nombre { --oro-1: #66717f; --oro-2: #c3ccd7; }
.insignia-podio .ins-chispa { color: #fff; text-shadow: 0 0 3px #9aa6b4, 0 0 1px #9aa6b4; }
@media (prefers-reduced-motion: no-preference) { .insignia-editora.insignia-podio .ins-chispa { animation: ins-titila 2.1s ease-in-out infinite; } }
.nombre-editora,
.firma:has(+ .racha-slot .insignia-editora) .firma-texto .nombre,
.comentario-autor:has(+ .racha-slot .insignia-editora) .nombre {
  background: linear-gradient(100deg, var(--oro-1) 0%, var(--oro-1) 38%, var(--oro-2) 50%, var(--oro-1) 62%, var(--oro-1) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .nombre-editora,
  .firma:has(+ .racha-slot .insignia-editora) .firma-texto .nombre,
  .comentario-autor:has(+ .racha-slot .insignia-editora) .nombre { animation: oro-pasa 3.6s ease-in-out infinite; }
}
@keyframes oro-pasa { 0%, 35% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
/* La insignia: el emoji solo (sin círculo), con un brillo dorado que respira y su efecto:
   del libro y la varita salen estrellitas, el escudo tira destellos y la escuadra late. */
.insignia-editora { position: relative; overflow: visible; padding: 0 3px; }
.insignia-editora .ins-emoji { display: inline-block; filter: drop-shadow(0 0 2px var(--brillo)) drop-shadow(0 0 4px var(--brillo)); }
.ins-chispa { position: absolute; display: none; font-style: normal; font-size: .5em; line-height: 1; color: var(--oro-2); text-shadow: 0 0 3px var(--oro-1), 0 0 1px var(--oro-1); pointer-events: none; opacity: 0; }
.ins-chispa::before { content: "✦"; }
.ins-chispa:nth-of-type(1) { top: -3px; right: -2px; --dx: 4px; }
.ins-chispa:nth-of-type(2) { top: 20%; left: -3px; --dx: -4px; font-size: .38em; }
.ins-chispa:nth-of-type(3) { top: -6px; left: 42%; --dx: 1px; font-size: .42em; }
@media (prefers-reduced-motion: no-preference) {
  .ins-chispa { display: block; }
  .insignia-editora .ins-emoji { animation: ins-brilla 2.6s ease-in-out infinite; }
  .insignia-editora[data-estilo="libro"] .ins-chispa, .insignia-editora[data-estilo="magia"] .ins-chispa { animation: ins-sube 2.4s ease-out infinite; }
  .insignia-editora .ins-chispa:nth-of-type(2) { animation-delay: .8s; }
  .insignia-editora .ins-chispa:nth-of-type(3) { animation-delay: 1.6s; }
  .insignia-editora[data-estilo="escudo"] .ins-chispa { animation: ins-titila 2.1s ease-in-out infinite; }
  .insignia-editora[data-estilo="tecnica"] .ins-chispa { display: none; }
  .insignia-editora[data-estilo="tecnica"] .ins-emoji { animation: ins-late 1.8s ease-in-out infinite; }
  /* Las nuevas: a más días de admin, más rápido. */
  .insignia-editora[data-nivel="15"] .ins-chispa, .insignia-editora[data-nivel="30"] .ins-chispa { animation-duration: 1.5s; }
}
@keyframes ins-brilla { 0%, 100% { filter: drop-shadow(0 0 1px var(--brillo)) drop-shadow(0 0 2px var(--brillo)); } 50% { filter: drop-shadow(0 0 3px var(--brillo)) drop-shadow(0 0 7px var(--brillo)); } }
@keyframes ins-sube { 0% { opacity: 0; transform: translate(0, 3px) scale(.4); } 35% { opacity: 1; transform: translate(calc(var(--dx) * .4), -2px) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), -11px) scale(.6); } }
@keyframes ins-titila { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 45% { opacity: 1; transform: scale(1.1) rotate(45deg); } 70% { opacity: 0; transform: scale(.3) rotate(90deg); } }
@keyframes ins-late {
  0%, 60%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--brillo)) drop-shadow(0 0 3px var(--brillo)); }
  15% { transform: scale(1.18); filter: drop-shadow(0 0 3px var(--brillo)) drop-shadow(0 0 8px var(--brillo)); }
  30% { transform: scale(1.04); } 45% { transform: scale(1.14); filter: drop-shadow(0 0 3px var(--brillo)) drop-shadow(0 0 7px var(--brillo)); }
}
.pf-editora { margin: 2px 0 8px; font-size: .8rem; line-height: 1.4; color: var(--texto-suave); }
.pf-editora b { color: var(--oro-1); }

/* Lo que está en prueba solo para la admin (ver NOVEDADES_PARA_TODOS en app.js). */
body:not(.novedades) .solo-novedades { display: none !important; }

/* ---- Charlas ---- */
.ch-lista { display: flex; flex-direction: column; gap: 8px; }
.ch-sala { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--tarjeta); color: var(--texto); text-decoration: none; }
.ch-sala:hover { box-shadow: 0 0 0 1.5px var(--acento); }
.ch-sala.mia { box-shadow: inset 3px 0 0 var(--acento); }
.ch-emoji { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 1.35rem; background: color-mix(in srgb, var(--acento) 12%, transparent); }
.ch-emoji.grande { width: 52px; height: 52px; font-size: 1.8rem; border-radius: 16px; }
.ch-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-info b { font-size: .95rem; }
.ch-info small { font-size: .78rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-info i { font-style: normal; font-size: .7rem; color: var(--texto-suave); opacity: .85; }
.ch-nuevos { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #e5484d; color: #fff; font-size: .72rem; font-weight: 700; line-height: 22px; text-align: center; }
.ch-ir { flex: none; color: var(--texto-suave); }
.ch-debates { display: flex; flex-direction: column; gap: 8px; }
.ch-debate { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--linea); color: var(--texto); text-decoration: none; }
.ch-debate b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1rem; }
.ch-debate small { font-size: .74rem; color: var(--texto-suave); }
.ch-ver-debates { align-self: flex-start; font-size: .85rem; }
.ch-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.ch-cab .bajada { margin: 2px 0 0; }
.ch-titulo { margin: 0; }
.ch-reglas { margin: 0 0 12px; font-size: .78rem; color: var(--texto-suave); }
.ch-chat { max-height: 58vh; }
/* Cabecera del mensaje: nombre · hace cuánto, y a la derecha (chiquitos) la banderita y «borrar». */
.gr-msg small.ch-msg-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.ch-hace { font-weight: 600; }
.ch-acc { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 10px; }
.ch-denunciar { padding: 0; font-size: .7rem; line-height: 1; text-decoration: none; opacity: .35; filter: grayscale(.4); }
.ch-denunciar:hover, .ch-denunciar:focus-visible { opacity: 1; filter: none; }
.ch-denunciado, .ch-borrar { padding: 0; font-size: .66rem; font-weight: 600; color: var(--texto-suave); }
.ch-oculto small { font-style: italic; }
.ch-revision { outline: 1.5px dashed #e5484d; }
.ch-salir { margin: 2px 0 0; text-align: left; font-size: .74rem; opacity: .8; }
.ch-chat .gr-msg { max-width: 86%; }
#ch-form input { height: 44px; border-radius: 999px; padding: 0 16px; }
#ch-form .boton-chico { height: 44px; }
/* La idea para la app solo en el inicio, y en las charlas/chats el pie no deja un hueco abajo. */
body:not([data-vista="inicio"]) .pie-sugerir { display: none; }
body.en-chat .pie { display: none; }
/* Adentro de una sala: la pantalla queda fija y la charla ocupa todo el espacio libre,
   así el cuadro para escribir queda justo arriba de la barra de abajo (sin hueco). */
body.en-chat[data-vista="charlas"] { height: var(--alto-visible, 100dvh); min-height: 0; }
/* Con el teclado abierto la barra de abajo se esconde: el cuadro para escribir queda pegado al teclado. */
@media (max-width: 760px) {
  body.app-nueva.en-chat.con-teclado[data-vista="charlas"] { padding-bottom: 4px; }
  /* Mientras escribe, solo queda el nombre de la sala, la charla y el cuadro: lo demás se esconde para que entre todo arriba del teclado. */
  body.en-chat.con-teclado[data-vista="charlas"] :is(header.top, .gr-pestanas, .volver, .ch-reglas, .ch-cab .bajada, .ch-salir) { display: none; }
  body.en-chat.con-teclado[data-vista="charlas"] section[data-vista="charlas"] { padding-top: 8px; }
  body.en-chat.con-teclado[data-vista="charlas"] .ch-cab { margin-bottom: 6px; }
  body.en-chat.con-teclado[data-vista="charlas"] .ch-cab .ch-emoji { width: 34px; height: 34px; font-size: 1.1rem; }
  body.en-chat.con-teclado[data-vista="charlas"] .ch-titulo { font-size: 1.1rem; }
  body.en-chat.con-teclado[data-vista="charlas"] .ch-chat { min-height: 80px; }
  body.en-chat.con-teclado .tabs { display: none; }
}
body.en-chat[data-vista="charlas"] main, body.en-chat[data-vista="charlas"] section[data-vista="charlas"], body.en-chat[data-vista="charlas"] #charlas-contenido {
  display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Con pocos mensajes quedan abajo, como en un chat, y sin estirarse. (Antes era align-content: end,
   pero así los mensajes viejos quedaban cortados arriba y no se podía subir a leerlos: ahora el
   primero lleva margin-top: auto, que empuja todo abajo solo cuando sobra lugar.) */
body.en-chat[data-vista="charlas"] .ch-chat { display: flex; flex-direction: column; flex: 1; min-height: 140px; max-height: none; margin-bottom: 8px; }
body.en-chat[data-vista="charlas"] .ch-chat > * { flex: none; align-self: flex-start; }
body.en-chat[data-vista="charlas"] .ch-chat > .yo { align-self: flex-end; }
body.en-chat[data-vista="charlas"] .ch-chat > :first-child { margin-top: auto; }
body.en-chat[data-vista="charlas"] #ch-pie { flex: none; padding-bottom: 6px; }
body.en-chat[data-vista="charlas"] .ch-reglas { margin-bottom: 8px; }
body.en-chat[data-vista="charlas"] section[data-vista="charlas"] { padding-top: 16px; padding-bottom: 4px; }
@media (max-width: 760px) { body.app-nueva.en-chat[data-vista="charlas"] { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } }
.gr-pestanas a.solo-novedades { white-space: nowrap; }
.adm-revisiones { margin: 0 0 18px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid #e5484d; background: color-mix(in srgb, #e5484d 7%, transparent); }
.adm-rev { padding: 10px 0; border-top: 1px solid var(--linea); }
.adm-rev:first-of-type { border-top: 0; }
.adm-rev small { color: var(--texto-suave); }
.adm-rev p { margin: 6px 0 8px; font-family: var(--serif); }
.adm-rev-bot { display: flex; gap: 10px; flex-wrap: wrap; }
/* Pestañas de Comunidad: con las tres (Charlas), en el celu van cortitas para no ocupar dos renglones. */
.gr-pestanas .pest-corta { display: none; }
@media (max-width: 520px) {
  body.novedades .gr-pestanas .pest-larga { display: none; }
  body.novedades .gr-pestanas .pest-corta { display: inline; }
}
.ch-cab .titulo.ch-titulo { font-size: 1.45rem; line-height: 1.15; }
.ch-cab .bajada { font-size: .88rem; line-height: 1.4; }

/* Reglas de las charlas (al sumarse a una sala) */
.reglas-charla { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; text-align: left; font-size: .86rem; line-height: 1.4; }
.reglas-charla li { padding: 7px 10px; border-radius: 10px; background: rgba(236, 170, 178, .12); }
#reglas-charla h2 { margin: 0 0 10px; }
#reglas-charla .invitacion-marca { margin: 0; font-size: 1.6rem; }
.ch-esperar { margin-top: 10px; } .ch-esperar.activo { background: transparent; color: var(--acento); box-shadow: inset 0 0 0 1.5px var(--acento); }
.adm-med-semana { margin: 10px 0 4px; }

/* Capítulo con gancho (en prueba, solo admin): portada + títulos, el arranque del capítulo como anzuelo y «Seguir leyendo». */
.cap-gancho .cg-cab { display: flex; gap: 14px; align-items: flex-end; margin-top: 12px; color: inherit; text-decoration: none; }
.cap-gancho .cap-portada, .cap-gancho .cap-portada img, .cap-gancho .cap-portada .tapa { width: 74px; }
.cg-titulos { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; }
.cg-titulos small { font-size: .7rem; font-weight: 700; color: var(--acento); }
.cg-titulos b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
/* En el feed, solo los primeros 5 renglones (que se desvanecen): el resto, en la novela. */
.cg-texto { margin-top: 14px; max-height: calc(1.75em * 5); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.cg-sigue { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.cg-leer { padding: 10px 20px; font-size: .9rem; text-decoration: none; }
.cg-desde1 { font-size: .82rem; color: var(--texto-suave); }
.cap-gancho .relato-pie { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
/* Votar y comentar ahí mismo, bien a la vista (aunque no lo hayan leído entero). */
.cg-pregunta { flex-basis: 100%; font-size: .82rem; font-weight: 700; color: var(--acento); }
.cap-gancho .estrellas { --e-vacia: color-mix(in srgb, var(--texto) 32%, transparent); }
.cap-gancho .estrella-voto { font-size: 1.55rem; }
.cg-comentar { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: .88rem; }
.cg-lecturas { font-size: .8rem; color: var(--texto-suave); white-space: nowrap; }
.cap-gancho .relato-acciones { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.cap-gancho .relato-acciones .campanita-accion { margin-left: auto; }

/* Perfil: historias escritas en grupo (solo si escribió al menos un capítulo) */
.pf-conjunto { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-conjunto li { display: flex; flex-direction: column; gap: 1px; }
.pf-conjunto a { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--texto); text-decoration: none; }
.pf-conjunto small { font-size: .74rem; color: var(--texto-suave); }

/* Lupa: personas y escritos en dos grupos. */
.busq-titulo { margin: 14px 2px 6px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.busq-titulo:first-child { margin-top: 4px; }
.susc-lista li { min-width: 0; }
.busq-escritos .tapa.tapa-mini { width: 38px; min-height: 52px; flex: none; padding: 4px; }
.busq-escritos .tapa-mini .tapa-t { font-size: 7px; }

/* Editar un comentario o la frase del día ahí mismo. */
.editar-linea { display: grid; gap: 8px; margin: 6px 0 4px; }
.editar-linea textarea { width: 100%; font: inherit; }
.editar-linea-botones { display: flex; gap: 8px; align-items: center; }
.comentario-editado { font-style: italic; }
.comentario-cabeza .editar-comentario { font-size: .8rem; }
.comentario-cabeza .editar-comentario { margin-left: auto; }
.comentario-cabeza .editar-comentario + .borrar-comentario { margin-left: 0; }
@media (max-width: 520px) { .comentario-cabeza .editar-comentario { order: 2; } }
/* La tarjeta de frase tiene sus propios colores (invertidos): el cuadro de edición los hereda. */
.relato-frase .editar-linea { color: var(--papel-tinta); }
[data-tema="claro"] .relato-frase .editar-linea { color: #f8e5d7; }
.relato-frase .editar-linea textarea { background: transparent; color: inherit; border: 1px solid currentColor; font-family: var(--serif); font-size: 1.1rem; text-align: center; }
.relato-frase .editar-linea-botones { justify-content: center; }
.relato-frase .editar-linea .boton-suave { background: transparent; color: inherit; border: 1px solid currentColor; }

/* ---- 💛 Lee con el corazón: insignia dorada por dar devoluciones largas y pensadas ---- */
.insignia-corazon { position: relative; overflow: visible; padding: 0 3px; }
.insignia-corazon .ins-emoji { display: inline-block; filter: drop-shadow(0 0 2px var(--brillo)) drop-shadow(0 0 4px var(--brillo)); }
@media (prefers-reduced-motion: no-preference) {
  .insignia-corazon .ins-chispa { display: block; animation: ins-titila 2.4s ease-in-out infinite; }
  .insignia-corazon .ins-chispa:nth-of-type(2) { animation-delay: 1.2s; }
  .insignia-corazon .ins-emoji { animation: corazon-late 2.6s ease-in-out infinite; }
}
@keyframes corazon-late { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.18); } 86% { transform: scale(1); } 92% { transform: scale(1.1); } }
/* En el perfil: la pastilla en dorado, con un brillo que le pasa por arriba. */
.perfil-chips .pf-corazon.pf-medalla { border: 0; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; margin-left: 0;
  background: linear-gradient(100deg, var(--oro-1) 0%, var(--oro-1) 38%, var(--oro-2) 50%, var(--oro-1) 62%, var(--oro-1) 100%);
  background-size: 250% 100%; background-position: 100% 0; color: #3b2410; box-shadow: 0 0 10px var(--brillo); }
:root[data-tema="claro"] .perfil-chips .pf-corazon.pf-medalla { color: #fffaf0; }
@media (prefers-reduced-motion: no-preference) { .pf-corazon { animation: oro-pasa 3.6s ease-in-out infinite; } }
.pf-corazon .insignia-ico { margin-right: 5px; }

/* ✦ Volvió a subir: un escrito viejo y bien valorado que volvió arriba por sus comentarios. */
.subio-aviso { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--oro-1, #b8862a); }
.subio-aviso { --oro-1: #c8963a; }
:root[data-tema="claro"] .subio-aviso { --oro-1: #8a5f12; }

/* ---- Tamy Tips: destellos dorados sobre la portada (como los copitos del libro) ---- */
.curso-chispas i { color: #ffe7a3; text-shadow: 0 0 4px rgba(226, 173, 74, .9); }
:root[data-tema="claro"] .curso-chispas i, :root[data-tema="claro"] .libro-cap-tapa .curso-chispas i { color: #fff4cf; text-shadow: 0 0 4px rgba(176, 120, 20, .95); }
/* Al pie del Top 5: una línea chiquita, sin cartel. */
.curso-top5 { margin: 22px 0 6px; text-align: center; font-size: .88rem; }
.curso-top5 a { color: var(--texto-suave); text-decoration: none; }
.curso-top5 a b { color: var(--acento); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dato-curso .link { font-size: .9rem; }
.link-propio { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Hoja: varias emociones (hasta 3) y una línea propia ---- */
.animo-caja { position: relative; max-width: 100%; }
.animo-caja > summary { list-style: none; cursor: pointer; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.animo-caja > summary::-webkit-details-marker { display: none; }
.animo-caja > summary::after { content: " ▾"; opacity: .6; }
.animo-caja[open] > summary::after { content: " ▴"; }
.animo-caja > summary.con-valor { border-color: var(--acento); }
.animo-panel { position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); width: min(420px, calc(100vw - 32px)); padding: 12px; border-radius: 16px; background: var(--fondo-2); border: 1px solid var(--linea); box-shadow: 0 10px 28px rgba(0, 0, 0, .25); }
.animo-ayuda { margin: 0 0 8px; font-size: .78rem; color: var(--texto-suave); }
.animo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-animo { font: inherit; font-size: .82rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: var(--texto); cursor: pointer; }
.chip-animo[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }

/* Panel: grupos renovados para revivir */
.adm-renovados { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.adm-renovados li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--tarjeta); }
.adm-renovados li > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.adm-renovados small { color: var(--texto-suave); font-size: .8rem; overflow-wrap: anywhere; }
#adm-renovados .buscar-campo { margin-top: 8px; }

/* ---- Buscador de géneros (la lupa) ---- */
.generos-lista { max-height: min(60vh, 520px); overflow-y: auto; margin-top: 10px; padding-right: 2px; }
.gen-grupo { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.gen-op { font: inherit; font-size: .88rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); background: var(--tarjeta); color: var(--texto); cursor: pointer; }
@media (hover: hover) { .gen-op:hover { border-color: var(--acento); } }
.gen-op.on { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.genero-boton { cursor: pointer; }
.genero-boton.con-valor { border-color: var(--acento); }
.genero-boton:disabled { opacity: .5; cursor: default; }
.buscar-gustos { margin: 4px 0 10px; }
/* «🔍 más géneros» va al final de las pastillas en el celu; en la compu está el botón «🔍 Género». */
@media (min-width: 761px) { .feed-pastillas .pas-mas { display: none; } }
@media (min-width: 761px) { .feed-pastillas button.pas-sel { padding: 7px 32px 7px 14px; } }
#generos-titulo:focus { outline: none; }

/* Panel: de cuándo son los datos (el panel abre con lo preparado; 🔄 trae lo de este momento) */
.adm-calculado { margin: 0 0 10px; font-size: .78rem; color: var(--texto-suave); text-align: right; }
.adm-calculado .link { font-size: .78rem; margin-left: 6px; }

/* ============================================================
   🎃 MODO HALLOWEEN (botón calabaza): noche, naranja calabaza y telarañas.
   Pisa los colores de claro y oscuro mientras está prendido.
   ============================================================ */
:root[data-halloween], :root[data-halloween][data-tema="claro"] {
  --fondo: #120c0e; --fondo-2: #1b1214; --tarjeta: #241719; --texto: #f4e7d6; --texto-suave: #c9b5a2;
  --detalle: #ff9a3c; --acento: #ff7a1a; --acento-2: #f4e7d6; --linea: rgba(255, 140, 50, .2);
  --truffle: #2b1a12; --ruleta: #3a1f14; --sobre-acento: #140c0a;
  --papel: #efe3c8; --papel-tinta: #2a1a10; --papel-renglon: #d9c7a4;
  color-scheme: dark;
}
:root[data-halloween] body { background: radial-gradient(1200px 500px at 50% -120px, rgba(255, 122, 26, .16), transparent 70%), var(--fondo); }
:root[data-halloween][data-tema="claro"] :is(dialog.invitacion, .candado, .nov-cabeza, .tarjeta-novela, .carpeta details, .respaldo, .aviso-item.fijado .aviso-boton, .relato-frase, .aviso, .podio:first-child) {
  --fondo: #120c0e; --fondo-2: #1b1214; --tarjeta: #241719; --texto: #f4e7d6; --texto-suave: #c9b5a2; --detalle: #ff9a3c; --acento: #ff7a1a; --linea: rgba(255, 140, 50, .2); --sobre-acento: #140c0a;
}
:root[data-halloween] .relato-frase { background: #2b1610; }
:root[data-halloween] :is(.titulo, h2.titulo) { color: #ff8a2b; text-shadow: 0 0 18px rgba(255, 122, 26, .35); letter-spacing: .02em; }
:root[data-halloween] .marca { position: relative; }
/* Una luz cálida detrás del logo (como de vela), para que se lea bien sobre el negro. */
:root[data-halloween] .marca::before { content: ""; position: absolute; inset: -14px -22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 168, 80, .32), rgba(255, 122, 26, .12) 60%, transparent); pointer-events: none; z-index: -1; }
:root[data-halloween] .marca img { filter: brightness(1.12) drop-shadow(0 0 2px rgba(255, 236, 210, .7)) drop-shadow(0 0 10px rgba(255, 140, 40, .55)); }
:root[data-halloween] .relato, :root[data-halloween] .gr-tarjeta { box-shadow: 0 0 0 1px rgba(255, 122, 26, .12), 0 10px 30px rgba(0, 0, 0, .35); }
.calabaza-btn[aria-pressed="true"] { filter: drop-shadow(0 0 6px rgba(255, 140, 40, .9)); }
#halloween-deco { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hw-tela { position: absolute; top: 0; width: 110px; height: 110px; color: rgba(244, 231, 214, .22); }
.hw-tela svg { width: 100%; height: 100%; }
.hw-tela.izq { left: 0; }
.hw-tela.der { right: 0; transform: scaleX(-1); }
.hw-murcielago { position: absolute; font-size: 22px; opacity: .55; top: 18%; left: -40px; filter: grayscale(.2) brightness(.8); }
@media (prefers-reduced-motion: no-preference) {
  .hw-murcielago { animation: hw-vuela 22s linear infinite; }
  .hw-murcielago.m1 { top: 42%; animation-duration: 30s; animation-delay: -11s; font-size: 16px; }
  .hw-murcielago.m2 { top: 70%; animation-duration: 26s; animation-delay: -19s; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hw-murcielago { display: none; } }
@keyframes hw-vuela {
  0% { transform: translate(0, 0); } 25% { transform: translate(30vw, -30px); } 50% { transform: translate(60vw, 20px); }
  75% { transform: translate(90vw, -20px); } 100% { transform: translate(115vw, 0); }
}
/* Arañitas y calaveritas colgadas de un hilo, a los costados: bajan y suben despacito. */
.hw-colgante { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; }
.hw-colgante.a0 { left: 3%; } .hw-colgante.a1 { left: 10%; } .hw-colgante.a2 { right: 4%; } .hw-colgante.a3 { right: 12%; } .hw-colgante.a4 { right: 8%; }
.hw-hilo { display: block; width: 1px; height: 120px; background: linear-gradient(rgba(244, 231, 214, .05), rgba(244, 231, 214, .4)); }
.hw-bicho { display: block; line-height: 1; margin-top: -2px; }
.hw-bicho.arana { width: 42px; color: #3a2420; filter: drop-shadow(0 0 2px rgba(255, 170, 90, .9)) drop-shadow(0 0 8px rgba(255, 122, 26, .5)); }
.hw-bicho.arana svg { display: block; width: 100%; }
.hw-bicho.calavera { font-size: 24px; opacity: .8; filter: drop-shadow(0 0 6px rgba(255, 122, 26, .5)); }
.hw-colgante.a1 .hw-hilo { height: 220px; } .hw-colgante.a3 .hw-hilo { height: 300px; } .hw-colgante.a4 .hw-hilo { height: 420px; }
@media (prefers-reduced-motion: no-preference) {
  .hw-hilo { animation: hw-baja 7s ease-in-out infinite alternate; transform-origin: top; }
  .hw-colgante.a1 .hw-hilo { animation-duration: 9s; animation-delay: -3s; }
  .hw-colgante.a2 .hw-hilo { animation-duration: 6s; animation-delay: -2s; }
  .hw-colgante.a3 .hw-hilo { animation-duration: 8s; animation-delay: -5s; }
  .hw-colgante.a4 .hw-hilo { animation-duration: 10s; animation-delay: -1s; }
  .hw-bicho { animation: hw-hamaca 3.2s ease-in-out infinite alternate; transform-origin: top center; }
  .hw-colgante.a2 .hw-bicho, .hw-colgante.a4 .hw-bicho { animation-delay: -1.6s; }
}
@keyframes hw-baja { from { height: 40px; } to { height: var(--hasta, 190px); } }
.hw-colgante.a1 .hw-hilo { --hasta: 260px; } .hw-colgante.a3 .hw-hilo { --hasta: 340px; } .hw-colgante.a4 .hw-hilo { --hasta: 460px; }
@keyframes hw-hamaca { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@media (max-width: 520px) {
  .hw-tela { width: 70px; height: 70px; }
  .hw-colgante.solo-compu { display: none; }
  .hw-colgante.a0 { left: 4px; } .hw-colgante.a2 { right: 6px; } .hw-colgante.a4 { right: 40px; }
  .hw-bicho.arana { width: 32px; } .hw-bicho.calavera { font-size: 20px; }
}

/* ============================================================
   🎃 DESAFÍO DEL MES
   ============================================================ */
/* La tarjeta (Leer, arriba del desafío del día, e Inicio): naranja calabaza, llama la atención. */
.boton-mes { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 12px 14px; border-radius: 18px; text-decoration: none;
  background: linear-gradient(120deg, #2a130c 0%, #4a1d0c 55%, #7a2e0c 100%); color: #fbe9d6; box-shadow: 0 0 0 1px rgba(255, 140, 50, .35), 0 8px 24px rgba(122, 46, 12, .25); }
.boton-mes .bm-emoji { font-size: 1.9rem; filter: drop-shadow(0 0 8px rgba(255, 140, 40, .7)); }
.boton-mes .bm-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.boton-mes small { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #ffb066; }
.boton-mes b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.08rem; }
.boton-mes i { font-style: normal; font-size: .8rem; color: #e9cdb4; }
.boton-mes .bm-flecha { font-size: 1.2rem; color: #ffb066; }
.ini-mes { margin-top: 14px; }
/* «Seguir leyendo» en chiquito */
.seguir-chico { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 6px 0 2px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); color: var(--texto); text-decoration: none; font-size: .82rem; }
.seguir-chico b { font-family: var(--serif); font-style: italic; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.seguir-chico small { color: var(--texto-suave); }
/* Top 5: el bloque del desafío, arriba de todo */
.mes-top5 { display: flex; gap: 16px; align-items: center; margin: 4px 0 22px; padding: 16px; border-radius: 22px; text-decoration: none; color: #fbe9d6;
  background: linear-gradient(135deg, #1d0f0b, #4a1d0c 60%, #8a3510); box-shadow: 0 0 0 1px rgba(255, 140, 50, .4), 0 14px 34px rgba(122, 46, 12, .3); }
.mes-top5-tapa { flex: none; width: 92px; }
.mes-top5-tapa .tapa { width: 92px; }
.mes-top5.incognita .mes-top5-tapa { height: 128px; border-radius: 10px; display: grid; place-items: center; background: repeating-linear-gradient(135deg, #2b1610 0 10px, #241210 10px 20px); box-shadow: inset 0 0 0 1px rgba(255, 160, 80, .4); }
.incog { font-family: var(--serif); font-size: 3.4rem; color: #ffb066; text-shadow: 0 0 16px rgba(255, 140, 40, .7); }
@media (prefers-reduced-motion: no-preference) { .incog { animation: incog-late 2.4s ease-in-out infinite; } }
@keyframes incog-late { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
.mes-top5-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mes-top5-txt small { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #ffb066; }
.mes-top5-txt > b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.3rem; }
.mes-top5-txt span { font-size: .86rem; color: #e9cdb4; }
.mes-top5-ir { color: #ffb066 !important; font-weight: 700; }
.mes-top5-resto { margin: -12px 0 22px; font-size: .86rem; color: var(--texto-suave); }
/* La página */
.mes-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--linea); }
.mes-admin small { width: 100%; color: var(--texto-suave); }
.mes-admin .chip.on, .mes-podio-botones .chip.on { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.mes-cab { padding: 20px 18px; border-radius: 22px; background: linear-gradient(135deg, #1d0f0b, #3d180b 60%, #6e2a0d); color: #fbe9d6; box-shadow: 0 0 0 1px rgba(255, 140, 50, .35); }
.mes-kicker { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: #ffb066; }
.mes-titulo { margin: 4px 0 8px; color: #ff9a3c !important; }
.mes-consigna { margin: 0 0 12px; font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.5; }
.mes-datos { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .9rem; color: #f0d8c2; }
.mes-accion { margin: 18px 0 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mes-accion small { color: var(--texto-suave); }
.mes-estado { margin: 0; }
.mes-sub { margin: 26px 0 6px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.mes-editor { display: grid; gap: 14px; margin-top: 10px; }
.mes-cap { margin: 0; border-radius: 16px; }
.mes-cap.hecho, .mes-cap.siguiente, .mes-cap.bloqueado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 16px; border: 1px solid var(--linea); }
.mes-cap.hecho { background: var(--tarjeta); }
.mes-cap.siguiente { border-style: dashed; border-color: var(--acento); }
.mes-cap.bloqueado { opacity: .55; border-style: dashed; }
.mes-cap .link { margin-left: auto; }
.mes-cap-num { font-weight: 700; color: var(--acento); }
.mes-cap.bloqueado .mes-cap-num { color: var(--texto-suave); }
.mes-cap-info { color: var(--texto-suave); font-size: .88rem; }
.mes-titulo-fijo { margin: 0; display: grid; gap: 2px; }
.mes-titulo-fijo small { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--acento); }
.mes-titulo-fijo b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.5rem; }
.mes-cap.abierto { display: grid; gap: 10px; padding: 16px 0 4px; }
.mes-cap.abierto header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mes-cap.abierto .mes-cap-num { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.6rem; }
.mes-cap.abierto header small { color: var(--texto-suave); font-size: .82rem; }
.mes-cap-titulo, .mes-editor > .campo input { font: inherit; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo); color: var(--texto); }
/* La misma hoja con renglones que «Escribir»: crece con el texto. */
.mes-papel { width: 100%; box-sizing: border-box; min-height: 55vh; border: 0; border-radius: 14px; --pad-y: 12px; padding: var(--pad-y) 22px;
  resize: none; overflow: hidden; font-family: var(--serif); font-size: 1.15rem; line-height: 2.2rem;
  color: var(--papel-tinta); background-color: var(--papel);
  background-image: linear-gradient(to bottom, transparent calc(2.2rem - 1px), var(--papel-renglon) calc(2.2rem - 1px));
  background-size: 100% 2.2rem; background-position: 0 calc(var(--pad-y) + 1.3em + 3px - 2.2rem);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.mes-papel::placeholder { color: #9c7a70; font-style: italic; }
.mes-papel:focus { outline: 2px solid var(--acento); outline-offset: 2px; }
.mes-cuenta { color: var(--texto-suave); font-size: .8rem; }
.mes-cuenta.ok { color: #6fbf73; }
.mes-cuenta.mal { color: #ff6b5a; }
.mes-editor-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
/* La historia de ejemplo (de la admin): se lee y se comenta, no compite. */
.mes-ejemplo { display: flex; gap: 12px; padding: 12px; margin: 8px 0 4px; border-radius: 16px; border: 1px dashed var(--acento); text-decoration: none; color: var(--texto); }
.mes-ejemplo .mes-item-txt b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; }
.mes-ejemplo-kicker { color: var(--acento) !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .7rem !important; }
.mes-mivoto { margin: 12px 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--acento); line-height: 1.5; }
.mes-votar-fila { margin-top: 6px; }
.mes-tu-voto { color: var(--acento) !important; font-weight: 700; }
.mes-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.mes-item { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: var(--tarjeta); }
.mes-item.elegida { box-shadow: inset 0 0 0 2px var(--acento); }
.mes-item-tapa { flex: none; width: 64px; text-decoration: none; }
.mes-item-tapa .tapa { width: 64px; }
.mes-item-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mes-item-txt a { color: var(--texto); text-decoration: none; }
.mes-item-txt b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; }
.mes-item-txt small { color: var(--texto-suave); font-size: .8rem; }
.mes-pos { font-family: var(--sans); font-style: normal; font-weight: 800; color: var(--acento); }
.mes-inicio { margin: 2px 0; font-size: .88rem; color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mes-barra { height: 6px; border-radius: 999px; background: var(--linea); overflow: hidden; margin-top: 4px; }
.mes-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff7a1a, #ffb066); }
.mes-pts { font-weight: 700; color: var(--texto) !important; }
.mes-podio-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mes-podio-botones .chip { font-size: .8rem; padding: 4px 10px; }
.mes-propia { font-style: italic; }
.mes-mipodio { margin: 18px 0 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--acento); display: grid; gap: 8px; }
.mes-mipodio p { margin: 0; }
.mes-mipodio ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-family: var(--serif); font-style: italic; }
.mes-mipodio .boton { justify-self: start; }
.mes-mipodio small { color: var(--texto-suave); }
.mes-pesos { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; }
.mes-pesos small { color: var(--texto-suave); }
.mes-ganadora { display: flex; gap: 18px; align-items: center; margin: 20px 0 12px; padding: 18px; border-radius: 22px; background: linear-gradient(135deg, #1d0f0b, #4a1d0c 60%, #8a3510); color: #fbe9d6; box-shadow: 0 0 0 1px rgba(255, 160, 80, .5), 0 0 40px rgba(255, 122, 26, .25); }
.mes-ganadora-tapa { position: relative; flex: none; width: 110px; }
.mes-ganadora-tapa .tapa { width: 110px; }
.mes-corona { position: absolute; top: -16px; right: -12px; font-size: 2rem; filter: drop-shadow(0 0 10px rgba(255, 140, 40, .9)); }
.mes-ganadora small { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #ffb066; }
.mes-ganadora h3 { margin: 4px 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.4rem; }
.mes-ganadora p { margin: 0 0 10px; }
.mes-ganadora a:not(.boton) { color: #ffd2a6; }
.mes-ganadora-tapa, .mes-ganadora .boton { text-decoration: none; }
.mes-podio-resto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.mes-podio-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--tarjeta); color: var(--texto); text-decoration: none; }
.mes-podio-item span { font-size: .78rem; font-weight: 700; color: var(--acento); }
.mes-podio-item b { font-family: var(--serif); font-style: italic; font-weight: 400; }
.mes-podio-item small { color: var(--texto-suave); }
.lib-mes .lib-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 🎃 junto al nombre del podio */
.insignia-calabaza { position: relative; padding: 0 3px; }
.insignia-calabaza .ins-emoji { display: inline-block; filter: drop-shadow(0 0 3px rgba(255, 140, 40, .9)); }
.insignia-calabaza[data-puesto="1"] .ins-emoji { filter: drop-shadow(0 0 3px #ffd36b) drop-shadow(0 0 6px rgba(255, 170, 40, .9)); }
.adm-renovados li.anulado { opacity: .55; }
@media (max-width: 520px) {
  .mes-ganadora { flex-direction: column; align-items: flex-start; }
  .mes-top5-tapa, .mes-top5-tapa .tapa { width: 76px; }
  .mes-top5.incognita .mes-top5-tapa { height: 106px; }
}