/* ========================================
   Estilos Corporativos Personalizados
   ======================================== */

/* 🎨 Paleta de Colores */
:root {
    --color-principal: #d64570;    /* Coral/Rojo */
    --color-secundario: #c53860;   /* Coral oscuro */
    --color-texto: #333333;        /* Gris oscuro */
    --color-fondo-claro: #f8f9fa;  /* Fondo claro */
    --color-fondo-gris: #ecf0f1;   /* Gris suave */
}

/* ========================================
   🧠 Tipografía global
   ======================================== */
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--color-texto);
    background-color: var(--color-fondo-claro);
}

/* ========================================
   🔘 Botones personalizados
   ======================================== */
.btn-custom {
    background: linear-gradient(135deg, var(--color-principal), var(--color-secundario));
    border: none;
    color: #fff;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-custom:hover,
.btn-custom:focus {
    background: linear-gradient(135deg, var(--color-secundario), var(--color-principal));
    color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

.btn-outline-custom {
    background: transparent;
    border: 2px solid var(--color-principal);
    color: var(--color-principal);
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.btn-outline-custom:hover {
    background: var(--color-principal);
    color: #fff;
}

/* ========================================
   🧱 Card personalizada con borde (card-outline)
   ======================================== */
.card-custom:not(.card-outline) {
    background-color: #fff;
    border: 1px solid var(--color-principal);
}

.card-custom.card-outline {
    border-top: 3px solid var(--color-principal);
}

.card-custom > .card-header {
    background-color: var(--color-fondo-claro);
    color: var(--color-texto);
    border-bottom: 1px solid var(--color-fondo-gris);
}

.card-custom > .card-header .card-title {
    color: var(--color-texto);
    /*font-weight: 600;*/
}

/* ========================================
   📚 Sidebar personalizado
   ======================================== */
/*.sidebar-dark-custom {
    background-color: var(--color-principal) !important;
    color: #fff !important;
}*/

.sidebar-dark-custom .brand-link {
    /*background-color: var(--color-secundario);*/
    color: #fff !important;
    font-weight: bold;
}

/*.sidebar-dark-custom .brand-link:hover {
    background-color: var(--color-principal);
}*/

.sidebar-dark-custom .nav-sidebar > .nav-item > .nav-link {
    color: #f0f0f0;
    transition: background-color 0.2s ease-in-out;
}

.sidebar-dark-custom .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--color-secundario);
    color: #fff !important;
}

.sidebar-dark-custom .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: var(--color-secundario);
    color: #fff;
}

.sidebar-dark-custom .nav-treeview > .nav-item > .nav-link {
    color: #ddd;
}

.sidebar-dark-custom .nav-treeview > .nav-item > .nav-link:hover {
    color: #fff;
}

.sidebar-dark-custom .nav-header {
    color: #ffffffb3;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* ========================================
   🧾 Formularios y textos
   ======================================== */
.form-control:focus {
    border-color: var(--color-principal);
    box-shadow: 0 0 0 0.2rem rgba(214, 69, 112, 0.25);
}

a {
    color: var(--color-principal);
}

a:hover {
    color: var(--color-secundario);
}


/* ========================================
   🧭 Top Navbar
   ======================================== */
.navbar-custom {
    background-color: var(--color-principal);
    color: #fff;
}

.navbar-custom .nav-link {
    color: #fff !important;
}

.navbar-custom .nav-link:hover {
    color: #f8f9fa !important;
}

/* ========================================
   🎨 Fondo corporativo personalizado
   ======================================== */
.bg-custom {
    background-color: var(--color-principal) !important;
    color: #ffffff !important;
}

/* Versión más oscura (para hover o contrastes) */
.bg-custom-dark {
    background-color: var(--color-secundario) !important;
    color: #ffffff !important;
}

/* Texto oscuro sobre fondo claro, útil si combinas con .text-custom */
.text-custom {
    color: var(--color-principal) !important;
}

.text-custom-dark {
    color: var(--color-secundario) !important;
}