@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');


/* 
    Created on : jun 2023
    Author     : Char
    Last Update : 28/08/2024
*/
/*---VARIABLES DEL SISTEMA---*/

/* Paleta de verdes*/
/*
     :root {
        --main-color: #1EA637;
        --main-active-color:#38A61E;
        --light-main-color: #1EA665;
        --second-color: #1EA693;
        --second-active-color:#1E8CA6;
        --title-color:#000000;
        --link-color: #55A51E;
        --link-active-color: #15865B;
        --label-color:#212529;
        --darkslateblue:#253779;
    }*/

/* Paleta de verde-azules
:root {
    --main-color: <?php echo $color; ?>;
    --main-active-color: #1B9339;
    --light-main-color: #1A938A;
    --second-color: #1B7695;
    --second-active-color:#1A4F93;
    --title-color:#000000;
    --link-color: #14A176;
    --link-active-color: #15865B;
    --label-color:#212529;
    --darkslateblue:#4C8294;
}*/
/* Paleta de azules*/
/*
         :root {
    --main-color: #124FC9;
    --main-active-color: #1216C9;
    --light-main-color:#499CC9;
    --second-color: #1389C9;
    --second-active-color:#136EC9;
    --title-color:#000000;
    --link-color: #12A8C9;
    --link-active-color: #12B3B0;
    --label-color:#212529;
    --darkslateblue:#253779;
}*/

:root {
    /*    --link-active-color-g: linear-gradient(120deg, #2966d6 0%, #153894 100%);
        --color-background: #E4E4EF;
        --color-details: #B1B1B1;*/

    /*    --link-active-color: #000000;
        --link-color: #5FB66B;
        --second-color: #00B33D;
        --main-active-color: #153894;
        --main-color: #008EE6;
        --color-background: #E4E4EF;
        --color-details: #B1B1B1;*/

    --user-panel-color: #EBEFF2;

    --app-font: "Roboto";
}
html, body{
    font-family: var(--app-font);
    background: var(--color-background);
}

/*********ASIDE MENU LATERAL*************/

.nav-link-round {
    /*background: var(--link-active-color-g);*/
    border-radius: 0px 17px 17px 0px;
    display: flex;
    height: 37px;
    align-items: center;
    margin-right: 0px;
    width: 90px;
    justify-content: center;
}

.nav-link-round-active {
    /*background: var(--link-active-color-g);*/
    border-radius: 0px 17px 17px 0px;
    display: flex;
    height: 100%;
    align-items: center;
    margin-right: 20px;
    width: 60px;
    justify-content: center;
}


aside.main-sidebar.sidebar-dark-success.elevation-4 {
    background-color:var(--sidebar-color);
}



.nav-sidebar {
    /*gap: .5rem;*/
}

.nav-sidebar .nav-item>.nav-link i {
    font-size: 1.1rem;
    /*margin-right: 8px;*/
}

.nav-link {
    padding: 0px 0px;
}

.sidebar-dark-success .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-success .nav-sidebar>.nav-item>.nav-link.active {
    background: var(--link-active-color-g) !important;
    color: #FFFFFF;

    .nav-link-round {
        /*background: var(--link-active-color-g);*/
        background: transparent;
        color:#fff !important;
    }
}

.sidebar-dark-success .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-success .nav-sidebar>.nav-item>.nav-link.active {


    .nav-link-round i {
        color:#fff !important;
    }

    p {
        color:#fff !important;
    }
}

.nav-treeview>.nav-item>.nav-link.active{
    background: #95ABc2;
    color: #FFFFFF !important;
}

.nav-treeview>.nav-item>.nav-link{

    .nav-link-round-active{
        background: transparent !important;
    }
}

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active, [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:focus, [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover {
    color: #FFFFFF !important;
}

.nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--link-active-color) !important;
    color: #FFF !important;
}

.container-fluid > ul.nav.nav-tabs {
    margin-left: 40px;
}

ul.nav.nav-tabs {
    margin-left: 40px;
}

#myModalButton {
    display:flex;
}

.nav-item.menu-open > nav-link.active{
    background: var(--second-color);
    color: #FFF !important;
}

/* Tercer nivel: .nav-treeview dentro de otro .nav-treeview */
.nav-sidebar .nav-treeview .nav-treeview .nav-link.active{
    background: #ffffff !important; /* fondo blanco */
}

/* Asegurar que el icono y el texto también cambian de color */
.nav-sidebar .nav-treeview .nav-treeview .nav-link.active i,
.nav-sidebar .nav-treeview .nav-treeview .nav-link.active p {
    /*    color: var(--second-color) !important;*/

    color: var(--main-color) !important;
    font-weight: 500;
}

.nav-pills .nav-link {
    border-radius: 0px;
}

.nav-sidebar .nav-item>.nav-link {
    min-height: 37px;
    /*padding-top:3px;*/
}

.navbar-nav .nav-icons{
    color: #fff !important;
}
.nav-icons {
    font-size: 1.6em;
    color: var(--main-color);
}

.brand-link {
    padding: .8125rem .1rem;
}



/* =========================
   Nivel 1: items raíz
   ========================== */

/* Sidebar expandido normal (sin collapse) */
body:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link,
/* Sidebar colapsado pero expandido por hover (sidebar-mini) */
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link {
    /*padding-left: 20px;*/
}

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

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

.nav-sidebar .nav-link {
    transition:
        padding-left 0.2s ease-in-out,
        background-color 0.2s ease-in-out,
        color 0.2s ease-in-out;

}

.nav-sidebar .nav-link p {
    margin: 0;
    line-height: 1;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    color: var(--sidebar-text-color);
}

.nav-sidebar .nav-link.active p {
    margin: 0;
    line-height: 1;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    color: #fff;
}

.nav-sidebar .nav-link.active i {
    color: #fff;
}

.nav-sidebar .nav-link i {
    color: var(--sidebar-text-color);
}

.nav-sidebar .nav-link.active {
    color: #fff;
}

.main-sidebar .nav-sidebar .nav-link {
    display: flex;
    align-items: flex-start;
}

.main-sidebar .nav-sidebar .nav-link > i,
.main-sidebar .nav-sidebar .nav-link .nav-icon {
    flex: 0 0 1.6rem;
    text-align: center;
    margin-top: 2px;
}

.main-sidebar .nav-sidebar .nav-link p {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1;
}

.nav-sidebar .nav-link p > .right {
    margin-left: auto;
    line-height: 1.4rem;
}

/* Estado base */
/* Sidebar normal (NO colapsado) */
body:not(.sidebar-collapse)
.nav-sidebar .nav-link > .right,
body:not(.sidebar-collapse)
.nav-sidebar .nav-link > p > .right {
    position: absolute;
    right: 0.6rem;
    top: 0.5rem;
}

/* 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;
}

.nav-sidebar .nav-item>.nav-link {
    margin-bottom: 0px;
}

/* Sidebar normal (no colapsado) */
/*body:not(.sidebar-collapse) .nav-sidebar .nav-link > .right,
body:not(.sidebar-collapse) .nav-sidebar .nav-link > p > .right {
    right: 4rem !important;
    
}*/

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-dark-success
.nav-sidebar > .nav-item > .nav-link.active,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-light-success
.nav-sidebar > .nav-item > .nav-link.active {
    /*background: transparent !important;*/
    color: #FFFFFF; /* conservas el blanco del texto/icono */
}

