/* buzon.css — el cielo de cartas y el diálogo que las lee.
   Sigue la misma pauta que el resto: `.modern` para lo mejorado, tipografía
   Patrick Hand en los textos largos y la paleta de :root. */

/* ── El cielo ───────────────────────────────────────────────────────────── */

.constelacion{
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto 72px;
}
.constelacion-cabecera{
  text-align: center;
  margin-bottom: 22px;
}
.constelacion h2{
  font: 400 clamp(2rem, 6vw, 2.9rem)/1.1 'Patrick Hand', cursive;
  color: var(--lavender);
  margin: 0 0 8px;
}
.constelacion-nota{
  margin: 0 auto;
  max-width: 46ch;
  color: var(--muted);
  font-size: .98rem;
}
.constelacion-cielo{
  position: relative;
  /* Alto por proporción: en el móvil el cielo se estira a lo alto para que
     las estrellas no se amontonen en una banda estrecha. */
  aspect-ratio: 16 / 7;
  min-height: 320px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 28% 22%, #ffd98a14, transparent 58%),
    radial-gradient(ellipse at 74% 78%, #ffb3d111, transparent 55%),
    #000;
  box-shadow: inset 0 0 90px #00000099;
  overflow: hidden;
}
.constelacion-lineas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.constelacion-lineas line{
  stroke: var(--violeta);
  stroke-width: .12;
  opacity: .22;
  vector-effect: non-scaling-stroke;
}
/* ── El pote ────────────────────────────────────────────────────────────── */
/* El regalo de ella, puesto al revés: el suyo guarda estrellas y este las
   suelta. Ocupa la franja de abajo que el reparto de estrellas deja libre. */

.pote{
  position: absolute;
  left: 50%;
  bottom: 6px;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  pointer-events: none;
  z-index: 2;
}
.pote-arte{
  display: block;
  width: clamp(96px, 11vw, 132px);
  height: auto;
  filter: drop-shadow(0 0 18px #ff9a4d3d);
}
.pote-dentro path{
  fill: var(--naranja);
  filter: drop-shadow(0 0 4px var(--naranja));
}
.modern.motion-on .pote-dentro path{
  animation: pote-latido 4.2s ease-in-out infinite;
}
.pote-dentro path:nth-child(2){ animation-delay: -1.1s; }
.pote-dentro path:nth-child(3){ animation-delay: -2.3s; }
.pote-dentro path:nth-child(4){ animation-delay: -3.1s; }
.pote-dentro path:nth-child(5){ animation-delay: -.6s; }
@keyframes pote-latido{
  0%, 100%{ opacity: .95; }
  50%{ opacity: .45; }
}
.pote-nombre{
  margin-top: 4px;
  color: var(--naranja);
  font: 400 .8rem/1.2 'Patrick Hand', cursive;
  letter-spacing: .02em;
  opacity: .85;
  text-align: center;
}
/* Tres estrellitas que se escapan por la boca del pote hacia el cielo. */
.pote-fuga{
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 60px;
  height: 92px;
  translate: -50% 0;
}
.pote-fuga i{
  position: absolute;
  left: calc(22% + var(--sale) * 26%);
  bottom: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--naranja);
  box-shadow: 0 0 7px 2px #ff9a4d88;
  opacity: 0;
}
.modern.motion-on .pote-fuga i{
  animation: pote-sube 5.4s ease-out infinite;
  animation-delay: calc(var(--sale) * 1.8s);
}
@keyframes pote-sube{
  0%{ translate: 0 0; opacity: 0; scale: .4; }
  18%{ opacity: .95; scale: 1; }
  100%{ translate: calc(var(--sale) * 6px - 6px) -88px; opacity: 0; scale: .5; }
}
@media (prefers-reduced-motion: reduce){
  .modern.motion-on .pote-fuga i,
  .modern.motion-on .pote-dentro path{ animation: none; }
  .pote-fuga{ display: none; }
}

.constelacion-sin-js{
  position: absolute;
  inset: auto 24px 24px;
  margin: 0;
  color: var(--muted);
  text-align: center;
}

/* ── Cada estrella ──────────────────────────────────────────────────────── */

.estrella{
  position: absolute;
  left: var(--ex);
  top: var(--ey);
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--text);
  max-width: 34%;
}
/* No son puntos: son los destellos de cuatro puntas del pote que me regaló.
   El tamaño lo pone cada carta según su brillo, para que el cielo tenga
   estrellas grandes y pequeñas como uno de verdad. */
.estrella-punto{
  display: block;
  width: var(--tam, 18px);
  height: var(--tam, 18px);
  color: var(--lavender);
  opacity: var(--brillo, 1);
  filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 14px currentColor);
  transition: scale .2s var(--ease), filter .2s var(--ease);
}
.estrella-punto svg{ display: block; width: 100%; height: 100%; }
.estrella-punto svg path{ fill: currentColor; }
.estrella[data-autor="celin"] .estrella-punto{ color: var(--rosa); }
.estrella-nombre{
  font: 400 .92rem/1.2 'Patrick Hand', cursive;
  text-align: center;
  color: var(--muted);
  /* El nombre solo estorba hasta que interesa: aparece al acercarse. */
  opacity: 0;
  transition: opacity .18s var(--ease), color .18s var(--ease);
}
.estrella:hover .estrella-nombre,
.estrella:focus-visible .estrella-nombre{
  opacity: 1;
  color: var(--text);
}
.estrella:hover .estrella-punto,
.estrella:focus-visible .estrella-punto{
  scale: 1.45;
  opacity: 1;
  filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 26px currentColor);
}
.estrella:focus-visible{
  outline: 3px solid var(--cream);
  outline-offset: 2px;
}
/* Las que aún no se pueden leer se quedan en violeta apagado: se ven, se
   entiende que están ahí, y no compiten con las que sí se pueden abrir. */
