:root {
    --navy: #0b2a6f;
    --magenta: #c5163a;
    --ink: #0b1220;
    --muted: #64748b;
    --bg: #ffffff;
    --soft: #f5f7fb;
    --line: rgba(11,42,111,.14);
    --radius: 18px;
    --shadow: 0 10px 30px rgba(11,18,32,.08);
    --container: 1120px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Compatibilidad temporal si alguna página vieja aún usa .container */
.container {
    width: min(var(--container), calc(100% - 40px));
    margin: 0 auto;
}

/* IMPORTANTE:
   El spacing y layout de secciones ahora lo controla Tailwind.
   No usar reglas globales como section { padding: ... }
*/
/* Fondo general del webchat */
.bpReset {
    --bp-background: #F7FBFF;
    --bp-background-secondary: #EEF6FC;
    --bp-text-color: #1F2937;
    --bp-primary: #67ACD8;
    --bp-primary-hover: #5A9BC6;
    --bp-border-color: #D9E7F2;
    --bp-message-bg-user: #67ACD8;
    --bp-message-bg-bot: #EAF4FB;
    --bp-message-text-user: #FFFFFF;
    --bp-message-text-bot: #1F2937;
    font-family: Inter, sans-serif !important;
}

/* Header */
.bpHeaderContainer,
.bpHeader {
    background: #67ACD8 !important;
    color: #0F172A !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* Área principal */
.bpMessageContainer,
.bpMessageListContainer,
.bpMessagesContainer {
    background: linear-gradient(180deg, #F8FBFE 0%, #EEF6FC 100%) !important;
}

/* Caja del composer */
.bpComposer,
.bpComposerContainer {
    background: #FFFFFF !important;
    border-top: 1px solid #D9E7F2 !important;
}

/* Input */
.bpComposerInput {
    background: #FFFFFF !important;
    color: #1F2937 !important;
}

/* Mensajes bot */
div.bpMessageContainer[data-direction="incoming"] .bpMessageBlocksBubble {
    background: #EAF4FB !important;
    color: #1F2937 !important;
    border: 1px solid #D7E8F4 !important;
}

/* Mensajes usuario */
div.bpMessageContainer[data-direction="outgoing"] .bpMessageBlocksBubble {
    background: #67ACD8 !important;
    color: #FFFFFF !important;
}

/* Footer */
.bpFooter {
    background: #F7FBFF !important;
}

/* Delivered */
.bpReset .bpMessageDeliveryStatus {
    color: #64748B !important;
}
/* Animación utilitaria opcional */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease, transform .8s ease;
}

    .fade-in.show {
        opacity: 1;
        transform: translateY(0);
    }