.sidebar-mini.sidebar-collapse.sidebar-expanded-real
.main-sidebar.sidebar-dark-success
.nav-sidebar > .nav-item > .nav-link.active,
.sidebar-mini.sidebar-collapse.sidebar-expanded-real
.main-sidebar.sidebar-light-success
.nav-sidebar > .nav-item > .nav-link.active {
    /*background: var(--link-active-color) !important;*/
    color: #FFFFFF;
}

.menu-inicio {
    background: var(--link-active-color-g) !important;
    border-radius: 0px 50px 50px 0px !important;
}

a {
    color: var(--second-color);
    /*    font-style: italic;
        font-weight: bold;*/
}

.busqueda-avanzada {
    font-style: italic;
    font-weight: bold;
}

a:hover {
    color: var(--link-active-color);
}

b, strong {
    font-weight: 400;
    /* font-style: italic; */
}

.btn-main {
    border: var(--main-color) !important;
    background-color: var(--main-color) !important;
    border-radius: 30px;
    color: white;
    font-size: 16px !important;
    padding: 1px 10px;
    font-weight: 300;
    height: 32px;
    display: inline-flex;
    align-items: center;
    /*min-width: 120px;*/
    text-align: center;
    justify-content: center;
    line-height: 1;
}

.dropdown-toggle-split.btn-row {
    min-width: 0px;
    padding-left: 0px !important;
    padding-right: 5px !important;
}

.btn-row.dropdown-toggle {
    border-radius: 0 30px 30px 0 !important;
}

.btn-row {

    border: var(--main-color) !important;
    background-color: var(--btnrow-color) !important;
    border-radius: 30px;
    color: var(--main-color);
    font-size: 16px !important;
    padding: 1px 5px 1px 10px;
    font-weight: 300;
    height: 32px;
    display: flex;
    align-items: center;
    min-width: 100px;
    text-align: center;
    justify-content: center;
    gap: 7px;
}

.btn-row:hover {
    border-color: var(--main-color) !important;
    background-color: var(--btnrow-active-color) !important;
    color: var(--main-color);
}

btn-row-single:active {
    color: var(--main-color) !important;
}

btn-row:active {
    color: var(--main-color) !important;
}

.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {
    /*color: var(--main-color) !important;*/
}


/*.btn-main:not(:disabled):not(.disabled).active, .btn-main:not(:disabled):not(.disabled):active, .show>.btn-main.dropdown-toggle {
    color: #fff !important;
}*/

.btn-row:not(:disabled):not(.disabled).active, .btn-row:not(:disabled):not(.disabled):active, .show>.btn-row.dropdown-toggle {
    color: var(--main-color) !important;
}

.btn-row-single:not(:disabled):not(.disabled).active, .btn-row-single:not(:disabled):not(.disabled):active, .show>.btn-row-single.dropdown-toggle {
    color: var(--main-color) !important;
}

/*.btn-row i {
    height: 11px;
}*/

.btn-row-single {
    border: var(--main-color) !important;
    background-color: var(--btnrow-color) !important;
    border-radius: 30px;
    color: var(--main-color);
    font-size: 16px !important;
    padding: 1px 10px;
    font-weight: 300;
    height: 32px;
    display: inline-flex;
    align-items: center;
    min-width: 120px;
    text-align: center;
    justify-content: center;
    gap: 5px;
}

.btn-row-single:hover {
    border-color: var(--main-color) !important;
    background-color: var(--btnrow-color) !important;
    color: var(--main-color);
}
.btn-row-single i {
    /*height: 11px;*/
}

.fas.fa-bars {
    /*height: 15px;*/
}

.btn-main:hover {
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1;
}

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

.btn-second {
    border: var(--second-color) !important;
    background-color: var(--second-color) !important;
    border-radius: 30px;
    color: white;
    color: #f1f1f1;
    font-weight: 300;
    padding: 1px 12px !important;
    height: 32px;
    display: inline-flex;
    align-items: center;
    min-width: 120px;
    text-align: center;
    justify-content: center;
    gap: 5px;
}

.btn-second:hover {
    border-color: var(--second-active-color) !important;
    background-color: var(--second-active-color) !important;
    color: #f1f1f1;
}

.btn-second:active {
    border-color: var(--second-active-color) !important;
    background-color: var(--second-active-color) !important;
    color: #f1f1f1;
}

.pagerdiv {
    margin-bottom: 5px;
}

.btn-main i {
    display: flex;
    align-items: baseline;
    margin-right: 5px;
}

.btn-second i {
    /*    display: flex;
        align-items: baseline;*/
    /*    margin-right: 5px;
        margin-top: 2px;*/
}

.btn-actions {
    border: var(--second-color) !important;
    background-color: var(--second-color) !important;
    border-radius: 30px;
    color: white;
    font-size: 16px !important;
    font-weight: 300;
    padding: 3px 12px !important;
    height: 33px;
}

.btn-actions:hover {
    border-color: var(--second-active-color) !important;
    background-color: var(--second-active-color) !important;
    color: white;
}

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:focus, [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:hover {
    background-color: #cddae3;
    color: #fff;
}

[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(--link-active-color-g) !important;
    color: #fff;
}

.btn-outline-main {
    color: var(--main-color);
    border: 1px solid var(--main-color) !important;
    border-radius: 30px;
    font-size: 16px !important;
    padding: 3px 12px !important;
    font-weight: 300;
    min-height: 35px;
    display: flex;
    align-items: center;
    min-width: 120px;
    text-align: center;
    justify-content: center;
}

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

.btn-outline-second {
    color: var(--second-color);
    border: 1px solid var(--second-color) !important;
    border-radius: 30px;
    font-size: 16px !important;
    padding: 3px 12px !important;
    font-weight: 300;
    min-height: 35px;
    display: flex;
    align-items: center;
    min-width: 120px;
    text-align: center;
    justify-content: center;
}

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

/*---HEADER--*/
.search-input {
    border: 1px solid #fff;
    border-radius: 30px;
    overflow: hidden;
    input {
        width: 180px !important;
    }

    color: #FFF  !important;
}

#searchButton {
    color: #FFF  !important;
    padding: 2px 6px;
}

.user-toggle {
    /*    border: 1px solid var(--main-color);
        border-radius: 50%;*/
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;

    .nav-link {
        padding: 3px 10px;
    }

    .nav-link i {
        font-size: 2.3em;
        color: #fff;
    }

}



span.dropdown-item.dropdown-header {
    font-weight: 600;
    font-size: 1rem;
    color: black;
}

/*---BREADCRUMS Y TITULOS---*/
.text-title {
    color: var(--title-color) !important;
    font-family: "Roboto";
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    /*    color: #153244;*/
    color:#FFFFFF;
    display: flex;
    align-items: start;
}

.text-titlev2 {
    font-family: "Roboto";
    font-size: 28px;
    font-weight: 700;
    line-height: 42px;
    color: #153244;

}

.linkBusqueda {
    font-family: "Roboto";
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    color: var(--main-color);
    font-style: italic;
}

.card-title {
    font-size: large;
    color: #000000 !important;
    font-weight: 500;
}

/* --------------------TABLAS----------------------- */
.grid-view {
    padding: 10px 0 10px 0 !important;

    /*margin-top: 12px;*/

    margin-bottom: 16px;

    /*min-height: 200px;*/

    /*overflow: visible;*/
}

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

.grid-view a:hover {
    color: #000;
    font-weight: 600;
}

.grid-view table.items thead tr:hover {
    background: var(--gridview-header-gradient) !important;
}

/*.grid-view table.items tr:hover {
    background: var(--gridview-header-gradient);
}*/
.grid-view table.items tr:hover {
    background-color: #Cddae3 !important;
    /*    cursor:pointer;*/
}


