/**
 * CUSTOM COLORS THEME - SBADMIN
 *
 * Este archivo permite personalizar los colores de la plantilla SBADMIN
 * de forma fácil y rápida.
 *
 * CÓMO ACTIVAR:
 * En portal.twig, descomenta la línea:
 * <link rel="stylesheet" href="{{ asset('views/app/css/custom-colors.css') }}">
 *
 * CÓMO DESACTIVAR:
 * En portal.twig, comenta la línea mencionada arriba
 *
 * Para cambiar los colores, modifica las variables CSS abajo
 */

:root {
    /* COLORES PRINCIPALES - Basados en la imagen de referencia */
    --custom-primary: #480BB6;      /* Morado principal (PRIMARIO) */
    --custom-primary-dark: #3a0990; /* Morado oscuro */
    --custom-primary-light: #6c2dd4;/* Morado claro */

    --custom-secondary: #CC00EE;    /* Magenta secundario (SECUNDARIO) */
    --custom-secondary-dark: #a600be;
    --custom-secondary-light: #e033ff;

    --custom-accent: #B22143;       /* Rojo (ERROR) */
    --custom-accent-dark: #8f1a35;
    --custom-accent-light: #d42850;

    --custom-warning: #f39c12;      /* Naranja/Warning (mantener) */
    --custom-info: #480BB6;         /* Info = Primary */
    --custom-success: #35CAA2;      /* Turquesa (OK) */
    --custom-danger: #B22143;       /* Danger = ERROR */

    /* COLORES DE FONDO */
     --custom-bg-header: #1B0942;    /* Fondo del header (MENU IZQUIERDA) */
    --custom-bg-sidebar: #1B0942;   /* Fondo del sidebar (MENU IZQUIERDA) */
    --custom-bg-sidebar-light: rgba(27, 9, 66, 0.9); /* MENU IZQUIERDA 10% */
    --custom-bg-content: #ecf0f5;   /* Fondo del contenido */

    /* COLORES DE TEXTO */
    --custom-text-header: #ffffff;
    --custom-text-sidebar: #b8c7ce;
    --custom-text-sidebar-active: #ffffff;

    /* COLORES DE ENLACES */
    --custom-link-color: #480BB6;   /* Enlaces = Primary */
    --custom-link-hover: #6c2dd4;   /* Enlaces hover = Primary light */
}

/* ===========================
   PERSONALIZACIÓN DEL HEADER
   =========================== */
.main-header .navbar {
    background-color: var(--custom-bg-header) !important;
}

