/* ==========================================================================
   Chat Acoso — Estilos específicos
   Simulador de chat: burbujas de mensajes y zona de respuesta.
   Acento del módulo Autonomía y hogar (verde --mod-secuencia).
   ========================================================================== */

.centrado-fila { justify-content: center; }
.instruccion { font-weight: 700; }
.titulo-seccion { flex: 1; }
.pregunta { font-size: var(--texto-grande); font-weight: 800; }

/* ---- Chat menu ---- */
.tarjeta-chat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 140px; padding: var(--espacio);
  background: var(--color-superficie); border: 3px solid var(--color-borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  font-family: inherit; color: var(--color-texto);
}
.tarjeta-chat:hover { border-color: var(--mod-secuencia); }
.tarjeta-chat .picto { font-size: 44px; }
.tarjeta-chat .nombre { font-weight: 800; font-size: var(--texto-base); }
.tarjeta-chat .hecho { min-height: 24px; color: var(--color-estrella); font-weight: 700; }

/* ---- Cabecera del chat ---- */
.chat-contacto { display: flex; align-items: center; gap: 12px; flex: 1; }
.chat-avatar {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  font-size: 32px; background: var(--color-fondo);
  border: 2px solid var(--color-borde); border-radius: 50%;
}
.pila-mini { display: flex; flex-direction: column; gap: 2px; }
.chat-alias { font-weight: 800; font-size: var(--texto-base); }
.chat-badge {
  align-self: flex-start; padding: 2px 10px;
  background: var(--color-animo-suave); color: var(--color-animo);
  border: 2px solid var(--color-animo); border-radius: 12px;
  font-size: var(--texto-pequeno); font-weight: 700;
}

/* ---- Marco y burbujas ---- */
.chat-marco {
  padding: var(--espacio); min-height: 220px;
  background: var(--color-superficie); border: 3px solid var(--color-borde);
  border-radius: var(--radio);
}
.burbuja-fila { display: flex; align-items: flex-end; gap: 8px; animation: aparecer 0.3s ease; }
.burbuja-fila.yo { justify-content: flex-end; }
.burbuja-fila.sistema { justify-content: center; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }

.burbuja {
  max-width: 75%; padding: 12px 18px; border-radius: 18px;
  font-size: var(--texto-base); line-height: 1.4;
}
.burbuja.ellos {
  background: var(--color-fondo); border: 2px solid var(--color-borde);
  border-bottom-left-radius: 6px;
}
.burbuja.yo {
  background: var(--mod-secuencia-suave); border: 2px solid var(--mod-secuencia);
  border-bottom-right-radius: 6px; font-weight: 700;
}
.burbuja.sistema {
  background: var(--color-acierto-suave); border: 2px solid var(--color-acierto);
  color: var(--color-acierto); font-weight: 700; text-align: center;
}
.btn-burbuja { flex: none; padding: 8px; }

/* ---- Consejo tras una respuesta arriesgada (nunca punitivo) ---- */
.consejo {
  display: flex; align-items: center; gap: var(--espacio);
  padding: var(--espacio);
  background: var(--color-animo-suave); border: 3px solid var(--color-animo);
  border-radius: var(--radio);
}
.consejo p { flex: 1; font-weight: 700; color: var(--color-texto); }

/* ---- Aviso tras una respuesta segura (mismo hueco, color de acierto) ---- */
.consejo-seguro {
  background: var(--color-acierto-suave);
  border-color: var(--color-acierto);
}

/* ---- Final action button ---- */
.btn-bloquear { background: var(--mod-secuencia); align-self: center; }

/* ---- Norma final del chat ---- */
.regla-final {
  display: flex; flex-direction: column; gap: var(--espacio);
  padding: var(--espacio-grande); text-align: center;
  background: var(--color-acierto-suave); border: 3px solid var(--color-acierto);
  border-radius: var(--radio);
}
.regla-final h3 { color: var(--color-acierto); }
.regla-final p { font-size: var(--texto-grande); font-weight: 700; }

/* ---- Lista de normas ---- */
.norma {
  display: flex; align-items: center; gap: var(--espacio);
  padding: var(--espacio);
  background: var(--color-superficie); border: 3px solid var(--color-borde);
  border-radius: var(--radio);
}
.norma p { flex: 1; font-weight: 700; }

/* ---- Small screens ---- */
@media (max-width: 640px) {
  .burbuja { max-width: 90%; }
  .chat-marco { min-height: 160px; }
}