.grid-view table.items {
    border-radius: 0px;
    /*    overflow: hidden;*/
}

.grid-view table.background-success thead tr th {
    color: white;
    text-align: center;
    padding: 15px;
    background: transparent;
}

.grid-view table.background-success thead tr th a {
    color: white !important;
}

/* Header completo con gradiente */
.grid-view table.items thead tr {
    background: var(--gridview-header-gradient);
}

/* Safari FIX: evita que cada th pinte su propio fondo */
.grid-view table.items thead th {
    background-color: var(--gridview-header-gradient) !important;
    background-image: none !important;
}

.grid-view table.items {
    border-collapse: separate;
    border-spacing: 0;
}


.items.background-success thead th {
    transition: background-color 0.2s ease;
}

.items.background-success thead th:hover {
    background-color: rgba(0, 0, 0, 0.15);
}


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

.grid-view table.items th a {
    /* color: #616263; */
    font-weight: 300;
    color: #666;
    text-decoration: none;
}

th.comentarios-column {
    min-width: 350px;
}

.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: 0px 0 0 0px;
}

.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: 0 0px 0px 0;
}

.grid-view table.items td:first-child:only-child,
.grid-view table.items th:first-child:only-child {
    border-radius: 0px;
}

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

.grid-view table.items tr.collapsed td[data-graficarf="A"] {
    text-align: start;
    color: #41B0A6;
}

.grid-view table.items tr.initialized td[data-graficarf="A"] {
    text-align: start;
}

/* cuya clase contenga "child-of-" seguido de cualquier texto */
.grid-view table.items tr[class*="child-of-"] td[data-graficarf="A"] {
    color: #41B0A6;
    padding-left: 1rem;
}


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

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

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

.icon-success {
    color: #41B0A6;
    text-decoration: none;
    padding: 1px;
    font-size: 15px;
}

.icon-success::before{
    font-family: inherit !important;
}

.grid-view .summary {
    text-align: left;
    margin: 0;
    margin-top: -8px;
}

.grid-view .pager {
    text-align: right;
    margin: 0;
}

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

/* -------------------- FIN TABLAS----------------------- */

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(--main-color) !important;
    color: white;
    font-weight: bold;
    border-radius: 5px;
}




.btn-excel {
    border-radius: 20px;
}

/*--- Forms -----*/
.form-control {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    border: 1px solid rgba(205, 218, 227, 0.7);
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    text-align: left;
    height: 37px;
    border-radius: 0.5rem;
}

.input-group>.custom-select:not(:first-child), .input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.form-group {
    margin-bottom: 0.5rem !important;
}

label.control-label,
.form-group>label {
    font-weight: 500 !important;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    line-height: 14px;
    text-align: left;
    color: #464255;

}

.btn-buscar {
    /*border-radius: 10px;*/
    /*background: #4CA2D9;*/
    /*color: white;*/
    font-family: 'Roboto';
    /*font-size: 12px;*/
    /*font-weight: 700;*/
    font-weight: 300;
    line-height: 16px !important;
    text-align: center;


    border: var(--second-color) !important;
    background-color: var(--second-color) !important;
    border-radius: 8px;
    color: white;
    font-size: 16px !important;
    padding: 6px 24px;
    height: 35px;

}