.main-header .navbar .nav > li > a {
    color: var(--custom-text-header) !important;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:active,
.main-header .navbar .nav > li > a:focus {
    background-color: var(--custom-primary-dark) !important;
}

.main-header .logo {
    background-color: var(--custom-primary) !important;
    color: var(--custom-text-header) !important;
    border-bottom: 0 solid transparent;
}

.main-header .logo:hover {
    background-color: var(--custom-primary-dark) !important;
}

/* ===========================
   PERSONALIZACIÓN DEL SIDEBAR
   =========================== */
.main-sidebar,
.left-side {
    background-color: var(--custom-bg-sidebar) !important;
}

.sidebar-menu > li > a {
    color: var(--custom-text-sidebar) !important;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a {
    color: var(--custom-text-sidebar-active) !important;
    background-color: var(--custom-primary) !important;
    border-left-color: var(--custom-accent) !important;
}

.sidebar-menu > li > .treeview-menu {
    background-color: var(--custom-bg-sidebar-light) !important;
}

.treeview-menu > li > a {
    color: var(--custom-text-sidebar) !important;
}

.treeview-menu > li.active > a,
.treeview-menu > li > a:hover {
    color: var(--custom-text-sidebar-active) !important;
    background-color: rgba(72, 11, 182, 0.4) !important;
}

/* ===========================
   PERSONALIZACIÓN DE BOTONES
   =========================== */
.btn-primary {
    background-color: #6c2dd4 !important; /* Morado más claro y vibrante */
    border-color: var(--custom-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--custom-primary) !important;
    border-color: var(--custom-primary-dark) !important;
    color: #ffffff !important;
}

.btn-success {
    background-color: #4dd4b8 !important; /* Turquesa más claro */
    border-color: var(--custom-success) !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:active,
.btn-success:focus {
    background-color: var(--custom-success) !important;
    border-color: #2ba888 !important;
    color: #ffffff !important;
}

.btn-danger {
    background-color: #d63d63 !important; /* Rojo más claro */
    border-color: var(--custom-danger) !important;
    color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
    background-color: var(--custom-danger) !important;
    border-color: var(--custom-accent-dark) !important;
    color: #ffffff !important;
}

.btn-warning {
    background-color: #f39c12 !important; /* Naranja mantiene buen contraste */
    border-color: darkorange !important;
    color: #ffffff !important;
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
    background-color: #e67e22 !important;
    border-color: #d35400 !important;
    color: #ffffff !important;
}

.btn-info {
    background-color: #6c2dd4 !important; /* Mismo que primary */
    border-color: var(--custom-primary) !important;
    color: #ffffff !important;
}

.btn-info:hover,
.btn-info:active,
.btn-info:focus {
    background-color: var(--custom-primary) !important;
    border-color: var(--custom-primary-dark) !important;
    color: #ffffff !important;
}

/* Asegurar texto blanco en todos los botones */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-primary:active,
.btn-success:active,
.btn-danger:active,
.btn-warning:active,
.btn-info:active,
.btn-primary:focus,
.btn-success:focus,
.btn-danger:focus,
.btn-warning:focus,
.btn-info:focus,
.btn-primary:visited,
.btn-success:visited,
.btn-danger:visited,
.btn-warning:visited,
.btn-info:visited {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Asegurar que los enlaces dentro de botones también sean blancos */
.btn-primary a,
.btn-success a,
.btn-danger a,
.btn-warning a,
.btn-info a {
    color: #ffffff !important;
}

/* ===========================
   PERSONALIZACIÓN DE BOXES
   =========================== */
.box.box-primary {
    border-top-color: var(--custom-primary) !important;
}

.box.box-primary .box-header {
    background-color: var(--custom-primary) !important;
    color: #ffffff !important;
}

.box.box-success {
    border-top-color: var(--custom-success) !important;
}

.box.box-success .box-header {
    background-color: var(--custom-success) !important;
    color: #ffffff !important;
}

.box.box-danger {
    border-top-color: var(--custom-danger) !important;
}

.box.box-danger .box-header {
    background-color: var(--custom-danger) !important;
    color: #ffffff !important;
}

.box.box-warning {
    border-top-color: var(--custom-warning) !important;
}

.box.box-warning .box-header {
    background-color: var(--custom-warning) !important;
    color: #ffffff !important;
}

.box.box-info {
    border-top-color: var(--custom-info) !important;
}

.box.box-info .box-header {
    background-color: var(--custom-info) !important;
    color: #ffffff !important;
}

/* ===========================
   PERSONALIZACIÓN DE ENLACES
   =========================== */
a {
    color: var(--custom-link-color) !important;
}

a:hover,
a:active,
a:focus {
    color: var(--custom-link-hover) !important;
}

/* ===========================
   PERSONALIZACIÓN DE BADGES Y LABELS
   =========================== */
.badge.badge-primary,
.label.label-primary {
    background-color: var(--custom-primary) !important;
}

.badge.badge-success,
.label.label-success {
    background-color: var(--custom-success) !important;
}

.badge.badge-danger,
.label.label-danger {
    background-color: var(--custom-danger) !important;
}

.badge.badge-warning,
.label.label-warning {
    background-color: var(--custom-warning) !important;
}

.badge.badge-info,
.label.label-info {
    background-color: var(--custom-info) !important;
}

/* ===========================
   PERSONALIZACIÓN DE CONTENT
   =========================== */
.content-wrapper,
.right-side,
.main-footer {
    background-color: var(--custom-bg-content) !important;
}

/* ===========================
   PERSONALIZACIÓN DE TABS
   =========================== */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--custom-primary) !important;
    color: #ffffff !important;
    border-color: var(--custom-primary) !important;
}

.nav-tabs > li > a:hover {
    background-color: var(--custom-primary-light) !important;
    border-color: var(--custom-primary-light) !important;
    color: #ffffff !important;
}

/* Asegurar que el texto de las tabs sea siempre visible */
.nav-tabs > li > a {
    color: #333 !important;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    color: #ffffff !important;
}

/* ===========================
   PERSONALIZACIÓN DE ALERTS
   =========================== */
.alert-success {
    background-color: var(--custom-secondary-light) !important;
    border-color: var(--custom-success) !important;
    color: #155724 !important;
}

.alert-danger {
    background-color: var(--custom-accent-light) !important;
    border-color: var(--custom-danger) !important;
    color: #721c24 !important;
}

.alert-warning {
    background-color: #ffeaa7 !important;
    border-color: var(--custom-warning) !important;
    color: #856404 !important;
}

.alert-info {
    background-color: var(--custom-primary-light) !important;
    border-color: var(--custom-info) !important;
    color: #004085 !important;
}

/* ===========================
   PERSONALIZACIÓN DE PAGINATION
   =========================== */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--custom-primary) !important;
    border-color: var(--custom-primary) !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    background-color: var(--custom-primary-light) !important;
    border-color: var(--custom-primary-light) !important;
}

/* ===========================
   PERSONALIZACIÓN DE FORMS
   =========================== */
.form-control:focus {
    border-color: var(--custom-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
}

/* ===========================
   PERSONALIZACIÓN DE DROPDOWN MENU
   =========================== */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--custom-primary) !important;
    color: #ffffff !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--custom-primary) !important;
}

/* ===========================
   PERSONALIZACIÓN DE SMALL-BOX (INFO BOXES)
   =========================== */
.small-box.bg-aqua,
.small-box.bg-blue {
    background-color: var(--custom-primary) !important;
}

.small-box.bg-green {
    background-color: var(--custom-success) !important;
}

.small-box.bg-red {
    background-color: var(--custom-danger) !important;
}

.small-box.bg-yellow {
    background-color: var(--custom-warning) !important;
}

/* ===========================
   PERSONALIZACIÓN DE PROGRESS BARS
   =========================== */
.progress-bar-primary {
    background-color: var(--custom-primary) !important;
}

.progress-bar-success {
    background-color: var(--custom-success) !important;
}

.progress-bar-danger {
    background-color: var(--custom-danger) !important;
}

.progress-bar-warning {
    background-color: var(--custom-warning) !important;
}

.progress-bar-info {
    background-color: var(--custom-info) !important;
}