/* ==========================================================================
   Módulo 04 · Reputación
   Bandeja de reseñas, sentimiento por tema y las reglas de la casa.
   Los componentes viven en componentes.css; aquí solo lo propio del módulo.
   ========================================================================== */

/* ── Bandeja ──────────────────────────────────────────────────────────── */

/* Altura acotada para que el panel de la derecha quede a la vista sin bajar:
   en la llamada, la salvaguarda y la bandeja tienen que verse juntas. */
.bandeja {
  max-height: 660px;
  overflow-y: auto;
}

.bandeja__vacia {
  padding: var(--esp-5) var(--pad-tarjeta);
  text-align: center;
  color: var(--texto-tenue);
  font-size: var(--txt-sm);
}

/* ── Sentimiento por tema ─────────────────────────────────────────────── */

.temas__intro {
  font-size: var(--txt-sm);
  line-height: var(--lh-suelto);
  color: var(--texto-medio);
  margin-bottom: var(--esp-2);
}

.temas__leyenda {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-top: var(--esp-3);
  margin-top: var(--esp-2);
  border-top: var(--borde);
}

.temas__leyenda span {
  font-family: var(--tipo-datos);
  font-size: var(--txt-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* El puente con la Sala de control: el mismo problema, visto desde la reseña. */
.enlace-operacion {
  display: flex;
  gap: var(--esp-3);
  padding: var(--esp-3);
  margin-top: var(--esp-3);
  background: var(--acento-suave);
  border-radius: var(--radio-m);
}

.enlace-operacion__marca {
  width: 3px;
  flex: none;
  border-radius: var(--radio-completo);
  background: var(--acento);
}

.enlace-operacion__texto {
  font-size: var(--txt-sm);
  line-height: var(--lh-suelto);
  color: var(--texto-medio);
}

.enlace-operacion__texto strong {
  display: block;
  font-weight: var(--peso-medio);
  color: var(--texto-fuerte);
  margin-bottom: 2px;
}

/* ── Reglas de la casa ────────────────────────────────────────────────── */

.reglas {
  display: flex;
  flex-direction: column;
}

.regla {
  display: flex;
  gap: var(--esp-3);
  padding: var(--esp-3) 0;
  border-bottom: 1px solid var(--linea-tenue);
}

.regla:first-child { padding-top: 0; }
.regla:last-child { padding-bottom: 0; border-bottom: 0; }

.regla__marca {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  fill: none;
  stroke: var(--fn-exito);
  stroke-width: 1.8;
  stroke-linecap: square;
}

.regla__cuerpo { min-width: 0; }

.regla__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-fuerte);
  line-height: 1.4;
}

.regla__detalle {
  font-size: var(--txt-sm);
  line-height: var(--lh-suelto);
  color: var(--texto-tenue);
  margin-top: 2px;
}

/* Cuando el borrador del modelo no pasó la revisión, se dice por qué. */
.resena__descarte {
  display: block;
  font-size: var(--txt-xs);
  line-height: var(--lh-normal);
  color: var(--fn-advertencia);
  margin-bottom: var(--esp-2);
}

/* ── Nota de cierre ───────────────────────────────────────────────────── */

.nota-salvaguarda {
  font-size: var(--txt-sm);
  line-height: var(--lh-suelto);
  color: var(--texto-medio);
}

.nota-salvaguarda strong {
  font-weight: var(--peso-medio);
  color: var(--texto-fuerte);
}

/* ── Adaptación ───────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  /* Sin dos columnas, la bandeja ya no compite con nada: se suelta. */
  .bandeja { max-height: none; }
}

@media (max-width: 560px) {
  .resena { padding: var(--esp-3); }

  /* La calificación se va abajo del nombre en lugar de apretarlo. */
  .resena__enc {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-2);
  }

  .barra-tema {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: var(--esp-2);
  }

  .barra-tema__variacion { display: none; }

  .resena__acciones .boton { flex: 1; justify-content: center; }
}