/* =========================================================
   OVERRIDE DE APP.CSS PARA USAR TEMA DINÁMICO
   Este archivo sobrescribe los colores hardcodeados de app.css
   ========================================================= */

/* Focus con color del tema - IMPORTANTE para inputs de login y formularios */
.btn:focus, 
.btn:active:focus, 
.btn-link.nav-link:focus, 
.form-control:focus, 
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem color-mix(in srgb, var(--primary-color) 50%, white) !important;
    border-color: var(--primary-color) !important;
}

.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary-color) 25%, white) !important;
}

/* Enlaces */
a, .btn-link {
    color: var(--primary-color) !important;
}

a:hover, .btn-link:hover {
    color: var(--primary-hover) !important;
}

/* Botones - ASEGURAR TEXTO BLANCO */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

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

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

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

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

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

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

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

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

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

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

/* Badges */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

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

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

/* Alertas */
.alert-info {
    background-color: color-mix(in srgb, var(--info-color) 10%, white) !important;
    border-color: color-mix(in srgb, var(--info-color) 30%, white) !important;
    color: var(--info-color) !important;
}

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

.alert-warning {
    background-color: color-mix(in srgb, var(--warning-color) 10%, white) !important;
    border-color: color-mix(in srgb, var(--warning-color) 30%, white) !important;
    color: color-mix(in srgb, var(--warning-color) 80%, black) !important;
}

/* Nav tabs */
.nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
}

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

/* List group */
.list-group-item.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Card headers */
.card-header {
    background-color: color-mix(in srgb, var(--primary-light) 15%, white) !important;
    border-bottom: 1px solid var(--primary-light) !important;
}

/* ========================================
   IMPORTANTE: Sin efectos hover en card-headers
   ======================================== */

/* Deshabilitar completamente hover/transiciones/animaciones en card-headers */
.card-header,
.card-header:hover,
.card-header:focus,
.card-header:active,
.card-header *,
.card-header *:hover,
.card-header *:focus,
.card-header *:active {
    transition: none !important;
    animation: none !important;
}

/* Card-header con bg-primary mantiene su color verde */
.card-header.bg-primary,
.card-header.bg-primary:hover,
.card-header.bg-primary:focus,
.card-header.bg-primary:active {
    background-color: var(--primary-color) !important;
}

/* Card-header sin bg-primary mantiene su color base */
.card-header:not(.bg-primary):hover {
    background-color: color-mix(in srgb, var(--primary-light) 15%, white) !important;
}

/* Títulos en card-header bg-primary siempre blancos */
.card-header.bg-primary h1,
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6,
.card-header.bg-primary span,
.card-header.bg-primary .text-white,
.card-header.bg-primary h1:hover,
.card-header.bg-primary h2:hover,
.card-header.bg-primary h3:hover,
.card-header.bg-primary h4:hover,
.card-header.bg-primary h5:hover,
.card-header.bg-primary h6:hover,
.card-header.bg-primary span:hover,
.card-header.bg-primary .text-white:hover {
    color: #ffffff !important;
    transition: none !important;
}

/* Títulos en card-header sin bg-primary mantienen color verde */
.card-header:not(.bg-primary) h1,
.card-header:not(.bg-primary) h2,
.card-header:not(.bg-primary) h3,
.card-header:not(.bg-primary) h4,
.card-header:not(.bg-primary) h5,
.card-header:not(.bg-primary) h6,
.card-header:not(.bg-primary) h1:hover,
.card-header:not(.bg-primary) h2:hover,
.card-header:not(.bg-primary) h3:hover,
.card-header:not(.bg-primary) h4:hover,
.card-header:not(.bg-primary) h5:hover,
.card-header:not(.bg-primary) h6:hover {
    color: var(--primary-color) !important;
    transition: none !important;
}

/* Validaciones */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success-color) !important;
}