.btn-exportar {
    width: 131px;
    height: 40px;
    border-radius: 10px;
    background: #4CA2D9;
    color: white;
    font-family: 'Roboto';
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

span.input-group-text {
    background-color: white;
    color: #CDDAE3;
}

.btn-acciones {
    width: 131px;
    height: 40px;
    gap: 5px;
    border-radius: 10px;
    opacity: 0px;
    background-color: #4CA2D9;
    color: #ffffff;
    font-family: 'Roboto';
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;

}

/*--- InfoUser----*/
table.detail-view {
    border-collapse: unset;

    tr {
        border: none;
        border-bottom: none;
    }
}

/*---FOOTER---*/
.img-footer {
    width: 200px
}

.img-footer {
    width: 200px
}

.footer-link {
    color: #869099;
}

.footer-link:hover {
    color: #229b93;
}

.floating-window {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
    max-width: 300px;
}

.floating-window.show {
    display: block;
}

@media (min-width: 992px) {

    .sidebar-mini.sidebar-collapse .main-sidebar,
    .sidebar-mini.sidebar-collapse .main-sidebar::before {
        margin-left: 0;
        width: 4rem;
    }
}

aside.main-sidebar .os-padding,
aside.main-sidebar .os-content {
    padding: 0px 0px !important;
}


.row-gradient {
    /*background: var(--row-title-gradient);*/
    background: transparent;
    padding-top: 6px;
    padding-bottom: 6px;
    /*padding-left: 20px;*/
}

.row-title {
    padding-left: 25px !important;
    padding-right: 25px !important;
    /*padding-top: 1rem;*/
    background: var(--main-color);
    display: flex;
    align-items: center;
    min-height: 105px;
    padding-bottom: 65px;
}

.content {
    padding: 0px 0px;
    padding-bottom: 1rem;
}

/*.container-fluid{
    padding: 0px 0px;
    padding-bottom: 6px;
}*/

.container-fluid {
    padding: 0px 0px;
    padding-bottom: 6px;
    /* height: 131px; */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.row-breadcrumb{
    background: #20AB8E;
    ;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0px 43px;
}


.card {
    margin: 0rem 2rem;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.05);
    border-radius: 7px
}

.fc-header-title h2 {
    font-size: 24px;
    color: #000000;
    line-height: 1em;
    margin-left: 10px;
}

.fc-button{
    font-weight: 700;
    text-transform: uppercase;
    color:#000000;
}

.fc-state-down, .fc-state-active {
    box-shadow: none;
    color: var(--link-color);
}

.fc-button-next {
    border: none;
    background: #FFFFFF;

}

.fc-button-prev {
    border: none;
    background: #FFFFFF;

}
.fc-header .fc-button {
    margin-bottom: 0px;
}

.fc-header-center {
    margin-bottom: auto;
    margin-top: auto;
}

.fc-header-right{
    margin-bottom: auto;
    margin-top: auto;
}

.fc-grid th {
    vertical-align: middle;
    height: 40px;
}

.fc-widget-header{
    background: transparent;
}

.fc-border-separate thead {
    background: var(--calendar-header-gradient);
    text-transform: uppercase;
    color: #FFFFFF;
}

.fc-border-separate thead {
    border: none;
}

.fc-border-separate thead th.fc-first {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.fc-border-separate thead th.fc-last {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.fc-border-separate tr.fc-last th, .fc-border-separate tr.fc-last td {
    border-bottom-width: 1px;
    padding-right: 40px !important;
}

.fc-border-separate thead th {
    border: none;
}

.fc-border-separate thead tr {
    border: none;
}


.main-sidebar ul {
    padding: 0px;
}

.flex-gap {
    display: flex; /* Asegúrate de que el contenedor es flex */
}

.flex-gap > div + div {
    margin-left: 20px; /* Aquí defines tu "gap" */
}

.main-header {
    background: var(--main-color);
}

.main-header {
    /*border-bottom: 120px solid var(--main-color) !important;*/
    z-index: 800;
    border-bottom: 0px;
}

@media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .main-footer, .sidebar-mini.sidebar-collapse .main-header{
        margin-left: 3.9rem !important;
    }
}

.text-primary {
    color: #5FB66B !important;
    font-weight: 500;
}

.card-body > form > p > a {
    font-size: 14px;
    padding-left: 8px;
    font-weight: 500;
    font-style: italic;
}

.fa.fa-cogs{
    font-size: 1.6rem !important;
}

.card-body h4 {
    color: var(--subtitle-color);
}

.card-body {
    padding-top: 0.8rem;

}

.summary {
    padding-left: 0rem;
    padding-bottom: 9px;
    color: var(--color-details);
}

/*.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0px !important;
    margin-left: 0px !important;
}*/

.fc-event-time, .fc-event-title {
    padding: 0 1px;
    line-height: 1.3 !important;
}

.fc-event-inner {
    overflow: unset;
    padding: 5px 5px;
}
.fc-event {
    border-radius: 10px !important;
}

.fc-event-container a:hover {
    color: #0056b3;
}


/*.fc-event{
    height: 8px;
    margin-top: 85px;
}

.fc-event-inner {
    position: absolute;
    top: -72px
}*/

.fc-ltr .fc-event-hori.fc-event-end, .fc-rtl .fc-event-hori.fc-event-start {
    border-right-width: 1px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.fc-ltr .fc-event-hori.fc-event-start, .fc-rtl .fc-event-hori.fc-event-end {
    border-left-width: 1px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.fc-agenda-slots{
    width: 99% !important;
}

.fc-state-highlight {
    background: linear-gradient(
        to right,
        transparent 4px,
        #fcf8e3 4px,
        #fcf8e3 calc(100% - 4px),
        transparent calc(100% - 4px)
    ) !important;
}

.grid-view .pager {
    text-align: right;
    margin: 0 20px;
}

.input-group-text {
    border: 1px solid rgba(205, 218, 227, 0.7);
    font-size: 1rem !important;
}

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group>.input-group-append:last-child>.input-group-text:not(:last-child), .input-group>.input-group-append:not(:last-child)>.btn, .input-group>.input-group-append:not(:last-child)>.input-group-text, .input-group>.input-group-prepend>.btn, .input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
    border-left: none;

    background: white;
    color: #CDDAE3;
    font-weight: 600;
    /* border-left: 1px; */
    border: 1px solid rgba(205, 218, 227, 0.7);
    height: 37px;
}

.input-group-append .input-group-text {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-left: none;
}

.card-body.section-header {
    padding-bottom: 0.8rem !important;
}

.card-body.section-header-form {
    padding-bottom: 0rem !important;
}

.card-body.section-body {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

h4 {
    margin-block-end: 0px !important;
}

.content-wrapper{
    /*background : var(--color-background);*/
/*    position: relative;
    z-index: 799;*/
    margin-top: -150px;
    background: transparent;
    min-height: 84vh !important;
}

.card > .nav-tabs{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden; /* importante para que el fondo de los <a> no “se salga” */
}

/* Redondea el primer y último tab (link) */
.card > .nav-tabs .nav-item:first-child .nav-link{
    border-top-left-radius: 15px;
}
/*.card > .nav-tabs .nav-item:last-child .nav-link{
  border-top-right-radius: 15px;
}*/

.content-wrapper>.content {
    padding: 0 0;
}

.btn-dropdown {
    height: 25px;
    width: 25px;
    background: var(--second-color);
    border-top-right-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
    border-top-left-radius: 7px !important;
    border-bottom-left-radius: 7px !important;
}

.btn-dropdown:hover {
    background: var(--button-color) !important;
}

.btn-dropdown i {
    color: #FFFFFF;
    font-size: 1.3rem !important;
}

.dropdown-item-grid {
    padding: 0.35rem 0.5rem;
    cursor: pointer;
}

.dropdown-grid-text {
    margin-left: 8px;
}


.card-header-dashboard {
    background-color: transparent;
    position: relative;
    padding: .2rem 0rem;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

/*.title-dashboard-card .link-title{
    font-size: 14px;
    color: #B1B1B1 !important;
    font-weight: 400;
}*/

.btn-second.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0px !important;
    vertical-align: .255em;
    content: "\f107";
    border-top: 0px solid !important;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 23px;
    margin-top: 2px;
}

.btn-main.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0px !important;
    vertical-align: .255em;
    content: "\f107";
    border-top: 0px solid !important;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 23px;
    margin-top: 2px;
}

.btn-main.dropdown-toggle::after{
    border-right: 0em solid transparent;
}

.dropdown-item.fa {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
}

.dropdown-menu {
    font-size: 16px !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;
}

.title-icon {
    background: #FFF;
    border-radius: 7px;
    height: 2.2rem;
    width: 2.2rem;
    color: var(--main-color);
    font-size: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-right: 5px;
}

/* Dropdown global estilo "caja derecha" */
select.form-control{
    background-color:#fff;
    border:1px solid rgba(205, 218, 227, 0.7);
    border-radius:.5rem;
    height:37px;
    padding:5px 60px 5px 10px;

    font-size:12px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23CDDAE3'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),

        linear-gradient(rgba(177, 177, 177, 0.5), rgba(177, 177, 177, 0.5)),
        linear-gradient(transparent, transparent);

    background-repeat:no-repeat,no-repeat,no-repeat;

    /* 1) SVG  2) línea  3) panel derecho */
    background-size: 24px 12px, 1px 100%, 43px 100%;

    /* mueve la flecha hacia adentro */
    background-position: right 7px center, right 38px top 0, right 0 top 0;
}

.input-group.success > select.form-control{
    background-color:#fff;
    border:1px solid rgba(205, 218, 227, 0.7);
    border-radius:.5rem;
    height:37px;
    padding:5px 60px 5px 10px;

    font-size:12px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23CDDAE3'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),

        linear-gradient(rgba(177, 177, 177, 0.5), rgba(177, 177, 177, 0.5)),
        linear-gradient(transparent, transparent);

    background-repeat:no-repeat,no-repeat,no-repeat;

    /* 1) SVG  2) línea  3) panel derecho */
    background-size: 24px 12px, 1px 100%, 43px 100%;

    /* mueve la flecha hacia adentro */
    background-position: right 7px center, right 38px top 0, right 0 top 0;
}

.input-group.error > select.form-control{
    background-color:#fff;
    border:1px solid rgba(205, 218, 227, 0.7);
    border-radius:.5rem;
    height:37px;
    padding:5px 60px 5px 10px;

    font-size:12px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23CDDAE3'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),

        linear-gradient(rgba(177, 177, 177, 0.5), rgba(177, 177, 177, 0.5)),
        linear-gradient(transparent, transparent);

    background-repeat:no-repeat,no-repeat,no-repeat;

    /* 1) SVG  2) línea  3) panel derecho */
    background-size: 24px 12px, 1px 100%, 43px 100%;

    /* mueve la flecha hacia adentro */
    background-position: right 7px center, right 38px top 0, right 0 top 0;
}

.form-group.error > select.form-control{
    background-color:#fff;
    border:1px solid rgba(205, 218, 227, 0.7);
    border-radius:.5rem;
    height:37px;
    padding:5px 60px 5px 10px;

    font-size:12px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23CDDAE3'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),

        linear-gradient(rgba(177, 177, 177, 0.5), rgba(177, 177, 177, 0.5)),
        linear-gradient(transparent, transparent);

    background-repeat:no-repeat,no-repeat,no-repeat;

    /* 1) SVG  2) línea  3) panel derecho */
    background-size: 24px 12px, 1px 100%, 43px 100%;

    /* mueve la flecha hacia adentro */
    background-position: right 7px center, right 38px top 0, right 0 top 0;
}

.form-group.success > select.form-control{
    background-color:#fff;
    border:1px solid rgba(205, 218, 227, 0.7);
    border-radius:.5rem;
    height:37px;
    padding:5px 60px 5px 10px;

    font-size:12px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23CDDAE3'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),

        linear-gradient(rgba(177, 177, 177, 0.5), rgba(177, 177, 177, 0.5)),
        linear-gradient(transparent, transparent);

    background-repeat:no-repeat,no-repeat,no-repeat;

    /* 1) SVG  2) línea  3) panel derecho */
    background-size: 24px 12px, 1px 100%, 43px 100%;

    /* mueve la flecha hacia adentro */
    background-position: right 7px center, right 38px top 0, right 0 top 0;
}

.input-group.error > select.form-control{
    background-color:#fff;
    border:1px solid rgba(205, 218, 227, 0.7);
    border-radius:.5rem;
    height:37px;
    padding:5px 60px 5px 10px;

    font-size:12px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23CDDAE3'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),

        linear-gradient(rgba(177, 177, 177, 0.5), rgba(177, 177, 177, 0.5)),
        linear-gradient(transparent, transparent);

    background-repeat:no-repeat,no-repeat,no-repeat;

    /* 1) SVG  2) línea  3) panel derecho */
    background-size: 24px 12px, 1px 100%, 43px 100%;

    /* mueve la flecha hacia adentro */
    background-position: right 7px center, right 38px top 0, right 0 top 0;
}

.input-group.success > select.form-control{
    background-color:#fff;
    border:1px solid rgba(205, 218, 227, 0.7);
    border-radius:.5rem;
    height:37px;
    padding:5px 60px 5px 10px;

    font-size:12px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23CDDAE3'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),

        linear-gradient(rgba(177, 177, 177, 0.5), rgba(177, 177, 177, 0.5)),
        linear-gradient(transparent, transparent);

    background-repeat:no-repeat,no-repeat,no-repeat;

    /* 1) SVG  2) línea  3) panel derecho */
    background-size: 24px 12px, 1px 100%, 43px 100%;

    /* mueve la flecha hacia adentro */
    background-position: right 7px center, right 38px top 0, right 0 top 0;
}

.form-group.error > select.form-control:focus{

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23b1b1b1'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),
        linear-gradient(#80bdff, #80bdff),
        linear-gradient(transparent, transparent);
}

.form-group.success > select.form-control:focus{

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23b1b1b1'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),
        linear-gradient(#80bdff, #80bdff),
        linear-gradient(transparent, transparent);
}

select.form-control:focus{

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23b1b1b1'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),
        linear-gradient(#80bdff, #80bdff),
        linear-gradient(transparent, transparent);
}

.input-group.success > select.form-control:focus{

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23b1b1b1'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),
        linear-gradient(#80bdff, #80bdff),
        linear-gradient(transparent, transparent);
}

.input-group.success > select.form-control:focus{

    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.43%209.99'%3E%3Cpath%20opacity='1'%20fill='%23b1b1b1'%20d='M7.8,5.41c-.19-.19-.26-.25-.33-.31C5.89,3.52,4.32,1.94,2.75.37q-.49-.49-1,.01C1.24.9.73,1.42.21,1.92c-.26.25-.29.43-.02.7,2.4,2.38,4.79,4.77,7.17,7.16.28.29.47.25.74-.02,2.37-2.38,4.75-4.76,7.13-7.13.26-.26.28-.44.01-.7-.56-.53-1.11-1.08-1.64-1.64-.3-.33-.51-.35-.84-.01-1.52,1.56-3.07,3.09-4.61,4.63-.13.13-.22.31-.35.49Z'/%3E%3C/svg%3E"),
        linear-gradient(#80bdff, #80bdff),
        linear-gradient(transparent, transparent);
}

.form-group.error >.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: inset 0 0 0 transparent,none;
}

.form-group.success >.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: inset 0 0 0 transparent,none;
}
.subtitlev2 {
    font-family: "Roboto";
    font-size: 22px;
    font-weight: 600;
    line-height: 22px;
    color: var(--subtitle-color) !important;

}

.callout, .elevation-1, [class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link.active, [class*=sidebar-light-] .nav-sidebar>.nav-item>.nav-link.active {
    box-shadow: none !important;
}

textarea.form-control {
    height: auto;
    padding-top: 12px;
}

.dropdown-toggle-split:has(+ .dropdown-menu:empty),
.dropdown-toggle-split:has(+ .dropdown-menu:not(:has(a, button, li))) {
    display: none;
}



/*breadcrumbs custom*/

.breadcrumb{
    margin-top: auto;
    margin-bottom:auto;
    color: #FFF !important;
}

.breadcrumb {
    padding: 0.7rem 1rem;
}

.breadcrumb-item::before{
    color: #FFF !important;

}

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

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

.boton-banderin {
    /*    height: 22px;
      position: relative;
      color: var(--main-color);
      padding: 1px 1px;  Espacio para el texto 
      font-family: 'Roboto';
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 1px;*/

    position: relative;
    padding: 0 20px !important;
    line-height: 2.5;
    font-family: 'Roboto';
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    color: #FFF !important;
    /*cursor: pointer;*/

    /* Esto crea la forma del banderín */
    /* Usamos el SVG como fondo */
    /*  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20600%2069'%3E%3Cg%3E%3Cpath%20fill='none'%20stroke='%231CA284'%20stroke-width='2'%20d='M1.66,67l17.22-32.53c0.16-.3.15-.65-.01-.95L1.68,2h579l17.46,32.01L580.4,67H1.66z'/%3E%3Cpath%20fill='none'%20stroke='%231CA284'%20stroke-width='2'%20d='M579.8,3l16.92,31.01L579.8,66H3.32l16.45-31.06c.31-.59.31-1.3-.01-1.89L3.37,3H579.8M581,1H0l18,33L0,68h581l18-34L581,1z'/%3E%3C/g%3E%3C/svg%3E");*/



    /*background-size: 100% 94%;*/
    /*background-repeat: no-repeat;*/
    /*background-color: transparent;  Totalmente transparente */

    /* Creamos el borde blanco usando un pseudo-elemento */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Para simular el borde blanco que se ve en la imagen */
/*.boton-banderin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
   El recorte del fondo (un poco más grande que el de arriba) 
  clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
  z-index: -1;
}

 El fondo interno para que el borde blanco se vea fino 
.boton-banderin::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background-color: #4a6a9b;  Igual al fondo de la barra 
  clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
  z-index: -1;
}*/

.boton-banderin::before,
.boton-banderin::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: transparent;
    border-left: 1px solid var(--main-color);
    border-right: 1px solid var(--main-color);
}

.boton-banderin::before {
    top: 0px;
    transform: skew(30deg);
    border-top: 1px solid var(--main-color);
}

.boton-banderin::after {
    bottom: -0px;
    transform: skew(-30deg);
    border-bottom: 1px solid var(--main-color);
}

.breadcrumb {
    display: flex;
    padding: 0px 0px;
    /*gap: 12px;  separación real entre banderines */
}

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

.boton-banderin {
    /*min-width: 180px;  ajusta a gusto */
}

.breadcrumb-item {
    /*padding-left: 0 !important;*/
    display: flex;
    align-items: center;
    font-weight: 300;
}

/*FINAL*/

.ui-front {
    z-index: 800 !important;
}

.ui-widget {
    font-family: 'Roboto', Arial, sans-serif !important;
}

.card-footer {
    padding: .75rem 1.25rem;
    background-color: #fff;
    border-top: 0 solid rgba(0, 0, 0, .125);
}

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

#div-IngresaExt > .card{
    box-shadow: none;
}

#div-IngresaEqu > .card{
    box-shadow: none;
}

#div-IngresaExt > .card-body{
    margin: 0px;
}

#div-IngresaEqu > .card-body{
    margin: 0px;
}

@media (max-width: 1200px) {

    /* Oculta todos los elementos intermedios */
    .breadcrumb-item {
        display: none;
    }

    /* Muestra el primero */
    .breadcrumb-item:first-child {
        display: flex;
    }

    /* Muestra el último */
    .breadcrumb-item:last-child {
        display: flex;
    }

    /* Inserta los puntos suspensivos */
    /*    .breadcrumb-item:first-child::after {
            content: '…';
            display: flex;
            align-items: center;
            padding: 0 10px;
            font-weight: 300;
            color: #fff;
        }*/

    /*.navbar-nav .nav-item .nav-link {
        color: #fff;
    }*/

}

.main-footer {
    background: var(--color-background) !important;
    border-top: 0px;
    color: #869099;
    padding: 1rem;
    min-height: 8vh;
}

.nav-search::placeholder {
    color: #fff !important;
}

.nav-search {
    height: auto !important;
    background: var(--main-color) !important;
    color: #fff !important;
}

.brand-text-custom {
    color: #fff;
    font-size: 17px;
    line-height: 17px;
    font-weight: 200;
}

.brand-image {
    float: left;
    line-height: .8;
    margin-top: -3px;
    width: auto;
}

.navbar {
    padding-top: 1rem;
    padding-bottom: 0.5rem;

    padding-right: 1.5rem;
    padding-left: 2rem;
}

.nav-link.active p i {
    color: #FFF; /* el color que quieras */
}

.custom-card {
    margin-top:-56px;
}

.nav-tabs {
    border-bottom: 0px;
}

/*Alert*/


.ajs-close {
    color: white !important;
    opacity: 1 !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    background-color: #95abc2 !important;
    border-radius: 99px;
}

.ajs-close:hover {
    background-color: #CDDAE3 !important;
}

.alertify .ajs-commands button {
    display: none;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    padding: 13px !important;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.alertify .ajs-commands button.ajs-close {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA////pdmf3QAAAAJ0Uk5TAP9bkSK1AAAAIElEQVR4nGNkYGBMlGcs5mW0P8go9wiEgAwgFyjIwAAAWiUGC9RV4/kAAAAASUVORK5CYII=) !important;

}

.ajs-ok{
    border: var(--main-color) !important;
    background-color: var(--main-color) !important;
    border-radius: 8px;
    color: white !important;
    font-size: 16px !important;
    padding: 1px 10px;
    font-weight: 600 !important;
    height: 32px;
    display: flex;
    align-items: center;
    text-transform: uppercase !important;
    min-width: 120px !important;
    text-align: center;
    justify-content: center;
    font-family: "Roboto";
    min-width: 120px !important;
}

.ajs-ok:hover {
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1;
}

.ajs-button:focus {
    outline: none !important;
}

.ajs-cancel {
    border: var(--second-color) !important;
    background-color: var(--second-color) !important;
    border-radius: 8px;
    color: white !important;
    font-size: 16px !important;
    padding: 1px 10px;
    font-weight: 600 !important;
    height: 32px;
    display: flex;
    align-items: center;
    min-width: 120px;
    text-align: center;
    justify-content: center;
    font-family: "Roboto";
    text-transform: uppercase !important;
    min-width: 120px !important;
}

.ajs-cancel:hover {
    border-color: var(--second-active-color) !important;
    background-color: var(--second-active-color) !important;
    color: #f1f1f1;
}

.ajs-cancel:focus {
    outline: 0px auto -webkit-focus-ring-color;
}


.ajs-primary {
    display: flex;
    justify-content: center;
}

.alertify .ajs-dialog {
    max-width: 50%;
    min-height: 137px;
    background-color: #fff !important;
    border: 1px solid #DDD;
    box-shadow: none;
    border-radius: 18px !important;
    font-family: "Roboto";
}



.alertify .ajs-header {
    padding: 1.5rem 2rem;
    border-bottom: none;
    border-radius: 18px 18px 0 0 !important;
    color: var(--main-color);
    background-color: #fff;
    font-family: "Roboto";
    font-size: 1.6em;
    font-weight: 700;
}

.alertify .ajs-footer {
    background-color: #fff;
    padding: 1rem 2rem;
    border-top: none;
    border-radius: 0 0 18px 18px !important;

}

.ajs-content {
    text-align: center;
}

.modal-content {
    border-radius: 0.8rem;
}

.ajs-header {
    text-align: center;
}

.input-group>.custom-select:not(:last-child), .input-group>.form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius:  0 !important;
}
.input-group>.custom-select:not(:first-child), .input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}


#columnas-form > .input-group>.custom-select:not(:last-child) {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius:  0.5rem !important;
}
#columnas-form >  .input-group>.custom-select:not(:first-child) {
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background: #cddae3 !important;
    box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #000 !important;
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff;
    min-width: 110px;
    text-align: center;
}


