.left-sidebar {
    height: 100vh;
    overflow: hidden;
}

.LogoDibie {
    flex-shrink: 0;
}

.scroll-sidebar.menu-scroll {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
}

.scroll-sidebar.menu-scroll::-webkit-scrollbar {
    width: 6px;
}

.scroll-sidebar.menu-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 6px;
}

.scroll-sidebar.menu-scroll::-webkit-scrollbar-track {
    background-color: transparent;
}

.grupo-radio-modal {
    line-height: 1;
}

.titulo-radio-modal {
    display: block;
    margin-bottom: 6px;
    text-align: center;
    line-height: 1.2;
}

.radio-inline-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.radio-inline-modal .form-check {
    margin-bottom: 0;
    margin-right: 0;
}

.radio-inline-modal .form-check-input {
    margin-top: 0.15em;
}

.caja-info-mascota {
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
    border: 1px solid #d9e8ff;
    color: #355070;
}

.opcion-especie-premium {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 90px;
    padding: 18px 10px;
    border-radius: 20px;
    border: 2px solid #e9eef5;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    transition: all 0.25s ease;
}

.opcion-especie-premium:hover {
    transform: translateY(-3px);
    border-color: #b8d4ff;
    box-shadow: 0 14px 30px rgba(13, 110, 253, 0.12);
}

.opcion-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 28px;
    background: linear-gradient(135deg, #eaf3ff 0%, #d9eaff 100%);
    flex-shrink: 0;
}

.opcion-texto {
    display: flex;
    flex-direction: column;
}

.opcion-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2d3d;
    line-height: 1.2;
}

.opcion-descripcion {
    font-size: 0.9rem;
    color: #6c7a89;
    margin-top: 4px;
}

.btn-check:checked + .opcion-especie-premium {
    border-color: #0d6efd;
    background: linear-gradient(145deg, #eef5ff 0%, #dfeeff 100%);
    box-shadow: 0 16px 36px rgba(13, 110, 253, 0.18);
}

.btn-check:checked + .opcion-especie-premium .opcion-icono {
    background: linear-gradient(135deg, #0d6efd 0%, #4ea1ff 100%);
    color: #ffffff;
}

.btn-check:checked + .opcion-especie-premium .opcion-titulo {
    color: #0b5ed7;
}

/* Funtes monserrat*/
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat/montserrat-latin-ext-300-normal.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat/montserrat-latin-ext-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat/montserrat-latin-ext-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat/montserrat-latin-ext-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat/montserrat-latin-ext-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/**/

/* Botón de aplicar bono hospedaje */
.btn-bono-cta {
    width: 100%;
    padding: 15px 10px;
    background: linear-gradient(135deg, #28a745, #5cd65c);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.4);
    transition: all 0.25s ease;
    animation: pulseBono 1s infinite;
    margin-bottom: 5px;
}

.btn-bono-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(40, 167, 69, 0.5);
    background: linear-gradient(135deg, #218838, #4cd964);
}

.btn-bono-cta:active {
    transform: scale(0.98);
}

@keyframes pulseBono {
    0% {
        box-shadow: 0 0 0 0 rgba(40,167,69,0.5);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(40,167,69,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(40,167,69,0);
    }
}

.valorDto {
    color: rgb(40, 167, 69);
    font-size: 20px;
    font-weight: 700;
}

.valorSaldoP {
    color: rgb(40, 167, 69);
    font-size: 16px;
    font-weight: 700;
}
/* fin botón*/
.msg-modificacion {
    display: none;
    background: #fff4e5;
    color: #8a5a00;
    border-left: 6px solid #f0ad4e;
    border-right: 6px solid #f0ad4e;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    margin-top: 10px;
}

.msg-modificacion i {
    margin-right: 8px;
}

.msg-modificacion strong {
    font-weight: 600;
}

.msg-bono {
    background: rgb(241, 253, 244); /*linear-gradient(-90deg, #fff4e5, #fff7dd);*/
    color: #151a3b;
    border-left: 6px solid rgb(40, 167, 69); /*#f0ad4e;*/
    border-right: 6px solid rgb(40, 167, 69); /*#f0ad4e;*/
    padding: 5px 0px 5px 10px;
    border-radius: 10px;
    font-size: 18px;
    text-align: left;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Inicio stylos bonos*/
.alerta-bono {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 40px) scale(0.98);
    bottom: 57px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
}

.alerta-bono.show {
    animation: bonoCenterIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: auto;
}

@keyframes bonoCenterIn {
    0% {
        opacity: 0;
        transform: translate(-50%, 40px) scale(0.98);
    }

    60% {
        opacity: 1;
        transform: translate(-50%, -8px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

.alerta-bono.hide {
    animation: bonoCenterOut 0.4s ease forwards;
}

@keyframes bonoCenterOut {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 30px) scale(0.98);
    }
}

.bono-card {
    position: relative;
    width: 400px;
    max-width: 90vw;
    border-radius: 12px;
    overflow: visible;
    background: rgba(255,255,255,0.97);
    border: 1px solid #dcdcdc;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    color: #2c3e50;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bono-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #198754;
    color: #fff;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 650;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 10;
    white-space: nowrap;
    border: 2px solid #fff;
}

.bono-badge-inline {
    display: inline-block;
    background: #198754;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
}

.bono-content {
    padding: 35px 18px 18px 18px;
}

.bono-titulo {
    font-size: 16px;
    font-weight: 600;
    color: #1b2a4e;
    margin-bottom: 6px !important;
}

.bono-descripcion {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.4;
}

.bono-fecha {
    font-size: 14px;
    background: #f1f3f5;
    color: #333;
    padding: 10px 12px;
    border-radius: 8px;
    line-height: 1.5;
}

.bono-card:hover {
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.bono-item {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.bono-item:last-child {
    margin-bottom: 0;
}

.bono-icono {
    width: 20px;
    text-align: center;
    margin-right: 8px;
    font-size: 14px;
}

.bono-texto {
    flex: 1;
}
/* fin stylos alerta bonos*/

.textoSpanFil {
    font-size: 13px;
}

.btn-bonos-masivos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border-radius: 0px 16px 0px 16px !important;
    padding: 12px 18px;
}

.icon-ticket {
    font-size: 2.5rem; /* Ajustable */
    display: flex;
    align-items: center;
}

.contenido-boton {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.texto-normal {
    font-size: 0.95rem;
}

.numero-masivo {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

.fondoReser {
    background-image: url('/img/Reservas/fondo-2000px.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    color: #151a3b;
    padding: 30px 20px;
    text-align: center;
    border-top-right-radius: 15px;
}

@media (min-width: 768px) {
    .imgReservar {
        padding: 100px 100px 220px 100px;
    }
}

@media (max-width: 767px) {
    .imgReservar {
        padding: 25px 10px 25px 10px; /* Ajusta a tus valores deseados */
    }
}

.imgServEven img {
    transition: transform 3.3s ease;
}

.imgServEven:hover img {
    transform: scale(1.05);
}

.efecto-brillo {
    position: relative;
    overflow: hidden;
    display: inline-block;
    border-radius: 40px;
}

    .efecto-brillo::before {
        content: "";
        position: absolute;
        top: 0;
        left: -50%;
        width: 50%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.6), transparent );
        transform: skewX(-25deg);
    }

    .efecto-brillo::before {
        animation: brillo 4s infinite;
    }

@keyframes brillo {
    0% {
        left: -75%;
        opacity: 1;
    }

    33% {
        left: 125%;
        opacity: 1;
    }

    34% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}



.textoNumero {
    font-size: 100px; /* Ajusta el tamaño según necesites */
    font-weight: 700; /* Montserrat grueso */
    margin-bottom: 10px;
}

.textoMsg {
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.3;
}

.textoMsgPaso4 {
    font-size: 37px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.3;
}

.textoDatosIni {
    text-align: left;
    font-weight: bold;
}

.textoMsg2 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.3;
    padding-top: 10px;
    text-align: end;
}

.textoMsg2Jus {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.3;
    padding-top: 10px;
    text-align: justify;
}

.textoMsg3Jus {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.3;
    text-align: justify;
}

.textoMsg2a {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    padding-top: 10px;
    text-align: justify;
}

.textoMsg3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.3;
}

.lineaDiv {
    width: 100%;
    height: 6px;
    background-color: #151a3b;
    margin: 0 auto;
    border-radius: 3px;
}

.mapa-imagen {
    height: 525px;
    width: auto;
    max-width: 100%;
    display: block;
}

.ocultar-visual {
    visibility: hidden;
    opacity: 0;
}

#divMapaColombia {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

    #divMapaColombia > .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #divMapaColombia > .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        display: flex;
    }

.breadcrumb .disabled a {
    pointer-events: none;
    color: #999 !important;
}

.breadcrumb .active a,
.breadcrumb .active {
    font-weight: bold;
    color: #151a3b !important;
}

.botones-regiones-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* centra verticalmente los botones */
    /* align-items controla la alineación horizontal:
       - center => botones centrados horizontalmente
       - flex-end => botones alineados a la derecha
       - flex-start => alineados a la izquierda
    */
    align-items: flex-end;
    width: 100%;
    padding: 0 12px;
}

.botonRegiones {
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
}

.botones-regiones-container.centro-horizontal {
    align-items: center;
}

.btn-region-andina {
    background-color: #0183ff !important;
}

.btn-region-caribe {
    background-color: #ff4838 !important;
}

.btn-region-pacifica {
    background-color: #e9732b !important;
}

.btn-region-orinoquia {
    background-color: #ffd300 !important;
}

.btn-region-andina:hover {
    background-color: #0183ff !important;
}

.btn-region-caribe:hover {
    background-color: #ff4838 !important;
}

.btn-region-pacifica:hover {
    background-color: #e9732b !important;
}

.btn-region-orinoquia:hover {
    background-color: #ffd300 !important;
}

.btn-region-lg:hover {
    transform: scale(1.05);
}

.btn-region-md {
    width: 60%;
}

.btn-region-lg {
    width: 80%;
    background-color: #bfbfbf !important; 
    color: #ffffff !important;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-region-sm {
    width: 40%;
}

@media (max-width: 991.98px) {
    #divMapaColombia {
        flex-direction: column;
        gap: 12px;
    }

    #divMapaColombia > .col-md-4,
    #divMapaColombia > .col-md-8 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    #divMapaColombia .botones-regiones-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 10px;
        padding: 0;
    }

    #divMapaColombia .botonRegiones {
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
        padding: 0;
        text-align: center;
    }

    #divMapaColombia .btn-region-lg {
        width: 100%;
        min-height: 44px;
        padding: 0.6rem 0.5rem;
        font-size: clamp(0.8rem, 1.7vw, 1rem);
        line-height: 1.2;
        white-space: normal;
    }

    #divMapaColombia > .col-md-8 {
        justify-content: center;
        padding: 0;
    }

    #divMapaColombia .mapa-imagen {
        width: min(100%, 600px);
        height: auto;
        max-width: 100%;
        margin: 0 auto;
        object-fit: contain;
    }
}

