/*
 * Branding overrides
 *
 * Este archivo permite cambiar colores principales desde config/branding.php
 * sin intervenir directamente la hoja histórica public/css/hoja-estilos.css.
 *
 * Debe cargarse después de Bootstrap, hoja-estilos.css, plugins y estilos
 * propios de las vistas para que pueda reemplazar colores hardcodeados.
 */

/*
 * Color principal
 * Uso recomendado: fondos estructurales, navegación, menús laterales,
 * barras superiores y elementos que sostienen la identidad base.
 */
.lgn,
header .navbar-collapse.collapse,
#navbar {
    background-color: var(--brand-primary, #2A265D) !important;
}

.btn-filtro-x .fa-times,
.cumplimiento .porcentajes span:last-child {
    color: var(--brand-primary, #2A265D) !important;
}

.gra.cl-9 {
    background-color: var(--brand-primary, #2A265D) !important;
}

/*
 * Color de acento
 * Uso recomendado: acciones principales, estados activos, llamados a la
 * acción, links destacados y elementos que deben llamar la atención.
 */
.lgn .active,
.btn-primary:not(.ghost),
a.btn-primary:not(.ghost),
button.btn-primary:not(.ghost),
input[type="submit"].btn-primary:not(.ghost),
input[type="button"].btn-primary:not(.ghost),
.open > .dropdown-toggle.btn-primary,
.ajs-ok {
    color: #ffffff !important;
    background-color: var(--brand-accent, #E83D22) !important;
    background-image: none !important;
    border-color: var(--brand-accent, #E83D22) !important;
}

.btn-primary:not(.ghost):hover,
.btn-primary:not(.ghost):focus,
.btn-primary:not(.ghost):active,
.btn-primary:not(.ghost).active,
a.btn-primary:not(.ghost):hover,
a.btn-primary:not(.ghost):focus,
button.btn-primary:not(.ghost):hover,
button.btn-primary:not(.ghost):focus,
input[type="submit"].btn-primary:not(.ghost):hover,
input[type="submit"].btn-primary:not(.ghost):focus,
input[type="button"].btn-primary:not(.ghost):hover,
input[type="button"].btn-primary:not(.ghost):focus,
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:focus,
.ajs-ok:hover,
.ajs-ok:focus {
    color: #ffffff !important;
    background-color: var(--brand-accent-dark, #C72F18) !important;
    background-image: none !important;
    border-color: var(--brand-accent-dark, #C72F18) !important;
}

.btn-primary:not(.ghost):disabled,
.btn-primary:not(.ghost).disabled,
.btn-primary:not(.ghost)[disabled],
fieldset[disabled] .btn-primary:not(.ghost) {
    background-color: var(--brand-muted, #ACB2C1) !important;
    background-image: none !important;
    border-color: var(--brand-muted, #ACB2C1) !important;
    opacity: 0.75;
}

.titulo h2,
.btnGhost,
.requisitos .titulo a,
.requisitos table .btn-primary.ghost,
.btn-filtro-x i,
.ajs-cancel,
.cumplimiento .porcentajes span:first-child {
    color: var(--brand-accent, #E83D22) !important;
}

.btnGhost,
.requisitos table .btn-primary.ghost,
.ajs-cancel {
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--brand-accent, #E83D22) !important;
}

.btnGhost:hover,
.btnGhost:focus,
.requisitos table .btn-primary.ghost:hover,
.requisitos table .btn-primary.ghost:focus,
.ajs-cancel:hover,
.ajs-cancel:focus {
    color: #ffffff !important;
    background-color: var(--brand-primary, #2A265D) !important;
    border-color: var(--brand-primary, #2A265D) !important;
}

.requisitos .titulo a:hover,
.requisitos .titulo a:focus,
a.btn-icon:hover,
a.btn-icon:focus {
    color: var(--brand-accent-dark, #C72F18) !important;
}

.gra.cl-2 {
    background-color: var(--brand-accent, #E83D22) !important;
}

.gra.cl-3 {
    background-color: var(--brand-accent-light, #EF9182) !important;
}

.gra.cl-4 {
    background-color: var(--brand-accent-soft, #FFBDB2) !important;
}

/*
 * Estados operativos
 * Mantienen semántica independiente del branding principal.
 */
.bd-color span.xvencer,
.gra.cl-7 {
    background-color: var(--brand-warning, #FFA200) !important;
}

.bd-color span.vencido,
.gra.cl-8 {
    background-color: var(--brand-danger, #FF5151) !important;
}

.bd-color span.vigente,
.gra.cl-1,
.gra.cl-6 {
    background-color: var(--brand-success, #8CB55D) !important;
}

/*
 * Componentes auxiliares
 */
/*
#block-filtro {
    box-shadow: 0 5px 15px var(--brand-muted, #ACB2C1) !important;
}
*/

.disabled-button,
.disabled-button:hover,
.disabled-button:focus {
    background-color: var(--brand-muted, #ACB2C1) !important;
    border-color: var(--brand-muted, #ACB2C1) !important;
    outline: none !important;
}

/*
 * Campos de formulario.
 * Homologa bordes de inputs nativos, textarea, select y .form-control.
 * Se excluyen botones, radios, checkboxes y hidden para no romper controles.
 */
.form-control,
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
textarea,
select {
    border-color: var(--brand-muted, #ACB2C1) !important;
    box-shadow: none !important;
}

.form-control:focus,
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
    border-color: var(--brand-accent, #E83D22) !important;
    box-shadow: 0 0 0 2px rgba(var(--brand-accent-rgb, 232, 61, 34), 0.12) !important;
    outline: none !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control,
input[disabled],
input[readonly],
textarea[disabled],
textarea[readonly],
select[disabled],
select[readonly] {
    border-color: var(--brand-muted, #ACB2C1) !important;
    background-color: #f5f5f5 !important;
    opacity: 0.85;
}

.input-group-addon {
    border-color: var(--brand-muted, #ACB2C1) !important;
    color: var(--brand-primary, #2A265D) !important;
    background-color: #ffffff !important;
}

.input-group:focus-within .input-group-addon {
    border-color: var(--brand-accent, #E83D22) !important;
}

.has-error .form-control,
.has-error input,
.has-error textarea,
.has-error select {
    border-color: var(--brand-danger, #FF5151) !important;
}

.has-error .form-control:focus,
.has-error input:focus,
.has-error textarea:focus,
.has-error select:focus {
    border-color: var(--brand-danger, #FF5151) !important;
    box-shadow: 0 0 0 2px rgba(var(--brand-danger-rgb, 255, 81, 81), 0.12) !important;
}

/*
 * Tablas y paginadores heredados con colores hardcodeados.
 */
table.dataTable thead,
thead,
.dx-header-row {
    color: #ffffff !important;
    background: var(--brand-accent, #E83D22) !important;
    background-image: linear-gradient(
        to bottom,
        var(--brand-accent-dark, #C72F18) 0%,
        var(--brand-accent, #E83D22) 100%
    ) !important;
    border-color: var(--brand-accent, #E83D22) !important;
}

table.dataTable thead th,
table.dataTable.no-footer {
    border-color: var(--brand-accent, #E83D22) !important;
}

.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--brand-accent, #E83D22) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ffffff !important;
    background: var(--brand-accent, #E83D22) !important;
    background-image: linear-gradient(
        to bottom,
        var(--brand-accent-dark, #C72F18) 0%,
        var(--brand-accent, #E83D22) 100%
    ) !important;
    border-color: var(--brand-accent, #E83D22) !important;
}

.dx-toolbar-text-auto-hide .dx-button .dx-button-content {
    color: #ffffff !important;
    background-color: var(--brand-accent, #E83D22) !important;
    border-color: var(--brand-accent, #E83D22) !important;
}

.dx-toolbar-text-auto-hide .dx-button .dx-button-content:hover {
    color: #ffffff !important;
    background-color: var(--brand-primary, #2A265D) !important;
    border-color: var(--brand-primary, #2A265D) !important;
}

/*
 * Navegación secundaria / administración.
 * Cubre reglas heredadas como `.nav-tabs > li > a { color: #E83D22; }`
 * y el border-bottom fijo de las pestañas.
 */
.nav-tabs > li > a,
.flex-x10.nav > li > a,
.table-x3.nav-tabs > li > a {
    color: var(--brand-primary, #2A265D) !important;
    
}


.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.flex-x10.nav > li.active > a,
.flex-x10.nav > li.active > a:hover,
.flex-x10.nav > li.active > a:focus,
.table-x3.nav-tabs > li.active > a,
.table-x3.nav-tabs > li.active > a:hover,
.table-x3.nav-tabs > li.active > a:focus {
    color: var(--brand-accent, #E83D22) !important;
    border-bottom-color: var(--brand-accent, #E83D22) !important;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.flex-x10.nav > li > a:hover,
.flex-x10.nav > li > a:focus,
.table-x3.nav-tabs > li > a:hover,
.table-x3.nav-tabs > li > a:focus {
    /* color: var(--brand-accent-dark, #C72F18) !important; */
    border-bottom-color: var(--brand-muted, #ACB2C1) !important;
}

/*
 * Select2.
 * El proyecto trae colores fijos en public/js/jquery/select2/dist/css/select2.css,
 * especialmente #DF3B21 en la flecha del select. Se pisan acá para evitar
 * modificar directamente la librería.
 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--brand-muted, #ACB2C1) !important;
    box-shadow: none !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--brand-accent, #E83D22) !important;
    box-shadow: 0 0 0 2px rgba(var(--brand-accent-rgb, 232, 61, 34), 0.12) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--brand-accent, #E83D22) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--brand-accent, #E83D22) transparent !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--brand-primary, #2A265D) !important;
    background-color: var(--brand-accent-soft, #FFBDB2) !important;
    border-color: var(--brand-accent-light, #EF9182) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--brand-accent-dark, #C72F18) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    color: var(--brand-danger, #FF5151) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    color: #ffffff !important;
    background-color: var(--brand-accent, #E83D22) !important;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true] {
    color: var(--brand-primary, #2A265D) !important;
    background-color: var(--brand-accent-soft, #FFBDB2) !important;
}

/*
 * Header / logout.
 * Se reemplaza el SVG cargado como imagen por un icono FontAwesome para que
 * el color pueda controlarse desde BRAND_COLOR_ACCENT.
 */
.brand-logout-link {
    color: var(--brand-accent, #E83D22) !important;
    display: inline-block;
    line-height: 1;
    text-decoration: none !important;
}

.brand-logout-link:hover,
.brand-logout-link:focus {
    color: var(--brand-accent-dark, #C72F18) !important;
    text-decoration: none !important;
}

.brand-logout-icon {
    color: inherit !important;
    font-size: 24px;
    line-height: 40px;
    vertical-align: middle;
}

/*
 * Links heredados Bootstrap.
 */
a,
.btn-link,
.btn-link:hover,
.btn-link:focus {
    color: var(--brand-accent, #E83D22);
}

a:hover,
a:focus {
    color: var(--brand-accent-dark, #C72F18);
}

/*
 * Menú lateral principal.
 * Cubre el estado activo heredado desde Bootstrap:
 * `.navbar-inverse .navbar-nav > .active > a { background-color: #E83D22; }`
 */
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
#navbar .navbar-nav > li.active > a,
#navbar .navbar-nav > li.active > a:hover,
#navbar .navbar-nav > li.active > a:focus,
header .navbar-nav > li.active > a,
header .navbar-nav > li.active > a:hover,
header .navbar-nav > li.active > a:focus {
    color: #ffffff !important;
    background-color: var(--brand-accent, #E83D22) !important;
    background-image: none !important;
}

/*
 * Indicador de documentos pendientes en menú lateral.
 * Antes estaba hardcodeado con style="color: red".
 */
.brand-pending-docs-indicator {
    color: var(--brand-danger, #FF5151) !important;
    font-size: 13px;
    vertical-align: middle;
}

.brand-pending-docs-indicator-left {
    padding-right: 5px;
}

.brand-pending-docs-indicator-right {
    padding-left: 5px;
}