/* BreatheFree: identidad visual sobre Bootstrap 5.3. Diseño móvil primero. */

:root {
    /* Colores tomados del logo */
    --bf-blue: #0b5cc4;
    --bf-blue-dark: #08408a;
    --bf-cyan: #00b4e6;
    --bf-green: #12a36b;
    --bf-navy: #0b2a4a;
    --bf-muted: #4a5f73;
    --bf-surface: #ffffff;
    --bf-bg: #eef6fb;
    --bf-line: #d5e4ef;
    --bf-soft-blue: #e3f0fd;

    --bf-nav-height: 4.75rem;
    --bf-header-height: 3.5rem;
    --bf-gutter: 1rem;

    /* Ajustes de Bootstrap */
    --bs-primary: var(--bf-blue);
    --bs-primary-rgb: 11, 92, 196;
    --bs-success: var(--bf-green);
    --bs-body-color: var(--bf-navy);
    --bs-body-bg: var(--bf-bg);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.55;
    --bs-link-color: var(--bf-blue);
    --bs-link-hover-color: var(--bf-blue-dark);
    --bs-border-color: var(--bf-line);
    --bs-border-radius: 0.875rem;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(180deg, #f4fbfb 0%, var(--bf-bg) 40%, #e6f1fb 100%) fixed;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bf-navy);
}

:focus-visible {
    outline: 3px solid var(--bf-cyan);
    outline-offset: 2px;
}

/* Botones */
.btn {
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    border-radius: 999px;
}

.btn-primary {
    --bs-btn-bg: var(--bf-blue);
    --bs-btn-border-color: var(--bf-blue);
    --bs-btn-hover-bg: var(--bf-blue-dark);
    --bs-btn-hover-border-color: var(--bf-blue-dark);
    --bs-btn-active-bg: var(--bf-blue-dark);
    --bs-btn-active-border-color: var(--bf-blue-dark);
    --bs-btn-disabled-bg: var(--bf-blue);
    --bs-btn-disabled-border-color: var(--bf-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--bf-blue);
    --bs-btn-border-color: var(--bf-blue);
    --bs-btn-hover-bg: var(--bf-blue);
    --bs-btn-hover-border-color: var(--bf-blue);
    --bs-btn-active-bg: var(--bf-blue-dark);
    --bs-btn-active-border-color: var(--bf-blue-dark);
}

/* Iconos */
.bf-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Cabecera */
.bf-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--bf-surface);
    border-bottom: 1px solid var(--bf-line);
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.bf-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--bf-header-height);
    padding: 0.375rem var(--bf-gutter);
}

.bf-brand {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.bf-brand img {
    display: block;
    height: 2.25rem;
    width: auto;
    max-width: 100%;
}

.bf-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    font: inherit;
    font-weight: 600;
    color: var(--bf-blue);
    background: var(--bf-soft-blue);
    border: 0;
    border-radius: 999px;
}

/* Navegación: barra inferior en celular */
.bf-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--bf-surface);
    border-top: 1px solid var(--bf-line);
    box-shadow: 0 -4px 16px rgba(11, 42, 74, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.bf-nav-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: var(--bf-nav-height);
    padding: 1.25rem 0.25rem 0.375rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bf-muted);
    text-decoration: none;
    background: none;
    border: 0;
}

.bf-nav-link:hover {
    color: var(--bf-blue);
}

.bf-nav-link[aria-current="page"] {
    color: var(--bf-blue);
}

.bf-nav-link[aria-current="page"] .bf-icon {
    stroke-width: 2.3;
}

.bf-soon {
    position: absolute;
    top: 0.25rem;
    right: 0;
    padding: 0 0.3125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.1rem;
    color: #fff;
    background: var(--bf-green);
    border-radius: 999px;
}

/* Contenido: espacio para la barra inferior fija */
.bf-main {
    padding-top: 1.25rem;
    padding-bottom: calc(var(--bf-nav-height) + env(safe-area-inset-bottom, 0px) + 1.5rem);
    padding-left: max(var(--bf-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--bf-gutter), env(safe-area-inset-right, 0px));
}

/* Tarjetas */
.bf-card {
    padding: 1.5rem 1.25rem;
    background: var(--bf-surface);
    border: 1px solid var(--bf-line);
    border-radius: 1.25rem;
    box-shadow: 0 6px 20px rgba(11, 42, 74, 0.07);
}

.bf-card-title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

/* Rejilla de tarjetas: una columna en celular, más columnas según el ancho */
.bf-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;
}

/* Portada */
.bf-hero {
    max-width: 36rem;
    margin: 1rem auto 0;
    text-align: center;
}

.bf-hero h1 {
    margin: 0 0 0.75rem;
}