.alertify .ajs-commands {
    position: absolute;
    right: 0px;
    margin: -14px 8px 0 0 !important;
    z-index: 2;
}

.info{
    display: flex !important;
    justify-content: start;
    align-items: end;
}

.sidebar a {
    color: var(--main-color) !important;
}

.sidebar a:hover {
    color: var(--second-color) !important;
}

.user-panel {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.card-glass{
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/*.navbar-expand .navbar-nav .nav-link {
    padding-right: 1rem ;
    padding-left: 0rem !important;
}*/

/* 1. Contenedor principal de todo el Grid */
#clientes-grid {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 2. El div que envuelve solo a la tabla (donde ocurre el scroll) */
/* Yii suele generar un div con clase 'keys' o similar, pero lo ideal es envolver la tabla */
.grid-view .items {
    /*display: block;*/
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 3. Fijar el Pager */
.grid-view .pager {
    position: sticky;
    left: 0;       /* Se alinea a la izquierda de la pantalla */
    width: 100%;   /* Ocupa el ancho visible */
    background: #f8f9fa; /* Color sólido para que no se vea la tabla tras él */
    padding: 12px 10px;
    margin: 0;
    border-top: 1px solid #ddd;
    z-index: 10;
}

.user-panel {
    border-bottom: 0px !important;
    background: var(--user-panel-color) !important;
}

.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;
}

.grid-interno {
    padding-bottom: 20px;
}

.div-datos {
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 0rem 1rem;
    width: 100%;
    align-items: start;

}

.custom-separator {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 2px;
    margin-bottom: 2px;
    border-top: 1px solid var(--second-color);
    background: var(--second-color);
}

.text-username{
    font-weight: 600;
    color: var(--main-color);
    font-style: normal;
    line-height: 15px;
    font-size: 16px;
    margin-bottom: 2px;
}

.text-name {
    color: var(--second-color);
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 12px;
}

.text-tipo{
    font-weight: 600;
    color: var(--second-color);
    font-style: normal;
    text-transform: uppercase;
}

.speech-bubble-top {
    position: relative;
    border-radius: 12px;
    overflow: visible;
}

/* Piquito arriba */
.speech-bubble-top::before {
    content: "";
    position: absolute;
    top: -10px;       /* saca el pico hacia arriba */
    right: 7px;       /* mueve el pico horizontalmente */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(235,243,244, 0.85);


}

.card-body-datos {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}

#data-dismiss\=modal {
    display: none;
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--main-color);
    text-decoration: none;
    background-color: var(--main-active-color);
}

