@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --color-primary: #03ACFF;
    --gridview-header-background: #87C9EC;
    --border-radius-global : 10px;
    --color-background: #f4f6f9;
    --color-textSecondary: #989FA9;
}

[class*=sidebar-dark-] .user-panel a:hover {
    color: var(--color-primary);
}

body {
    font-family: 'Roboto', sans-serif !important;
}

[class*=sidebar-dark-] {
    background-color: #fff;
}

.nav-pills .nav-link {
    border-radius: var(--main-rounded);
}

.card {
    margin-top: 2px;
    border-radius: 1.5rem !important;
}

.card-header{
    border-bottom: 0px;
}

.btn-primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: #007bff;
    box-shadow: none;
    min-width: 165px;
}

.btn {
    display: inline-flex; /* Cambia inline-block por inline-flex */
    align-items: center;  /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    border-radius: .5rem;
    min-height: 29px;
    font-size: 12px;
    padding: 0rem .75rem;
    /*line-height: 1;*/
    border: 0px;
}

.card-footer {
    background-color: #fff;
    padding: 0rem 1.25rem 0rem 1.25rem;
    border-radius: .5rem;
    margin-bottom: 1rem;
}

#BusquedaAvanzada {
    padding-right: 25px;
}

#BusquedaAvanzada::after {
    content: "";
    position: absolute;
    width: 33px;
    height: 29px;
    background-color: #82C9ED;
    bottom: 0px;
    /* right: 342px; */
    /* left: 2px; */
    margin-left: 146px;
    border-radius: 0rem 0.5rem 0.5rem 0rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23f6f4f9' d='M53.7,56.47l-2-2A15.89,15.89,0,0,1,38,57.33a15.38,15.38,0,0,1-9.22-6.18A16,16,0,0,1,51.49,29.07a15.58,15.58,0,0,1,6.17,10.72,15.8,15.8,0,0,1-3.23,11.85l2,2a5.58,5.58,0,0,1,.85-.33,2,2,0,0,1,1.83.64l8.55,8.56,5.79,5.78a1.92,1.92,0,0,1,0,3c-.74.74-1.47,1.48-2.21,2.21a1.89,1.89,0,0,1-2.91,0L54.05,59.22A2,2,0,0,1,53.7,56.47ZM54,41.79A12.22,12.22,0,1,0,41.78,54,12.22,12.22,0,0,0,54,41.79Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 37px;
    /* padding-right: 34px; */
}


.card-title {
    float: left;
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0;
    font-weight: 700;
    font-size: 22px;
    color: #3A546D;
}

.grid-view table.items th, .grid-view table.items td {
    font-size: 0.9em;
    border: 2px #fff solid;
    padding: 0.3em;
    /* color: #616263; */
    color: #333;
    font-weight: normal !important;
    border-bottom: 0px solid #ddd;
    /* border: 2px #ddd solid; */
}

.grid-view {
    padding: 10px;
    margin: 10px 0px;
}

.grid-view thead tr a {
    color: #fff !important;
}

.grid-view thead tr a:hover {
    color: #e1e3e6 !important;
}

.grid-view a {
    color: var(--color-primary) !important;
}

.grid-view a:hover {
    color: var(--gridview-header-background) !important;
/*    font-weight: 600;*/
}

.grid-view table.background-primary thead tr th {
    color: #fff;
    text-align: center;
    padding: 12px;
    background: var(--gridview-header-background) !important;
    border-bottom: 0px #ddd solid;
    font-weight: bold;
}

.grid-view table.items th {
    font-family: "Roboto";
    font-weight: 400 !important;
    font-size: 15px;
    line-height: 18px;
    color: #fff;
}

.grid-view table.items th a {
    /* color: #616263; */
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}

.grid-view table.items th,
.grid-view table.items td {
    border: none;
    border-bottom: none;
    white-space: nowrap;
    text-align: center;
}

.grid-view table.items td {
    font-family: "Roboto";
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;

}