@media (min-width: 768px) {
    .centrosOtros {
        padding-bottom: 205px;
    }
}

@media (min-width: 768px) {
    #main-wrapper[data-layout=vertical][data-sidebartype=mini-sidebar] .LogoDibie {
        display: none !important;
    }
}

.nombreCentro {
    background: linear-gradient(to right, #08a6cb 0%, #002a66 50%, #10648f 100%);
    
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff !important;
}

.datosPaso4 {
    font-size: 15px;
    margin-bottom: 15px;
}

.datosPaso4Hospedaje {
    font-size: 13px;
}

.camposPaso4 {
    margin-top: 6px !important;
    margin-bottom: 20px !important;
}

.label-with-line {
    display: flex;
    align-items: center; 
    gap: 12px; 
    width: 100%;
}

    .label-with-line .label-text {
        color: #002a66;
        font-size: 18px; 
        font-weight: 600;
        white-space: nowrap; 
        flex: 0 0 auto; 
    }

    /* la línea que ocupa el resto del espacio */
    .label-with-line::after {
        content: "";
        display: block;
        height: 8px; 
        background-color: #002a66;
        margin-top: 2px;
        background-color: #ccc; 
        border-radius: 999px;
        flex: 1 1 auto; 
        min-width: 0;
    }

.cardTutoriales {
    background-color: #002a66 !important;
}

.LogoDibie {
    display: flex;
    justify-content: center;
    align-items: center;
}

.FamiliaContainer {
    position: absolute;
    left: 0;
    right: 0;
  
    bottom: calc(var(--sidebar-footer-height));
    text-align: center;
    z-index: 29;
    pointer-events: none; 
    padding-bottom: 6px; 
}

.listaServicios {
    font-size: 20px;
}

.icono-servicio {
    color: #002a66 !important;
    font-size: 22px;
}

.btn-custom {
    width: 200px;
    height: 200px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

    .btn-custom img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .btn-custom:hover {
        transform: scale(1.1);
        transition: 0.2s;
    }

/* Presentación aislada para la selección de tipo de reserva (paso 1). */
#divReservas.paso1-reservas {
    border: 0;
    border-radius: 0;
    background: transparent;
}

#divReservas .reserva-paso1-encabezado {
    align-items: center;
    margin: 0;
    padding: 18px 20px 36px;
    background: #fff;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    color: #151a3b;
}

#divReservas .reserva-paso1-encabezado .textoNumero {
    margin: 0;
    font-size: clamp(2rem, 4.2vw, 4.75rem);
}

#divReservas .reserva-paso1-encabezado > .col-md-4 {
    text-align: center;
}

#divReservas .reserva-paso1-encabezado > .col-md-8 {
    text-align: center;
}

#divReservas .reserva-paso1-encabezado > .col-md-8 > div {
    max-width: 900px;
    margin: 0 auto;
}

#divReservas .reserva-paso1-encabezado .textoMsg {
    margin: 0;
    font-size: clamp(1.35rem, 2.6vw, 2.5rem);
    font-weight: 500; /* 700;*/
}

#divReservas .reserva-paso1-encabezado .lineaDiv {
    width: 100%;
    margin: 8px 0;
}

#divReservas .reserva-paso1-encabezado .textoMsg2 {
    margin: 0 0 8px;
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    text-align: center;
}

#divReservas .paso1-reservas-fondo {
    min-height: clamp(450px, 55vh, 560px);
    padding: 48px 20px 58px;
    background-image: url('/img/Reservas/FondoReservas-Paso1.png');
    background-image: image-set(
        url('/img/Reservas/FondoReservas-Paso1-Escritorio.webp') type("image/webp"),
        url('/img/Reservas/FondoReservas-Paso1.png') type("image/png")
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 0;
}

#divReservas .reserva-paso1-opciones {
    width: min(728px, 70%);
    margin: 0 auto;
    padding: 18px 22px;
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(21, 26, 59, 0.2);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 8px 24px rgba(21, 26, 59, 0.2);
}

#divReservas .reserva-paso1-opcion {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    display: flex;
    justify-content: center;
    padding: 10px 28px;
}

#divReservas .reserva-paso1-opcion + .reserva-paso1-opcion {
    border-left: 1px solid rgba(21, 26, 59, 0.28);
}

#divReservas .reserva-paso1-opcion .imgReservar {
    padding: 0;
}

#divReservas .reserva-paso1-seleccion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 12px 8px;
    transition: background-color 0.2s ease;
}

#divReservas .reserva-paso1-opcion.seleccionado {
    background-color: #d7efff;
}

#divReservas .reserva-paso1-boton {
    position: relative;
    display: block;
    width: clamp(98px, 12.6vw, 154px);
    height: auto;
    aspect-ratio: 1;
    transition: transform 0.2s ease;
}

#divReservas .reserva-paso1-boton img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.15s ease;
}

#divReservas .reserva-paso1-icono-azul {
    opacity: 0;
}

#divReservas .reserva-paso1-boton:hover,
#divReservas .reserva-paso1-boton:focus-visible,
#divReservas .reserva-paso1-opcion.seleccionado .reserva-paso1-boton {
    transform: scale(1.06);
}

#divReservas .reserva-paso1-boton:hover .reserva-paso1-icono-oscuro,
#divReservas .reserva-paso1-boton:focus .reserva-paso1-icono-oscuro,
#divReservas .reserva-paso1-opcion.seleccionado .reserva-paso1-icono-oscuro {
    opacity: 0;
}

#divReservas .reserva-paso1-boton:hover .reserva-paso1-icono-azul,
#divReservas .reserva-paso1-boton:focus .reserva-paso1-icono-azul,
#divReservas .reserva-paso1-opcion.seleccionado .reserva-paso1-icono-azul {
    opacity: 1;
}