.note {
    color:var(--main-color) !important;
    margin-block-end: 5px;
}

/*.fas.fa-plus-circle {
    margin-top: 1px;
}*/

.fa-sm {
    font-size: inherit;
}

.user-panel .image {
    display: inline-block;
    padding-left: .95rem !important;
}

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

.form-button-bar {
    margin-bottom: 16px;
}

.modal-title {
    color: var(--main-color);
}

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--text);
}

.dropdown-gridview {
    overflow-y: auto !important;
    max-height: 170px !important;
}

/* Usando tu lógica de :has pero con un posicionamiento que no dependa del padre */
.table-responsive:has(.dropdown-menu.show) {
    min-height: 240px;
}

/* Forzamos a que la tabla no sea la que determine el recorte */
.grid-view .items {
    position: static;
}

.card {
    overflow-y: visible;
}

.card-body {
    overflow-y: visible;
}

.btn-group-row {
    width: auto;
}

.gridview-row {
    gap: 0px;
}

.action-button-row {
    gap: 7px;
}

#ContenidoPrincipal > .row {
    margin: 0rem 1.5rem 0.5rem  0.5rem !important;
    h2 {
        color: var(--title-color) !important;
        font-family: "Roboto";
        font-size: 20px;
        font-weight: 700;
        line-height: 20px;
        /*    color: #153244;*/
        color:#FFFFFF;
        display: flex;
        align-items: start;
        margin-left: 1.9rem !important;
    }

    h3 {
        color: var(--title-color) !important;
        font-family: "Roboto";
        font-size: 20px;
        font-weight: 700;
        line-height: 20px;
        /*    color: #153244;*/
        color:#FFFFFF;
        display: flex;
        align-items: start;
        margin-left: 1.9rem !important;
    }
}