.bf-logo {
    display: block;
    width: 100%;
    max-width: 26rem;
    height: auto;
    margin: 0 auto;
}

.bf-hello {
    margin: 0;
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    font-weight: 700;
    color: var(--bf-blue);
}

/* Aviso de funciones pendientes */
.bf-notice {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bf-nav-height) + env(safe-area-inset-bottom, 0px) + 0.75rem);
    z-index: 1040;
    width: max-content;
    max-width: calc(100% - 2rem);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    background: var(--bf-navy);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(11, 42, 74, 0.3);
    transform: translateX(-50%);
}

/* Tablet y escritorio: navegación en la barra superior */
@media (min-width: 768px) {
    :root {
        --bf-gutter: 1.5rem;
        --bf-header-height: 4rem;
    }

    .bf-header-inner {
        max-width: 80rem;
        margin: 0 auto;
    }

    .bf-brand img {
        height: 2.5rem;
    }

    .bf-nav {
        position: static;
        display: flex;
        flex: 1;
        justify-content: center;
        gap: 0.125rem;
        min-width: 0;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .bf-nav-link {
        flex-direction: row;
        gap: 0.5rem;
        min-height: 2.75rem;
        padding: 0 0.5rem;
        font-size: 0.875rem;
        white-space: nowrap;
        border-radius: 999px;
    }

    .bf-nav-link:hover,
    .bf-nav-link[aria-current="page"] {
        background: var(--bf-soft-blue);
    }

    /* Tablet: la etiqueta "Pronto" se reduce a un punto sobre el icono */
    .bf-soon {
        top: 0.5rem;
        left: 1.625rem;
        right: auto;
        width: 0.5rem;
        height: 0.5rem;
        padding: 0;
        font-size: 0;
    }

    .bf-main {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .bf-card {
        padding: 2rem;
    }

    .bf-notice {
        bottom: 1.5rem;
    }
}

@media (min-width: 992px) {
    .bf-nav-link {
        padding: 0 0.625rem;
        font-size: 0.9375rem;
    }

    .bf-header-inner {
        gap: 1rem;
    }
}

@media (min-width: 1200px) {
    .bf-nav-link {
        padding: 0 1rem;
    }

    .bf-soon {
        position: static;
        width: auto;
        height: auto;
        padding: 0 0.375rem;
        font-size: 0.625rem;
    }
}

/* Inicio de sesión */
.bf-auth {
    max-width: 28rem;
    margin: 0.5rem auto 0;
}

.bf-auth .form-control {
    background-color: #fff;
    border-color: #8fa3b5;
    min-height: 3rem;
}

.invalid-feedback {
    color: #b02a37;
    font-weight: 600;
}

.bf-profile {
    text-decoration: none;
}

.bf-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--bf-muted);
}

.bf-divider::before,
.bf-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--bf-line);
}

.bf-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--bf-navy);
    background: #fff;
    border: 1px solid #8fa3b5;
}

.bf-google:hover {
    background: var(--bf-soft-blue);
}

.bf-google:disabled {
    color: var(--bf-muted);
    background: #f3f6f9;
    border-color: var(--bf-line);
}

.bf-google-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

.form-text {
    color: var(--bf-muted);
}

.bf-link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.bf-auth .form-text {
    margin-top: 0.25rem;
}

/* Acciones de la cabecera (perfil y salir) */
.bf-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bf-header-actions {
    min-width: 0;
}

.bf-header-actions form {
    flex: none;
    margin: 0;
}

/* El nombre del perfil se corta con puntos suspensivos para no desbordar la cabecera */
.bf-profile-name {
    min-width: 0;
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .bf-profile-name { max-width: 12rem; }
}

/* Prueba inicial */
.bf-eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bf-blue);
}

.bf-required-note {
    padding: 0.75rem 1rem;
    font-weight: 600;
    background: var(--bf-soft-blue);
    border-radius: 0.75rem;
}

.bf-assessment {
    max-width: 40rem;
    margin: 0 auto;
}

.bf-progress-sticky {
    position: sticky;
    top: calc(var(--bf-header-height) + 1px + env(safe-area-inset-top, 0px));
    z-index: 1020;
    max-width: 40rem;
    margin: -0.5rem auto 0.75rem;
    padding: 0.625rem 0 0.5rem;
    background: var(--bf-bg);
}

.bf-progress-sticky .progress {
    height: 0.625rem;
    background: var(--bf-line);
    border-radius: 999px;
}

.bf-progress-sticky .progress-bar {
    background: linear-gradient(90deg, var(--bf-blue), var(--bf-cyan));
    transition: width 0.25s ease;
}