#divReservas .reserva-paso1-etiqueta {
    min-height: 2.5em;
    color: #151a3b;
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.15rem, 1.7vw, 1.35rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: color 0.2s ease;
}

#divReservas .reserva-paso1-opcion.seleccionado .reserva-paso1-etiqueta {
    color: #2455b8;
}

#divReservas .reserva-paso1-pie {
    position: relative;
    display: flex;
    width: min(728px, 70%);
    min-height: 56px;
    margin: 0 auto;
    padding: 8px 18px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #a8d52a;
    color: #26340a;
    border-radius: 0 0 12px 12px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(0.78rem, 1vw, 1rem);
    font-weight: 600;
    text-align: center;
}

#divReservas .reserva-paso1-continuar {
    flex: 0 0 auto;
    padding: 10px 26px;
    border: 1px solid #48620c;
    border-radius: 5px;
    background: #8fbd18;
    color: #172207;
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    cursor: pointer;
}

#divReservas .reserva-paso1-continuar:hover,
#divReservas .reserva-paso1-continuar:focus-visible {
    background: #7da916;
}

#divReservas .reserva-paso1-mensaje {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 2;
    padding: 6px 12px;
    transform: translateX(-50%);
    background: #fff;
    color: #b02a37;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

@media (max-width: 767px) {
    #divReservas .paso1-reservas-fondo {
        min-height: 420px;
        padding: 24px 12px 32px;
        background-image: url('/img/Reservas/FondoReservas-Paso1.png');
        background-image: image-set(
            url('/img/Reservas/FondoReservas-Paso1-Movil.webp') type("image/webp"),
            url('/img/Reservas/FondoReservas-Paso1.png') type("image/png")
        );
    }

    #divReservas .reserva-paso1-encabezado {
        padding: 14px 12px 24px;
    }

    #divReservas .reserva-paso1-opciones {
        padding: 12px 4px;
    }

    #divReservas .reserva-paso1-opcion {
        padding: 5px 2px;
    }

    #divReservas .reserva-paso1-boton {
        width: min(16.8vw, 126px);
        min-width: 55px;
    }

    #divReservas .reserva-paso1-etiqueta {
        font-size: 0.85rem;
    }

    #divReservas .reserva-paso1-pie {
        flex-direction: column;
        gap: 8px;
    }
}

/* Tipografía fluida para las cabeceras de los pasos del asistente. */
:is(
    #divPaso2,
    #divPaso2Centro,
    #divPaso3Hospedaje,
    #divPaso4HuespedesReserva,
    #divPaso5PagoReserva,
    #divPaso4Pasadia,
    #divPaso5PagoReservaPas,
    #divPasoVistaServ,
    #divPaso4ServCom,
    #divPaso5Eventos,
    #divPaso6PagoReservaEvento
) .textoNumero {
    font-size: clamp(2rem, 4.2vw, 4.75rem);
}

:is(
    #divPaso2,
    #divPaso2Centro,
    #divPaso3Hospedaje,
    #divPaso4HuespedesReserva,
    #divPaso5PagoReserva,
    #divPaso4Pasadia,
    #divPaso5PagoReservaPas,
    #divPasoVistaServ,
    #divPaso4ServCom,
    #divPaso5Eventos,
    #divPaso6PagoReservaEvento
) :is(.textoMsg, .textoMsgPaso4) {
    font-size: clamp(1.35rem, 2.6vw, 2.5rem);
}

/* Card personalizada para las unidades habitacionales */
.card-unidad {
    border: 1px solid #ddd;
    border-radius: 14px; 
    margin-bottom: 5px; 
    padding: 15px; 
    background-color: #fff; 
    transition: box-shadow .3s ease;
}

    /* Iconos internos de la card */
    .card-unidad i {
        font-size: 1.5rem; 
        line-height: 1;
    }


    .card-unidad:hover {
        box-shadow: 0 10px 25px rgba(0,0,0,.12);
    }


.rowCarrusel {
    padding-bottom: 95px;
}

#textoRetornar:hover {
    color: #007bff; /* cambia el color que necesites */
    cursor: pointer;
}

    #textoRetornar:hover i {
        color: #007bff; /* ícono toma el mismo color al hacer hover */
    }

/* clases para el carrusel */
.jssorb05 {
    position: absolute;
}

    .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
        position: absolute;
      
        width: 16px;
        height: 16px;
        background: url('/img/b05.png') no-repeat;
        overflow: hidden;
        cursor: pointer;
    }

    .jssorb05 div {
        background-position: -7px -7px;
    }

        .jssorb05 div:hover, .jssorb05 .av:hover {
            background-position: -37px -7px;
        }

    .jssorb05 .av {
        background-position: -67px -7px;
    }

    .jssorb05 .dn, .jssorb05 .dn:hover {
        background-position: -97px -7px;
    }

.jssora22l, .jssora22r {
    display: block;
    position: absolute;
  
    width: 40px;
    height: 58px;
    cursor: pointer;
    background: url('/img/a22.png') center center no-repeat;
    overflow: hidden;
    z-index: 1000 !important;
}

.jssora22l {
    background-position: -10px -31px;
}

.jssora22r {
    background-position: -70px -31px;
}

.jssora22l:hover {
    background-position: -130px -31px;
}

.jssora22r:hover {
    background-position: -190px -31px;
}

.jssora22l.jssora22ldn {
    background-position: -250px -31px;
}

.jssora22r.jssora22rdn {
    background-position: -310px -31px;
}

.jssora22l.jssora22lds {
    background-position: -10px -31px;
    opacity: .3;
    pointer-events: none;
}

.jssora22r.jssora22rds {
    background-position: -70px -31px;
    opacity: .3;
    pointer-events: none;
}
/*fin clases carrusel*/

#jssor_unidad {
    margin: 0 auto;
    overflow: hidden;
    background-color: #000;
}

#slidesUnidad img {
    max-width: 100%;
    max-height: 500px;
    margin: auto;
}