#ContenidoPrincipal > .container-fluid > .row {
    margin: 0rem 1.5rem 0.5rem  0.5rem !important;

    h2 {
        color: var(--title-color) !important;
        font-family: "Roboto";
        font-size: 20px;
        font-weight: 700;
        line-height: 20px;
        /*    color: #153244;*/
        color:#FFFFFF;
        display: flex;
        align-items: start;
        margin-left: 1.9rem !important;
    }
}

#ContenidoPrincipal > .content >  .container-fluid > .row {
    margin: 0rem 1.5rem 0.5rem  0.5rem !important;

    h2 {
        color: var(--title-color) !important;
        font-family: "Roboto";
        font-size: 20px;
        font-weight: 700;
        line-height: 20px;
        /*    color: #153244;*/
        color:#FFFFFF;
        display: flex;
        align-items: start;
        margin-left: 1.9rem !important;
    }

    h3 {
        color: var(--title-color) !important;
        font-family: "Roboto";
        font-size: 20px;
        font-weight: 700;
        line-height: 20px;
        /*    color: #153244;*/
        color:#FFFFFF;
        display: flex;
        align-items: start;
        margin-left: 1.9rem !important;
    }
}

#ContenidoPrincipal > .row .btn-main {
    background-color: white !important;
    color: var(--main-color);
}

button.btn.btn-success.btn-main.dropdown-toggle.dropdown-toggle-split{
    padding-right: 15px !important;
    padding-left: 1px !important;
}

#ContenidoPrincipal > .container-fluid .row  .btn-main {
    background-color: white !important;
    color: var(--main-color);
}

#ContenidoPrincipal > .container-fluid .row  .btn-main:hover {
    border-color: var(--main-color) !important;
    background-color: var(--btnrow-active-color) !important;
    color: var(--main-color);
}

.container-fluid .card .row  .btn-main {
    background-color: var(--main-color) !important;
    color: white !important;
}

.container-fluid .card .row  .btn-main:hover {
        border-color: var(--main-active-color) !important;
        background-color: var(--main-active-color) !important;
        color: #f1f1f1;
}

#ContenidoPrincipal > .content >  .container-fluid > .row .btn-main {
    background-color: white !important;
    color: var(--main-color);
}

#ContenidoPrincipal > .content >  .container-fluid > .row .btn-main:hover {
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1;
}

#ContenidoPrincipal > .container-fluid .row.clearfix .btn-main {
     background-color: var(--main-color) !important;
    color: white !important;
}

#ContenidoPrincipal > .container-fluid .row.clearfix .btn-main:hover {
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1;
}

#ContenidoPrincipal > .row .title-icon {
    display: flex !important;
}

#ContenidoPrincipal > .row .breadcrumb {
    margin-left: 1.9rem;
    margin-top: 4px;
}

#ContenidoPrincipal > .container-fluid > .row .breadcrumb {
    margin-left: 1.9rem;
    margin-top: 4px;
}

#ContenidoPrincipal > .content > .container-fluid > .row .breadcrumb {
    margin-left: 1.9rem;
    margin-top: 4px;
}

.grid-view .empty {
    font-style: italic;
    color:black;
}

.card-body > .col-6 > .btn-group .btn-second{
    background-color: var(--main-color) !important;
}
.card-body > .col-6 > .btn-group .btn-second:hover{
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1
}

.card-body > .col-md-6 > .btn-group .btn-second{
    background-color: var(--main-color) !important;
}
.card-body > .col-md-6 > .btn-group .btn-second:hover{
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1
}

.card-body > .col-6 .d-flex .justify-content-end .align-items-center > .btn-group .btn-second{
    background-color: var(--main-color) !important;
}
.card-body > .col-6 .d-flex .justify-content-end .align-items-center > .btn-group .btn-second:hover{
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1
}

.card-body .col-6.d-flex .btn-group .btn-second {
    background-color: var(--main-color) !important;
}
.card-body .col-6.d-flex .btn-group .btn-second:hover {
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1
}

.card-body .col-11.d-flex .btn-group .btn-second {
    background-color: var(--main-color) !important;
}
.card-body .col-11.d-flex .btn-group .btn-second:hover {
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1
}

.card-body .col-12.d-flex .btn-group .btn-second {
    background-color: var(--main-color) !important;
}
.card-body .col-12.d-flex .btn-group .btn-second:hover {
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1
}

.card-body .col-7.d-flex .btn-group .btn-second {
    background-color: var(--main-color) !important;
}
.card-body .col-7.d-flex .btn-group .btn-second:hover {
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1
}

.card-body .col-5.d-flex .btn-group .btn-second {
    background-color: var(--main-color) !important;
}
.card-body .col-5.d-flex .btn-group .btn-second:hover {
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1
}

.card-body .card-tools .btn-group .btn-second {
    background-color: var(--main-color) !important;
}
.card-body .card-tools .btn-group .btn-second:hover {
    border-color: var(--main-active-color) !important;
    background-color: var(--main-active-color) !important;
    color: #f1f1f1
}

#ContenidoPrincipal > .row .col-md-6 > .btn-group .btn-second{
    background-color: white !important;
    color: var(--main-color) !important;
}

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

.dropdown-menu{
    box-shadow: none;
}

input[type="checkbox"].btn-second {
    /* Tus estilos aquí */
    min-width: 13px !important;
}

.clearfix {
    margin-top: 10px;
}

.formulario > ul.nav.nav-tabs {
    margin-left: 0px;
}

.formulario > .nav-tabs .nav-link {

    border: 1px solid transparent;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background: #fff !important;
    text-align: center;
    box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.05);
    /*     border-top: 1px solid black; 
         border-left: 1px solid black; 
         border-right: 1px solid black; */

}