.bf-question {
    margin: 0 0 1rem;
    min-width: 0;
    scroll-margin-top: calc(var(--bf-header-height) + 5rem);
}

.bf-question.is-pending {
    border-color: #b02a37;
    box-shadow: 0 0 0 2px rgba(176, 42, 55, 0.25);
}

.bf-question-title {
    float: left;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bf-navy);
}

.bf-question-number {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--bf-muted);
}

.bf-question-error {
    margin: -0.25rem 0 0.75rem;
    font-weight: 600;
    color: #b02a37;
}

.bf-options {
    display: grid;
    gap: 0.5rem;
}

.bf-option {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.625rem 1rem;
    font-weight: 500;
    text-align: left;
    border-width: 2px;
    border-radius: 0.875rem;
}

.btn-check:checked + .bf-option {
    font-weight: 700;
}

/* Resultado */
.bf-result {
    max-width: 40rem;
    margin: 0.5rem auto 0;
}

.bf-score {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    color: var(--bf-blue);
}

.bf-score strong {
    font-size: 2rem;
}

.bf-result-message {
    margin: 0;
}

.bf-scale {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bf-scale-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 1rem;
    background: #f6fafd;
    border: 2px solid var(--bf-line);
    border-radius: 0.875rem;
}

.bf-scale-item.is-current {
    background: var(--bf-soft-blue);
    border-color: var(--bf-blue);
}

.bf-scale-range {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--bf-muted);
}

.bf-scale-name {
    font-weight: 600;
}

.bf-scale-you {
    align-self: flex-start;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4rem;
    color: #fff;
    background: var(--bf-blue);
    border-radius: 999px;
}

@media (min-width: 768px) {
    .bf-scale {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bf-question-title + * {
    clear: left;
}

/* Perfil */
.bf-profile-page {
    max-width: 40rem;
    margin: 0 auto;
}

.bf-account-email {
    margin: 0 0 1rem;
    overflow-wrap: anywhere;
    color: var(--bf-muted);
}

.bf-legend {
    float: none;
    width: auto;
    padding: 0;
    font-size: 1rem;
}

.bf-profile-page .form-control {
    min-height: 3rem;
    background-color: #fff;
    border-color: #8fa3b5;
}

.bf-profile[aria-current="page"] {
    background: var(--bf-blue);
    color: #fff;
}

/* Chat con Ángela */
.bf-chat {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 44rem;
    min-height: calc(100dvh - var(--bf-header-height) - var(--bf-nav-height) - 3.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: 0 auto;
}

.bf-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.bf-new-chat {
    min-height: 2.75rem;
    white-space: nowrap;
}

.bf-chat-note {
    margin: 0;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--bf-muted);
    background: var(--bf-soft-blue);
    border-radius: 0.75rem;
}

.bf-chat-messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.625rem;
}

.bf-msg {
    display: flex;
    max-width: 88%;
}

.bf-msg-user {
    align-self: flex-end;
}

.bf-msg-assistant {
    align-self: flex-start;
}

.bf-msg[hidden] {
    display: none;
}

.bf-msg-bubble {
    padding: 0.625rem 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border-radius: 1.125rem;
}

.bf-msg-user .bf-msg-bubble {
    color: #fff;
    background: var(--bf-blue);
    border-bottom-right-radius: 0.375rem;
}

.bf-msg-assistant .bf-msg-bubble {
    color: var(--bf-navy);
    background: var(--bf-surface);
    border: 1px solid var(--bf-line);
    border-bottom-left-radius: 0.375rem;
}

.bf-msg-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    align-self: stretch;
    padding: 0.625rem 0.875rem;
    font-weight: 600;
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f1aeb5;
    border-radius: 0.875rem;
}

.bf-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.5rem;
}

.bf-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--bf-muted);
    border-radius: 50%;
    animation: bf-bounce 1.2s infinite ease-in-out;
}

.bf-dot:nth-child(3) { animation-delay: 0.15s; }
.bf-dot:nth-child(4) { animation-delay: 0.3s; }

@keyframes bf-bounce {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-0.25rem); }
}

@media (prefers-reduced-motion: reduce) {
    .bf-dot { animation: none; }
}

.bf-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bf-suggestions[hidden] {
    display: none;
}

.bf-suggestion {
    font-size: 0.9375rem;
    background: #fff;
}

.bf-composer {
    position: sticky;
    bottom: calc(var(--bf-nav-height) + env(safe-area-inset-bottom, 0px) + 0.5rem);
    z-index: 1010;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bf-surface);
    border: 1px solid #8fa3b5;
    border-radius: 1.5rem;
    box-shadow: 0 6px 20px rgba(11, 42, 74, 0.12);
}