.table thead th, .table tfoot th, .table th {
    font-weight: bold;
    color: white;
    border-top: 0 !important;
    background-image: -webkit-radial-gradient(top center, #001b3c, #08a6cb) !important;
    text-align: center !important;
}

.page-item.active .page-link {
    color: #fff !important;
    background-color: #25817d !important;
    border-color: #7dc111 !important;
}

.select2-search {
    z-index: 999999 !important;
    width: 100% !important;
}

.select2-container .select2-choice {
    height: 34px !important;
    line-height: 34px !important;
    border: 1px solid #aaa;
    border-left: 5px solid #119d93 !important;
    color: #444;
    text-decoration: none;
    border-radius: 4px;
    border-radius: 4px !important;
}

.hidden {
    display: none !important;
}

.dropdown-item {
    padding: 0.40rem 1rem !important;
}

.dropdown-menu {
    /*background-color: hsl(177.75deg 19.19% 83.62%);*/
    background-color: hsl(210deg 30% 85%);
    /*background-image: radial-gradient(at 92% 27%, hsl(181.41deg 58.26% 35.92%) 0px, transparent 50%), radial-gradient(at 100% 29%, hsl(178.72deg 100% 36.86%) 0px, transparent 50%), radial-gradient(at 25% 14%, hsl(0deg 0% 100%) 0px, transparent 50%), radial-gradient(at 70% 51%, hsl(180deg 60.24% 70.67%) 0px, transparent 50%), radial-gradient(at 48% 57%, hsl(188.83deg 58.9% 48.07%) 0px, transparent 50%), radial-gradient(at 79% 78%, hsl(186.1deg 60.45% 46.71%) 0px, transparent 50%), radial-gradient(at 0% 0%, hsl(0deg 0% 86.76%) 0px, transparent 50%);*/
    background-image: radial-gradient(at 90% 20%, hsl(220deg 60% 45%) 0px, transparent 50%), radial-gradient(at 20% 80%, hsl(200deg 70% 55%) 0px, transparent 50%), radial-gradient(at 50% 50%, hsl(210deg 100% 98%) 0px, transparent 50%);
    line-height: 12px;
}

.text-info {
    color: #ffffff !important;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    clear: both;
    font-weight: 400;
    color: #ffffff;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.btn-add {
    background-image: linear-gradient(to right, #001b3c 0%, #08a6cb 50%, #002a66 100%);
    background-size: 200% 200%;
    -webkit-animation: rainbow 5s ease infinite;
    -z-animation: rainbow 5s ease infinite;
    -o-animation: rainbow 5s ease infinite;
    animation: rainbow 4s ease infinite alternate;
    color: white;
    box-shadow: 1px 3px 2px #1c45b4;
}

    .btn-add:hover {
        color: darkblue;
        background-image: linear-gradient(to right, #08a6cb 10%, #002a66 50%, #001b3c 100%);
    }

.TituloNivelDos {
    margin-left: 10px;
}

.TituloNivelTres {
    margin-left: 19px;
}


.page-wrapper {
    min-height: 100% !important;
    background-color: #ecf0f5 !important;
    background-image: url('../img/background/brillant.png') !important;
}

#main-wrapper[data-layout=horizontal] .topbar .navbar-collapse[data-navbarbg=skin1], #main-wrapper[data-layout=horizontal] .topbar[data-navbarbg=skin1], #main-wrapper[data-layout=vertical] .topbar .navbar-collapse[data-navbarbg=skin1], #main-wrapper[data-layout=vertical] .topbar[data-navbarbg=skin1], .theme-color .theme-item .theme-link[data-navbarbg=skin1] {
    background-image: url(../img/background/barra-inicio-superior.jpg) !important;
    background-color: #08a6cb !important;
}
/*.BarraPieDameroForms {
    background: linear-gradient(124deg, #082b09, #7cd387, #006937, #175624b8, #6cbf37, #1a670c, #39a22e, #006937, #7cd387, #082b09) !important;
    background-size: 1800% 1800%;
    box-shadow: 1px 3px 2px #48a262;
}*/
.BarraPieDameroForms {
    background: linear-gradient(2deg, rgba(3, 43, 87, 1) 25%, rgb(18 42 101) 62%, rgba(23, 156, 148, 1) 97%) !important;
    background-size: 1800% 1800%;
    box-shadow: 1px 3px 2px #002a66;
}

.footer {
    border-top: 1px solid #e9ecef !important;
    padding: 17px 20px !important;
    color: white;
    box-shadow: 0 -3px 6px rgb(0 0 0 / 16%), 0 -3px 6px rgb(2 2 2 / 23%) !important;
    background-color: #38763A !important;
}

.navbar-brand {
    background-image: url(../img/background/barra-inicio-superior.jpg) !important;
    background-color: #08a6cb !important;
}

.skin-green .wrapper, .skin-green .main-sidebar, .skin-green .left-side {
}

#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin1], #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin1] ul, #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin1], #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin1] ul {
    background-color: #082b0d;
    background-image: url(../img/FondoMenu.jpg) !important;
    box-shadow: 1px 3px 10px #1c45b4 !important;
}

.tituloA {
    line-height: 18px;
    border-left: 1px solid;
    padding-left: 10px;
    margin-top: 8px;
    text-align: left;
    font-size: 17px;
}

.column p .title {
    font-weight: bold;
    display: inline;
    font-size: 15pt;
    color: rgb(0,0,0);
    line-height: 14pt;
    margin-right: 5px;
}

.title {
    font-weight: bold;
}

.wpr {
    float: left;
    clear: both;
    line-height: 25px;
}

.sidebar-nav ul .sidebar-item .sidebar-link {
    padding: 14px 35px 14px 8px;
    display: flex;
    white-space: nowrap;
    align-items: center;
    position: relative;
    line-height: 15px !important;
    font-size: 12px !important;
    opacity: 1 !important;
    color: #fff;
    border-left: 3px solid transparent;
}

body {
    font-family: Verdana, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Montserrat' !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #54667a;
}

.content-header {
    margin-top: 22px !important;
    position: relative;
}

.page-titles {
    margin: 0px -22px 0px -24px !important;
    font-size: 12px !important;
    border-bottom: 9px;
}

.breadcrumb-line {
    margin-bottom: 17px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    margin-top: 4px;
    height: 35px;
}

.page-titles .breadcrumb {
    padding: 9px 21px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-top: -34px;
    box-shadow: 1px 1px 15px #d4c26a;
    height: 32px;
}


@media(max-width:745px) {
    .page-titles .breadcrumb {
        padding: 11px 21px;
        margin-bottom: 20px;
        list-style: none;
        background-color: #f5f5f5;
        border-radius: 4px;
        margin-top: -34px;
        box-shadow: 1px 1px 15px #d4c26a;
        height: 32px;
    }
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    list-style: none;
    background-color: #eef5f9;
    border-radius: 4px;
}

a:not([href]) {
    color: #337ab7;
    text-decoration: none;
}

.breadcrumb > .active {
    color: #777;
}

.breadcrumb > li {
    display: inline-block;
}

    .breadcrumb > li + li:before {
        content: "/ ";
        padding: 0 5px;
        color: #ccc;
    }

.border-success {
    border-top-color: #00a65a;
}

.card {
    border-radius: 3px !important;
    background: #ffffff !important;
    border-top: 3px solid #d2d6de !important;
    width: 100% !important;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%) !important;
    border-top-right-radius: 15px !important;
    border-top-left-radius: 15px !important;
}
.card-header {
    color: #444;
    display: block;
    padding: 10px 0px 8px 21px;
    position: relative;
    background-image: url(../img/FondoVerdeT.png);
    border-top-right-radius: 30px !important;
    border-top-left-radius: 10px !important;
}

.cardMr {
    border-radius: 3px !important;
    background: #ffffff !important;
    border-top: 3px solid #d2d6de !important;
    width: 100% !important;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%) !important;
    border-top-right-radius: 15px !important;
    border-top-left-radius: 15px !important;    
    padding-bottom: 30px !important;
    margin-bottom: 20px !important;  
    display: inline-block;
}

.cardMr-header {
    padding: 15px 20px;
    background-image: url(../img/FondoVerdeT.png);
    background-size: cover;
    border-top-right-radius: 15px !important; 
    border-top-left-radius: 15px !important; 
}

.mr-2, .mx-2 {
    margin-right: 0.5rem !important;
}

.page-wrapper > .container-fluid, .page-wrapper > .container-lg, .page-wrapper > .container-md, .page-wrapper > .container-sm, .page-wrapper > .container-xl, .page-wrapper > .container-xxl {
 
    padding: 20px 20px !important;
    min-height: calc(100vh - 113px) !important;
}

.topbar {
    height: 56px !important;
}

    .topbar .top-navbar {
        height: 56px !important;
    }

    .topbar .top-navbar {
        min-height: 56px !important;
        padding: 0;
    }

