/* ══════════════════════════════════════════════
   Asistente IA de Asistencia Médica — puente de color
   ══════════════════════════════════════════════

   NO redefine estilos: solo re-mapea las variables del widget (chat.css) a la
   paleta del portal de /cotimedica/ (static/stylecotam/<portal>.css). El widget
   nació con el azul del cotizador vehicular y en AM desentonaba: Broktech es
   teal, Tecsup naranja, MGA navy.

   Como los tres portales declaran los MISMOS nombres de variable
   (--primary, --primary-lt, --accent…), este archivo sirve para todos y el
   color sale solo del tema que baseam.html haya cargado. Los fallbacks son el
   azul original, por si el widget se incrusta en una página sin tema.

   Se carga DESPUÉS de chat.css (ver _widget_chat_am.html). */

:root {
    --cotia-primary:      var(--primary, #1d4ed8);
    --cotia-primary-2:    var(--primary-lt, #3b82f6);
    --cotia-suave:        var(--primary-xlt, #eef2ff);
    --cotia-borde-fuerte: var(--primary-lt, #93c5fd);

    /* Tintes translúcidos (sombra del FAB, halo, bordes de la nube). color-mix
       los deriva del color de marca en vez de dejarlos azules; si el navegador
       no lo soporta, la declaración anterior (rgba azul de chat.css) queda. */
    --cotia-tinte-12:     color-mix(in srgb, var(--primary-lt, #2563eb) 12%, transparent);
    --cotia-tinte-15:     color-mix(in srgb, var(--primary-lt, #2563eb) 15%, transparent);
    --cotia-tinte-55:     color-mix(in srgb, var(--primary-lt, #2563eb) 55%, transparent);
    --cotia-tinte-65:     color-mix(in srgb, var(--primary-lt, #2563eb) 65%, transparent);
    --cotia-anillo:       color-mix(in srgb, var(--accent, #3b82f6) 60%, transparent);

    /* Los suaves salen del primario en vez de un celeste fijo: sobre un tema
       teal o naranja, un chip celeste canta. */
    --cotia-suave-2:      color-mix(in srgb, var(--primary-lt, #2563eb) 18%, #fff);
    --cotia-borde:        color-mix(in srgb, var(--primary-lt, #2563eb) 35%, #fff);
    --cotia-elegido:      color-mix(in srgb, var(--accent, #2563eb) 22%, #fff);
}

/* ══════════════════════════════════════════════
   ALMA — identidad del asistente
   ══════════════════════════════════════════════

   El widget dejó de ser "el bot": tiene nombre (ALMA) y una marca propia, el
   glifo de corazón con pulso — salud y acompañamiento, no un robot. Acá solo se
   viste esa identidad; el color sigue saliendo del tema del portal
   (static/stylecotam/<portal>.css), nunca de un hex suelto. */

.cotia-alma-glifo {
    display: block;
    width: 30px;
    height: 30px;
}

.cotia-fab-label {
    font-size: .5rem;
    letter-spacing: .12em;
}

.cotia-header-avatar {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .34);
}

.cotia-header-avatar .cotia-alma-glifo {
    width: 20px;
    height: 20px;
}

.cotia-header-title {
    letter-spacing: .05em;
}

/* La nube de saludo es la voz de ALMA antes de que el chat se abra: el filo
   naranja —el único naranja del portal, reservado a los CTA— la marca como
   invitación y no como aviso. */
.cotia-tooltip {
    border-left: 3px solid var(--accent, #E38A2B);
}

/* Sus respuestas van sobre un tinte del primario en vez de blanco puro: se
   leen como voz de ALMA sin sumar un color nuevo a la paleta. */
.cotia-msg.bot {
    background: color-mix(in srgb, var(--primary-xlt, #E3ECF4) 55%, #fff);
    border-color: color-mix(in srgb, var(--primary-lt, #4488AD) 22%, #fff);
}

.cotia-mensajes {
    background: color-mix(in srgb, var(--primary-xlt, #E3ECF4) 35%, #fff);
}