/* Chat Seguro: chat bubbles and response area. */
.row { display: flex; align-items: center; gap: var(--espacio); flex-wrap: wrap; }
.centered, .centered-row { text-align: center; justify-content: center; }
.instruccion { font-weight: 700; }
.titulo-seccion { flex: 1; }
.pregunta { font-size: var(--texto-grande); font-weight: 800; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espacio); }
.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 .name { font-weight: 800; font-size: var(--texto-base); }
.tarjeta-chat .done { min-height: 24px; color: var(--color-estrella); font-weight: 700; }
.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; }
.chat-marco { padding: var(--espacio); min-height: 220px; background: var(--color-superficie); border: 3px solid var(--color-borde); border-radius: var(--radio); }
.chat-mensajes { gap: 12px; min-height: 160px; }
.burbuja-row { display: flex; align-items: flex-end; width: 100%; animation: aparecer 0.3s ease; }
.burbuja-row.ellos { justify-content: flex-start; }
.burbuja-row.yo { justify-content: flex-end; }
.burbuja-row.sistema { justify-content: center; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }
.burbuja { max-width: 82%; 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; }
.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); }
.consejo-seguro { background: var(--color-acierto-suave); border-color: var(--color-acierto); }
.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; }
.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; }
@media (max-width: 640px) { .burbuja { max-width: 94%; } .chat-marco { min-height: 160px; } }