/* === Variables de marca === */
:root {
    --brand-blue: #192AF2; /* Azul principal */
    --brand-pink: #EE16EA; /* Rosa/fucsia */
    --brand-black: #000000; /* Negro */
    /* Opcionales (tonos intermedios del logo) */
    --brand-blue-2: #4E5BF9;
    --brand-violet: #5D24F6;
    /* === Sobrescritura de variables Bootstrap 5.3 === */
    --bs-primary: var(--brand-blue);
    --bs-link-color: var(--brand-blue);
    --bs-link-hover-color: color-mix(in srgb, var(--brand-blue) 85%, black 15%);
    --bs-border-color: color-mix(in srgb, var(--brand-blue) 15%, #dee2e6 85%);
    --bs-focus-ring-color: color-mix(in srgb, var(--brand-blue) 25%, transparent);
    /* Botones */
    --bs-btn-bg: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand-blue) 85%, black 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-blue) 85%, black 15%);
}

/* === Utilidades de marca === */
.text-brand {
    color: var(--brand-blue) !important;
}

.text-brand-pink {
    color: var(--brand-pink) !important;
}

.text-brand-dark {
    color: var(--brand-black) !important;
}

.bg-brand {
    background-color: var(--brand-blue) !important;
    color: #fff !important;
}

.bg-brand-pink {
    background-color: var(--brand-pink) !important;
    color: #fff !important;
}

.border-brand {
    border-color: var(--brand-blue) !important;
}

.border-brand-pink {
    border-color: var(--brand-pink) !important;
}

/* Gradiente típico del logo (azul→violeta→rosa) para headers/navs */
.bg-brand-gradient {
    background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-blue-2) 45%, var(--brand-violet) 70%, var(--brand-pink) 100% ) !important;
    color: #fff !important;
}

/* Navbar y header (opcional) */
.navbar-brand, .navbar-nav .nav-link {
    color: #fff !important;
}

.navbar.bg-brand, .navbar.bg-brand-gradient {
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Campos de formulario con acento corporativo */
.form-control:focus, .form-select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-blue) 25%, transparent);
}

/* Botón “de marca” adicional (aparte del .btn-primary) */
.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand-blue) 85%, black 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-blue) 85%, black 15%);
    --bs-btn-focus-shadow-rgb: 25,42,242; /* rgb de #192AF2 */
}

/* Badges y pillas con rosa corporativo */
.badge-brand-pink {
    background-color: var(--brand-pink) !important;
    color: #fff !important;
}

/* Links con subrayado al pasar */
a.text-brand:hover,
a.text-brand-pink:hover {
    text-decoration: underline;
}

/* Tarjetas con borde acentuado */
.card.border-brand {
    border-width: 2px;
}

/* === Paleta === */
:root {
    --brand-blue: #192AF2; /* azul logo */
    --brand-pink: #EE16EA; /* fucsia logo */
    --brand-black: #000000;
    --brand-blue-2: #4E5BF9;
    --brand-violet: #5D24F6;
    /* sigue siendo útil definir esto */
    --bs-primary: var(--brand-blue);
    --bs-link-color: var(--brand-blue);
    --bs-link-hover-color: color-mix(in srgb, var(--brand-blue) 85%, black 15%);
}

/* ===== NAVBAR: mantén tu clase bg-dark y lo recoloreamos ===== */
.bg-dark {
    background-color: var(--brand-blue) !important;
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand {
    color: #fff !important;
}

.navbar {
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

    /* Si prefieres el degradado sin cambiar HTML, usa .navbar.bg-dark.gradient */
    .navbar.bg-dark.gradient {
        background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-blue-2) 45%, var(--brand-violet) 70%, var(--brand-pink) 100% ) !important;
    }

/* ===== BOTONES: sobrescribimos variables específicas ===== */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand-blue) 85%, black 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-blue) 85%, black 15%);
    --bs-btn-focus-shadow-rgb: 25,42,242; /* rgb de #192AF2 */
}

/* Usas btn-success: lo rebrandizamos a fucsia para que no cambies HTML */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-pink);
    --bs-btn-border-color: var(--brand-pink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand-pink) 85%, black 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-pink) 85%, black 15%);
    --bs-btn-focus-shadow-rgb: 238,22,234; /* rgb de #EE16EA */
}

/* ===== FORM CONTROLS ===== */
.form-control {
    border-color: color-mix(in srgb, var(--brand-blue) 20%, #dee2e6 80%);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-blue) 25%, transparent);
    }

/* Utilidades opcionales */
.text-brand {
    color: var(--brand-blue) !important;
}

.text-brand-pink {
    color: var(--brand-pink) !important;
}

.border-brand {
    border-color: var(--brand-blue) !important;
}