/* ═══════════════════════════════════════════════════════════════════════════
 * MOX RATING — LA IDENTIDAD ÚNICA DE LOS MODALES DE VALORACIÓN (GSD-688)
 *
 * SUSTITUYE A: los estilos de estrellas duplicados de `style.css` (`.star` y
 * `.stars` estaban definidos DOS VECES, líneas 5266/5328 y 6565/6575 — ganaba
 * el último y el primero era código muerto que aún se leía como si mandara),
 * `rating-premium.css` entero (61 líneas que sólo existían para remendar por id
 * el botón y el input del tercer modal, que se había salido de la identidad) y
 * la mitad del estilo que vivía en atributos `style=` del HTML.
 *
 * LA REGLA QUE HACE QUE ESTO NO SE VUELVA A DIVERGIR: aquí no se estiliza NADA
 * por id. Todo es clase `.moxr-*` o atributo `[data-tono]`. Un id en una hoja de
 * estilo es una excepción con nombre propio, y una excepción con nombre propio
 * es como empezó `rating-premium.css`.
 *
 * Las variantes (finalizado / cancelado) son `[data-tono="bien"|"mal"]` sobre la
 * tarjeta. Antes eran `element.style.color = "#ff4d4d"` escrito a mano en cada
 * apertura desde JavaScript: eso no es un tema, es una mutación, y por eso había
 * que acordarse de deshacerla al abrir el otro caso.
 * ═══════════════════════════════════════════════════════════════════════════ */

#mox-rating-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  padding: 20px;
  overscroll-behavior: contain;
}

#mox-rating-overlay.moxr-visible {
  display: flex;
}

/* La tarjeta reutiliza `auth-card glass-dark modal-card` del tema de la app.
 * Aquí sólo va lo que es propio de valorar. Si mañana cambia la identidad de las
 * tarjetas, este modal la sigue sin tocarse — que es justo lo que no pasaba
 * cuando cada modal traía su fondo, su radio y su borde escritos a mano. */
