/*PERSONALIZACIÓN ADICIONAL A YII2*/

/*quitar el subrayado de boostrap5*/
a,.btn-link {
    text-decoration: none;
}

/*boostrap5*/
.nav-pills > li > a.active { /*en boostrap5 remplazar el color azul del menu activo por el que corresponde por el tema dark*/
    color: #fff !important;
    background-color: #283955 !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: #283955 !important;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff !important;
    text-decoration: none;
    background-color: #283955 !important;
}

/*mapeo de los iconos a sus equivalentes en Font Awesome 5*/
.glyphicon {
    font-family: "Font Awesome 5 Free";
}
.glyphicon-eye-open:before {
    content: "\f06e";
    color: var(--success);
}
.glyphicon-pencil:before {
    content: "\f303";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-pencil-white:before { /*para usarse con fondos oscuros*/
    content: "\f303";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}
.glyphicon-trash-can-white:before { /*para usarse con fondos oscuros*/
    content: "\f2ed";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-print:before {
    content: "\f02f";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-print-white:before { /*para usarse con fondos oscuros*/
    content: "\f02f";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-file-invoice:before {
    content: "\f570";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-file-invoice-white:before { /*para usarse con fondos oscuros*/
    content: "\f570";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-arrows-rotate:before {
    content: "\f021";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-arrows-rotate-white:before { /*para usarse con fondos oscuros*/
    content: "\f021";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-xmark:before {
    content: "\f00d";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-xmark-white:before { /*para usarse con fondos oscuros*/
    content: "\f00d";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}


.glyphicon-preview:before {
    content: "\f002";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-preview-white:before { /*para usarse con fondos oscuros*/
    content: "\f002";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-fa-file-pdf:before {
    content: "\f1c1";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-fa-file-pdf-white:before { /*para usarse con fondos oscuros*/
    content: "\f1c1";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}

.glyphicon-envelope:before {
    content: "\f0e0";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-envelope-white:before { /*para usarse con fondos oscuros*/
    content: "\f0e0";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}




.glyphicon-trash:before {
    content: "\f2ed";
    color: var(--danger);
}

.glyphicon-plus:before {
    content: "\f067";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}
.glyphicon-plus-white:before { /*para usarse con fondos oscuros*/
    content: "\f067";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: white;
}
.glyphicon-open-file:before {
    content: "\f56d";
    font-weight: 900;/*algunos iconos no se ven si no se fija esta opcion*/
    color: var(--primary);
}



/*demas estilos*/

fieldset {
    border: 2px solid rgba(0,0,0,.1);
    border-radius: 5px;
    padding: 15px;
}

fieldset legend {
    width: initial;
}

/*Poner el select 2 encima del z order de modales */
.select2-container--open {
    z-index: 2000;
}

/*Estilos de validación*/
div.required label.control-label:after {
    content: " *";
    color: red;
}

.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
    color: #a94442;
}

.has-success .form-control {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label {
    color: #3c763d;
}

/*Le pone el icono de flecha abajo indicando abrir dentro del header antes del link*/
.card-header a:before {
    font-family: "Font Awesome 5 Free";
    font-weight:bold; /*para algunos iconos es necesario aplicar bold*/
    content: "\f107";
    float: right;
    transition: all 0.5s;
}
/*rota el icono de flecha cuando el link no esta collapsed que es cuendo el div relacionado está en show*/
.card-header  a:not(.collapsed):before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.container-ancho {
    /*padding: 120px 15px 20px; menu de 2 renglones*/
    padding: 70px 15px 20px;
}

/*
!* desde 768px a 1550px que es donde se muestra el menú en 2 renglones para recorrer el padding-top *!
@media (min-width: 768px) and (max-width: 1550px) {
    main > .container-ancho {
        padding-top: 120px !important;
    }
    main > .container {
        padding-top: 120px !important;
    }
}

main > .container, main > .container-fluid !*sobreescbir la regla de site.css para que tome 2 renglones de menú*!
{
    padding-top: 120px;
}*/

.action-column{ width:4em } /*hacer la columna action mas angosta*/

.numero { /*formato de numero solo lectura */
    text-align: right;font-size: 2em;padding: 0;
}

/*Personalalizar ordenación*/
.sorter {
    list-style-type: none;
    padding-left: 0;
}

.sorter:before {
    content: 'Ordenar por:';
    font-weight: bold;
}

.sorter li {
    display: inline-block;
    margin-left: 20px;
}

#navbarPanelControl .nav-link.active, #navbarPanelControl .show > .nav-link {
    color: #fff !important;
    background-color: #6ec0ff !important;
}

#navbarPanelControl .dropdown-item.active, #navbarPanelControl .dropdown-item:active {
    color: #fff !important;
    text-decoration: none;
    background-color: #6ec0ff !important;
}

.msg-leido
{
    color: mediumspringgreen;
}

/*a {
    color: #283955;
}*/

h1, h2 {
    color: #283955;
}

.breadcrumb {
    background-color: unset;
}

.breadcrumb-item.active, ul.sorter, div.summary, .breadcrumb-item + .breadcrumb-item::before, label.form-label {
    color: #283955;
}

/* era necesario porque era tema obscuro
.pagination .page-item .page-link {
    color: white;
    font-weight: bold;
    background-color: #212529;
    border-color: #4d5154;
}

.pagination .page-item.active .page-link {
    background-color: #47d358;
    border-color: #47d358;
    color: white;
    font-weight: bold;
}*/