/*:root {*/
    /*Top header, tablas, elementos de tablas*/
    /*--color-primario: #5d99ce;
    --color-primario-hover: color-mix(in srgb, var(--color-primario), white 30%);

    --color-secundario: #2f7ec3;
    --color-secundario-hover: color-mix(in srgb, var(--color-secundario), white 30%);

    --color-terciario: #c2653a;
    --color-terciario-hover: color-mix(in srgb, var(--color-terciario), white 30%);
}*/
/*--------BUTTONS-----------*/
/*BTN OUTLINE WHITE*/
.btn-outlineWhite {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 4px 13px;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out;
}

.btn-outlineWhite:hover {
    background-color: white;
    color: var(--color-primario);
}
/*BTN PRIMAY COLOR*/
.btn-filledPrimary {
    background-color: var(--color-primario);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
  
.btn-filledPrimary:hover {
   background-color: var(--color-primario-hover);
   color: white !important;
}
/*BTN SECONDARY COLOR*/
.btn-filledSecondary {
    background-color: var(--color-secundario);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
  
.btn-filledSecondary:hover {
   background: var(--color-secundario-hover);
   color: white !important;
}
/*BTN TERTIARY COLOR*/
.btn-filledTertiary {
    background-color: var(--color-terciario);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
  
.btn-filledTertiary:hover {
   background-color: var(--color-terciario-hover);
   color: white !important;
}
/*custom clases*/
.dinamic-thead, .bg-primary-color{
    background-color: var(--color-primario);
}
.text-primary-color{
    color: var(--color-primario);
}



* {
    margin: 0;
    padding: 0;
}

fieldset legend b {
    color: var(--color-primario) !important;
}

.form-label{
    font-size: 18px
}
.elementop {
    padding: 0;
}

div.dt-search {
    padding: 10px 30px;
    background: #f9f9f9;
    border-radius: 25px;
}

div.dt-search input {
    background: #f9f9f9;
    border: none;
}

.table-primary {
    --bs-table-bg: #0d6efd !important;
}

.table-primary th {
    padding: 20px !important;
}

ul.pagination a {
    color: #333;
    background: transparent;
    border: none;
}


/*FORMS*/
.stepper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.stepper .circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    text-align: center;
    line-height: 30px;
}

.stepper .line {
    flex: 1;
    height: 8px;
    background: #007bff;
    align-self: center;
}

.stepper .active {
    background: mediumorchid;
}

#multiStepForm label {
    font-weight: bold;
}

.invalid-input {
    border: 2px solid red;
}
/*body*/
.general-container {
    margin-top: 10vh;
}
/* Layout estilo general */
.header {
    height: fit-content;
    background-color: var(--color-primario);
}

@media (min-width: 768px) {
    .header {
        background-color: var(--color-primario);
    }
}


.notification-circle {
    position: absolute;
    background: red;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    top: 8px;
    right: -16px;
}
.sidebar {
    min-height: 88vh;
    background-color: #ffffff !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5%;
}


.content {
    padding: 20px;
}

.nav-link {
    color: #808080;
    /* Color gris */
}

.nav-link:hover, .nav-link.active {
    color: var(--color-primario) !important;
}

.nav-pills .nav-link.active {
    color: white !important;
    background-color: var(--color-primario) !important;
    
}


.sidebar {
    width: 100% !important;
}

.nav-link {
    text-align: left;
}


.dropdown-menu.show {
    display: block;
    position: absolute;
    top: -78px;
}

/*Custom layers*/
.clean-btn:focus, .clean-btn:active {
    border: none !important;
    box-shadow: none;
}
.z-10 {
    z-index: 10 !important;
}

.deleteprincipal{
    color: #333;
}
.deletesecond{
    color:#0d6efd;
}

.cancelar{
    background-color: #5dbc98;
    border: none;
}

.eliminar{
    background-color: #dd0217;
    border: none;
}

.eliminacionpermanente img{
    width: 25%;
}
/*DataTable styles*/
#dt-search-0:focus {
    background-color: transparent !important;
}

.dt-search {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left:15px !important;
    padding-right:15px !important;
}
.page-item.active .page-link {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}
/*reporteador*/
.custom-table {
    min-width: 880px !important;
}

