/* =========================================================
   TEMA PERSONALIZABLE CON VARIABLES CSS
   Para cambiar los colores, edita appsettings.json en la sección Theme
   ========================================================= */

/* Sobrescribir colores de Bootstrap con el tema personalizado */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

.table-hover > tbody > tr:hover > * {
    background-color: color-mix(in srgb, var(--primary-color) 7.5%, transparent);
}

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

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

.bg-primary {
    background-color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

/* Asegurar que texto e iconos dentro del botón sean blancos */
.btn-primary *,
.btn-primary span,
.btn-primary i,
.btn-primary .bi {
    color: #ffffff !important;
}

/* =========================================================
   Títulos con color corporativo
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-header h1, .card-header h2, .card-header h3, 
.card-header h4, .card-header h5, .card-header h6,
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
    color: var(--primary-color) !important;
}

/* =========================================================
   Card headers con color corporativo
   ========================================================= */
.card-header.bg-primary {
    background-color: var(--primary-color) !important;
}

.card-header.bg-info {
    background-color: var(--info-color) !important;
}

.card-header.bg-success {
    background-color: var(--success-color) !important;
}

.card-header.bg-secondary {
    background-color: var(--secondary-color) !important;
}

/* =========================================================
   Pestañas (Tabs) con color corporativo
   ========================================================= */
.nav-tabs .nav-link {
    color: var(--primary-color) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--primary-hover) !important;
    border-color: #e9ecef #e9ecef var(--primary-color) !important;
}

.nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
    font-weight: 600;
}

.nav-pills .nav-link {
    color: var(--primary-color) !important;
}

.nav-pills .nav-link.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
    color: var(--primary-hover) !important;
}

/* Menú superior (top-row) con color corporativo */
.navbar-dark {
    background-color: var(--primary-color) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-dark .nav-link:hover {
    color: #ffffff !important;
}

/* Sidebar/Menú lateral con fondo claro del tema */
.nav-scrollable {
    background-color: color-mix(in srgb, var(--primary-light) 20%, white) !important;
    border-right: 1px solid var(--primary-color);
}

.nav-scrollable .nav-link {
    color: #ffffff !important;
    background-color: var(--primary-color) !important;
    font-weight: 600;
    border-radius: 6px;
    margin: 4px 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.nav-scrollable .nav-link:hover {
    background-color: var(--primary-hover) !important;
    color: #ffffff !important;
    transform: translateX(4px);
}

.nav-scrollable .nav-link.active {
    background-color: var(--primary-hover) !important;
    color: white !important;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Estilo para iconos en el menú */
.nav-scrollable .bi {
    margin-right: 0.5rem;
}

/* Asegurar que top-row también tenga buen contraste */
.top-row {
    background-color: var(--primary-color) !important;
    color: white;
}

.top-row a {
    color: white;
}

/* =========================================================
   Alerts con colores del tema
   ========================================================= */
.alert-primary {
    background-color: color-mix(in srgb, var(--primary-color) 10%, white);
    border-color: var(--primary-color);
    color: var(--primary-hover);
}

.alert-success {
    background-color: color-mix(in srgb, var(--success-color) 10%, white);
    border-color: var(--success-color);
    color: #155724;
}

.alert-info {
    background-color: color-mix(in srgb, var(--info-color) 10%, white);
    border-color: var(--info-color);
    color: #0c5460;
}

.alert-warning {
    background-color: color-mix(in srgb, var(--warning-color) 10%, white);
    border-color: var(--warning-color);
    color: #856404;
}

.alert-danger {
    background-color: color-mix(in srgb, var(--danger-color) 10%, white);
    border-color: var(--danger-color);
    color: #721c24;
}

/* =========================================================
   Badges con colores del tema
   ========================================================= */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

.badge.bg-success {
    background-color: var(--success-color) !important;
}

.badge.bg-info {
    background-color: var(--info-color) !important;
}

.badge.bg-warning {
    background-color: var(--warning-color) !important;
}

.badge.bg-danger {
    background-color: var(--danger-color) !important;
}

/* =========================================================
   Enlaces con color corporativo
   ========================================================= */
a {
    color: var(--primary-color);
}

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

/* =========================================================
   Botones con colores del tema
   ========================================================= */
.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: #ffffff !important;
}

.btn-success:hover {
    background-color: color-mix(in srgb, var(--success-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--success-color) 85%, black) !important;
    color: #ffffff !important;
}

.btn-success *,
.btn-success span,
.btn-success i,
.btn-success .bi {
    color: #ffffff !important;
}

.btn-info {
    background-color: var(--info-color) !important;
    border-color: var(--info-color) !important;
    color: #ffffff !important;
}

.btn-info:hover {
    background-color: color-mix(in srgb, var(--info-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--info-color) 85%, black) !important;
    color: #ffffff !important;
}

.btn-info *,
.btn-info span,
.btn-info i,
.btn-info .bi {
    color: #ffffff !important;
}

.btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    color: #212529 !important;
}

.btn-warning:hover {
    background-color: color-mix(in srgb, var(--warning-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--warning-color) 85%, black) !important;
    color: #212529 !important;
}

.btn-warning *,
.btn-warning span,
.btn-warning i,
.btn-warning .bi {
    color: #212529 !important;
}

.btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    background-color: color-mix(in srgb, var(--danger-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--danger-color) 85%, black) !important;
    color: #ffffff !important;
}

.btn-danger *,
.btn-danger span,
.btn-danger i,
.btn-danger .bi {
    color: #ffffff !important;
}

.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.btn-secondary:hover {
    background-color: var(--secondary-hover) !important;
    border-color: var(--secondary-hover) !important;
}