/* =========================================
   CRM & BOTS - ESTILOS ESPECÍFICOS
   Fondo: Blanco Puro (#FFFFFF)
   ========================================= */

/* --- CHAT SIMULATION UI --- */
.chat-interface {
    background: #FFFFFF; /* BLANCO PURO */
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    padding: 20px;
    font-family: var(--font-body);
    max-width: 400px;
    margin: 0 auto;
}

.chat-bubble {
    padding: 12px 18px;
    border-radius: 18px;
    font-size: 0.95rem;
    margin-bottom: 12px;
    max-width: 85%;
    position: relative;
    border: 1px solid transparent;
}

/* Mensaje del BOT (Fondo Blanco con borde sutil en vez de gris) */
.chat-bubble.bot {
    background: #FFFFFF; /* BLANCO */
    border: 1px solid rgba(104, 101, 241, 0.2); /* Borde Índigo suave */
    color: var(--text-main);
    border-bottom-left-radius: 4px;
    margin-right: auto;
}
.chat-bubble.bot::before {
    content: '🤖';
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 1.2rem;
}

/* Mensaje del USUARIO */
.chat-bubble.user {
    background: var(--brand-red); 
    color: white;
    border-bottom-right-radius: 4px;
    margin-left: auto;
    box-shadow: 0 4px 15px rgba(253, 131, 3, 0.2);
}

/* --- FLOW CONNECTOR --- */
.flow-arrow {
    font-size: 2rem;
    color: var(--brand-yellow);
    opacity: 0.3;
}

/* --- CRM DASHBOARD CARD --- */
.stat-card {
    border-left: 4px solid var(--brand-red);
    background: #FFFFFF; /* BLANCO PURO */
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.05); /* Borde sutil */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.stat-number {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.5rem;
    color: var(--text-main);
}