/* ==========================================================================
   Módulo 03 · Agente de WhatsApp
   El teléfono y sus burbujas viven en componentes.css, con los únicos colores
   fuera del kit en todo el proyecto. Aquí solo lo propio del módulo: el marco
   que lo rodea, que sigue siendo MUFAH.
   ========================================================================== */

/* La tarjeta del chat ocupa el alto de la pantalla, como el panel del agente
   del módulo 01: una conversación corta no debe dejar la columna a medias. */
.tarjeta--chat {
  height: calc(100vh - var(--alto-encabezado) - var(--pad-vista) * 2);
  min-height: 560px;
}

.tarjeta--chat .tarjeta__cuerpo--plano {
  display: flex;
  min-height: 0;
}

/* El avatar del local: iniciales, sin logo, porque en WhatsApp es la foto del
   contacto y el local no tiene marca propia en esta demostración. */
.telefono__avatar {
  font-family: var(--tipo-titulos);
  font-size: var(--txt-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.02em;
}

/* ── Panel de proceso ─────────────────────────────────────────────────── */

.proceso__intro {
  font-size: var(--txt-sm);
  line-height: var(--lh-suelto);
  color: var(--texto-medio);
  padding-bottom: var(--esp-3);
  margin-bottom: var(--esp-3);
  border-bottom: var(--borde);
}

/* Un paso que no se ejecutó en esta respuesta se apaga del todo, para que se
   vea que la secuencia refleja lo ocurrido y no una animación de adorno. */
.hito--omitido .hito__titulo,
.hito--omitido .hito__desc,
.hito--omitido .hito__cuando { color: var(--gris-300); }

.hito--omitido .hito__marca {
  border-color: var(--gris-200);
  background: var(--superficie-alta);
}

.hito__detalle {
  display: block;
  margin-top: var(--esp-1);
  font-family: var(--tipo-datos);
  font-size: var(--txt-xs);
  color: var(--acento);
  line-height: var(--lh-normal);
}

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

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

/* ── Ajustes en pantallas menores ─────────────────────────────────────── */

@media (max-width: 1080px) {
  /* Sin columna lateral fija, el chat toma una altura cómoda en lugar de la
     pantalla completa. */
  .tarjeta--chat {
    height: auto;
    min-height: 0;
  }

  .telefono__hilo { max-height: 460px; }
}