.bf-composer textarea {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    max-height: 8rem;
    padding: 0.625rem 0.75rem;
    font: inherit;
    font-size: 1rem;
    color: var(--bf-navy);
    resize: none;
    background: transparent;
    border: 0;
}

.bf-composer textarea:focus { outline: none; }
.bf-composer:focus-within { border-color: var(--bf-blue); box-shadow: 0 0 0 3px rgba(11, 92, 196, 0.2); }

.bf-send {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 50%;
}

/* Teclado abierto en el celular: la barra inferior se oculta para dejar espacio al cuadro de texto */
@media (max-width: 767.98px) {
    body.bf-composing .bf-nav { display: none; }
    body.bf-composing .bf-composer { bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem); }
}

@media (min-width: 768px) {
    .bf-chat { min-height: calc(100dvh - var(--bf-header-height) - 5rem); }
    .bf-composer { bottom: 1rem; }
    .bf-msg { max-width: 78%; }
}

/* Progreso y desafíos */
.bf-challenges, .bf-challenge-page { max-width: 44rem; margin: 0 auto; }

.bf-points-big { margin: 0 0 0.25rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.bf-points-big strong { font-size: 2.5rem; line-height: 1; color: var(--bf-blue); }
.bf-points-big span { font-size: 1.125rem; color: var(--bf-muted); }

.bf-progress-summary .progress { height: 0.75rem; background: var(--bf-line); border-radius: 999px; }
.bf-progress-summary .progress-bar { background: linear-gradient(90deg, var(--bf-green), var(--bf-cyan)); }

.bf-muted-note { font-size: 0.875rem; line-height: 1.45; color: var(--bf-muted); }

.bf-initial-card { border-left: 0.375rem solid var(--bf-cyan); }
.bf-initial-level { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 700; color: var(--bf-navy); }

.bf-level-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }

.bf-chip { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; font-size: 0.8125rem; font-weight: 700; line-height: 1.5; color: var(--bf-blue-dark); background: var(--bf-soft-blue); border-radius: 999px; white-space: nowrap; }
.bf-chip-suggested { color: #0b5d3b; background: #d8f3e6; font-weight: 600; white-space: normal; }

.bf-challenge-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.125rem; }
.bf-challenge-card.is-completed { border-color: #9fd9bd; background: #fbfffd; }
.bf-challenge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.bf-challenge-head .bf-card-title { font-size: 1.0625rem; }
.bf-challenge-desc { margin: 0; color: var(--bf-muted); }
.bf-challenge-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.5rem; }

.bf-status { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; color: var(--bf-muted); }
.bf-status-done { color: #0b5d3b; }
.bf-status .bf-icon { width: 1.25rem; height: 1.25rem; }

.bf-back-link { display: inline-block; margin-bottom: 0.75rem; padding: 0.5rem 0; font-weight: 600; text-decoration: none; }
.bf-challenge-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }

.bf-prompt { font-size: 1.125rem; font-weight: 600; color: var(--bf-navy); }
.bf-saved-text { margin: 0 0 0.75rem; padding: 0.75rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bf-soft-blue); border-left: 0.25rem solid var(--bf-blue); border-radius: 0.5rem; }
.bf-contact-box { padding: 0.75rem 1rem; overflow-wrap: anywhere; background: var(--bf-soft-blue); border-radius: 0.75rem; }

.bf-video { margin: 0 0 1rem; }
.bf-video .ratio { overflow: hidden; background: #000; border-radius: 0.875rem; }
.bf-video figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--bf-muted); }
.bf-video-link { display: inline-block; margin-top: 0.25rem; padding: 0.375rem 0; font-weight: 600; }

.bf-points-alert { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.bf-points-alert .bf-icon { flex: none; }

/* Avatar de Ángela (decorativo): imagen circular con transparencia, proporción 1:1 sin recortes */
.bf-chat-id { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }

.bf-chat-avatar {
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 2px 6px rgba(11, 42, 74, 0.18));
}

/* Avatar de Ángela junto a cada uno de sus mensajes: mismo tamaño y separación, alineado con la parte superior */
.bf-msg-assistant { align-items: flex-start; gap: 0.5rem; }

.bf-msg-avatar {
    flex: none;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    border-radius: 50%;
}

@media (max-width: 419.98px) {
    .bf-chat-avatar { width: 2.75rem; height: 2.75rem; }
}

/* Avatar de Ángela en la navegación (reemplaza al icono de chat) */
.bf-nav-avatar {
    flex: none;
    width: 1.625rem;
    height: 1.625rem;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow 0.15s ease;
}

.bf-nav-link[aria-current="page"] .bf-nav-avatar { box-shadow: 0 0 0 2px var(--bf-blue); }