/* Circle of Trust — tool-specific styles. Shared styles live in assets/css/. */

.tool-header h1 { color: var(--mod-emocional); }

.btn:not(.btn-secundario):not(.btn-audio) {
  background: var(--mod-emocional);
}

.contexto {
  font-size: var(--texto-pequeno);
  color: var(--color-texto-suave);
}

.instruccion { font-size: var(--texto-base); }

.centrado-fila { justify-content: center; }

.dificultad {
  font-size: var(--texto-pequeno);
  color: var(--color-texto-secundario, #666);
}

.progress-bar { margin-top: var(--espacio); }

.card { border-color: var(--mod-emocional-suave); margin-top: var(--espacio-grande); }

.situacion-picto { font-size: 64px; }

.texto-principal {
  font-size: var(--texto-grande);
  font-weight: 700;
  margin: 0 auto;
}

.pregunta { color: var(--color-texto-suave); }

.emoji-grande { font-size: 96px; }

#pantallaFinal { padding-top: 48px; }

#pantallaFinal .btn { align-self: center; min-width: 280px; }

/* Intro screen: friend / classmate / acquaintance cards */
#pantallaIntro { align-items: center; }

.intro-titulo {
  font-size: var(--texto-grande);
  color: var(--mod-emocional);
  text-align: center;
  margin-bottom: var(--espacio-grande);
  font-weight: 700;
}

.tarjetas-intro {
  display: flex;
  flex-direction: column;
  gap: var(--espacio);
  width: 100%;
  max-width: 520px;
  margin-bottom: var(--espacio-grande);
}

.tarjeta-intro {
  background: #fff;
  border-radius: 16px;
  padding: var(--espacio) var(--espacio-medio);
  border-left: 5px solid;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: flex-start;
  gap: var(--espacio);
}

.tarjeta-intro:nth-child(1) { border-color: #F5C842; }
.tarjeta-intro:nth-child(2) { border-color: #4CAF7D; }
.tarjeta-intro:nth-child(3) { border-color: #5BA3D9; }

.tarjeta-picto { font-size: 40px; flex-shrink: 0; }

.tarjeta-intro h3 {
  margin: 0 0 4px;
  font-size: var(--texto-base);
  color: var(--color-texto);
}

.tarjeta-intro p {
  margin: 0;
  font-size: var(--texto-pequeno);
  color: var(--color-texto-suave);
  line-height: 1.5;
}

#pantallaFinal .transferencia {
  margin: 8px auto 24px;
  font-size: 1.1rem;
  color: var(--color-texto-suave);
  max-width: 480px;
}