.azulPonal {
    background-color: hsl(113.43deg 82.27% 8.55%);
    background-image: radial-gradient(at 92% 27%, hsl(178.72deg 100% 36.86%) 0px, transparent 50%), radial-gradient(at 100% 29%, hsl(178.72deg 81.05% 47.92%) 0px, transparent 50%), radial-gradient(at 25% 14%, hsl(175.44deg 56.03% 27.65%) 0px, transparent 50%), radial-gradient(at 70% 51%, hsl(188.5deg 61.08% 36.27%) 0px, transparent 50%), radial-gradient(at 48% 57%, hsl(175.8deg 55.56% 35.29%) 0px, transparent 50%), radial-gradient(at 79% 78%, hsl(177.16deg 98.67% 29.41%) 0px, transparent 50%), radial-gradient(at 0% 0%, hsl(178.72deg 100% 36.86%) 0px, transparent 50%);
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.btn-grad:hover {
    color: yellow;
    background-image: linear-gradient(to right, #002a66 5%, #08a6cb 50%, #08a6cb 100%);
}

.btn-grad {
    background: linear-gradient(38deg,#005478,#0e1f38);
    background-size: 200% 200%;
    -webkit-animation: rainbow 5s ease infinite;
    -z-animation: rainbow 5s ease infinite;
    -o-animation: rainbow 5s ease infinite;
    animation: rainbow 2s ease infinite alternate;
    color: white !important;
    box-shadow: 1px 3px 2px #002a66;
}

.ico_grabar {
    background-image: url(../img/pc.de/save16_h.ico);
    background-repeat: no-repeat;
    float: left;
    width: 15px;
    height: 18px;
    margin-top: 2px;
    margin-right: 6px;
}

.btn {
    font-size: .875rem !important;
    color: white !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.card-footer {
    padding: 0.75rem 1.25rem !important;
    background-color: rgb(32 96 151 / 14%) !important;
    border-top: 0 solid rgba(0,0,0,.125) !important;
    border-radius: 10px !important;
}

.ico_buscar {
    background-image: url('../img/pc.de/search16_h.ico');
    background-repeat: no-repeat;
    float: left;
    width: 15px;
    height: 18px;
    margin-top: 2px;
    margin-right: 6px;
}

.btn-buscar {
    background-image: linear-gradient(to right, #034643fa 0%, #00ff35 50%, #052f48 100%);
    background-size: 200% 200%;
    -webkit-animation: rainbow 5s ease infinite;
    /*-z-animation: rainbow 5s ease infinite;*/
    -o-animation: rainbow 5s ease infinite;
    animation: rainbow 2s ease infinite alternate;
    color: white;
    box-shadow: 1px 3px 2px #48a262;
}

    .btn-buscar:hover {
        color: yellow;
        background-image: linear-gradient(to right, #543e0e 0%, #efbf0f 50%, #543e0e 100%);
    }

.btn-limpiar {
    background-image: linear-gradient(to right, #636006fa 0%, #d4e413 50%, #777b38 100%);
    background-size: 200% 200%;
    -webkit-animation: rainbow 5s ease infinite;
    /*-z-animation: rainbow 5s ease infinite;*/
    -o-animation: rainbow 5s ease infinite;
    animation: rainbow 2s ease infinite alternate;
    color: white;
    box-shadow: 1px 3px 2px #48a262;
}

    .btn-limpiar:hover {
        color: yellow;
        background-image: linear-gradient(to right, #543e0e 0%, #efbf0f 50%, #543e0e 100%);
    }

.ico_limpiar {
    background-image: url('../img/pc.de/user_edit16_h.ico');
    background-repeat: no-repeat;
    float: left;
    width: 15px;
    height: 18px;
    margin-top: 2px;
    margin-right: 6px;
}

.btn-eliminar {
    background-image: linear-gradient(to right, #c1350afa 0%, #96d40c 50%, #b70a0a 100%);
    background-size: 200% 200%;
    -webkit-animation: rainbow 5s ease infinite;
    /*-z-animation: rainbow 5s ease infinite;*/
    -o-animation: rainbow 5s ease infinite;
    animation: rainbow 2s ease infinite alternate;
    color: white;
    box-shadow: 1px 3px 2px #48a262;
}

    .btn-eliminar:hover {
        color: yellow;
        background-image: linear-gradient(to right, #543e0e 0%, #efbf0f 50%, #543e0e 100%);
    }

.btnudp {
    background-image: linear-gradient(to right, #005301 0%, #18a598 48%, #005e4b 100%);
    color: white;
    box-shadow: 1px 3px 2px #8caee1;
}

    .btnudp:hover {
        background-position: right center;
        background-image: linear-gradient(to right, #543e0e 0%, #efbf0f 50%, #543e0e 100%);
        color: yellow;
    }

.ico_cancelar {
    background-image: url('../img/pc.de/Cancelar.png');
    background-repeat: no-repeat;
    float: left;
    width: 15px;
    height: 18px;
    margin-top: 2px;
    margin-right: 6px;
}

.btn-Cancelar {
    background-color: firebrick;
    background-size: 200% 200%;
    -webkit-animation: rainbow 5s ease infinite;
    /*-z-animation: rainbow 5s ease infinite;*/
    -o-animation: rainbow 5s ease infinite;
    animation: rainbow 2s ease infinite alternate;
    color: white;
    box-shadow: 1px 3px 2px #48a262;
}

    .btn-Cancelar:hover {
        color: yellow;
        background-image: linear-gradient(to right, #543e0e 0%, #ef6c0f 50%, #543e0e 100%);
    }

.btn-cerrar {
    background-image: linear-gradient(to right, #543e0e 0%, #08a6cb 50%, #543e0e 100%);
    background-size: 200% 200%;
    -webkit-animation: rainbow 5s ease infinite;
    /*-z-animation: rainbow 5s ease infinite;*/
    -o-animation: rainbow 5s ease infinite;
    animation: rainbow 2s ease infinite alternate;
    color: white;
    box-shadow: 1px 3px 2px #002a66;
}

    .btn-cerrar:hover {
        color: darkblue;
        background-image: linear-gradient(to right, #543e0e 0%, #151b3b 50%, #543e0e 100%) !important;
    }

.MargFloatBoos {
    margin-top: 0px;
    margin-bottom: 20px;
}

.form-control {
    height: 34px !important;
    font-size: 14px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
    border-left: 5px solid #002a66 !important;
    font-family: "Verdana", sans-serif, Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

.InputPading {
    padding-top: 9px !important;
}

.form-control:focus {
    border-color: #cacd3a !important;
    box-shadow: none !important;
    border-left: 5px solid #f18f08 !important;
    background-color: #ececda5c !important;
}

.Labels {
    color: #002a66 !important;
    font-weight: bold !important;
    font-family: Arial !important;
    font-size: 12px !important;
    font-style: normal !important;
}

.select2-container--classic .select2-selection--single, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__arrow, .select2-container--default .select2-selection--multiple {
    border-color: #002a66 !important;
    color: #67757c !important;
    height: 34px !important;
    line-height: 34px !important;
    border-radius: 4px !important;
}

.select2-container .select2-selection--single {
    border: 1px solid #ccc !important;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none;
}

    .select2-container .select2-selection--single .select2-selection__rendered {
        border-radius: 3px !important;
        border-left: 5px solid;
        display: block;
        padding-left: 8px;
        padding-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.modal-header {
    border-bottom-color: #30da51;
    height: 76px !important;
    background-image: linear-gradient(to bottom, rgb(232 239 241) 0%, rgb(253, 253, 253) 9%, rgb(236 246 248) 34%, rgb(211 241 229) 62%, rgb(123 196 205) 94%, rgb(13 61 114) 100%);
}

.modal-footer {
    border-top: 1px solid #e9ecef !important;
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.CuadroModal {
    background: rgb(247, 247, 247) !important;
    -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset !important;
    box-shadow: 6pt 9px 10px rgba(105, 149, 109, 0.7), 0px 0px 56px 20px rgba(208, 223, 226, 0.4) inset !important;
    -webkit-box-shadow: 5px !important;
    border-radius: 12px !important;
}

.Principal {
    margin-top: -4px !important;
    margin-bottom: -55px !important;
    margin-left: -7px !important;
    margin-right: -4px !important;
    padding: 0px !important;
}

.carousel-dark .carousel-indicators [data-bs-target] {
    background-color: #00ff61 !important;
}

#Process {
    display: none;
}

}

.celdaJust {
    text-align: justify;
    vertical-align: middle;
}

.celda1 {
    width: 1% !important;
}

.celda2 {
    width: 2% !important;
}

.celda3 {
    width: 3% !important;
}

.celda4 {
    width: 4% !important;
}

.celda5 {
    width: 5% !important;
}

.celda6 {
    width: 6% !important;
}

.celda7 {
    width: 7% !important;
}

.celda8 {
    width: 8% !important;
}

.celda9 {
    width: 9% !important;
}

.celda10 {
    width: 10% !important;
}

.celda11 {
    width: 11% !important;
}

.celda12 {
    width: 12% !important;
}

.celda13 {
    width: 13% !important;
}

.celda14 {
    width: 14% !important;
}

.celda15 {
    width: 15% !important;
}

.celda16 {
    width: 16% !important;
}

.celda17 {
    width: 17% !important;
}

.celda18 {
    width: 18% !important;
}

.celda19 {
    width: 19% !important;
}

.celda20 {
    width: 20% !important;
}

.celda21 {
    width: 21% !important;
}

.celda22 {
    width: 22% !important;
}

.celda23 {
    width: 23% !important;
}

.celda24 {
    width: 24% !important;
}

.celda25 {
    width: 25% !important;
}

.celda26 {
    width: 26% !important;
}

.celda27 {
    width: 27% !important;
}

.celda28 {
    width: 28% !important;
}

.celda29 {
    width: 29% !important;
}

.celda30 {
    width: 30% !important;
}

.celda31 {
    width: 31% !important;
}

.celda32 {
    width: 32% !important;
}

.celda33 {
    width: 33% !important;
}

.celda34 {
    width: 34% !important;
}

.celda35 {
    width: 35% !important;
}

.celda36 {
    width: 36% !important;
}

.celda37 {
    width: 37% !important;
}

.celda38 {
    width: 38% !important;
}

.celda39 {
    width: 39% !important;
}

.celda40 {
    width: 40% !important;
}

.celda41 {
    width: 41% !important;
}

.celda42 {
    width: 42% !important;
}

.celda43 {
    width: 43% !important;
}

.celda44 {
    width: 44% !important;
}

.celda45 {
    width: 45% !important;
}

.celda46 {
    width: 46% !important;
}

.celda47 {
    width: 47% !important;
}

.celda48 {
    width: 48% !important;
}

.celda49 {
    width: 49% !important;
}

.celda50 {
    width: 50% !important;
}

.celda51 {
    width: 51% !important;
}

.celda52 {
    width: 52% !important;
}

.celda53 {
    width: 53% !important;
}

.celda54 {
    width: 54% !important;
}

.celda55 {
    width: 55% !important;
}

.celda56 {
    width: 56% !important;
}

.celda57 {
    width: 57% !important;
}

.celda58 {
    width: 58% !important;
}

.celda59 {
    width: 59% !important;
}

.celda60 {
    width: 60% !important;
}

.celda61 {
    width: 61% !important;
}

.celda62 {
    width: 62% !important;
}

.celda63 {
    width: 63% !important;
}

.celda64 {
    width: 64% !important;
}

.celda65 {
    width: 65% !important;
}

.celda66 {
    width: 66% !important;
}

.celda67 {
    width: 67% !important;
}

.celda68 {
    width: 68% !important;
}

.celda69 {
    width: 69% !important;
}

.celda70 {
    width: 70% !important;
}

.celda71 {
    width: 71% !important;
}

.celda72 {
    width: 72% !important;
}

.celda73 {
    width: 73% !important;
}

.celda74 {
    width: 74% !important;
}

.celda75 {
    width: 75% !important;
}

.celda76 {
    width: 76% !important;
}

.celda77 {
    width: 77% !important;
}

.celda78 {
    width: 78% !important;
}

.celda79 {
    width: 79% !important;
}

.celda80 {
    width: 80% !important;
}

.celda81 {
    width: 81% !important;
}

.celda82 {
    width: 82% !important;
}

.celda83 {
    width: 83% !important;
}

.celda84 {
    width: 84% !important;
}

.celda85 {
    width: 85% !important;
}

.celda86 {
    width: 86% !important;
}

.celda87 {
    width: 87% !important;
}

.celda88 {
    width: 88% !important;
}

.celda89 {
    width: 89% !important;
}

.celda90 {
    width: 90% !important;
}

.celda91 {
    width: 91% !important;
}

.celda92 {
    width: 92% !important;
}

.celda93 {
    width: 93% !important;
}

.celda94 {
    width: 94% !important;
}

.celda95 {
    width: 95% !important;
}

.celda96 {
    width: 96% !important;
}

.celda97 {
    width: 97% !important;
}

.celda98 {
    width: 98% !important;
}

.celda99 {
    width: 99% !important;
}

.celda100 {
    width: 100% !important;
}

.celdaCenterTa {
    text-align: center;
    vertical-align: middle;
    width: 1% !important;
}

.celdaCenter {
    text-align: center;
    vertical-align: middle;
}

.btn-success {
    color: #fff;
    background-image: linear-gradient(to right, #002a66 0%, #18acd9 48%, #01132d 100%);
    border-color: #026ead;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-bottom: 10px !important;
}

pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
    color: #fff !important;
    background-image: linear-gradient(to right, #44658e 0%, #106573 51%, #34c2be 100%) !important;
    border-color: #ddd !important;
    cursor: not-allowed !important;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    z-index: 3 !important;
    color: #fff !important;
    background-color: #2a4cad !important;
    border-color: #0dc1a0 !important;
    cursor: default !important;
}

table.dataTable tbody th, table.dataTable tbody td {
    font-size: 12px !important;
    padding: 3px 10px 3px 10px !important;
}

table.table-bordered.dataTable th, table.table-bordered.dataTable td {
    border: 1px solid #ccc !important;
}

.sidebar-nav ul .sidebar-item .first-level {
    padding: 5px 0 0 5px;
    background-color: rgb(0 0 0) !important;
}

.ms-auto {
    margin-right: 23px !important;
}

.ico_inicio {
    background: url("../img/pc.de/home.png") 0 0 no-repeat;
    height: 16px;
    margin-left: 6px;
}

.ico_Salir {
    background-image: url(../img/pc.de/Salir.png);
    height: 16px;
}

.sidebar-nav ul .sidebar-item .sidebar-link i {
    line-height: 15px !important;
    font-size: 16px !important;
    margin: 0 8px 0 5px !important;
    width: 20px !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link .hide-menu {
    font-size: 12px !important;
    font-family: "Verdana", sans-serif, Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

.card {
    margin-bottom: 10px !important;
}

.mdi-arrow-expand:before {
    content: "\F616";
}

.mdi-arrow-compress:before {
    content: "\F615";
}

.fondoPerfil {
    background-image: linear-gradient(45deg,#01385d,#179C94);
}

.fondoFooter {
    background-image: linear-gradient(to right, #44658e 0%, #106573 51%, #34c2be 100%) !important;
}

fieldset {
    border: 1px solid silver !important;
    border-radius: 4px !important;
    margin-bottom: 5px !important;
    padding: 0px 20px 0px 20px !important;
}

legend {
    padding: 2px !important;
    float: none !important;
    font-size: 18px !important;
}

.card-body {
    padding: 23px 20px 20px 20px !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.btn-primary {
    color: #fff;
    background-color: #228516;
    border-color: #076558;
    box-shadow: 1px 3px 10px #48a262;
}

.btn-default {
    background-color: #8f170b !important;
    color: #fff;
    box-shadow: 1px 3px 10px #a24882 !important;
}

.form-control-sm {
    min-height: 26px !important;
    padding: 0px 3px 0px 11px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}

.sidebar-nav ul .sidebar-item .first-level {
    padding: 0px 0px 0px 10px !important;
}

.sidebar-nav .has-arrow::after {
    top: 21px !important;
}

.modal {
    z-index: 1050 !important;
}

#main-wrapper[data-layout=vertical] .topbar .top-navbar .navbar-header[data-logobg=skin1] {
    background-image: url(../img/background/barra-inicio-superior.jpg) !important;
    background-color: #004476 !important;
}

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
}

.form-group.has-error .help-block {
    color: #dd4b39;
}

.has-feedback label .form-control-feedback {
    top: 19px !important;
    right: 9px !important;
}

.has-error .form-control-feedback {
    color: #a94442;
    top: 10px !important;
    position: absolute;
    right: 30px;
    z-index: 10;
}

.has-success .col-form-label, .has-success .custom-control, .has-success .form-check-label, .has-success .form-control-feedback, .has-success .form-control-label {
    color: #39c449;
    top: 10px !important;
    position: absolute;
    right: 30px;
    z-index: 10;
}

.titulo_dos {
    font-size: 12px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    background-image: -webkit-linear-gradient(#179C94, #032B57) !important;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    height: 18px;
    border-radius: 5px;
}

.odd {
    background-color: #ebf3f5;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.0rem !important;
}

.btn-primary:hover {
    color: #fff;
    background-color: #155555 !important;
    border-color: #26778f !important;
}


.label-with-line {
    /* Contenedor principal para el título con línea */
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Espacio después del título */
}

.label-text {
    /* El texto del título (ej: Noticias, Magazine) */
    font-size: 18px;
    font-weight: bold;
    color: #333; /* Color de texto oscuro */
    margin-right: 15px; /* Espacio antes de la línea */
    text-transform: uppercase;
}

.label-with-line::after {
    /* La línea horizontal que sigue al título */
    content: "";
    flex-grow: 1; /* Hace que la línea ocupe el espacio restante */
    height: 3px;
    background-color: #003366; /* Color azul fuerte para la línea */
}

/* --- ESTILOS ESPECÍFICOS PARA LA NOTICIA --- */

.noticia-imagen {
    border: 4px solid #003366;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    width: 100%;
}

.noticia-fecha {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}

.noticia-titulo {
    font-weight: bold;
    font-size: 19px;
    line-height: 1.2;
    color: #003366;
    margin-top: 5px;
    margin-bottom: 15px;
}

.noticia-boton {
    background-color: #003366;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    display: block;
    font-size: 16px;
    font-weight: bold;
    border: none;
    transition: background-color 0.3s ease;
}

.noticia-boton:hover {
    background-color: #004d99;
}
/* --- ESTILOS ESPECÍFICOS PARA EL MAGAZINE --- */

.novedades-fecha {
    margin-top: 1px;
    font-size: 14px;
    color: #555;
}

.magazine-titulo {
    font-weight: bold;
    font-size: 17px;
    line-height: 1.1;
    color: #003366;
    margin-top: 10px;
    margin-bottom: 5px;
}

.magazine-imagen {
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    width: 100%;
    display: block;
}

.magazine-contenedor-boton {
    margin-top: 15px;
    text-align: center;
}

.magazine-boton-descarga {
    background-color: #003366;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    display: block;
    font-size: 16px;
    font-weight: bold;
    border: none;
    transition: background-color 0.3s;
}

    .magazine-boton-descarga:hover {
        background-color: #004d99;
    }

.boton-pagoPSE {
    background-color: #003366;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
    display: block;
    font-size: 12px;
    font-weight: bold;
    border: none;
    transition: background-color 0.3s;
    cursor: pointer;
}

    .boton-pagoPSE:hover {
        background-color: #004d99;
    }

.table-responsive {
    overflow-x: auto;
    max-height: 500px;
}

.table-responsiveCV {
    overflow-x: auto;
    max-height: 620px;
}

.calendario-disponibilidad {
    border-collapse: collapse;
    width: auto;
    min-width: 100%;
    table-layout: fixed;
}

    /* Encabezados */
    .calendario-disponibilidad th {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        padding: 5px 2px;
        text-align: center;
        font-size: 10px;
    }

.nombre-habitacion-header {
    /* La alineación de texto a la izquierda anula el centrado por defecto de TH */
    text-align: left !important;
    padding-left: 5px !important;
    /* Mantenemos el resto de estilos de posición */
    position: sticky;
    left: 0;
    width: 180px;
    z-index: 10;
    background-color: #e9ecef !important; /* Mismo que el fondo de la tabla */
}

.mes-header {
    font-weight: bold;
    font-size: 11px;
    background-color: #cce5ff !important; /* Azul claro para el encabezado del mes */
    border-bottom: 2px solid #007bff;
}

/* Celdas de Días */
.calendario-disponibilidad td {
    width: 25px; /* Ancho fijo para las celdas de días */
    height: 25px;
    padding: 0;
    text-align: center;
    border: 1px solid #dee2e6;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
}

/* Estilos de Disponibilidad */
.disponible {
    background-color: #d4edda; /* Verde claro */
    color: #155724;
}

.reservada {
    background-color: #f8d7da; /* Rojo claro */
    color: #721c24;
}

    .reservada:hover {
        background-color: #f5c6cb;
    }

/* Para mantener fija la columna de Habitaciones al hacer scroll */
.nombre-habitacion-cell {
    position: sticky;
    left: 0;
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: left !important;
    width: 180px;
    padding-left: 5px !important;
    vertical-align: middle;
    z-index: 9;
}

#contenedor-calendario {
    padding-bottom: 15px;
}


    #contenedor-calendario .table-responsive {
        max-height: 240px;
        overflow-y: auto;
        overflow-x: auto;
    }

#fieldsetDisponibilidad {
    width: 100%;
    max-width: 1200px;
    margin-top: 15px;
}

#divPaso3Hospedaje .reserva-datos-iniciales .row > [class*="col-"] {
    min-width: 0;
}

#divPaso3Hospedaje .reserva-datos-iniciales .has-float-label,
#divPaso3Hospedaje .reserva-datos-iniciales .select2-container {
    min-width: 0;
    max-width: 100%;
}

#divPaso3Hospedaje .reserva-datos-iniciales .Calendario,
#divPaso3Hospedaje .reserva-datos-iniciales .select2-container {
    width: 100% !important;
}

#divPaso3Hospedaje .reserva-datos-iniciales {
    padding-top: 16px !important;
}

#divPaso3Hospedaje #paso3Servicios .listaServicios {
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    line-height: 1.35;
}

#divPaso3Hospedaje #paso3Servicios .listaServicios li {
    min-width: 0;
}

#divPaso3Hospedaje #paso3Servicios .listaServicios li span {
    overflow-wrap: anywhere;
}



#contenedor-calendario .calendario-disponibilidad {
    border-collapse: collapse;
    width: auto;
    min-width: 100%;
    table-layout: fixed;
}

/* Fija la columna de la unidad al hacer scroll */
#contenedor-calendario .nombre-habitacion-header,
#contenedor-calendario .nombre-habitacion-cell {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: #f2f2f2;
}

.img-unidad-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 12px;
}

.img-unidad {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform .3s ease;
}

    .img-unidad:hover {
        transform: scale(1.05);
    }

.badge-fotos {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,.65);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
}

.caracteristica {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}

    .caracteristica i {
        color: #002a66;
        font-size: 20px;
    }

.btn-reservar {
    background: linear-gradient(135deg, #0d3b66, #1abc9c);
    color: #fff;
    padding: 12px 26px;
    border-radius: 30px;
    font-weight: 600;
    width: 100%;
    border: none;
    box-shadow: 0 6px 14px rgba(13, 59, 102, 0.35);
    transition: all .3s ease;
}

    .btn-reservar:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(26, 188, 156, 0.45);
    }


/* CONTENEDOR DEL SLIDER EN MODAL pasadia  */
#jssor_modal {
    width: 100% !important;
    height: 320px !important;
    visibility: visible !important;
}

    /* SLIDES */
    #jssor_modal [data-u="slides"] {
        width: 100% !important;
        height: 320px !important;
    }

    /* IMÁGENES */
    #jssor_modal img[data-u="image"] {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }


/* calendario de reservas servicios complementarios   */
#fieldsetDispServicios {
  
    width: 100%;   
    max-width: 1600px;   
    height: auto;
    min-height: 400px;    
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 20px;
}

.tabla-wrapper-servicios {
    height: 300px;
    overflow: auto;
}



.tabla-disponibilidad-servicios {
    border-collapse: collapse;
    font-size: 11px;
    min-width: 1200px;
}

    .tabla-disponibilidad-servicios th,
    .tabla-disponibilidad-servicios td {
        border: 1px solid #e0e0e0;
        text-align: center;
    }

   
    .tabla-disponibilidad-servicios thead tr:first-child th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #a9c0d8;
    }

   
    .tabla-disponibilidad-servicios thead tr:nth-child(2) th {
        position: sticky;
        top: 32.5px; 
        z-index: 4;
        background: #f4f6f9;
    }


.servicio-header {
    background: #d9e3f0;
    font-weight: bold;
    font-size: 20px;
}

.fecha-header {
    background: #a9c0d8;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
}

.hora-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    padding: 6px 2px;
    background: #f4f6f9;
}

.servicio-nombre {
    font-weight: 500;
    background: #f9fafc;
    min-width: 180px;
}

.sticky-col {
    position: sticky;
    left: 0;
    background: white;
    z-index: 4;
}

.celdaServ {
    width: 28px;
    height: 28px;
    transition: 0.2s ease;
}

.celda-disponible {
    background-color: #cfe8d5;
    color: #aed79F;
    font-weight: bold;
}

.celda-no-disponible {
    background-color: #cbd4cd;
    color: #2b2b2a;
    font-weight: bold;
}

.celda-ocupado {
    background-color: #f4b6b6;
    color: #7a1f1f;
    font-weight: bold;
}


.celda-fuera {
    background-color: #bdbdbd;
    color: #2c2c2c;
    font-weight: bold;
}

.celda-novedad {
    background-color: #ffc107; 
    color: #000;
    font-weight: bold;
    cursor: not-allowed;
}
.celda-bloqueada {
    background-color: #e9ecef;
    color: #999;
    pointer-events: none;
    cursor: not-allowed;
}

.box.bloqueado {
    background-color: #e9ecef;
}

.box.novedad {
    background-color: #ffc107;
    color: #000;
}

.fila-fuera td {
    background-color: #bdbdbd !important;
    color: #2c2c2c !important;
}

.celdaServ:hover {
    transform: scale(1.15);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
}


.box.disponible {
    background-color: #cfe8d5;
}

.box.reservado {
    background-color: #f4b6b6;
}

.box.no-disponible {
    background-color: #cbd4cd;
}

.box.fuera {
    background-color: #bdbdbd;
}

#contenedor-servicios {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.leyenda-container {
    display: flex;
    gap: 35px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.item-leyenda {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #1c2a4d;
    font-size: 15px;
}

.box {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 15px;
}


.disponible {
    background-color: #DFF5E1;
    color: #1E4620;
}

.reservado {
    background-color: #F8D7DA;
    color: #842029;
}

.fuera-servicio {
    background-color: #E2E3E5;
    color: #41464B;
}

.bloqueado {
    background-color: #e9ecef;
    color: #41464B;
}

.servicio-info {
    display: flex;
    flex-direction: column;
}

.servicio-descripcion {
    font-weight: 600;
}

.servicio-valor {
    font-size: 12px;
    color: #2e7d32;
    font-weight: 500;
    margin-top: 2px;
}



.popover {
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.popover-servicio {
    font-size: 13px;
}

.popover-titulo {
    font-weight: 600;
    margin-bottom: 6px;
    color: #0d6efd;
}

.servicio-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.servicio-texto {
    font-weight: 600;
    font-size: 12px;
}

.info-servicio {
    cursor: pointer;
    color: #0d6efd;
    font-size: 15px;
    margin-left: 6px;
    transition: 0.2s ease;
}

    .info-servicio:hover {
        color: #084298;
        transform: scale(1.15);
    }

.celda-seleccionada {
    outline: 2px solid #198754;
    transform: scale(1.05);
}

.rango-seleccionado {
    background-color: #198754 !important;
    color: white !important;
}

/* css de reservar eventos CANCHA-SALON-QUIOSCO  */

.flatpickr-calendar {
    width: 100% !important;
}

.flatpickr-day.selected {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
}

.titulo-calendario {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #2c3e50;
    letter-spacing: 0.5px;
}
.celda-temporal {
    background-color: #87f5f5;
    color: green;
}

.box.temporal {
    background: #87f5f5;
    color: green;
}


.evento-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sticky-colum {
    position: sticky;
    left: 0;
    background: white;
    z-index: 4;
}
.evento-nombre, .evento-header {
    width: 140px !important; 
    min-width: 140px !important;
    max-width: 140px !important;
    padding: 5px !important;
}

.servicio-evento {
    font-weight: 800;
    font-size: 12px;
}

.tabla-wrapper-eventos {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #f8f8f800;
    margin-bottom: 40px !important;
}

.tabla-disponibilidad-eventos {
    border-collapse: collapse;
    font-size: 10px;
    min-width: 1120px;
}

    .tabla-disponibilidad-eventos th,
    .tabla-disponibilidad-eventos td {
        border: 1px solid #e0e0e0;
        text-align: center;
    }


    .tabla-disponibilidad-eventos thead tr:first-child th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #a9c0d8;
    }


    .tabla-disponibilidad-eventos thead tr:nth-child(2) th {
        position: sticky;
        top: 32.5px;
        z-index: 4;
        background: #f4f6f9;
    }


.hora-evento, .td-hora-slot {  
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 15px 0 !important; 
    font-size: 13px !important;
}
.seleccionado {
    border: 2px solid #1e88e5;
}

.seleccionado-rango {
    background-color: #90caf9  !important;
}

.ico_excel {
    background-image: url(../img/pc.de/xls.png);
    background-repeat: no-repeat;
    float: left;
    width: 21px;
    height: 21px;
    margin-top: 0px;
    margin-right: 6px;
}

.user_ico {
    background-image: url(../img/pc.de/Users.ico);
    background-repeat: no-repeat;
    float: left;
    width: 25px;
    height: 21px;
    margin-top: 0px;
    margin-right: 6px;
}
.ico_save {
    background-image: url(../img/pc.de/Save.png);
    background-repeat: no-repeat;
    float: left;
    width: 20px;
    height: 21px;
    margin-top: 0px;
    margin-right: 6px;
}

.ico_pagar {
    background-image: url(../img/pc.de/dolar.png);
    background-repeat: no-repeat;
    float: left;
    width: 25px;
    height: 21px;
    margin-top: 0px;
    margin-right: 6px;
}
.ico_checkin {
    background-image: url(../img/pc.de/CheckIn.png);
    background-repeat: no-repeat;
    float: left;
    width: 20px;
    height: 21px;
    margin-top: 0px;
    margin-right: 6px; 
}
.ico_checkout {
    background-image: url(../img/pc.de/CheckOut.png);
    background-repeat: no-repeat;
    float: left;
    width: 20px;
    height: 21px;
    margin-top: 0px;
    margin-right: 6px;
}


.mi-reserva {
    background-color: #e6b879;
    color: #7a1f1f;
    font-weight: bold;
}

.box.mi-reserva {
    background-color: #e6b879;
}

input[type="checkbox"] {
    transform: scale(1.5);
    cursor: pointer;    
}

.chk-checkin {
    accent-color: #28a745; 
}

.chk-checkout {
    accent-color: #17a2b8; 
}

.chk-noasiste {
    accent-color: #28a745;
}
.titulo-label {
    font-weight: bold;
}
.titulo-valor {
    color: #002a66;
}

.textoDatosResult {
    text-align: left;
    font-weight: bold;
    display: inline-block;
    width: auto; 
    max-width: 100%; 
    white-space: nowrap;
}

.btn-reiniciar-custom {
    background: radial-gradient(circle, #e67e22 0%, #f8eeb2 50%, #d58208 100%);
    border: 2px solid #d58208;
    color: white;
    padding: 6px 6px;
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(230, 126, 34, 0.6), inset 0 0 6px rgba(255, 255, 255, 0.35);
    transition: all 0.1s ease-in-out;
}

    .btn-reiniciar-custom:hover {
        transform: scale(1.08);
        box-shadow: 0 0 12px rgba(211, 84, 0, 0.9), inset 0 0 8px rgba(255, 255, 255, 0.5);
    }

    .btn-reiniciar-custom:active {
        transform: scale(0.95);
        box-shadow: 0 0 4px rgba(211, 84, 0, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.3);
    }


.btn-guardar-custom {
    background: radial-gradient(circle, #001b3c 0%, #6cc6db 55%, #072985 100%);
    border: 2px solid #1e90ff;
    color: white;
    padding: 6px 6px;
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(30, 144, 255, 0.6), inset 0 0 6px rgba(255, 255, 255, 0.35);
    transition: all 0.1s ease-in-out;
}

    .btn-guardar-custom:hover {
        transform: scale(1.08);
        box-shadow: 0 0 12px rgba(0, 102, 204, 0.9), inset 0 0 8px rgba(255, 255, 255, 0.5);
    }

    .btn-guardar-custom:active {
        transform: scale(0.95);
        box-shadow: 0 0 4px rgba(0, 102, 204, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.3);
    }

.evento-link {
    color: #0d6efd;
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-block;
    transition: all 0.25s ease;
}

    .evento-link:hover {
        background: rgba(13, 110, 253, 0.1);
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
        color: #084298;
    }

.detalle-box {
    height: 100%;
    min-height: 90px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 12px 14px;
}

.detalle-label {
    display: block;
    font-weight: 700;
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 8px;
}

.detalle-value {
    display: block;
    font-weight: 550;
    color: #0c437a;
    font-size: 18px;
    word-break: break-word;
}

.estado-pago-box {
    height: 100%;
    border: 2px solid #dc3545;
    border-radius: 10px;
    background-color: #fff5f5;
    padding: 10px;
}

.estado-pago-legend {
    width: auto !important;
    background-color: #dc3545;
    color: #fff;
    padding: 2px 10px;
    border-radius: 5px;
    margin-left: 10px;
    font-size: 15px;
}

.estado-pago {
    height: 100%;
    border: 2px solid #dc3545;
    border-radius: 10px;
    background-color: #fff5f5;
    padding: 0 6px;
    min-width: 0;
}

.estado-pago legend {
    max-width: 100%;
    width: auto !important;
    white-space: normal;
    overflow-wrap: anywhere;
    background-color: #dc3545;
    color: white;
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 11px !important;
}

#lblFechaLimitePago {
    font-size: clamp(1.2rem, 2vw, 2rem) !important;
    overflow-wrap: anywhere;
    color: #d9534f;
}

/* css de MODULO MISIÓN BIENESTAR  */

.left-sidebar .sidebar-footer .sidebar-logout-form {
    width: 33.333337%;
}

.left-sidebar .sidebar-footer .sidebar-logout-link {
    display: block;
    width: 100%;
    padding: 15px;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
}

.left-sidebar .sidebar-footer .sidebar-logout-link:hover,
.left-sidebar .sidebar-footer .sidebar-logout-link:focus {
    color: #009efb;
}