.grid-view table.items td:not(:first-child):not(:nth-child(2)) {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-view table.items td:first-child,
.grid-view table.items th:first-child {
    border-radius: var(--border-radius-global) 0px 0px var(--border-radius-global);
}

.grid-view table.items td:not(:second-child) {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-view table.items td:last-child,
.grid-view table.items th:last-child {
    border-radius: 0px var(--border-radius-global) var(--border-radius-global) 0px;
}

.grid-view table.items td:first-child:only-child,
.grid-view table.items th:first-child:only-child {
    border-radius: var(--border-radius-global) !important;
}

.grid-view table.items tr.even {
    background-color: #fff;
}


.grid-view table.items tr.odd {
    background: #fff;
}

.grid-view table.items tr.parent td {
    color: black;
    font-weight: 600;
    text-align: start;
}

.grid-view table.items tr.odd:hover {
    background: unset;
}

.grid-view table.items {
    background: white;
    border-collapse: collapse;
    width: 100%;
    /* border: 1px #D0E3EF solid; */
    /* border: 2px #fff solid; */
    margin: 8px 0px;
}

[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus {
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 8px;
    /*width: 53px;*/
}

[class*=sidebar-dark-] .nav-sidebar > .nav-item.menu-open > .nav-link i,
[class*=sidebar-dark-] .nav-sidebar > .nav-item:hover > .nav-link i,
[class*=sidebar-dark-] .nav-sidebar > .nav-item > .nav-link:focus i {
    color: #fff !important;
}

.nav-sidebar>.nav-item {
    border-radius: 8px;
    width: 100%;
    /*    display: flex;
        flex-flow: column;
        align-items: center;*/
}
.nav-link{
    padding: .3rem 1rem !important;
    color: #969DA7;
}

.nav-link i {
    margin-left: 2px;
    font-size: 18px;
    color: #969DA7;
}

/*.nav-link.active i {
    color: #fff !important;
}*/

nav .nav-link {
    padding: .5rem 1rem !important;
    display: flex;
    align-items: center;
    min-height: 43px;

    p{
        margin-left: 8px !important;
        font-weight: 500;
    }
}

.navbar-white {
    background-color: #fff;
    border-bottom: 6px solid var(--color-primary);
}

.form-control {
    border-radius: 12px !important;
}

/* Solo quita el borde si el grupo contiene un append */
.input-group:has(.input-group-append) .form-control {
    border-radius: 12px 0 0 12px !important;
    border-right: 0px;
}

/* Si el grupo NO tiene append, que mantenga sus bordes redondeados normales */
.input-group:not(:has(.input-group-append)) .form-control {
    border-radius: 12px !important;
    border-right: 1px solid #ced4da; /* O el color de tu borde */
}

.input-group .input-group-append {
    border-radius: 0 12px 12px 0 !important;
}

.input-group .input-group-text {
    border-radius: 0 12px 12px 0 !important;
    max-height: 38px;
    border: 1px solid #ced4da;
    border-left: 0px;
    color: #D6D6D6;
    background: #fff;
}

.input-group .input-group-append button {
    border-radius: 0 12px 12px 0 !important;
}

[class*=sidebar-dark] .brand-link {
    border-bottom: 0px solid #4b545c;
}

[class*=sidebar-dark] .user-panel {
    border-bottom: 0px solid #4f5962;
}

.sidebar-open {
    .brand-image {
        float: left;
        line-height: .8;
        margin-left: .8rem;
        margin-right: .5rem;
        margin-top: -3px;
        max-height: 45px;
        width: auto;
    }
}

.sidebar-collapse{
    .brand-image {
        float: left;
        line-height: .8;
        margin-left: .8rem;
        margin-right: .5rem;
        margin-top: -3px;
        max-height: 41px;
        width: auto;
    }
}

.breadcrumb{
    margin-top: auto;
    margin-bottom:auto;
    color: var(--color-textSecondary) !important;
}

.breadcrumb {
    padding: 0.7rem 0.7rem 0.1rem 2.5rem !important;
}

.breadcrumb-item::before{
    color: var(--color-textSecondary) !important;

}

.breadcrumb-item i{
    font-size: 14px;
}

.breadcrumb-item {
    font-size: 12px;
    line-height: 12px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-style: italic;
    a {
        color: var(--color-textSecondary) !important;
        text-decoration: none !important;
    }
}

.breadcrumb {
    display: flex;
    padding: 0px 0px;
    background: var(--color-background) !important;
    /*gap: 12px;  separación real entre banderines */
}

.breadcrumb-item + .breadcrumb-item::before {
    /*  content: none;  quita el "/" de Bootstrap */
    content: '/' !important;
}

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:focus, [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:hover {
    background-color: rgba(255, 255, 255, .1);
    color: var(--color-primary) !important;

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


.control-label{
    font-weight: 500 !important;
    color: black;
    font-size: 13px;
}

.nav-link{
    width: 100%;
}
.sidebar-expanded-real {
    .nav-link{
        width: 100%;
    }
}

/* Nivel 2 */
.sidebar-expanded-real
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    padding-left: 18px;
    color: var(--color-primary) !important;
    i {
        color: var(--color-primary) !important;
    }
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    padding-left: 18px;
    color: var(--color-primary) !important;
    i {
        color: var(--color-primary) !important;
    }
}

.sidebar-expanded-real .nav-sidebar .nav-treeview > .nav-item > .nav-link.active::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--color-primary);
    bottom: 0px;
    right: 11px;
    top: 11px;
    border-radius: 1rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 37px;
}

/* Nivel 3 
.sidebar-expanded-real
.nav-sidebar .nav-treeview .nav-treeview > .nav-item > .nav-link {
    padding-left: 34px;
}*/

/* Estado expandido real */
/*.sidebar-expanded-real
.nav-sidebar .nav-link > .right,
.sidebar-expanded-real
.nav-sidebar .nav-link > p > .right {
    right: 0.6rem;
    top: 0.5rem;
}*/

.sidebar-mini.sidebar-collapse.sidebar-expanded-real #logo-soc {
    display:none;
}

.sidebar-mini.sidebar-open #logo-soc {
    display:none;
}