.moxr-card {
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.moxr-icono {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 14px;
}

.moxr-titulo {
  font-size: 1.55rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #ffffff;
}

.moxr-sub {
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 22px;
}

/* ── EL TONO: la única diferencia visual entre finalizado y cancelado ──────
 * Dos tokens. No dos modales, no dos hojas, no dos ramas de JavaScript
 * escribiendo `style.color`. */
.moxr-card[data-tono="bien"] .moxr-titulo { color: #4cd964; }
.moxr-card[data-tono="mal"]  .moxr-titulo { color: #ff4d4d; }

/* ── ESTRELLAS ─────────────────────────────────────────────────────────────
 * UN solo glifo para toda la app. Antes convivían `⭐` (emoji a color, cliente)
 * y `★` (glifo tipográfico, conductor): son dos cosas distintas y ninguna
 * cantidad de CSS las iguala, porque el emoji trae su propio color desde la
 * fuente del sistema y se pinta distinto en cada Android. Se queda `★`, que sí
 * obedece a `color`. */
.moxr-estrellas {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.moxr-estrella {
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, transform 0.12s ease;
}

.moxr-estrella.moxr-on {
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
}

.moxr-estrella:active {
  transform: scale(1.18);
}

.moxr-leyenda {
  min-height: 22px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffd700;
  margin: 0 0 18px;
}

/* ── COMENTARIO ────────────────────────────────────────────────────────────*/
.moxr-comentario {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: #fff;
  font-size: 0.95rem;
  padding: 13px 15px;
  outline: none;
  transition: border-color 0.2s ease;
}

.moxr-comentario::placeholder { color: rgba(255, 255, 255, 0.35); }
.moxr-comentario:focus { border-color: rgba(255, 215, 0, 0.5); }

/* ── ZONA DE REPORTE ───────────────────────────────────────────────────────
 * NACE CERRADA, y no es cosmético: la denuncia es la acción grave del modal y
 * mostrarla desplegada invita a usarla como si fuera parte de valorar. Se abre
 * con un enlace discreto, igual que el reporte de lugares. */
.moxr-reporte-abrir {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 6px;
}

.moxr-reporte {
  display: none;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.moxr-reporte.moxr-abierto { display: block; }

.moxr-reporte-titulo {
  font-size: 0.72rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ff6b6b;
  margin: 0 0 12px;
  font-weight: 700;
}

.moxr-motivos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.moxr-motivo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  padding: 12px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.moxr-motivo.moxr-on {
  background: rgba(255, 77, 77, 0.14);
  border-color: rgba(255, 77, 77, 0.6);
  color: #fff;
}

.moxr-motivo-emoji { font-size: 1.15rem; flex: 0 0 auto; }

.moxr-bloquear {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.moxr-bloquear input { width: 18px; height: 18px; accent-color: #ff4d4d; flex: 0 0 auto; }

/* ── FALTAS: lo que la persona penalizada tiene derecho a ver ──────────────
 * Oculto mientras no haya faltas. Nace restringido: un contador en cero no es
 * información, es ruido que enseña a ignorar el recuadro. */
.moxr-faltas {
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 165, 0, 0.1);
  border: 1px solid rgba(255, 165, 0, 0.3);
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 220, 170, 0.95);
  text-align: left;
}

.moxr-faltas.moxr-visible { display: block; }

/* ── BOTONES ───────────────────────────────────────────────────────────────*/
.moxr-acciones { margin-top: 22px; }

.moxr-enviar { width: 100%; }

.moxr-omitir {
  width: 100%;
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #999;
  font-size: 0.92rem;
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.moxr-omitir:active {
  background: rgba(0, 0, 0, 0.4);
}

.moxr-enviar[disabled] { opacity: 0.45; cursor: not-allowed; }

@media (max-height: 640px) {
  .moxr-icono { font-size: 2.4rem; margin-bottom: 8px; }
  .moxr-estrella { font-size: 2.2rem; }
  .moxr-sub { margin-bottom: 14px; }
}

/* GSD-688-septies — EL COMENTARIO DE LA VALORACIÓN RECIBIDA.
 * Vive aquí y no en `rating-notifications.css` para que el estilo de todo lo que
 * es «valoración» esté en un solo archivo; ese otro se retira en el lote de
 * limpieza (DT-090) junto con los modales viejos. */
.rating-notification-comment {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(255, 215, 0, 0.5);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 215, 0, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.45;
  font-style: italic;
  text-align: left;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * GSD-688-duodecies — LISTA DE PERSONAS BLOQUEADAS (en Configuración)
 * Vive en esta hoja porque es la misma familia: lo que se bloquea se bloquea
 * desde la tarjeta de valoración. Un archivo por pantalla es como se llega a
 * tener `rating-premium.css`.
 * ═══════════════════════════════════════════════════════════════════════════ */
#mox-bloqueos-seccion .moxb-titulo {
  color: #ffd700;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 25px 20px 10px 20px;
}

#mox-bloqueos-seccion .moxb-cabecera {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#mox-bloqueos-seccion .moxb-resumen {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

#mox-bloqueos-seccion .moxb-flecha {
  color: rgba(255, 255, 255, 0.45);
  font-size: 1rem;
  margin-left: auto;
  padding-left: 10px;
}

/* Plegada por defecto: `max-height` y no `display:none` para que la apertura
 * tenga transición sin medir el contenido en JavaScript. */
#mox-bloqueos-seccion .moxb-lista {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

#mox-bloqueos-seccion .moxb-lista.moxb-abierta {
  max-height: 70vh;
  overflow-y: auto;
}

#mox-bloqueos-seccion .moxb-vacio {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
  padding: 12px 20px 18px;
  margin: 0;
}

#mox-bloqueos-seccion .moxb-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#mox-bloqueos-seccion .moxb-quien {
  flex: 1;
  min-width: 0;
}

#mox-bloqueos-seccion .moxb-nombre {
  display: block;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mox-bloqueos-seccion .moxb-meta {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

#mox-bloqueos-seccion .moxb-quitar {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  padding: 7px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#mox-bloqueos-seccion .moxb-quitar[disabled] { opacity: 0.5; }