.estrella-sellada{ cursor: default; }
.estrella-sellada .estrella-punto{
  color: var(--violeta);
  opacity: .34;
  filter: none;
}
.estrella-sellada:hover .estrella-punto{ scale: 1; filter: none; }

/* Todo el cielo flota. Cada estrella lleva su propia deriva y su propio
   compás, así que el conjunto respira en vez de latir a la vez. Es
   decorativo: se para con el resto del movimiento. */
.modern.motion-on .estrella{
  animation: estrella-flota var(--flota, 9s) var(--desfase, 0s) ease-in-out infinite;
}
@keyframes estrella-flota{
  0%, 100%{ translate: -50% -50%; }
  50%{ translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px)); }
}
.modern.motion-on .estrella:not(.estrella-sellada) .estrella-punto{
  animation: estrella-titileo calc(var(--flota, 9s) * .43) var(--desfase, 0s) ease-in-out infinite;
}
@keyframes estrella-titileo{
  0%, 100%{ opacity: var(--brillo, 1); rotate: 0deg; }
  50%{ opacity: calc(var(--brillo, 1) * .48); rotate: 24deg; }
}
@media (prefers-reduced-motion: reduce){
  .modern.motion-on .estrella,
  .modern.motion-on .estrella .estrella-punto{ animation: none; }
}

/* En el móvil los nombres no caben: veinte títulos en un palmo de pantalla se
   pisan entre sí y no se lee ninguno. Se quedan solo los puntos, que es la
   interacción natural ahí (tocas y se abre), y el título sigue estando en el
   aria-label para quien use lector de pantalla. El punto crece para que el
   blanco de alrededor llegue a los 44px de zona tocable. */
@media (max-width: 760px){
  .constelacion{ width: calc(100% - 32px); }
  .constelacion-cielo{ aspect-ratio: 3 / 4; }
  .estrella{ padding: 14px; }
  /* Se encogen, pero conservan la variedad de tamaños de cada carta. */
  .estrella-punto{ width: calc(var(--tam, 18px) * .78); height: calc(var(--tam, 18px) * .78); }
  .estrella-nombre{ display: none; }
}
/* Con teclado sí hace falta ver cuál está enfocada, en cualquier tamaño. */
@media (max-width: 760px){
  .estrella:focus-visible .estrella-nombre{
    display: block;
    position: absolute;
    top: calc(100% - 4px);
    left: 50%;
    translate: -50% 0;
    width: max-content;
    max-width: 40vw;
    padding: 4px 8px;
    border-radius: 10px;
    background: #000000d9;
    opacity: 1;
  }
}

/* ── El diálogo ─────────────────────────────────────────────────────────── */

.modern dialog.buzon-dialog{ width: min(680px, calc(100% - 32px)); }
.modern .buzon-resumen{
  margin: -12px 0 20px;
  color: #d3c3a0;
  font-size: .82em;
}
.modern .buzon-lista{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.modern .buzon-fila{ margin: 0; }
.modern .buzon-fila-boton{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: 1px solid #d7c8a455;
  border-radius: 16px;
  background: #43381f;
  color: inherit;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.modern .buzon-fila-boton:hover{
  background: #574727;
  border-color: var(--lavender);
  transform: translateY(-2px);
}
.modern .buzon-fila-boton:focus-visible{
  outline: 3px solid var(--cream);
  outline-offset: 3px;
}
.modern .buzon-fila-sellada,
.modern .buzon-fila-nota{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px dashed #d7c8a440;
  border-radius: 16px;
  color: #cdbb96;
}
/* Lo sellado es violeta aquí igual que en el cielo: así el color quiere
   decir siempre lo mismo, "todavía no". */
.modern .buzon-fila-sellada{
  border-color: #a878ff40;
  background: #a878ff0d;
}
.modern .buzon-fila-nota{ border-style: solid; }
.modern .buzon-sello,
.modern .buzon-humor{
  flex-shrink: 0;
  font-size: 1.1em;
  line-height: 1.4;
  color: var(--lavender);
}
.modern .buzon-fila-sellada .buzon-sello{ color: var(--violeta); opacity: .75; }
.modern .buzon-fila-copia{ display: grid; gap: 2px; min-width: 0; }
.modern .buzon-fila-copia strong{ font-weight: 400; }
.modern .buzon-fila-copia small{ font-size: .72em; color: #c2b18c; }

.modern .buzon-volver{
  border: 0;
  background: none;
  padding: 0 0 14px;
  color: var(--lavender);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: .8em;
}
.modern .buzon-volver:focus-visible{ outline: 3px solid var(--cream); outline-offset: 3px; }
.modern .buzon-carta-titulo{
  font: 400 32px/1.2 'Patrick Hand', cursive;
  color: var(--lavender);
  margin: 0 0 4px;
}
.modern .buzon-carta-titulo:focus-visible{ outline: 3px solid var(--cream); outline-offset: 4px; }
.modern .buzon-carta-firma{
  margin: 0 0 20px;
  font-size: .76em;
  color: #c2b18c;
}
.modern .buzon-carta-texto p{ margin: 0 0 1em; }
.modern .buzon-carta-texto p:last-child{ margin-bottom: 0; }