.sidebar-mini.sidebar-collapse #logo-soc {
    display:flex;
}

.sidebar-expanded-real .user-panel .image {
    display: inline-block;
    padding-left: 0rem !important;
}

/* 1. Ocultar el logo GRANDE cuando el sidebar está colapsado */
.sidebar-collapse #logoSocLarge {
    display: none !important;
}

/* 2. Mostrar el logo PEQUEÑO (mini) solo cuando esté colapsado */
/* Primero lo ocultamos por defecto */
#logo-soc {
    display: none;
}

/* Lo mostramos solo si hay colapso */
.sidebar-collapse #logo-soc {
    display: block; /* o flex, según tu diseño */
}

/* 3. Si el mouse está encima (expanded-real), invertimos: 
      ocultamos el mini y mostramos el grande */
.sidebar-expanded-real #logoSocLarge {
    display: block !important;
}

.sidebar-expanded-real #logo-soc {
    display: none !important;
}

/* 1. Forzamos que el botón recupere su fuente de texto normal */
.btn.fa {
    font-family: 'Roboto', sans-serif !important;
}

/* 2. Aplicamos la fuente de FontAwesome únicamente al icono (pseudo-elemento) */
.btn.fa::before {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important; /* Ajusta según tu versión de FA */
    font-weight: 900;
    margin-right: 8px; /* Espacio entre icono y texto */
    display: inline-block;
}

.btn_excel.fa {
    font-family: 'Roboto', sans-serif !important;
}
.btn_excel.fa::before {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important; /* Ajusta según tu versión de FA */
    font-weight: 900;
    margin-right: 8px; /* Espacio entre icono y texto */
    display: inline-block;
}

.dropdown-item.fa {
    font-family: 'Roboto', sans-serif !important;
}
.dropdown-item.fa::before {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important; /* Ajusta según tu versión de FA */
    font-weight: 900;
    margin-right: 8px; /* Espacio entre icono y texto */
    display: inline-block;
}

input[readonly] + .input-group-append .input-group-text {
    background-color: #e9ecef; /* El gris clásico de Bootstrap para deshabilitados */
    border-color: #ced4da;
    color: #6c757d;           /* Color de icono/texto más tenue */
    cursor: not-allowed;      /* Feedback visual de que no se puede usar */
}

.fas.fa-search.text-grey:hover {
    color: var(--color-primary); /* Azul estándar o tu color primario */
}

.fa.fa-search:hover{
    color: var(--color-primary);
}

.grid-view table.background-primary thead tr th {
    color: #fff !important;
    text-align: center;
    padding: 15px;
    background: #ddd;
    border-bottom: 0px #ddd solid !important;
    font-weight: bold;
}

.overlay {
    border-radius: 1.5rem !important;
}

/*  PAGER */

.grid-view .pager {
    text-align: right;
        margin-bottom: 8px;
}

.grid-view .pager {
    color: var(--color-textSecondary);
    font-size: 12px;
    font-weight: 500;
}

ul.yiiPager .previous a{
    font-weight: 400;
    font-family: 'Roboto';
}

ul.yiiPager .next a{
    font-weight: 400;
    font-family: 'Roboto';
}

ul.yiiPager .page a {
    color: #cddae3 !important;
}

ul.yiiPager .selected a {
    color: white !important;
}

ul.yiiPager a:link,
ul.yiiPager a:visited {
    border: none;
    font-weight: 600;
    color: #000;
    padding: 1px 6px;
    text-decoration: none;
    font-family: 'Roboto';
}


ul.yiiPager .selected a {
    background: var(--color-primary) !important;
    color: white;
    font-weight: bold;
    border-radius: 5px;
}

.navbar .nav-item i {
    color: var(--color-primary);
}


/* track (fondo) */
::-webkit-scrollbar-track {
  background: #f3f4f6; /* gris claro */
}

/* 1. Definir el ancho y estilo general del scroll (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;               /* Ancho del scroll vertical */
  height: 8px;              /* Alto del scroll horizontal */
}

/* 2. El fondo del scroll (Track) */
::-webkit-scrollbar-track {
  background: #f1f1f1;      /* Color gris claro de fondo */
  border-radius: 10px;
}

/* 3. La barrita desplazable (Thumb) */
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 9999px;
  border: 2px solid #f1f1f1; /* Crea un efecto de "margen" alrededor de la barra */
}

/* 4. Thumb al hacer hover */
::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.9);   /* Oscurece un poco el color primario al pasar el mouse */
  background: var(--color-primary); 
}

/* --- Compatibilidad para Firefox --- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #f1f1f1;
}

label:not(.form-check-label):not(.custom-file-label) {
    font-weight: normal !important;
}