.table-conatiner {
    overflow-x: scroll;
}

.button-card:hover {
    background-color: var(--color-secundario) !important;
    color: white !important;
}


.table-blue-light {
    --bs-table-bg: #55B8E4 !important;
}

/*custom classes*/
.fs-6 {
    font-size: calc(1.2rem + 0.9vw) !important;
}

.fs-15px {
    font-size: 15px !important;
}

.fs-11px {
    font-size: 11px !important;
}

.custom-date-input:focus, .custom-select:focus, .custom-search:focus, #dt-search-0:focus {
    outline: none;
    border-color: #66afe9; /* Puedes cambiar el color del borde cuando está en foco */
    box-shadow: none;
}


.w-30 {
    width: 30% !important;
}

.w-70 {
    width: 70% !important;
}

.w-10 {
    width: 10% !important;
}

.w-90 {
    width: 90% !important;
}

/*toast de reservas*/
.toast-reservas {
    display: flex;
    flex-direction:row;
    align-items: center;
    background-color: #fff5e6;
    border-left: 4px solid #ffcc80;
    padding: 10px 16px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    max-width: 350px;
    position: absolute;
    top: 10%;
    right: 1%;
    z-index: 10;
}

.toast-periodo-renovacion {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #ffe6ed;
    border-left: 4px solid var(--bs-danger);
    padding: 10px 16px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    max-width: 350px;
    position: absolute;
    top: 10%;
    left: 1%;
    z-index: 10;
}

.toast-icon {
    font-size: 20px;
    margin-right: 10px;
    color: #ffa726;
}

.toast-message {
    flex-grow: 1;
}

.toast-close {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #777;
}

    .toast-close:hover {
        color: #333;
    }
.btn-toast-close {
    position: absolute;
    right: 1% !important;
    top: -2% !important;
}
/*bootstrap breakpoints*/
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .sidebar-container {
        top: 10% !important;
        left: 1% !important;
    }
    .sidebar, .container-links-sidebar {
        width: 210px !important;
    }
    .general-container {
        margin-left: 220px;
    }
    .nav-link:hover {
        color: white !important;
        background:var(--color-primario);
    }
    .custom-dropDown {
        display: none;
        background: var(--color-primario) !important;
        color: white;
        list-style-type: none;
        border-top-right-radius: var(--bs-border-radius) !important;
        border-bottom-right-radius: var(--bs-border-radius) !important;
        position: absolute;
        top: 0 !important;
        padding: 18px;
    }
        .custom-dropDown li a {
        color: #ecf0f1 !important;
        cursor: pointer !important;
        transition-duration: 200ms;
        transition-timing-function: ease;
    }
    .custom-dropDown li a:hover {
        color: #fdfdfd !important;
        background: transparent !important;
        transform: scale(1.1);
    }
    .custom-dropDown.clients {
        right: -179px !important;
    }
    .custom-dropDown.catalog {
        right: -240px !important;
    }
    .custom-dropDown::before {
        content: '' !important;
        position: absolute !important;
        top: 10px !important;
        left: -20px !important;
        width: 20px;
        height: 20px;
        clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
        background-color: var(--color-primario);
    }
    .drop-sidebar:hover .custom-dropDown {
        display: block;
    }
    /* Mantener el color de fondo del enlace a mientras el dropdown está visible */
    .drop-sidebar:hover > a,
    .drop-sidebar:hover > .custom-dropDown {
        color: white !important;
        background: var(--color-primario);
    }
    
}
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .sidebar, .container-links-sidebar {
        width: 220px !important;
    }
    .general-container {
        margin-left: 235px;
    }

    .w-lg-30 {
        width: 30% !important;
    }
}
/*(large desktops, 1100px and up)*/
@media (min-width: 1100px) {
    .table-conatiner {
        overflow-x: hidden;
    }
}
/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .fs-lg-2 {
        font-size: 2rem !important;
    }

    .fs-lg-5 {
        font-size: 1.25rem !important;
    }

    .fs-xl-small {
        font-size: 0.875em;
    }
}
/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
    .fs-xxl-normal {
        font-size: initial !important
    }
}