.formulario > .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--main-color) !important;
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff;
    min-width: 110px;
    text-align: center;
    font-weight: 600;
}


#formUno > .nav-tabs .nav-link {

    border: 1px solid transparent;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background: #fff !important;
    text-align: center;
    box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.05);
    /*     border-top: 1px solid black; 
         border-left: 1px solid black; 
         border-right: 1px solid black; */

}

#formUno > .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--main-color) !important;
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff;
    min-width: 110px;
    text-align: center;
    font-weight: 600;
}

.nav.nav-tabs {
    overflow-y: auto;
    padding-top: 2px;
}

#formUno > .nav.nav-tabs {
    overflow-y: hidden;
    padding-top: 2px;
    margin-right: 10px;
}

#formUno> .input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group>.input-group-append:last-child>.input-group-text:not(:last-child), .input-group>.input-group-append:not(:last-child)>.btn, .input-group>.input-group-append:not(:last-child)>.input-group-text, .input-group>.input-group-prepend>.btn, .input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-left: none;

    background: white;
    color: #CDDAE3;
    font-weight: 600;
    /* border-left: 1px; */
    border: 1px solid rgba(205, 218, 227, 0.7);
    height: 37px;
}

.input-group input[readonly] ~ .input-group-append .input-group-text {
    background-color: #e9ecef;
    cursor: not-allowed;
    pointer-events: none;
    border: 1px solid rgba(205, 218, 227, 0.2);
}

/*form .col-6 > .btn-group .btn-second {
    background-color: var(--second-color) !important;
}*/

@media (max-width: 576px) {
    .btn-row.dropdown-toggle {
        flex: none;
    }

    .btn-group-row {
        width: 100%;
    }

    .row.row-title {
        gap: 7px;
    }

    #theme-toggle {
        display: none !important;
    }

    #zoraLogoRow {
        display: none !important;
    }

    .search-input {
        input {
            width: 130px !important;
        }
    }

    .gridview-row {
        gap: 7px;
    }

    .btn-main.dropdown-toggle i {
        margin-left: auto !important;
    }

    .dropdown-toggle::after {
        margin-left: auto !important;
    }

    .card {
        margin: 0rem 1rem;
    }

    #ContenidoPrincipal > .row {
        margin: 0rem 0.5rem 1rem 0rem !important;
    }
}

@media (min-width: 576px) {
    .row.row-title {
        gap: 0px;
    }
    .search-input {
        input {
            min-width: 100px !important;
        }
    }

    .input-group{
        flex-wrap: nowrap;
    }
}

@media (min-width: 992px) {

}
        .button-column {
            overflow: visible !important;
        }

        .formulario>.nav-tabs .nav-link {
            padding: 2px 9px;
        }
        
        #formUno>.nav-tabs .nav-link {
            padding: 2px 9px;
            margin-top: 10px;
        }

        .text-username {
            font-weight: 400;
            color: var(--main-color);
            font-style: normal;
            line-height: 15px;
            font-size: 16px;
            margin-bottom: 6px !important;
        }

        .custom-separator {
            display: block;
            width: 100%;
            height: 1px;
            margin-top: 2px;
            margin-bottom: 2px;
            border-top: 1px solid #E2E7ED;
            background: #E2E7ED;
        }

        .text-tipo {
            font-weight: 400;

        }

        .form-group {
            margin-bottom: 1rem !important;
        }

        .btn-success {
            border: var(--second-color);
            background-color: var(--second-color);
            border-radius: 30px;
            color: white;
            color: #f1f1f1;
            font-weight: 300;
            padding: 1px 12px !important;
            height: 32px;
            display: inline-flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            gap: 5px;
        }

        .btn-warning {
            border-radius: 30px !important;
            color: white;
            color: #f1f1f1;
            font-weight: 300;
            padding: 1px 12px !important;
            height: 32px;
            display: inline-flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            gap: 5px;
        }

        [class^="icon-"]:before,
        [class*=" icon-"]:before {
            font-family: unset;
            font-style: normal;
            font-weight: normal;
            speak: never;
            display: inline-block;
            text-decoration: inherit;
            width: 1em;
            text-align: center;
            /* margin-right: .2em; */
            /* margin-left: .2em; */
            /* opacity: .8; */
            font-variant: normal;
            text-transform: none;
            line-height: 1px;
            /* font-size: 120%; */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: inherit;
            /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
        }

        /* Selecciona el botón si es el primero de dos elementos (Botón + Menu) */
        .btn-group>button.btn-success.btn-main.dropdown-toggle-split:first-child:nth-last-child(2) {
            padding-right: 12px !important;
            padding-left: 6px !important;
        }

        .nav.nav-tabs {
            overflow-y: visible;
            padding-top: 2px;
        }

        .dropdown-item {
            color: var(--second-color) !important;
            text-decoration: none;
            font-size: 15px;
        }

        .dropdown-item:focus,
        .dropdown-item:hover {
            font-weight: 600;
            color: var(--second-color) !important;
        }
        
        .dropdown-item.active, .dropdown-item:active {
            color: var(--main-color);
            text-decoration: none;
            background-color: #CDDAE3;
        }
        
                .main-sidebar ul {
            padding: 0px;
            max-width: 250px;
        }

        .sidebar-expanded-real .nav-sidebar .nav-treeview .nav-treeview > .nav-item > .nav-link {
            padding-left: 23px;
            padding-right: 10px;
        }
        
        
        .card-header-dashboard {
    flex-shrink: 0 !important;
}

/* 2. El contenido ocupa el ESPACIO RESTANTE, no el 100% total */
.card-content-moneda,
.card-content-numerico,
.card-content-porcentaje {
    display: flex !important;
    flex: 1!important;           /* ← reemplaza height: 100% */
    min-height: 0;     /* ← CRUCIAL: permite que flex respete el límite */
    flex-direction: row !important;
    align-items: center !important;
    align-content: center;
    justify-content: space-between;
    overflow: hidden !important;
}

.list-group-numerico {
    display: grid;
    padding: 0;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    overflow-y: auto !important;
    max-height: 90% !important;  /* ← en lugar del 90px fijo */
    gap: 0.2rem 0.5rem;
    align-content: start !important; /* los items empiezan desde arriba */
}


    .card-p-list,
    .card-list,
    .card-m-list,
    .card-n-list
{
        height: -webkit-clamp(250px, 280px, 340px);
        height: clamp(280px, 280px, 340px) !important;
    }
    
    .ml-auto, .mx-auto {
    margin-left: 2rem !important;
    }

    .mr-auto, .mx-auto {
        margin-right: 2rem !important;
    }
    
    #btnSubAdj {
        display: flex;
    justify-content: center;
    align-items: center;
    }
    
    #btnSubAdj > .form-group {
        margin-bottom: 0px !important; 
    }

     .sidebar {
        height: 99vh;
    }
    .fas {
        font-weight: 600 !important;
    }
    
    .form-group .input-group:has(input[type="checkbox"]) {
        min-height: 25px;        /* altura estándar de Bootstrap 3 input */
        display: flex;
        align-items: center;
      }
.form-group:has(input[type="checkbox"]) .control-label {
  display: flex;
  align-items: center;
  min-height: 25px;
  margin-bottom: 0;        /* Bootstrap a veces agrega margen al label */
  padding-top: 0;          /* neutraliza el padding-top que Bootstrap 3 usa para alinear labels */
  padding-left: 0;          /* neutraliza el padding-top que Bootstrap 3 usa para alinear labels */
}