/* ============================================================
   FASE 4 — ESTRELLAS + CARTEL OBLIGATORIO — ver estrellas.js
   Van arriba de todo (tutorial incluido: 6000/6001).
   ============================================================ */

/* ---- Pantalla "¿Qué te pareció la app?" ---- */
.estrellas-pantalla {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.78);
  overflow-y: auto;
}

.estrellas-pantalla.visible {
  display: flex;
}

.estrellas-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 1.6rem 1.2rem 1.1rem;
  border-radius: 22px;
  border: 2px solid rgba(255, 210, 80, 0.7);
  background: linear-gradient(160deg, #13361f, #071a0f);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
  text-align: center;
  color: #ffffff;
}

.estrellas-cerrar {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
}

.estrellas-cerrar.hidden,
.estrellas-ahora-no.hidden,
.estrellas-error.hidden {
  display: none;
}

.estrellas-emoji {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.estrellas-titulo {
  margin: 0 0 0.45rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  color: #ffd250;
}

.estrellas-sub {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #dcefe3;
}

.estrellas-fila {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}

.estrella {
  width: 52px;
  height: 52px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.22);
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, color 0.12s ease;
}

.estrella.activa {
  color: #ffd250;
  text-shadow: 0 0 12px rgba(255, 210, 80, 0.6);
}

.estrella:active {
  transform: scale(0.9);
}

.estrella:focus-visible {
  outline: 2px solid #ffd250;
  outline-offset: 2px;
  border-radius: 10px;
}

.estrellas-leyenda {
  min-height: 1.3em;
  margin: 0.35rem 0 0.9rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffe9a8;
}

.estrellas-comentario-label {
  display: block;
  margin-bottom: 0.35rem;
  text-align: left;
  font-size: 0.82rem;
  color: #b9dcc6;
}

.estrellas-comentario {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(125, 255, 160, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

.estrellas-error {
  margin: 0.6rem 0 0;
  color: #ff9b9b;
  font-size: 0.85rem;
}

.estrellas-enviar {
  width: 100%;
  margin-top: 0.9rem;
}

.estrellas-enviar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.estrellas-ahora-no {
  margin-top: 0.5rem;
}

/* ---- Cartel obligatorio (invitado con la prueba vencida) ----
   Tapa toda la app; solo se oculta mientras está la pantalla de
   registro (body.registro-invitado), que es la única salida. */
.cartel-obligatorio {
  position: fixed;
  inset: 0;
  z-index: 7100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 30%, rgba(30, 110, 60, 0.96), rgba(4, 16, 9, 0.98));
  overflow-y: auto;
}

.cartel-obligatorio.visible {
  display: flex;
}

body.registro-invitado .cartel-obligatorio,
body.registro-invitado .estrellas-pantalla {
  display: none;
}

/* Con el cartel puesto, el resto de la app no se puede usar ni deslizar. */
body.prueba-vencida:not(.registro-invitado) {
  overflow: hidden;
}

.cartel-obligatorio-card {
  width: 100%;
  max-width: 380px;
  padding: 1.8rem 1.3rem 1.4rem;
  border-radius: 24px;
  border: 2px solid rgba(255, 210, 80, 0.75);
  background: linear-gradient(160deg, #164428, #071a0f);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  text-align: center;
  color: #ffffff;
}

.cartel-obligatorio-emoji {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.cartel-obligatorio-titulo {
  margin: 0 0 0.6rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  color: #ffd250;
}

.cartel-obligatorio-texto {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
  color: #f2fff6;
}

.cartel-obligatorio-lista {
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  text-align: left;
  font-size: 0.92rem;
  color: #d6f3e0;
}

.cartel-obligatorio-btn {
  width: 100%;
  font-size: 1.05rem;
}

@media (prefers-reduced-motion: reduce) {
  .estrella {
    transition: none;
  }
}