﻿:root {
    --brand-primary: #e83e8c;
    --brand-primary-dark: #c2185b;
    --brand-secondary: #ffb3d1;
    --brand-soft: #fff0f6;
    --brand-accent: #ffdd00;
    --brand-text: #2b2b2b;
    --bs-primary: #e83e8c;
    --bs-primary-rgb: 232, 62, 140;
}

/* Fondo general */
body {
    background: linear-gradient(180deg, var(--brand-soft) 0%, #f8f9fa 45%, #ffffff 100%);
}

/* Navbar principal */
.navbar-custom {
    background: linear-gradient(90deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%) !important;
    box-shadow: 0 4px 14px rgba(194, 24, 91, 0.25);
}

/* Marca de tienda */
.navbar-brand .brand-highlight {
    color: var(--brand-accent) !important;
}

/* Botones Bootstrap adaptados */
.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

    .btn-primary:hover {
        background-color: var(--brand-primary-dark) !important;
        border-color: var(--brand-primary-dark) !important;
    }

.btn-success {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

    .btn-success:hover {
        background-color: var(--brand-primary-dark) !important;
        border-color: var(--brand-primary-dark) !important;
    }

/* Textos y fondos Bootstrap */
.text-primary {
    color: var(--brand-primary) !important;
}

.bg-primary {
    background-color: var(--brand-primary) !important;
}

.border-primary {
    border-color: var(--brand-primary) !important;
}

/* Cards */
.card {
    border-radius: 18px;
}

    .card:hover {
        box-shadow: 0 15px 25px rgba(232, 62, 140, 0.18) !important;
    }

/* Tabs del perfil */
.nav-tabs .nav-link.active {
    color: var(--brand-primary) !important;
    border-bottom: 3px solid var(--brand-primary) !important;
}

/* Badges suaves */
.badge.bg-success {
    background-color: var(--brand-primary) !important;
}

/* Inputs enfocados */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(232, 62, 140, 0.18) !important;
}

/* Footer */
footer h5 {
    color: var(--brand-accent) !important;
}
