body {
    margin: 0;
}

figure {
    margin: 0;
}



.hoteler-icons {
    height: 20px;
    width: 20px;
    overflow: hidden;
}

.hoteler-icons.icon-black img {
    filter: invert(100%);
}

.hoteler-icons.icon-pink img {
    filter: invert(30%) sepia(97%) saturate(4850%) hue-rotate(308deg) brightness(86%) contrast(88%);
}

.hoteler-icons figure {
    position: relative;
    width: 100%;
    height: 100%;

}

.hoteler-icons figure>img {
    position: relative;
    height: 500%;
}


.hoteler-icons.icon-1 {}

.hoteler-icons.icon-1 img {
    left: 0%;
    top: 0%;
}

.hoteler-icons.icon-2 {}

.hoteler-icons.icon-2 img {
    left: -100%;
    top: 0%;
}

.hoteler-icons.icon-3 {}

.hoteler-icons.icon-3 img {
    left: -200%;
    top: -0%;
}

.hoteler-icons.icon-4 {}

.hoteler-icons.icon-4 img {
    left: -300%;
    top: -0%;
}

.hoteler-icons.icon-5 {}

.hoteler-icons.icon-5 img {
    left: -400%;
    top: -0%;
}

.hoteler-icons.icon-6 {}

.hoteler-icons.icon-6 img {
    left: -500%;
    top: -0%;
}

.hoteler-icons.icon-7 {}

.hoteler-icons.icon-7 img {
    left: -600%;
    top: -0%;
}

.hoteler-icons.icon-8 {}

.hoteler-icons.icon-8 img {
    left: -700%;
    top: -0%;
}

.hoteler-icons.icon-9 {}

.hoteler-icons.icon-9 img {
    left: -800%;
    top: -0%;
}

.hoteler-icons.icon-10 {}

.hoteler-icons.icon-10 img {
    top: -0%;
    left: -900%;
}

.hoteler-icons.icon-11 {}

.hoteler-icons.icon-11 img {
    left: 0;
    top: -100%;
}

.hoteler-icons.icon-12 {}

.hoteler-icons.icon-12 img {
    left: -100%;
    top: -100%;
}

.hoteler-icons.icon-13 {}

.hoteler-icons.icon-13 img {
    left: -200%;
    top: -100%;
}

.hoteler-icons.icon-14 {}

.hoteler-icons.icon-14 img {
    left: -300%;
    top: -100%;
}

.hoteler-icons.icon-15 {}

.hoteler-icons.icon-15 img {
    left: -400%;
    top: -100%;
}

.hoteler-icons.icon-16 {}

.hoteler-icons.icon-16 img {
    left: -500%;
    top: -100%;
}

.hoteler-icons.icon-17 {}

.hoteler-icons.icon-17 img {
    left: -600%;
    top: -100%;
}

.hoteler-icons.icon-18 {}

.hoteler-icons.icon-18 img {
    left: -700%;
    top: -100%;
}

.hoteler-icons.icon-19 {}

.hoteler-icons.icon-19 img {
    left: -800%;
    top: -100%;
}

.hoteler-icons.icon-20 {}

.hoteler-icons.icon-20 img {
    left: -900%;
    top: -100%;
}

.hoteler-icons.icon-21 {}

.hoteler-icons.icon-21 img {
    left: 0;
    top: -200%;
}

.hoteler-icons.icon-22 {}

.hoteler-icons.icon-22 img {
    left: -100%;
    top: -200%;
}

.hoteler-icons.icon-23 {}

.hoteler-icons.icon-23 img {
    left: -200%;
    top: -200%;
}

.hoteler-icons.icon-24 {}

.hoteler-icons.icon-24 img {
    left: -300%;
    top: -200%;
}

.hoteler-icons.icon-25 {}

.hoteler-icons.icon-25 img {
    left: -400%;
    top: -200%;
}

.hoteler-icons.icon-26 {}

.hoteler-icons.icon-26 img {
    left: -500%;
    top: -200%;
}

.hoteler-icons.icon-27 {}

.hoteler-icons.icon-27 img {
    left: -600%;
    top: -200%;
}

.hoteler-icons.icon-28 {}

.hoteler-icons.icon-28 img {
    left: -700%;
    top: -200%;
}

.hoteler-icons.icon-29 {}

.hoteler-icons.icon-29 img {
    left: -800%;
    top: -200%;
}

.hoteler-icons.icon-30 {}

.hoteler-icons.icon-30 img {
    left: -900%;
    top: -200%;
}

.hoteler-icons.icon-31 {}

.hoteler-icons.icon-31 img {
    left: 0;
    top: -300%;
}

.hoteler-icons.icon-32 {}

.hoteler-icons.icon-32 img {
    left: -100%;
    top: -300%;
}

.hoteler-icons.icon-33 {}

.hoteler-icons.icon-33 img {
    left: -200%;
    top: -300%;
}

.hoteler-icons.icon-34 {}

.hoteler-icons.icon-34 img {
    left: -300%;
    top: -300%;
}

.hoteler-icons.icon-35 {}

.hoteler-icons.icon-35 img {
    left: -400%;
    top: -300%;
}

.hoteler-icons.icon-36 {}

.hoteler-icons.icon-36 img {
    left: -500%;
    top: -300%;
}

.hoteler-icons.icon-37 {}

.hoteler-icons.icon-37 img {
    left: -600%;
    top: -300%;
}

.hoteler-icons.icon-38 {}

.hoteler-icons.icon-38 img {
    left: -700%;
    top: -300%;
}

.hoteler-icons.icon-39 {}

.hoteler-icons.icon-39 img {
    left: -800%;
    top: -300%;
}

.hoteler-icons.icon-40 {}

.hoteler-icons.icon-40 img {
    left: -900%;
    top: -300%;
}

.hoteler-icons.icon-41 {}

.hoteler-icons.icon-41 img {
    left: 0;
    top: -400%;
}

.hoteler-icons.icon-42 {}

.hoteler-icons.icon-42 img {
    left: -100%;
    top: -400%;
}

.hoteler-icons.icon-43 {}

.hoteler-icons.icon-43 img {
    left: -200%;
    top: -400%;
}

.hoteler-icons.icon-44 {}

.hoteler-icons.icon-44 img {
    left: -300%;
    top: -400%;
}

.hoteler-icons.icon-45 {}

.hoteler-icons.icon-45 img {
    left: -400%;
    top: -400%;
}

.hoteler-icons.icon-46 {}

.hoteler-icons.icon-46 img {
    left: -500%;
    top: -400%;
}

.hoteler-icons.icon-47 {}

.hoteler-icons.icon-47 img {
    left: -600%;
    top: -400%;
}

.hoteler-icons.icon-48 {}

.hoteler-icons.icon-48 img {
    left: -700%;
    top: -400%;
}

.hoteler-icons.icon-49 {}

.hoteler-icons.icon-49 img {
    left: -800%;
    top: -400%;
}

.hoteler-icons.icon-50 {}

.hoteler-icons.icon-50 img {
    left: -900%;
    top: -400%;
}




.hoteler-btn-1 {}



.hoteler-room-list {
    padding-top: 15px;
    padding-bottom: 15px;
}

.room-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-family: barlow;
}

.room-list:hover .room-card {
    opacity: 0.8 !important;
}

.room-card {
    position: relative;
    box-sizing: border-box;
    padding: 5px 15px 5px 5px;
    width: 24%;
    min-width: 260px;
    max-width: 340px;
    height: auto;
}

.room-card.room-card.room-card:hover {
    opacity: 1 !important;
    transform: scale(1.025) !important;
}

.room-card:hover .room-pomo {}

.room-card:hover .room-pomo figure {
    transform-origin: 16px center;
    transform: rotate(15deg);
}

.room-card:hover .room-wrapper .room-tag .tags {
    animation-name: example;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes example {
    0% {
        transform: rotate(-10deg);
    }

    35% {
        transform: rotate(15deg);
    }

    70% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


.room-card .room-wrapper {
    border-radius: 14px;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.05);
    padding: 10px 75px 16px 16px;
    pointer-events: none;
    border: 1px solid #e6e6e6;
}

.room-card .room-wrapper .room-state {
    order: 2;
}

.room-card .room-wrapper .room-state .state-list {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;

}

.room-card .room-wrapper .room-state .state-list .state {
    background: #FF3D3D;
    border-radius: 100px;
    display: flex;
    height: 19px;
    min-width: 19px;
    justify-content: center;
    align-items: center;
}


.room-card .room-wrapper .room-state .state-list .state .icon {
    order: 1;
}

.room-card .room-wrapper .room-state .state-list .state .icon figure {
    margin: 0;
    width: 19px;
    height: 19px;
    overflow: hidden;
}

.room-card .room-wrapper .room-state .state-list .state .icon figure img {
    height: 100%;
}

.room-card .room-wrapper .room-state .state-list .state .name {
    order: 2;
    margin: -1px 7px 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.room-card .room-wrapper .room-state .state-list .state .name+* {
    margin-left: 5px;
}

.room-card .room-wrapper .room-state .state-list .state .name:empty {
    margin: 0;
}

.room-card .room-wrapper .room-state .state-list .state .name:empty+* {
    margin: 1px 0px;
}

.state.disponible {
    background-color: #26B01A !important;
}

.state.disponible .icon img {
    margin-left: 0px;
}

.state.ocupada {
    background-color: #FF3D3D !important;
}

.state.ocupada .icon img {
    margin-left: -20px;
}

.state.reservada {
    background-color: #D1268D !important;
}

.state.reservada .icon img {
    margin-left: -40px;
}

.state.cerrada {
    background-color: #7C15A1 !important;
}

.state.cerrada .icon img {
    margin-left: -60px;
}

.state.limpieza {
    background-color: #00A3FF !important;
}

.state.limpieza .icon img {
    margin-left: -80px;
}

.state.mantenimiento {
    background-color: #F69F00 !important;
}

.state.mantenimiento .icon img {
    margin-left: -100px;
}

.room-card .room-wrapper .room-name {
    margin-top: 14px;
}

.room-card .room-wrapper .room-name .floor-num {
    text-transform: uppercase;
    font-size: 0.8em;
    line-height: 100%;
    font-weight: 500;
    color: #999;
}

.room-card .room-wrapper .room-name .number {
    font-size: 1.6em;
    line-height: 100%;
    font-weight: 700;
    margin-bottom: -3px;
    margin-top: 2px;
}

.room-card .room-wrapper .room-name .name {
    font-size: 1.1em;
}

.room-card .room-wrapper .room-action {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: all;
}

.room-card .room-wrapper .room-action .action {}

.room-card .room-wrapper .room-action .action>* {
    cursor: pointer;
    transition: all .2s;
    max-width: 180px;
}

.room-card .room-wrapper .room-action .action>.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00a3ff;
    color: #fff;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 4px 7px;
    font-size: 13px;
}

.room-card .room-wrapper .room-action .action>.btn .icon {

    margin-right: 4px;
}

.room-card .room-wrapper .room-action .action>.btn .icon>* {
    height: 15px;
    width: 15px;
}

.room-card .room-wrapper .room-action .action>.text-btn {

    font-size: 12px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 5px;
    color: #D71616;
    text-align: center;
}

.room-card .room-wrapper .room-action .action.check-in {}

.room-card .room-wrapper .room-action .action.check-in .btn {
    background-color: #0B8700;
}

.room-card .room-wrapper .room-action .action.maintenance .btn {
    background-color: #F69F00;
    border: 1px solid #F69F00;
}

.room-card .room-wrapper .room-action .action.check-in .text-btn {
    color: #0B8700;
}

.room-card .room-wrapper .room-action .action.check-out {}

.room-card .room-wrapper .room-action .action.check-out .btn {
    background-color: #D71616;
}

.room-card .room-wrapper .room-action .action.check-out .text-btn {
    color: #D71616;
}

.room-card .room-wrapper .room-action .action.reserved {}

.room-card .room-wrapper .room-action .action.reserved .btn {
    background-color: #0B8700;
}

.room-card .room-wrapper .room-action .action.reserved .text-btn {
    color: #D71616;
}

.room-card .room-wrapper .room-action .action.closed {}

.room-card .room-wrapper .room-action .action.closed .btn {
    background-color: #13C9A4;
}

.room-card .room-wrapper .room-action .action.closed .text-btn {
    color: #13C9A4;
}

.room-card .room-wrapper .room-action .action>.btn:hover {
    background-color: #000;
}

.room-card .room-wrapper .room-action .action>.text-btn:hover {
    color: #000;
}

.room-card .room-wrapper .room-pomo>figure {
    position: absolute;
    right: 0;
    top: 15px;
    width: 67px;
    z-index: 2;

    transition: all .2s;
}

.room-card .room-wrapper .room-pomo figure {
    margin: 0;
    padding: 0;
}

.room-card .room-wrapper .room-pomo figure img {
    width: 100%;
}

.room-card .room-wrapper .room-tag {
    position: absolute;
    right: 23px;
    top: 45px;
    width: 36px;
    z-index: 1;
}

.room-card .room-wrapper .room-tag .room-tag-line {
    height: 56px;
    width: 34px;
    margin-top: -6px;
    margin-bottom: -9px;
    margin-left: -2px;
}

.room-card .room-wrapper .room-tag .room-tag-line path {
    stroke-width: 1px;
    stroke: #dbdbdb;
}

.room-card .room-wrapper .room-tag .tags {
    padding: 0;
    margin: 0;
    margin-left: -4px;
    width: 22px;
    height: 57px;
    overflow: hidden;
    transform: rotate(-10deg);
    transform-origin: center top;

    transition: all .2s;
}

.room-card .room-wrapper .room-tag .tags svg {
    width: 135px;
    height: 55px;
}


.room-card .room-wrapper .room-tag .tags.tag1 svg {
    margin-left: 0px;
}

.room-card .room-wrapper .room-tag .tags.tag2 svg {
    margin-left: -23px;
}

.room-card .room-wrapper .room-tag .tags.tag3 svg {
    margin-left: -46px;
}

.room-card .room-wrapper .room-tag .tags.tag4 svg {
    margin-left: -67.5px;
}

.room-card .room-wrapper .room-tag .tags.tag5 svg {
    margin-left: -90px;
}

.room-card .room-wrapper .room-tag .tags.tag6 svg {
    margin-left: -112px;
}




.room-card.card-list-type {
    width: 100%;
    max-width: none;
}

.room-card.card-list-type .room-wrapper {
    display: flex;
    padding: 10px 65px 10px 16px;
}

.room-card.card-list-type .room-wrapper .room-state {
    margin-left: 16px;
}

.room-card.card-list-type .room-wrapper .room-state .state-list {}

.room-card.card-list-type .room-wrapper .room-state .state-list .state {}


.room-card.card-list-type .room-wrapper .room-state .state-list .state .icon {}

.room-card.card-list-type .room-wrapper .room-state .state-list .state .icon figure {}

.room-card.card-list-type .room-wrapper .room-state .state-list .state .icon figure img {}

.room-card.card-list-type .room-wrapper .room-state .state-list .state .name {}

.room-card.card-list-type .room-wrapper .room-state .state-list .state .name+* {}

.room-card.card-list-type .room-wrapper .room-state .state-list .state .name:empty {}

.room-card.card-list-type .room-wrapper .room-state .state-list .state .name:empty+* {}

.room-card.card-list-type .room-wrapper .room-name {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 11px;
}

.room-card.card-list-type .room-wrapper .room-name .floor-num {
    order: 3;
}

.room-card.card-list-type .room-wrapper .room-name .number {
    margin: 0;
}

.room-card .room-wrapper .room-name .name {}

.room-card.card-list-type .room-wrapper .room-action {
    position: absolute;
    right: 80px;
    margin: 0;
}

.room-card.card-list-type .room-wrapper .room-action .action {}

.room-card.card-list-type .room-wrapper .room-action .action>* {}

.room-card.card-list-type .room-wrapper .room-action .action>.btn {
    height: auto;
    padding: 5px 10px;
    font-size: 13px;
}

.room-card.card-list-type .room-wrapper .room-action .action>.text-btn {}

.room-card.card-list-type .room-wrapper .room-action .action.check-in {}

.room-card.card-list-type .room-wrapper .room-action .action.check-in .btn {}

.room-card.card-list-type .room-wrapper .room-action .action.check-in .text-btn {}

.room-card.card-list-type .room-wrapper .room-action .action.check-out {}

.room-card.card-list-type .room-wrapper .room-action .action.check-out .btn {}

.room-card.card-list-type .room-wrapper .room-action .action.check-out .text-btn {}

.room-card.card-list-type .room-wrapper .room-action .action.reserved {}

.room-card.card-list-type .room-wrapper .room-action .action.reserved .btn {}

.room-card.card-list-type .room-wrapper .room-action .action.reserved .text-btn {}

.room-card.card-list-type .room-wrapper .room-action .action.closed {}

.room-card.card-list-type .room-wrapper .room-action .action.closed .btn {}

.room-card.card-list-type .room-wrapper .room-action .action.closed .text-btn {}

.room-card.card-list-type .room-wrapper .room-action .action>.btn:hover {}

.room-card.card-list-type .room-wrapper .room-action .action>.text-btn:hover {}

.room-card.card-list-type .room-wrapper .room-pomo {}

.room-card.card-list-type .room-wrapper .room-pomo figure {}

.room-card.card-list-type .room-wrapper .room-pomo figure img {}




.floor-toggle,
.floor-toggle-btn {
    position: absolute;
    z-index: 4;
    margin: 0;
    padding: 0;
}

.floor-toggle {
    left: 0px;
    top: 0px;
    height: 53px;
    width: 100%;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
}

.floor-toggle-btn {
    left: 15px;
    top: 10px;
    display: flex;
    height: 30px;
    width: 30px;
    align-items: center;
    justify-content: center;


    transform: rotate(0deg);
    opacity: 0.3;
}

.floor-toggle-btn>* {
    height: 16px;
    width: 16px;
}

.floor-toggle:checked {}

.floor-toggle:checked+.floor-toggle-btn {}


.floor-toggle:checked~.floor-wrapper {}

.floor-toggle:checked~.floor-wrapper .floor-head {
    background-color: #f1f1f1 !important;
}

.floor-toggle:checked~.floor-wrapper .floor-cont {
    height: 0;
    overflow: hidden;
}

.floor-toggle:checked+.floor-toggle-btn {
    transform: rotate(-90deg);
    opacity: 1;
}









.tag-state .icon figure {}

.tag-state .icon figure img {}

.room-card .room-wrapper .room-tag .tags .icon {
    position: absolute;
    margin: 0;
    width: 20px;
    height: 20px;
    overflow: hidden;
    bottom: 15px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.room-card .room-wrapper .room-tag .tags .icon figure {
    position: relative;
    margin: 0;
    height: 100%;
}

.room-card .room-wrapper .room-tag .tags .icon figure img {
    height: 100%;
}

.tag-state.disponible>svg path {
    fill: #26B01A !important;
}

.tag-state.disponible .icon img {
    margin-left: 0px;
}

.tag-state.ocupada>svg path {
    fill: #FF3D3D !important;
}

.tag-state.ocupada .icon img {
    margin-left: -21px;
}

.tag-state.reservada>svg path {
    fill: #D1268D !important;
}

.tag-state.reservada .icon img {
    margin-left: -42px;
}

.tag-state.cerrada>svg path {
    fill: #7C15A1 !important;
}

.tag-state.cerrada .icon img {
    margin-left: -63px;
}

.tag-state.limpieza>svg path {
    fill: #00A3FF !important;
}

.tag-state.limpieza .icon img {
    margin-left: -84px;
}

.tag-state.mantenimiento>svg path {
    fill: #F69F00 !important;
}

.tag-state.mantenimiento .icon img {
    margin-left: -105px;
}











.hoteler-layout {
    display: flex;
    flex-wrap: wrap;
    background-color: #FDF0F8;
    position: relative;
    height: 100vh;
    width: 100%;
    padding: 70px 15px 15px 250px;
    box-sizing: border-box;
}




.hoteler-layout .top-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 55px;
    background-color: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.09);
}

.hoteler-layout .top-bar .top-bar-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 0 75px 0 20px;
    align-items: center;
    height: 100%;
}

.hoteler-layout .top-bar .top-bar-wrapper .top-bar-hoteler-logo {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.hoteler-layout .top-bar .top-bar-wrapper .top-bar-hoteler-logo>* {
    height: 30px;
    width: 40px;
}


.hoteler-layout .top-bar .hotel-logo {
    display: flex;
}

.hoteler-layout .top-bar .hotel-logo figure {
    height: 100%;
    width: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hoteler-layout .top-bar .hotel-logo figure img {
    max-height: 35px;
}

.hoteler-layout .top-bar .top-actions {
    display: flex;
}

.hoteler-layout .top-bar .top-actions .caja-last-resume {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    margin-right: 18px;
    padding-right: 18px;
    border-right: 1px solid #dbdbdb;
}

.hoteler-layout .top-bar .top-actions .caja-last-resume .title {
    font: 700 10px Barlow;
    text-transform: uppercase;
    margin-bottom: -2px;
    color: #d1268d;
}

.hoteler-layout .top-bar .top-actions .caja-last-resume .value {
    font: 400 17px Barlow;
}

.hoteler-layout .top-bar .top-actions .top-btns {
    display: flex;
    align-items: center;
    margin-left: 4px;
}

.hoteler-layout .top-bar .top-actions .top-btns>ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    gap: 10px;
}

.hoteler-layout .top-bar .top-actions .top-btns>ul>li {
    display: flex;
    align-items: center;
    padding: 5px 9px;
    background-color: #d1268d;
    border-radius: 6px;
    color: #fff;
    font: 600 12px Barlow;
    text-transform: uppercase;
    cursor: pointer;
}

.hoteler-layout .top-bar .top-actions .top-btns>ul>li.btn-text {
    background-color: transparent;
    color: #d1268d;
}

.hoteler-layout .top-bar .top-actions .top-btns>ul>li>.icon {
    margin-right: 6px;
    height: 15px;
    width: 15px;
}

.hoteler-layout .top-bar .top-actions .top-btns>ul>li>.text {}




.hoteler-layout .nav-bar {
    position: absolute;
    left: 15px;
    top: 70px;
    height: calc(100% - 85px);
    width: 235px;
    background: #fff;
    border-radius: 10px;
    padding: 22px 25px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.09);
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}


.hoteler-layout .nav-bar::-webkit-scrollbar {
    width: 16px;
}

.hoteler-layout .nav-bar::-webkit-scrollbar-track {
    background-color: transparent;
}

.hoteler-layout .nav-bar::-webkit-scrollbar-thumb {
    background-color: #e7e7e7;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}


.hoteler-layout .nav-bar .nav-wrapper {}

.hoteler-layout .nav-bar .nav-wrapper .nav-footer {}

.hoteler-layout .nav-bar .nav-wrapper .nav-footer svg {
    margin: 51px 0 30px;
    margin-left: -4%;
    opacity: 0.085;
    width: 115%;
    min-width: 100px;
    height: auto;
}

.hoteler-layout .nav-bar .nav-wrapper .title {
    font: 700 20px Barlow;
    margin-bottom: 25px;
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list {}

.hoteler-layout .nav-bar .nav-wrapper .nav-list:nth-child(n+3) {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e2e2e2;
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list>ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list>ul>li {
    display: flex;
    border-radius: 8px;
    font: 400 15px Barlow;
    cursor: pointer;
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list>ul>li {}

.hoteler-layout .nav-bar .nav-wrapper .nav-list>ul>li.selected {
    font-weight: 700;
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list>ul>li.selected .text {
    text-indent: 10px;
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list>ul>li:hover {
    opacity: 0.7;
    transform: scale(0.9);
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list>ul>li>.icon {}

.hoteler-layout .nav-bar .nav-wrapper .nav-list>ul>li>.text {
    margin-left: 10px;
}


.hoteler-layout .nav-bar .nav-wrapper .nav-list.filled {}

.hoteler-layout .nav-bar .nav-wrapper .nav-list.filled>ul {
    gap: 8px;
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list.filled>ul>li {
    background: #d1268d;
    color: #fff;
    padding: 7px 12px;
    border: 2px solid #d1268d;
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list.filled>ul>li.selected {
    background-color: white;
    color: #333;
    font-weight: 400;
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list.filled>ul>li.selected .icon {
    filter: invert(30%) sepia(97%) saturate(4850%) hue-rotate(308deg) brightness(86%) contrast(88%);
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list.filled>ul>li.selected .text {
    text-indent: 0px;
}

.hoteler-layout .nav-bar .nav-wrapper .nav-list.filled>ul>li:hover {}

.hoteler-layout .nav-bar .nav-wrapper .nav-list.filled>ul>li>.icon {}

.hoteler-layout .nav-bar .nav-wrapper .nav-list.filled>ul>li>.text {}

.hoteler-layout .nav-bar .nav-wrapper .dark-mode-btn {}



.hoteler-layout .layout-container input,
.hoteler-layout .layout-container textarea,
.hoteler-layout .layout-container select {
    font-family: Barlow;
}

.hoteler-layout .layout-container {
    position: relative;
    background-color: #fff;
    width: 100%;
    border-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
    margin-left: 15px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.09);
    overflow-y: auto;
    height: 100%;
}

.hoteler-layout .layout-container::-webkit-scrollbar {
    width: 18px;
}

.hoteler-layout .layout-container::-webkit-scrollbar-track {
    background-color: transparent;
}

.hoteler-layout .layout-container::-webkit-scrollbar-thumb {
    background-color: #e7e7e7;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

.hoteler-layout .layout-wrapper {}



.hoteler-layout .layout-wrapper .filter-bar {}


.filter-toggle {
    position: absolute;
    left: 28px;
    top: 51px;
    height: 33px;
    width: 105px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.filter-toggle:checked~.filter-bar .state-list .state {}

.filter-toggle.filter-1 {
    left: 28px;
    width: 107px;
}

.filter-toggle.filter-1:checked~.filter-bar .state-list .state:nth-child(1) {
    background-color: #fff !important;
}

.filter-toggle.filter-1:checked~.filter-bar .state-list .state:nth-child(1) .name {
    color: #333;
}

.filter-toggle.filter-1:checked~.filter-bar .state-list .state:nth-child(1) .icon {
    filter: invert(56%) sepia(22%) saturate(2034%) hue-rotate(71deg) brightness(90%) contrast(92%);
}

.filter-toggle.filter-1:checked~.layout-cont .room-list .room-card:not(.state-disponible) {
    display: none;
}

.filter-toggle.filter-2 {
    left: 135px;
    width: 98px;
}

.filter-toggle.filter-2:checked~.filter-bar .state-list .state:nth-child(2) {
    background-color: #fff !important;
}

.filter-toggle.filter-2:checked~.filter-bar .state-list .state:nth-child(2) .name {
    color: #333;
}

.filter-toggle.filter-2:checked~.filter-bar .state-list .state:nth-child(2) .icon {
    filter: invert(41%) sepia(93%) saturate(2466%) hue-rotate(336deg) brightness(109%) contrast(116%);
}

.filter-toggle.filter-2:checked~.layout-cont .room-list .room-card:not(.state-ocupada) {
    display: none;
}

.filter-toggle.filter-3 {
    left: 233px;
    width: 108px;
}

.filter-toggle.filter-3:checked~.filter-bar .state-list .state:nth-child(3) {
    background-color: #fff !important;
}

.filter-toggle.filter-3:checked~.filter-bar .state-list .state:nth-child(3) .name {
    color: #333;
}

.filter-toggle.filter-3:checked~.filter-bar .state-list .state:nth-child(3) .icon {
    filter: invert(47%) sepia(90%) saturate(6575%) hue-rotate(306deg) brightness(85%) contrast(92%);
}

.filter-toggle.filter-3:checked~.layout-cont .room-list .room-card:not(.state-reservada) {
    display: none;
}

.filter-toggle.filter-4 {
    left: 341px;
    width: 93px;
}

.filter-toggle.filter-4:checked~.filter-bar .state-list .state:nth-child(4) {
    background-color: #fff !important;
}

.filter-toggle.filter-4:checked~.filter-bar .state-list .state:nth-child(4) .name {
    color: #333;
}

.filter-toggle.filter-4:checked~.filter-bar .state-list .state:nth-child(4) .icon {
    filter: invert(13%) sepia(45%) saturate(7304%) hue-rotate(280deg) brightness(96%) contrast(98%);
}

.filter-toggle.filter-4:checked~.layout-cont .room-list .room-card:not(.state-cerrada) {
    display: none;
}

.filter-toggle.filter-5 {
    left: 434px;
    width: 100px;
}

.filter-toggle.filter-5:checked~.filter-bar .state-list .state:nth-child(5) {
    background-color: #fff !important;
}

.filter-toggle.filter-5:checked~.filter-bar .state-list .state:nth-child(5) .name {
    color: #333;
}

.filter-toggle.filter-5:checked~.filter-bar .state-list .state:nth-child(5) .icon {
    filter: invert(42%) sepia(81%) saturate(2549%) hue-rotate(180deg) brightness(107%) contrast(103%);
}

.filter-toggle.filter-5:checked~.layout-cont .room-list .room-card:not(.state-limpieza) {
    display: none;
}

.filter-toggle.filter-6 {
    left: 534px;
    width: 132px;
}

.filter-toggle.filter-6:checked~.filter-bar .state-list .state:nth-child(6) {
    background-color: #fff !important;
}

.filter-toggle.filter-6:checked~.filter-bar .state-list .state:nth-child(6) .name {
    color: #333;
}

.filter-toggle.filter-6:checked~.filter-bar .state-list .state:nth-child(6) .icon {
    filter: invert(72%) sepia(53%) saturate(3506%) hue-rotate(1deg) brightness(97%) contrast(104%);
}

.filter-toggle.filter-6:checked~.layout-cont .room-list .room-card:not(.state-mantenimiento) {
    display: none;
}

.filter-toggle.filter-7 {
    top: 26px;
    width: 86px;
    left: 167px;
    height: 23px;
}

.filter-toggle.filter-7:checked {
    display: none;
}

.filter-toggle.filter-7:checked~.filter-bar .state-list .state:nth-child(7) {
    background-color: #fff !important;
    display: none;
}

.filter-toggle.filter-7:checked~.filter-bar .state-list .state:nth-child(7) .name {
    color: #333;
}

.filter-toggle.filter-7:checked~.filter-bar .state-list .state:nth-child(7) .icon {
    filter: invert(72%) sepia(53%) saturate(3506%) hue-rotate(1deg) brightness(97%) contrast(104%);
}

.filter-toggle.filter-7:checked~.layout-cont .room-list .room-card {}



.hoteler-layout .layout-wrapper .layout-head {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.hoteler-layout .layout-wrapper .layout-head .view-title {
    font: 800 28px Barlow;
}

.hoteler-layout .layout-wrapper .layout-head .view-action {
    display: flex;
    align-items: center;
}

.hoteler-layout .layout-wrapper .layout-head .view-action .view-btns {
    display: flex;
    gap: 7px;
}

.hoteler-layout .layout-wrapper .layout-head .view-action .view-btns .view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    background-color: #333;
    border-radius: 7px;
    border: 2px solid #333;
}

.hoteler-layout .layout-wrapper .layout-head .view-action .view-btns .view-btn>* {
    filter: invert(1);
}

.hoteler-layout .layout-wrapper .layout-head .view-action .action-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hoteler-layout .layout-wrapper .layout-head .view-action .action-btns .action-btn {
    padding: 6px 14px;
    background: #6B1348;
    color: #fff;
    border-radius: 7px;
    font: 600 13px Barlow;
    text-transform: uppercase;
    letter-spacing: -0.31px;
    border: 2px solid #6B1348;
    cursor: pointer;
}




.view-toggle {
    position: absolute;
    height: 42px;
    width: 42px;
    margin: 0;
    opacity: 0;
    z-index: 2;
    top: 135px;
    cursor: pointer;
}

.view-toggle.view-1 {
    right: 167px;
}

.view-toggle.view-1:checked~.layout-head .view-action .view-btns .view-btn:nth-child(1) {
    background-color: #fff;
}

.view-toggle.view-1:checked~.layout-head .view-action .view-btns .view-btn:nth-child(1)>* {
    filter: invert(0);
}

.view-toggle.view-2 {
    right: 121px;
}

.view-toggle.view-2:checked~.layout-head .view-action .view-btns .view-btn:nth-child(2) {
    background-color: #fff;
}

.view-toggle.view-2:checked~.layout-head .view-action .view-btns .view-btn:nth-child(2)>* {
    filter: invert(0);
}

.view-toggle.view-3 {
    right: 75px;
}

.view-toggle.view-3:checked~.layout-head .view-action .view-btns .view-btn:nth-child(3) {
    background-color: #fff;
}

.view-toggle.view-3:checked~.layout-head .view-action .view-btns .view-btn:nth-child(3)>* {
    filter: invert(0);
}

.view-toggle.view-4 {
    right: 28px;
}

.view-toggle.view-4:checked~.layout-head .view-action .view-btns .view-btn:nth-child(4) {
    background-color: #fff;
}

.view-toggle.view-4:checked~.layout-head .view-action .view-btns .view-btn:nth-child(4)>* {
    filter: invert(0);
}
















.view-toggle.view-1:checked~.layout-cont .floor-cont {}

.view-toggle.view-1:checked~.room-card .room-wrapper {}

.view-toggle.view-1:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-tag {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-state {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-state .state-list {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-state .state-list .state {}


.view-toggle.view-1:checked~.room-card .room-wrapper .room-state .state-list .state .icon {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-state .state-list .state .icon figure {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-state .state-list .state .icon figure img {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-state .state-list .state .name {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-state .state-list .state .name+* {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-state .state-list .state .name:empty {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-state .state-list .state .name:empty+* {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-name {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-name .floor-num {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-name .number {}

.view-toggle.view-1:checked~.room-card.room-name .name {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action>* {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action>.btn {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action>.text-btn {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.check-in {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.check-in .btn {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.check-in .text-btn {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.check-out {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.check-out .btn {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.check-out .text-btn {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.reserved {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.reserved .btn {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.reserved .text-btn {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.closed {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.closed .btn {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action.closed .text-btn {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action>.btn:hover {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-action .action>.text-btn:hover {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-pomo {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-pomo figure {}

.view-toggle.view-1:checked~.room-card .room-wrapper .room-pomo figure img {}








.view-toggle.view-2:checked~.layout-cont .floor-cont .room-list {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card {
    width: 18%;
    min-width: 205px;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper {
    padding: 8px 30px 10px 11px;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-tag {
    display: none;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list {
    transform: scale(0.85);
    transform-origin: center left;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state {}


.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .icon {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .icon figure {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .icon figure img {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name+* {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name:empty {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name:empty+* {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-name {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-name .floor-num {
    font-size: 0.6em;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-name .number {
    font-size: 1.4em;
    margin-bottom: 0px;
    margin-top: 1px;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-name .name {
    font-size: 0.9em;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action {
    align-items: flex-start;
    position: absolute;
    right: 0;
    bottom: 18px;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>* {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.btn {
    padding: 3px 5px;
    font-size: 11px;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.text-btn {
    display: none;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-in {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-in .btn {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-in .text-btn {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-out {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-out .btn {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-out .text-btn {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.reserved {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.reserved .btn {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.reserved .text-btn {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.closed {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.closed .btn {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.closed .text-btn {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.btn:hover {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.text-btn:hover {}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-pomo {
    width: 50px;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-pomo figure {
    right: 0;
    top: 14px;
    width: 52px;
}

.view-toggle.view-2:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-pomo figure img {}
















.view-toggle.view-3:checked~.layout-cont .floor-cont .room-list {
    gap: 5px;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card {
    width: 100%;
    max-width: none;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper {
    display: flex;
    padding: 10px 55px 10px 16px;
    align-items: center;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-tag {
    display: none;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state {
    margin-left: 16px;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state {}


.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .icon {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .icon figure {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .icon figure img {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name+* {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name:empty {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name:empty+* {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-name {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 11px;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-name .floor-num {
    order: 3;
    font-size: 0.65em;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-name .number {
    margin: 0;
    font-size: 1.4em;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-name .name {
    font-size: 0.85em;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action {
    position: absolute;
    right: 60px;
    margin: 0;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action {
    display: flex;
    gap: 8px;
    flex-direction: row-reverse;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>* {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.btn {
    height: auto;
    padding: 3px 10px;
    font-size: 12px;
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.text-btn {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-in {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-in .btn {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-in .text-btn {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-out {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-out .btn {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-out .text-btn {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.reserved {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.reserved .btn {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.reserved .text-btn {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.closed {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.closed .btn {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.closed .text-btn {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.btn:hover {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.text-btn:hover {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-pomo {}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-pomo figure {
    width: 50px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.view-toggle.view-3:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-pomo figure img {}








.view-toggle.view-4:checked~.layout-cont .floor-cont {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-list {
    gap: 10px;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .hoteler-room-list {
    padding-bottom: 5px;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card {
    padding: 4px 12px 4px 4px;
    width: 16%;
    max-width: 150px;
    min-width: 130px;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper {
    padding: 5px 30px 7px 7px;
    display: flex;
    align-items: center;
    border-radius: 8px;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-tag {
    display: none;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state {
    order: 1;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state:nth-child(n+2) {
    position: absolute;
    height: 5px;
    width: 5px;
    min-width: 5px;
    bottom: 0px;
    left: 15px;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state:nth-child(n+2)>* {
    display: none;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state:nth-child(2) {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state:nth-child(3) {
    left: 23px;
}


.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .icon {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .icon figure {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .icon figure img {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name {
    display: none;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name+* {
    margin-left: 0.5px;
    transform: scale(0.9);
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name:empty {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-state .state-list .state .name:empty+* {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-name {
    margin-top: 0px;
    margin-left: 5px;
    order: 2;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-name .floor-num {
    display: none;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-name .number {
    font-size: 1.2em;
    margin-bottom: 0px;
    margin-top: 0px;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-name .name {
    display: none;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action {
    display: none;
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>* {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.btn {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.text-btn {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-in {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-in .btn {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-in .text-btn {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-out {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-out .btn {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.check-out .text-btn {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.reserved {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.reserved .btn {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.reserved .text-btn {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.closed {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.closed .btn {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action.closed .text-btn {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.btn:hover {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-action .action>.text-btn:hover {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-pomo {}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-pomo figure {
    width: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.view-toggle.view-4:checked~.layout-cont .floor-cont .room-card .room-wrapper .room-pomo figure img {}


.view-toggle.view-4:checked~.layout-cont .floor-toggle {
    height: 40px;
}

.view-toggle.view-4:checked~.layout-cont .floor-toggle-btn {
    left: 3px;
    top: 4px;
}

.view-toggle.view-4:checked~.layout-cont .floor-toggle-btn>* {
    height: 11px;
    width: 11px;
}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head {
    padding: 10px 5px 9px 35px;
    background-color: #f1f1f1;
}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head:hover {}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head>.icon {}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head>.floor-name {}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head>.floor-name .title {
    font-size: 15px;
    font-weight: 500;
}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head .tags {
    font: 600 10px Barlow;
}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head .tags .tag-info {
    padding: 1px 6px 2px;
    background-color: #b0b0b0 !important;
}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head .tags .tag-info.tag-green {}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head .tags .tag-info>.icon {}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head>.actions {}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head>.actions .action-btn {
    background-color: transparent;
    border: 0;
    color: #D1268D;
    font-weight: 700;
}

.view-toggle.view-4:checked~.layout-cont .floor .floor-wrapper .floor-head>.actions .action-btn:hover {}












.hoteler-layout .layout-wrapper .layout-head .view-action .action-btns .action-btn:hover {
    border: 2px solid #6B1348;
    background: #fff;
    color: #d1268d;
}

.hoteler-layout .layout-wrapper .layout-head .view-action .action-btns .action-btn.create-type {}

.hoteler-layout .layout-wrapper .layout-head .view-action .action-btns .action-btn.create-room {}

.hoteler-layout .layout-wrapper .layout-head .view-action .action-btns .action-btn.create-tarifa {}

.hoteler-layout .layout-wrapper .layout-cont {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.hoteler-layout .layout-wrapper .layout-cont .floor {
    position: relative;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper {}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 10px 65px;
    background-color: #fde6f4;
    border-radius: 10px;
    position: relative;
    align-items: center;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head:hover {
    background-color: #fff !important;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head>.icon {
    position: absolute;
    background-color: #000;
    display: flex;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head>.floor-name {
    position: relative;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head>.floor-name .title {
    font: 700 24px Barlow;
    text-transform: uppercase;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head .tags {
    display: flex;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font: 600 12px Barlow;
    white-space: nowrap;
    margin-left: 16px;
    gap: 10px;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head .tags .tag-info {
    display: flex;
    align-items: center;
    background: #333;
    padding: 1px 9px 3px;
    border-radius: 10px;
    color: #fff;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head .tags .tag-info.tag-green {
    background-color: #26B01A;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head .tags .tag-info>.icon {
    width: 13px;
    height: 13px;
    margin-right: 2px;
    margin-left: -2px;
    margin-bottom: -1px;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head>.actions {
    z-index: 5;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head>.actions .action-btn {
    padding: 5px 16px;
    border: 1px solid #D1268D;
    background: #D1268D;
    color: #fff;
    font: 500 15px Barlow;
    border-radius: 5px;
    cursor: pointer;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-head>.actions .action-btn:hover {
    background: white;
    color: #D1268D;
}

.hoteler-layout .layout-wrapper .layout-cont .floor .floor-wrapper .floor-cont {}



.nav-toggle,
.nav-toggle-icon {
    position: absolute;
    left: 250px;
    margin-left: -20px;
    bottom: 70px;
    z-index: 2;
    height: 40px;
    width: 40px;
    border-radius: 100px;
    background-color: #d1268d;
}

.nav-toggle {
    z-index: 3;
    display: flex;
    margin: 0;
    height: 50px;
    width: 50px;
    margin-left: -25px;
    margin-bottom: -5px;
    opacity: 0;
    cursor: pointer;
}

.nav-toggle-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.nav-toggle-icon>* {
    transform: rotate(90deg);
    filter: invert(1);
    height: 12px;
    width: 12px;
}

.nav-toggle:checked {

    height: 40px;
    width: 40px;
}

.nav-toggle:checked,
.nav-toggle:checked+.nav-toggle-icon {
    left: 90px;

}

.nav-toggle:checked+.nav-toggle-icon>* {
    transform: rotate(-90deg);
    filter: invert(1);
}

.nav-toggle:checked~.hoteler-layout {
    padding: 70px 15px 15px 85px;
}

.nav-toggle:checked~.hoteler-layout .top-bar {}

.nav-toggle:checked~.hoteler-layout .nav-bar {
    width: 65px;
    padding: 15px 15px;
}

.nav-toggle:checked~.hoteler-layout .layout-cont {}

.nav-toggle:checked~.hoteler-layout .nav-list.nav-list.filled>ul>li {
    padding: 6px 6px;
}

.nav-toggle:checked~.hoteler-layout .nav-list>ul>li>.text {
    display: none;
}

.nav-toggle:checked~.hoteler-layout .nav-bar .nav-wrapper .title {
    display: none;
}

.nav-toggle:checked~.hoteler-layout .nav-bar .nav-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}





.filter-btns {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e5e5e5;
}

.filter-btns .filter-title {
    font: 700 14px Barlow;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.filter-btns .state-list {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    font-family: Barlow;
}

.filter-btns .state-list .state {
    background: red;
    border-radius: 100px;
    display: flex;
    height: 24px;
    min-width: 24px;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
}


.filter-btns .state-list .state .icon {
    order: 1;
}

.filter-btns .state-list .state .icon figure {
    margin: 0;
    width: 19px;
    height: 19px;
    overflow: hidden;
}

.filter-btns .state-list .state .icon figure img {
    height: 100%;
}

.filter-btns .state-list .state .name {
    order: 2;
    margin: -1px 13px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.filter-btns .state-list .state .name+* {
    margin-left: 5px;
}

.filter-btns .state-list .state .name:empty {
    margin: 0;
}

.filter-btns .state-list .state .name:empty+* {
    margin: 1px 3px;
}

.state.disponible {
    background-color: #26B01A !important;
    border: 1px solid #26B01A !important;
}

.state.disponible .icon img {
    margin-left: 0px;
}

.state.ocupada {
    background-color: #FF3D3D !important;
    border: 1px solid #FF3D3D !important;
}

.state.ocupada .icon img {
    margin-left: -20px;
}

.state.reservada {
    background-color: #D1268D !important;
    border: 1px solid #D1268D !important;
}

.state.reservada .icon img {
    margin-left: -40px;
}

.state.cerrada {
    background-color: #7C15A1 !important;
    border: 1px solid #7C15A1 !important;
}

.state.cerrada .icon img {
    margin-left: -60px;
}

.state.limpieza {
    background-color: #00A3FF !important;
    border: 1px solid #00A3FF !important;
}

.state.limpieza .icon img {
    margin-left: -80px;
}

.state.mantenimiento {
    background-color: #F69F00 !important;
    border: 1px solid #F69F00 !important;
}

.state.mantenimiento .icon img {
    margin-left: -100px;
}

.state.borrar {
    background-color: #959595 !important;
    border: 1px solid #737373 !important;
    position: absolute;
    top: 0px;
    left: 141px;
    height: 16px !important;
    min-width: 20px !important;
}

.state.borrar .icon img {
    margin-left: -140px;
}




/*>>>>>>>>>>> ROOMS VIEW <<<<<<<<<<<<<<*/

.create-room-type {
    box-sizing: border-box;
    border-radius: 10px;
}

.create-room-type .room-type-wrapper {
    position: relative;
    padding: 20px 0;
}

.create-room-type .room-type-wrapper .room-type-toggle {
    position: absolute;
    right: 0;
    top: 12px;
    width: 95px;
    height: 69px;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}


.create-room-type .room-type-wrapper .room-type-toggle:checked~.room-info .chapa-option-selected .icon {
    transform: rotate(0deg);
    opacity: 1;
}



.create-room-type .room-type-wrapper .room-info {
    display: flex;
    flex-wrap: nowrap;
    background-color: #6B1348;
    color: #fff;
    padding: 10px;
    border-radius: 7px;
    gap: 17px;
    align-items: center;
}

.create-room-type .room-type-wrapper .room-info .name {
    position: relative;
}

.create-room-type .room-type-wrapper .room-info .name label {
    position: absolute;
    color: #000;
    font: 600 8px Barlow;
    text-transform: uppercase;
    left: 7px;
    top: 4px;
}

.create-room-type .room-type-wrapper .room-info .name .input {}

.create-room-type .room-type-wrapper .room-info .name .input input {
    padding: 11px 16px;
    border: none;
    border-radius: 7px;
    width: 220px;
    font-size: 15px;
}

.create-room-type .room-type-wrapper .room-info .room-users {
    display: flex;
    gap: 7px;
}

.create-room-type .room-type-wrapper .room-info .room-users .user-option {}

.create-room-type .room-type-wrapper .room-info .room-users .user-option .label {
    text-transform: uppercase;
    font: 600 10px Barlow;
    margin-bottom: 2px;
    margin-top: -5px;
}

.create-room-type .room-type-wrapper .room-info .room-users .user-option input {
    width: 54px;
    border: none;
    border-radius: 5px;
    padding: 6px;
}

.create-room-type .room-type-wrapper .room-info .chapa {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
}

.create-room-type .room-type-wrapper .room-info .chapa .label {
    position: absolute;
    right: 100%;
    font: 400 14px Barlow;
    white-space: nowrap;
    margin-right: 9px;
}

.create-room-type .room-type-wrapper .room-info .chapa .chapa-option-selected {
    padding: 5px 5px 5px 8px;
    background: white;
    border-radius: 6px;
    margin-right: 24px;
    display: flex;
    align-items: center;
}

.create-room-type .room-type-wrapper .room-info .chapa .chapa-option-selected .icon {
    height: 11px;
    width: 11px;
    margin-right: 8px;

    transform: rotate(-90deg);
    opacity: 0.3;
}

.create-room-type .room-type-wrapper .room-info .chapa .chapa-option-selected>img {
    height: 22px;
    margin-right: -18px;
}

.chapa-listado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.chapa-listado .listado-wrapper {
    display: flex;
    flex-wrap: wrap;
    background: #FAE6F2;
    padding: 15px;
    border-radius: 7px;
    margin-top: 4px;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    height: 0;
    padding: 0 15px;
}

.create-room-type .room-type-wrapper .room-type-toggle:checked~.chapa-listado .listado-wrapper {
    height: auto;
    min-height: 100px;
    padding: 15px;
}

.chapa-listado .listado-wrapper .chapa-option {
    position: relative;
    padding: 6px 12px 6px 6px;
    background: white;
    margin-right: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.chapa-listado .listado-wrapper:hover .chapa-option {
    opacity: 0.7;
    transform: scale(0.9);
}

.chapa-listado .listado-wrapper .chapa-option:hover {
    opacity: 1;
    transform: scale(1.1);
}

.chapa-listado .listado-wrapper .chapa-option>input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

.chapa-listado .listado-wrapper .chapa-option>input:checked {}

.chapa-listado .listado-wrapper .chapa-option>input:checked~.icon-box {
    background-color: #D1268D;
}

.chapa-listado .listado-wrapper .chapa-option>input:checked~.icon-box .icon {
    width: 11px;
    height: 11px;
    opacity: 1;
    filter: invert(1);
}

.chapa-listado .listado-wrapper .chapa-option .icon-box {
    background: #f3f3f3;
    height: 18px;
    width: 18px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    border: 1px solid #dadada;
}

.chapa-listado .listado-wrapper .chapa-option .icon-box .icon {
    width: 10px;
    height: 10px;
    opacity: 0.15;
}

.chapa-listado .listado-wrapper .chapa-option>img {
    height: auto;
    margin-right: -20px;
    max-width: 40px;
}

.create-room-type .room-type-wrapper .create-type-room {
    padding: 8px 19px;
    background: #d1268d;
    border: 2px solid #d1268d;
    color: #fff;
    border-radius: 7px;
    margin-top: 10px;
    font: 500 15px Barlow;
    cursor: pointer;
}

.create-room-type .room-type-wrapper .create-type-room:hover {
    background: white;
    color: #999;
}

.room-type-block {
    position: relative;
}

.room-type-block .room-type-toggle {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 56px;
    margin: 0;
    height: 50px;
    opacity: 0;
    cursor: pointer;

}


.room-type-block .room-type-toggle:checked~.room-type-head .toggle-icon .icon {
    transform: rotate(90deg);
    opacity: 0.3;
}



.room-type-block .chapas-toggle {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    width: 100px;
    margin: 0;
    height: 50px;
    opacity: 0;
    cursor: pointer;
}

.room-type-block .chapas-toggle:checked~.chapa-listado .listado-wrapper {
    height: auto;
    min-height: 100px;
    padding: 15px;
}

.room-type-block .chapas-toggle:checked~.room-type-head.room-type-head.room-type-head .chapa-option-selected .icon {
    transform: rotate(0deg);
    opacity: 1;
}


.room-type-block .room-type-head {}

.room-type-block .room-type-head .room-type-data {
    display: flex;
    align-items: center;
    background: #f0f0f0;
    padding: 6px 10px;
    border-radius: 7px;
    position: relative;
    gap: 14px;
}

.room-type-block .room-type-head .room-type-data .toggle-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -4px;

    transform: rotate(-90deg);
    opacity: 1;
}

.room-type-block .room-type-head .room-type-data .room-type-name {}

.room-type-block .room-type-head .room-type-data .room-type-name>input {
    border: 0px;
    border-radius: 8px;
    padding: 10px 15px;
    width: 185px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.room-type-block .room-type-head .room-type-data .room-type-name>input:focus {}

.room-type-block .room-type-head .room-type-data .room-type-users {
    display: flex;
    gap: 7px;
}

.room-type-block .room-type-head .room-type-data .room-type-users .user-option {}

.room-type-block .room-type-head .room-type-data .room-type-users .user-option .label {
    text-transform: uppercase;
    font: 600 9px Barlow;
    margin-bottom: 1px;
    margin-top: -1px;
}

.room-type-block .room-type-head .room-type-data .room-type-users .user-option input {
    width: 45px;
    width: 50px;
    border: none;
    border-radius: 5px;
    padding: 6px;
}

.room-type-block .room-type-head .room-type-data .room-type-resume {
    display: flex;
    font: 400 12px Barlow;
}

.room-type-block .room-type-head .room-type-data .room-type-resume .resume-rooms {}

.room-type-block .room-type-head .room-type-data .room-type-resume .resume-tarifas {}

.room-type-block .room-type-head .room-type-data .room-type-chapa {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
}

.room-type-block .room-type-head .room-type-data .room-type-chapa .label {
    position: absolute;
    right: 100%;
    font: 400 14px Barlow;
    white-space: nowrap;
    margin-right: 9px;
}

.room-type-block .room-type-head .room-type-data .room-type-chapa .chapa-option-selected {
    padding: 5px 5px 5px 10px;
    background: white;
    border-radius: 6px;
    margin-right: 24px;
    display: flex;
    align-items: center;
}

.room-type-block .room-type-head .room-type-data .room-type-chapa .chapa-option-selected>img {
    height: 25px;
    margin-right: -18px;
}

.room-type-block .room-type-head .room-type-data .room-type-chapa .chapa-option-selected .icon {
    height: 11px;
    width: 11px;
    margin-right: 5px;
    transform: rotate(-90deg);
    opacity: 0.3;
}

.room-type-block .room-type-cont {
    overflow: hidden;
    height: 0;
}

.room-type-block .room-type-toggle:checked~.room-type-cont {
    height: auto;
}

.room-type-block .room-type-cont .hr-title {
    display: flex;
    color: #888;
    font: 400 15px Barlow;
    margin-bottom: 10px;
    margin-top: 20px;
}

.room-type-block .room-type-cont .hr-title>.txt {
    white-space: nowrap;
}

.room-type-block .room-type-cont .hr-title>hr {
    border-bottom: 0px solid #e6e6e6;
    border-style: solid;
    width: 100%;
    height: 0px;
    margin-left: 14px;
    color: #e2e2e2;
}

.room-type-block .room-type-cont .tarifas {}

.room-type-block .room-type-cont .tarifas .hr-title .txt {}

.room-type-block .room-type-cont .tarifas .hr-title hr {}

.room-type-block .room-type-cont .tarifas .tarifas-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item {
    display: flex;
    background: #FAE6F2;
    padding: 6px;
    border-radius: 5px;
    position: relative;
    align-items: center;
    gap: 12px;
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item.tarifa-create {
    background: #eeeeee;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-name {}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-name>input {
    border: none;
    padding: 6px 9px;
    border-radius: 7px;
    width: 140px;
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-users {
    display: flex;
    align-items: center;
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-users .icon {
    width: 30px;
    height: 30px;
    margin-right: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-users .icon>* {}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-users .users-num {}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-users .users-num>input {
    border: none;
    padding: 6px 9px;
    width: 55px;
    margin-right: 10px;
    border-radius: 7px;
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-users .label {
    font: 400 14px Barlow;
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-price {
    display: flex;
    width: 90%;
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-price .icon>* {}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-price .icon {
    width: 30px;
    height: 30px;
    margin-right: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-price input {
    border-radius: 7px;
    border: none;
    padding: 6px 9px;
    width: 90%;

}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-btn {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-btn:hover {}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-btn.delete {}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-btn .icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #D1268D;
    border-radius: 100px;
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-btn.create {
    padding: 5px 10px;
    background: #D1268D;
    color: #fff;
    font: 500 14px Barlow;
    border-radius: 5px;
}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-btn.create:hover {}

.room-type-block .room-type-cont .tarifas .tarifas-list .tarifa-item .tarifa-btn .btn {}





.room-type-block .room-type-cont .rooms {}

.room-type-block .room-type-cont .rooms .room-list {
    padding-bottom: 20px;
}

.room-type-block .room-type-cont .rooms .room-card {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-name {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-name .floor-num {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-name .number {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-name .name {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-action {
    margin: 0;
}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-action .action {
    position: absolute;
    right: 5px;
    bottom: 25px;
}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-action .action>* {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-action .action>* {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-action .action>.btn {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-action .action>.icon {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-pomo {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-pomo figure {}

.room-type-block .room-type-cont .rooms .room-card .room-wrapper .room-pomo figure img {}

.room-type-block .room-type-cont .rooms .room-create-btn {
    position: relative;
    box-sizing: border-box;
    padding: 25px 25px 25px 25px;
    width: 24%;
    min-width: 260px;
    max-width: 340px;
    height: auto;
    background-color: #fae6f2;
    border: 2px solid #faaddc;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 13px;
    cursor: pointer;

    transition: all .2s;
}

.room-type-block .room-type-cont .rooms .room-create-btn:hover {
    transform: scale(0.95);
    background-color: #fae6f2;
    border: 5px solid #D1268D;
    padding: 22px 25px 22px 25px;
}

.room-type-block .room-type-cont .rooms .room-create-btn .new-icon {
    width: 45px;
    height: 45px;
    background-color: #ffffff;
    border-radius: 100px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-type-block .room-type-cont .rooms .room-create-btn .new-room-label {
    font-weight: 700;
}






.layout-footer {
    font-family: Barlow;
}

.layout-footer .footer-wrapper {
    padding: 130px 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.layout-footer .footer-wrapper .hoteler-logo-vr {}

.layout-footer .footer-wrapper .hoteler-logo-vr>svg {
    opacity: 0.4;
    width: 170px;
    height: auto;
}

.layout-footer .footer-wrapper .hoteler-logo-vr .hoteler-vr {
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    margin-top: 10px;
    color: #a4a4a4;
}

.layout-footer .footer-wrapper .hoteler-short-nav {
    display: flex;
    margin-top: 35px;
}

.layout-footer .footer-wrapper .hoteler-short-nav .item {
    padding: 3px 15px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    margin-right: 0px;
    border-right: 1px solid #dbdbdb;
    cursor: pointer;
}

.layout-footer .footer-wrapper .hoteler-short-nav .item:last-child {
    border-right: 0px;
}







/* HOTELER MODAL */
.modal-toggle {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
    height: 54px;
    width: 64px;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.modal-toggle:checked {
    height: 100%;
    width: 100%;
}

.modal-toggle:checked~.hoteler-modal {
    display: flex;
    pointer-events: none;
}

.modal-toggle:checked~.hoteler-modal .modal-cont {
    pointer-events: all;
}

.modal-toggle:checked~* {
    pointer-events: none;
}

.modal-toggle~.hoteler-modal {
    display: none;
}

.modal-toggle-icon {
    display: none;
}

.hoteler-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100;
}

.hoteler-modal .modal-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.hoteler-modal .modal-wrapper .modal-cont {
    width: 90%;
    max-width: 700px;
    height: auto;
    max-height: 85%;
    margin-top: 5%;
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-sizing: border-box;
    overflow-y: auto;
    font-family: barlow;
    position: relative;
    z-index: 2;
}

.hoteler-modal .modal-wrapper .modal-cont input,
.hoteler-modal .modal-wrapper .modal-cont select,
.hoteler-modal .modal-wrapper .modal-cont textarea {
    font-family: Barlow;
}

.hoteler-modal .modal-wrapper .modal-cont::-webkit-scrollbar {
    width: 16px;
}

.hoteler-modal .modal-wrapper .modal-cont::-webkit-scrollbar-track {
    background-color: transparent;
}

.hoteler-modal .modal-wrapper .modal-cont::-webkit-scrollbar-thumb {
    background-color: #e7e7e7;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

.hoteler-modal .modal-wrapper .modal-cont .modal-block {
    position: relative;
}

.hoteler-modal .modal-wrapper .modal-cont .modal-block .block-title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    margin: 15px 0px;
    margin-top: 50px;
    padding: 7px 0;
}

.hoteler-modal .modal-wrapper .modal-cont .modal-block .block-title-2 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    margin: 15px 0px;
    opacity: 0.8;
}

.hoteler-modal .modal-wrapper .modal-cont .modal-block .block-title .title {}

.hoteler-modal .modal-wrapper .modal-cont .modal-block .block-title .block-actions {
    position: absolute;
    right: 0;
    top: 0;
}

.hoteler-modal .modal-wrapper .modal-cont .modal-block .block-title .block-actions .action {
    background: #D1268D;
    color: #fff;
    padding: 7px 20px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
}

.hoteler-modal .modal-wrapper .modal-cont .modal-block .block-title .block-actions .action:hover {
    background: #570034;
    transform: scale(1.08);
}

.hoteler-modal .modal-wrapper .modal-cont .head-modal {}

.hoteler-modal .modal-wrapper .modal-cont .head-modal .title {
    font-size: 17px;
    text-transform: uppercase;
    color: #a4a4a4;
}

.hoteler-modal .modal-wrapper .modal-cont .head-modal hr {
    border-style: none;
    border-bottom: 1px solid #ddd;
    margin: 20px 0;
}

.hoteler-modal .reservar {}

#modal-reservar-toggle {
    margin: 0;
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    height: 58px;
    cursor: pointer;
    z-index: 2;
}

.hoteler-modal .reservar .reservar-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #D1268D;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.hoteler-modal .reservar .reservar-btn:hover {}

.hoteler-modal .reservar .reservar-btn:hover .icon {}

.hoteler-modal .reservar .reservar-btn .txt {
    font-weight: 700;
    font-size: 19px;
    color: #fff;
}

.hoteler-modal .reservar .reservar-btn .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 100px;
    margin: -4px;
}

.hoteler-modal .reservar .reservar-btn .icon>* {
    width: 11px;
    height: 11px;
    filter: invert(30%) sepia(97%) saturate(4850%) hue-rotate(308deg) brightness(86%) contrast(88%);
}

.hoteler-modal .reservar .reservar-fecha {
    display: flex;
    gap: 20px;
    /* overflow: hidden; */
    height: 0;
    padding: 0;
}

.hoteler-modal .reservar .reservar-fecha>* {
    display: flex;
    align-items: center;
    padding: 13px;
    border-radius: 10px;
    border: 2px solid #c4c4c4;
    width: 50%;
}

.hoteler-modal .reservar .reservar-fecha>* .date-block {
    display: flex;
    align-items: center;
}

.hoteler-modal .reservar .reservar-fecha>* .date-block .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.hoteler-modal .reservar .reservar-fecha>* .date-block .icon>* {
    height: 25px;
    width: 25px;
}

.hoteler-modal .reservar .reservar-fecha>* .date-block .date-selection {}

.hoteler-modal .reservar .reservar-fecha>* .date-block .date-selection>.date-label {
    font-size: 10px;
    letter-spacing: -0.4px;
    font-weight: 700;
    margin-bottom: -1px;
    text-transform: uppercase;
    color: #D1268D;
}

/*.hoteler-modal .reservar .reservar-fecha .fecha-ingreso {}

.hoteler-modal .reservar .reservar-fecha .fecha-ingreso .date-block {}

.hoteler-modal .reservar .reservar-fecha .fecha-ingreso .date-block .icon {}

.hoteler-modal .reservar .reservar-fecha .fecha-ingreso .date-block .date-selection {}

.hoteler-modal .reservar .reservar-fecha .fecha-salida {}

.hoteler-modal .reservar .reservar-fecha .fecha-salida .date-block {}

.hoteler-modal .reservar .reservar-fecha .fecha-salida .date-block .icon {}

.hoteler-modal .reservar .reservar-fecha .fecha-salida .date-block .date-selection {}*/



#modal-reservar-toggle:checked~.reservar-btn {
    background-color: #FFECF7;
}

#modal-reservar-toggle:checked~.reservar-fecha {
    min-height: 30px;
    height: auto;
    margin-bottom: 10px;
}

#modal-reservar-toggle:checked~.reservar-btn .txt {
    color: #D1268D;
}

#modal-reservar-toggle:checked~.reservar-btn .icon {
    background: #D1268D;
}

#modal-reservar-toggle:checked~.reservar-btn .icon>* {
    filter: none;
    transform: rotate(-180deg);
}


.hoteler-modal .reservar .noches-ocupacion-block {
    position: relative;
}

.hoteler-modal .reservar .noches-ocupacion-block .noches-ocupacion {
    border: 2px solid #D1268D;
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.hoteler-modal .reservar .noches-ocupacion-block .noches-ocupacion .icon {
    display: flex;
    height: 30px;
    width: 30px;
    align-items: center;
    margin-right: 9px;
    justify-content: center;
}

.hoteler-modal .reservar .noches-ocupacion-block .noches-ocupacion .icon>* {
    height: 24px;
    width: 24px;
}

.hoteler-modal .reservar .noches-ocupacion-block .noches-ocupacion .text {
    margin-right: 10px;
    font-size: 17px;
}

.hoteler-modal .reservar .noches-ocupacion-block .noches-ocupacion .numero-noches {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    background-color: #000;
    border-radius: 100px;
    color: #fff;
    font-weight: 700;
}

.hoteler-modal .reservar .noches-ocupacion-block .controls {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
}

.hoteler-modal .reservar .noches-ocupacion-block .controls .checkout-date {
    margin-right: 20px;
    text-align: right;
}

.hoteler-modal .reservar .noches-ocupacion-block .controls .checkout-date .label {
    font-size: 12px;
    letter-spacing: -0.4px;
    font-weight: 700;
    margin-bottom: -1px;
}

.hoteler-modal .reservar .noches-ocupacion-block .controls .checkout-date .date {}

.hoteler-modal .reservar .noches-ocupacion-block .controls .change {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hoteler-modal .reservar .noches-ocupacion-block .controls>* {}

.hoteler-modal .reservar .noches-ocupacion-block .controls>*:hover {}

.hoteler-modal .reservar .noches-ocupacion-block .controls .change>* {
    background: #D1268D;
    border-radius: 100px;
    padding: 7px;
}

.hoteler-modal .reservar .noches-ocupacion-block .controls .change>*:hover {
    cursor: pointer;
    transform: scale(1.1);
    opacity: 0.8;
}

.hoteler-modal .reservar .noches-ocupacion-block .controls .change>*>* {
    height: 16px;
    width: 16px;
}

.hoteler-modal .reservar .noches-ocupacion-block .controls .change .add {}

.hoteler-modal .reservar .noches-ocupacion-block .controls .change .remove {}



.hoteler-modal .habitacion {}

.hoteler-modal .habitacion .buscador {
    position: relative;
}

.hoteler-modal .habitacion .buscador .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}

.hoteler-modal .habitacion .buscador .icon>* {
    height: 25px;
    width: 25px;
}

.hoteler-modal .habitacion .buscador input {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px 15px 15px 50px;
    width: 100%;
    box-sizing: border-box;
}

.hoteler-modal .habitacion .resultado-busqueda {}

.hoteler-modal .tarifas-facturacion {}

.hoteler-modal .tarifas-facturacion .container {
    display: flex;
    gap: 19px;
}

.hoteler-modal .tarifas-facturacion .container>* {
    width: 50%;
}

.hoteler-modal .tarifas-facturacion .container .block-wrapper {
    width: 100%;
    padding: 20px;
    background-color: #FFECF7;
    border-radius: 15px;
    box-sizing: border-box;
}

.hoteler-modal .tarifas-facturacion .container .tarifas {}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list {
    overflow: hidden;
    max-height: 180px;
    overflow-y: auto;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list::-webkit-scrollbar {
    width: 8px;
    border-radius: 100px;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list::-webkit-scrollbar-track {
    background-color: white;
    border-radius: 100px;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list::-webkit-scrollbar-thumb {
    background-color: #d1268d;
    border-radius: 20px;
    border: 3.5px solid transparent;
    background-clip: content-box;
}



.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 10px;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-option {
    background: white;
    border: 2px solid #ddd;
    border-radius: 7px;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    position: relative;
    cursor: pointer;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-check {
    position: relative;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-check>input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    cursor: pointer;
    margin: 0;
    opacity: 0;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-option .price {
    font-weight: 400;
    font-size: 18px;
    margin-right: 8px;
    color: #000;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-option .name {
    font-size: 14px;
    letter-spacing: -0.2px;
    color: #777;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-option .users {
    display: flex;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    gap: 2px;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-option .users .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 1px;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-option .users .icon>* {
    height: 18px;
    width: 18px;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-option .users .user-num {
    font-size: 16px;
    font-weight: 600;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-check>input:checked+* {
    background: #ffffff;
    border: 2px solid #d1268d;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-check>input:checked+* .price {
    font-weight: 700;

    color: #D1268D;
}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-check>input:checked+* .name {
    font-weight: 700;
    color: #000;
}

/*.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-option.tarifa-selected .users {}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-option.tarifa-selected .users .icon {}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifas-list .list-wrapper .tarifa-option.tarifa-selected .users .user-num {}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifa-personalizada {}

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifa-personalizada .title {}*/

.hoteler-modal .tarifas-facturacion .container .tarifas .tarifa-personalizada input {
    width: 100%;
    background: white;
    border: none;
    border-radius: 8px;
    padding: 10px 10px;
    box-sizing: border-box;
}

.hoteler-modal .tarifas-facturacion .container .facturacion {}

.hoteler-modal .tarifas-facturacion .container .facturacion .facturacion-form {}

.hoteler-modal .tarifas-facturacion .container .facturacion .huesped-btn {
    display: flex;
    align-items: center;
    position: relative;
    background: white;
    margin-top: 23px;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.1);
}

.hoteler-modal .tarifas-facturacion .container .facturacion .huesped-btn:hover {
    transform: scale(1.05);
}

.hoteler-modal .tarifas-facturacion .container .facturacion .huesped-btn input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 4;
    cursor: pointer;
}

.hoteler-modal .tarifas-facturacion .container .facturacion .huesped-btn .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ececec;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 3px;
}

.hoteler-modal .tarifas-facturacion .container .facturacion .huesped-btn .icon-box>* {
    height: 13px;
    width: 13px;
    opacity: 0.2;
}

.hoteler-modal .tarifas-facturacion .container .facturacion .huesped-btn input:checked {}

.hoteler-modal .tarifas-facturacion .container .facturacion .huesped-btn input:checked+.icon-box {
    background-color: #d1268d;
    transform: scale(1.2);
}

.hoteler-modal .tarifas-facturacion .container .facturacion .huesped-btn input:checked+.icon-box>* {
    opacity: 1;
    filter: brightness(0) invert(1);
}

.hoteler-modal .tarifas-facturacion .container .facturacion .huesped-btn input:checked+.icon-box+.text {
    font-weight: 400;
    text-indent: 4px;
    font-style: italic;
}

.hoteler-modal .tarifas-facturacion .container .facturacion .huesped-btn .text {
    font-weight: 700;
    font-size: 16px;
}

.hoteler-modal {}

.hoteler-modal .buscador {}

.hoteler-modal .buscador .buscador-wrapper {
    position: relative;
}

.hoteler-modal .buscador .buscador-wrapper .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}

.hoteler-modal .buscador .buscador-wrapper .icon>* {
    height: 25px;
    width: 25px;
}

.hoteler-modal .buscador .buscador-wrapper input {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px 15px 15px 50px;
    width: 100%;
    box-sizing: border-box;
}

.hoteler-modal .resultado-busqueda {
    margin: 14px 0;
}

.hoteler-modal .resultado-busqueda .resultado-wrapper {
    padding: 20px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.hoteler-modal .resultado-busqueda .resultado-wrapper .resultado {
    display: flex;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 10px;
    margin-bottom: 10px;
    gap: 28px;
}

.hoteler-modal .resultado-busqueda .resultado-wrapper .resultado:last-child {
    border-bottom: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.hoteler-modal .resultado-busqueda .resultado-wrapper .resultado .data {}

.hoteler-modal .resultado-busqueda .resultado-wrapper .resultado .data .label {
    font-size: 11px;
    letter-spacing: -0.4px;
    font-weight: 700;
    margin-bottom: 1px;
}

.hoteler-modal .resultado-busqueda .resultado-wrapper .resultado .data .text {
    font-size: 15px;
}

.hoteler-modal .resultado-busqueda .resultado-wrapper .resultado .data-name {}

.hoteler-modal .resultado-busqueda .resultado-wrapper .resultado .data-age {}

.hoteler-modal .resultado-busqueda .resultado-wrapper .resultado .data-doc {}

.hoteler-modal .resultado-busqueda .resultado-wrapper .resultado .state-action {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -5px;
    font-size: 15px;
    font-weight: 700;
    color: #D1268D;
}

.hoteler-modal .resultado-busqueda .resultado-wrapper .resultado .state-action:not(.added) {}

.hoteler-modal .resultado-busqueda .resultado-wrapper .resultado .state-action.added {}

.hoteler-modal .huespedes-list {}

.hoteler-modal .huespedes-list .list-wrapper {}

.hoteler-modal .huespedes-list .list-wrapper .huesped {
    display: flex;
    position: relative;
    background-color: #f4f4f4;
    padding: 7px;
    border-radius: 100px;
    align-items: center;
    gap: 23px;
    margin-bottom: 6px;
}

.hoteler-modal .huespedes-list .list-wrapper .huesped .data {}

.hoteler-modal .huespedes-list .list-wrapper .huesped .icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 100px;
    margin-right: -4px;
}

.hoteler-modal .huespedes-list .list-wrapper .huesped .icon>* {}

.hoteler-modal .huespedes-list .list-wrapper .huesped .data .label {
    font-size: 12px;
    letter-spacing: -0.4px;
    font-weight: 700;
    margin-bottom: 0px;
}

/*.hoteler-modal .huespedes-list .list-wrapper .huesped .data .text {}

.hoteler-modal .huespedes-list .list-wrapper .huesped .data-name {}

.hoteler-modal .huespedes-list .list-wrapper .huesped .data-age {}

.hoteler-modal .huespedes-list .list-wrapper .huesped .data-doc {}*/

.hoteler-modal .huespedes-list .list-wrapper .huesped .actions {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    right: 10px;
    top: 50%;
    gap: 11px;
    transform: translateY(-50%);
}

.hoteler-modal .huespedes-list .list-wrapper .huesped .actions>*:hover {}

.hoteler-modal .huespedes-list .list-wrapper .huesped .actions .remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.hoteler-modal .huespedes-list .list-wrapper .huesped .actions .remove:hover {}

.hoteler-modal .huespedes-list .list-wrapper .huesped .actions .remove>* {}

.hoteler-modal .huespedes-list .list-wrapper .huesped .actions .edit {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #D1268D;
    width: 20px;
    height: 20px;
    padding: 8px;
    border-radius: 100px;
}

/*.hoteler-modal .huespedes-list .list-wrapper .huesped .actions .edit:hover {}

.hoteler-modal .huespedes-list .list-wrapper .huesped .actions .edit>* {}

.hoteler-modal .nuevo-huesped {}

.hoteler-modal .nuevo-huesped .title {}

.hoteler-modal .nuevo-huesped .form-nuevo-huesped {}*/

.hoteler-modal .nuevo-huesped .form-nuevo-huesped .form-wrapper {
    background: #FFECF7;
    padding: 20px;
    border-radius: 10px;
}

.hoteler-modal .nuevo-huesped .form-nuevo-huesped .form-wrapper .actions {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.hoteler-modal .nuevo-huesped .form-nuevo-huesped .form-wrapper .actions .create-n-add {}

.hoteler-modal .nuevo-huesped .form-nuevo-huesped .form-wrapper .actions .create-n-add:hover {}

.hoteler-modal .nuevo-huesped .form-nuevo-huesped .form-wrapper .actions .create {
    text-align: center;
    font-weight: 700;
    color: #D1268D;
    padding: 14px;
}

.hoteler-modal .nuevo-huesped .form-nuevo-huesped .form-wrapper .actions .create:hover {}

.hoteler-modal .informe-caja {}

.hoteler-modal .informe-caja .nuevo-abono {
    display: flex;
}

.hoteler-modal .informe-caja .nuevo-abono .nuevo-abono-wrapper {
    position: relative;
    display: flex;
    padding: 15px 21px;
    background-color: #FFECF7;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 17px;
    gap: 10px;
}

.hoteler-modal .informe-caja .nuevo-abono .info {
    width: 50%;
}

.hoteler-modal .informe-caja .nuevo-abono .info .label {
    font-size: 12px;
    margin-bottom: 5px;
}

.hoteler-modal .informe-caja .nuevo-abono .info .select {}

.hoteler-modal .informe-caja .nuevo-abono .info .select input {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

.hoteler-modal .informe-caja .nuevo-abono .info .select select {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

.hoteler-modal .informe-caja .nuevo-abono .abono-method {
    width: 30%;
}

.hoteler-modal .informe-caja .nuevo-abono .abono-entity {
    width: 30%;
}

.hoteler-modal .informe-caja .nuevo-abono .abono-quantinty {}

.hoteler-modal .informe-caja .nuevo-abono .abono-btn {}

.hoteler-modal .informe-caja .abono-btn {
    width: 36%;
    text-align: right;
    font-weight: 700;
    color: #D1268D;
    cursor: pointer;
}

.hoteler-modal .informe-caja .abono-btn:hover {
    transform: scale(1.1);
}

.hoteler-modal .informe-caja .informe-block {
    background-color: #FFECF7;
    border-radius: 15px;
    padding: 20px;
}

.hoteler-modal .informe-caja .informe-block .informe-resume {
    display: flex;
    background-color: white;
    border-radius: 10px;
    padding: 20px 30px;
    gap: 25px;
}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item {}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item .title {
    font-size: 13px;
    letter-spacing: -0.4px;
    line-height: 100%;
    display: flex;
    margin-bottom: 10px;
}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item .info {
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.deuda {}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.deuda .title {}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.deuda .info {
    font-size: 34px;
    letter-spacing: -2px;
    font-weight: 700;
    color: red;
    margin-top: -8px;
}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.pagado {}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.pagado .title {}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.pagado .info {
    font-size: 28px;
    letter-spacing: -2px;
    font-weight: 700;
    color: green;
    margin-top: -5px;
}

/*.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.fecha-abono {}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.fecha-abono .title {}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.fecha-abono .info {}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.fecha-consumo {}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.fecha-consumo .title {}

.hoteler-modal .informe-caja .informe-block .informe-resume .resume-item.fecha-consumo .info {}*/
.hoteler-modal .informe-caja .informe-block .abonos-list {
    margin-top: 22px;
}

.hoteler-modal .informe-caja .informe-block .abonos-list .list-wrapper {
    margin-top: 22px;
}

.hoteler-modal .informe-caja .informe-block .abonos-list .list-wrapper .abono {
    display: flex;
    gap: 35px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 7px;
}

.hoteler-modal .informe-caja .informe-block .abonos-list .list-wrapper .abono:last-child {
    padding-bottom: 0px;
    border-bottom: 0px;
    margin-bottom: 0px;
}

.hoteler-modal .informe-caja .informe-block .abonos-list .list-wrapper .abono .data {}

.hoteler-modal .informe-caja .informe-block .abonos-list .list-wrapper .abono .data .label {
    font-size: 11px;
    letter-spacing: -0.4px;
    font-weight: 600;
}

.hoteler-modal .informe-caja .informe-block .abonos-list .list-wrapper .abono .data .text {
    font-size: 14px;
}

/*.hoteler-modal .informe-caja .informe-block .abonos-list .list-wrapper .abono .data-prod {}

.hoteler-modal .informe-caja .informe-block .abonos-list .list-wrapper .abono .data-price {}

.hoteler-modal .informe-caja .informe-block .abonos-list .list-wrapper .abono .data-method {}

.hoteler-modal .informe-caja .informe-block .abonos-list .list-wrapper .abono .data-date {}

.hoteler-modal .consumos {}

.hoteler-modal .consumos .nuevo-consumo {}*/

.hoteler-modal .consumos .nuevo-consumo .form-nuevo-consumo {
    background: #FFECF7;
    padding: 20px;
    border-radius: 10px;
}

.hoteler-modal .consumos .nuevo-consumo .search-icon {}

.hoteler-modal .consumos .nuevo-consumo .search-icon>* {}

.hoteler-modal .consumos .nuevo-consumo .option {}

.hoteler-modal .consumos .nuevo-consumo .option .label {
    font-size: 12px;
    letter-spacing: -0.4px;
    font-weight: 700;
    margin-bottom: 3px;
}

/*.hoteler-modal .consumos .nuevo-consumo .option .info {}

.hoteler-modal .consumos .nuevo-consumo .prod {}

.hoteler-modal .consumos .nuevo-consumo .num {}

.hoteler-modal .consumos .nuevo-consumo .total {}

.hoteler-modal .consumos .nuevo-consumo .user {}

.hoteler-modal .consumos .nuevo-consumo .add-action {}

.hoteler-modal .consumos .consumos-list {}

.hoteler-modal .consumos .consumos-list .list-wrapper {}*/

.hoteler-modal .consumos .consumos-list .list-wrapper .consumo {
    display: flex;
    gap: 25px;
    background-color: #f4f4f4;
    padding: 6px 13px;
    border-radius: 8px;
    margin-bottom: 5px;
}

.hoteler-modal .consumos .consumos-list .list-wrapper .consumo .data {}

.hoteler-modal .consumos .consumos-list .list-wrapper .consumo .data .label {
    font-size: 10px;
    letter-spacing: -0.4px;
    font-weight: 600;
    margin-bottom: -1px;
}

.hoteler-modal .consumos .consumos-list .list-wrapper .consumo .data .text {
    font-size: 14px;
}

/*.hoteler-modal .consumos .consumos-list .list-wrapper .consumo .data-prod {}

.hoteler-modal .consumos .consumos-list .list-wrapper .consumo .data-num {}

.hoteler-modal .consumos .consumos-list .list-wrapper .consumo .data-total {}

.hoteler-modal .consumos .consumos-list .list-wrapper .consumo .data-user {}

.hoteler-modal .consumos .consumos-list .list-wrapper .consumo .data-date {}*/

.hoteler-modal .modal-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 40px;
}

.hoteler-modal .modal-actions .main-action {
    padding: 12px 55px;
    background-color: #D1268D;
    color: #fff;
    border: 2px solid #D1268D;
    border-radius: 1000px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.hoteler-modal .modal-actions .main-action:hover {
    background-color: white;
    color: #D1268D;
}

.hoteler-modal .modal-actions .second-action {
    font-weight: 700;
    font-size: 20px;
    color: #D1268D;
}

.hoteler-modal .modal-actions .second-action:hover {}



.hoteler-modal .modal-form {
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.hoteler-modal .modal-form .actions {
    margin-top: 15px;
}

.hoteler-modal .modal-form .create-n-add {
    background: #D1268D;
    color: #fff;
    font-weight: 600;
    text-align: center;
    padding: 13px;
    border: 2px solid #D1268D;
    border-radius: 10px;
    cursor: pointer;
}

.hoteler-modal .modal-form .create-n-add:hover {
    background: #fff;
    color: #D1268D;
    border: 2px solid #D1268D;
}

.hoteler-modal .modal-form .form-field {}

.hoteler-modal .modal-form .form-field .label {
    font-size: 12px;
    letter-spacing: -0.4px;
    font-weight: 500;
    margin-bottom: 3px;
}

.hoteler-modal .modal-form .form-field input,
.hoteler-modal .modal-form .form-field textarea,
.hoteler-modal .modal-form .form-field select {
    width: 100%;
    background: white;
    border: none;
    border-radius: 8px;
    padding: 7px 10px;
    box-sizing: border-box;
}

.hoteler-modal .modal-form .form-group {
    display: flex; 
    gap: 10px;
}

.hoteler-modal .modal-form .form-group.col-2>* {
    width: 50%;
}
.hoteler-modal .modal-form .form-group.hoteler-col-2>* {
    width: 50% ;
}

.hoteler-modal .modal-form .form-group.col-3>* {
    width: 33%;
}

.hoteler-modal .modal-form .form-group.hoteler-col-3>* {
    width: 33%;
}



.hoteler-modal-show {
    display: flex;
    /*pointer-events: none;*/
}

.hoteler-modal-hide {
    display: none;
    /*pointer-events: none;*/
}

#contextMenu {
    z-index: 20;
    display: flex;
    position: fixed;
    background-color: rgb(255 255 255);
    box-shadow: rgb(0 0 0 / 21%) 1px 4px 12px;
    border-radius: 3px;
    overflow: hidden;
    visibility: hidden;
    left: 845px;
    top: 354px;
    font-family: Barlow;
    border-radius: 10px;
}

#contextMenuList {}

#contextMenuList .context-nav-title {
    padding: 12px 20px;
    background: #700947;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

#contextMenuList .context-nav-option {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #fee7f5;
    cursor: pointer;
}

#contextMenuList .context-nav-option:last-child {
    border-bottom: 0px;
}

#contextMenuList .context-nav-option:hover {
    background-color: #fae6f2;
    font-weight: 700;
    letter-spacing: -0.15px;
}

.modal-close {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

.modal-cont-close {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e3e3e3;
    font-weight: 700;
    cursor: pointer;
}

#modal-form-group-btn-find-gest {
    width: 30%;
    padding: 0.4rem 0;
    background: #D1268D;
}
#modal-form-find-gest{
    display: flex;
    flex-wrap: wrap;
}

#modal-form-find-gest input {
    width: 70%;
}

.invoice .hotel-section{    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.invoce-details{
    display: flex;
    justify-content: center;
    align-items: space-between;
    gap: 40px;
    flex-wrap: wrap
}

.invoice .client-section{
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.invoice .client-section .client-info{
    margin: auto 10px;
}

.modal-actions .alt-action {
    padding: 12px 55px;
    background-color: #0B8700;
    color: #fff;
    border: 2px solid#0B8700;
    border-radius: 1000px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.invoice-print {
    width: 100%;
    padding: 5px;

}

.invoice-print .aling-r {
    text-align: right;
    margin-right: 5px;
}
.invoice-print tr {
    padding: 2px;
}
.invoice-cufe, .invoce-tax-details{
    text-align: center;
    margin-top: 10px;
}

.btn-create{
    background: #D1268D;
    border: 2px solid #D1268D;
    color: #fff;
    padding: 7px 20px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
}


.btn-add{
    background: #26B01A;
    border: 2px solid #26B01A;
    color: #fff;
    padding: 7px 20px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
}

.btn-close{
    background: #00A3FF;
    border: 2px solid #00A3FF;
    color: #fff;
    padding: 7px 20px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
}

.modal-actions .btn-close{
    padding: 12px 55px;
    border-radius: 1000px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.create-n-add:disabled,
.btn-add:disabled{
    opacity: 0.6;
}

.btn-table-option{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px
}

.gridjs-td span{
    display: table;
    margin: 0 auto;
}

.gridjs-td[data-field="edit"],
.gridjs-td[data-field="delete"]
{
    cursor:pointer;
}

.modal-bloc-form-background{
    background: #FFECF7;
    padding: 20px;
    border-radius: 10px;
}

.block-actions button:disabled,
button.main-action:disabled{
    opacity: 0.6;
}

.hoteler-ckbox-btn {
    display: flex;
    align-items: center;
    position: relative;
    background: white;
    margin-top: 23px;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.1);
}

.hoteler-ckbox-btn:hover {
    transform: scale(1.05);
}

.hoteler-ckbox-btn input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 4;
    cursor: pointer;
}

.hoteler-ckbox-btn .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ececec;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 3px;
}

.hoteler-ckbox-btn .icon-box>* {
    height: 13px;
    width: 13px;
    opacity: 0.2;
}

.hoteler-ckbox-btn input:checked+.icon-box {
    background-color: #d1268d;
    transform: scale(1.2);
}

.hoteler-ckbox-btn input:checked+.icon-box>* {
    opacity: 1;
    filter: brightness(0) invert(1);
}

.hoteler-ckbox-btn input:checked+.icon-box+.text {
    font-weight: 400;
    text-indent: 4px;
    font-style: italic;
}

.hoteler-ckbox-btn .text {
    font-weight: 700;
    font-size: 16px;
}

.field-add-button{
    display: flex;
    gap: 5px;
}

.field-add-button .hoteler-icons{
    background: #D1268D;
    border-radius: 100px;
    padding: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.field-add-button .hoteler-icons figure{
    position: relative;
    width: 100%;
    height: 100%;
}

.hoteler-modal .modal-form .form-field input.form-create-toggle{
    z-index: 0;
}

#date_checkIn span,
#date_checkOut span{
    width: 100%;
}

.btn-cancel{
    padding: 12px 55px;
    background-color: #FF3D3D;
    color: #fff;
    border: 2px solid #FF3D3D;
    border-radius: 1000px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}


.p-inline-message.p-component.p-inline-message-error {
    width: 100%;    
}

.p-element .hoteler-cash-register-select {
    width: 100%;
}

.form-field textarea{
    width: 100%;
}

.form-group.hoteler-col-3 .form-field{
    width: 100%;
}

.form-group.hoteler-col-3 .form-field input{
    width: 100%;
}

.reservar-fecha .fecha-ingreso,
.reservar-fecha .fecha-salida{
    width: 100%;
}

.reservar-fecha .fecha-ingreso .date-block,
.reservar-fecha .fecha-salida .date-block{
    width: 100%;
}

.reservar-fecha .fecha-ingreso .date-block .date-selection,
.reservar-fecha .fecha-salida .date-block .date-selection{
    width: 100%;
}

.reservar-fecha .fecha-ingreso .date-block .date-selection span,
.reservar-fecha .fecha-salida .date-block .date-selection span{
    width: 100%;
}

.form-field .input-group{
    display: flex;
    align-items: center;
    gap: 5px;
}

.form-field .input-group button{
    height: 30px;
    width: 30px;
    background: #D1268D;
}

.form-field .p-autocomplete {
    height: 32px;
}

.form-field .p-autocomplete .p-button {
    background: #D1268D;
}

.btns-create-type-room{
    display: flex;
    gap: 10px;
    max-width: fit-content;
    margin-inline: auto;
}

.room-type-wrapper .btns-create-type-room .hoteler-btn-cancel,
.modal-form .hoteler-btn-cancel
{
    background-color: #D71616;
    border-color: #D71616;
    color: #fff;
    cursor: pointer;
    padding: 7px 20px;
    border-radius: 7px;
    margin-top: 10px;
    font: 500 15px Barlow;
}

.modal-form .hoteler-col-2 {
    width: 100%;
    display: flex;
    gap: 10px;
}

.modal-form .hoteler-col-2 .form-field,
.modal-form .hoteler-col-2 .form-field input,
.modal-form .hoteler-col-2 .form-field textarea,
.modal-form .hoteler-col-2 .form-field select{
    width: 100%;
}

.modal-actions{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 40px;
}

.enable-click{
    cursor: pointer;
    pointer-events: all;
}


.error-message {
    margin-top: 5px;
}
.text-danger {
    color: #dc3545;
    font-size: 12px;
}

.room-type-cont .modal-bloc-form-background{
}

.room-type-cont .modal-bloc-form-background .form-field,
.room-type-cont .modal-bloc-form-background .form-field input{
    margin: 10px 0px;
}

.room-card .room-wrapper .room-action .action>.btn-change-status{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F69F00;
    border-color: #F69F00;
    color: #fff;
    padding: 7px 20px;
    border-radius: 7px;
    margin-top: 10px;
    font: 500 15px Barlow;
}


.error-message span{
    color: #e24c4c;
}

.tarifa-option.hoteler-tarifa-selected{
    border-color: #D1268D !important;
}

/* Cash Report Styles */
.cash-report-container {
  padding: 1rem;
}

.cash-report-container .report-header {
  margin-bottom: 2rem;
}

.cash-report-container .report-header h2 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.cash-report-container .report-header .report-description {
  color: #6c757d;
  margin: 0;
  font-size: 0.95rem;
}

.cash-report-container .filter-card {
  margin-bottom: 2rem;
}

.cash-report-container .filter-card .filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cash-report-container .filter-card .filter-grid .filter-item {
  display: flex;
  flex-direction: column;
}

.cash-report-container .filter-card .filter-grid .filter-item label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #495057;
  font-size: 0.9rem;
}

.cash-report-container .filter-card .filter-grid .filter-item .p-inputtext,
.cash-report-container .filter-card .filter-grid .filter-item ::ng-deep .p-calendar,
.cash-report-container .filter-card .filter-grid .filter-item ::ng-deep .p-dropdown {
  width: 100%;
}

.cash-report-container .filter-card .filter-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cash-report-container .filter-card .filter-actions ::ng-deep .p-button {
  min-width: 100px;
}

.cash-report-container .summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.cash-report-container .summary-cards .summary-card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 1rem;
  border-left: 4px solid;
  transition: transform 0.2s ease;
}

.cash-report-container .summary-cards .summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.cash-report-container .summary-cards .summary-card .card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
}

.cash-report-container .summary-cards .summary-card .card-content {
  flex: 1;
}

.cash-report-container .summary-cards .summary-card .card-content h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.cash-report-container .summary-cards .summary-card .card-content p {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}

.cash-report-container .summary-cards .summary-card.opening {
  border-left-color: #28a745;
}

.cash-report-container .summary-cards .summary-card.opening .card-icon {
  background: #28a745;
}

.cash-report-container .summary-cards .summary-card.closing {
  border-left-color: #17a2b8;
}

.cash-report-container .summary-cards .summary-card.closing .card-icon {
  background: #17a2b8;
}

.cash-report-container .summary-cards .summary-card.open {
  border-left-color: #ffc107;
}

.cash-report-container .summary-cards .summary-card.open .card-icon {
  background: #ffc107;
  color: #212529;
}

.cash-report-container .summary-cards .summary-card.closed {
  border-left-color: #6c757d;
}

.cash-report-container .summary-cards .summary-card.closed .card-icon {
  background: #6c757d;
}

.cash-report-container .summary-cards .summary-card.total {
  border-left-color: #6f42c1;
}

.cash-report-container .summary-cards .summary-card.total .card-icon {
  background: #6f42c1;
}

.cash-report-container .data-card ::ng-deep .p-datatable .cash-register-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cash-report-container .data-card ::ng-deep .p-datatable .cash-register-info strong {
  font-weight: 600;
  color: #2c3e50;
}

.cash-report-container .data-card ::ng-deep .p-datatable .cash-register-info .location {
  color: #6c757d;
  font-size: 0.85rem;
}

.cash-report-container .data-card ::ng-deep .p-datatable .observations {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}

.cash-report-container .data-card ::ng-deep .p-datatable .positive-diff {
  color: #28a745;
  font-weight: 500;
}

.cash-report-container .data-card ::ng-deep .p-datatable .negative-diff {
  color: #dc3545;
  font-weight: 500;
}

.cash-report-container .data-card ::ng-deep .p-datatable .status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
}

.cash-report-container .data-card ::ng-deep .p-datatable .status-badge.status-success {
  background: #d4edda;
  color: #155724;
}

.cash-report-container .data-card ::ng-deep .p-datatable .status-badge.status-warning {
  background: #fff3cd;
  color: #856404;
}

.cash-report-container .data-card ::ng-deep .p-datatable .status-badge.status-info {
  background: #d1ecf1;
  color: #0c5460;
}

.cash-report-container .data-card ::ng-deep .p-datatable .empty-state {
  padding: 2rem;
  text-align: center;
  color: #6c757d;
}

.cash-report-container .data-card ::ng-deep .p-datatable .empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #dee2e6;
}

.cash-report-container .data-card ::ng-deep .p-datatable .empty-state p {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}

.cash-report-container .data-card ::ng-deep .p-datatable .empty-state small {
  color: #adb5bd;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dee2e6;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .summary-header h4 {
  margin: 0;
  color: #2c3e50;
  font-weight: 600;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .summary-row .summary-item {
  display: flex;
  flex-direction: column;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .summary-row .summary-item label {
  font-weight: 600;
  color: #495057;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .summary-row .summary-item span {
  font-size: 0.95rem;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .summary-row .summary-item span.positive-diff {
  color: #28a745;
  font-weight: 500;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .summary-row .summary-item span.negative-diff {
  color: #dc3545;
  font-weight: 500;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .balance-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .balance-details .balance-section h5 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  font-weight: 600;
  font-size: 1rem;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .balance-details .balance-section .balance-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .balance-details .balance-section .balance-row .balance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: white;
  border-radius: 4px;
  border-left: 3px solid #e9ecef;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .balance-details .balance-section .balance-row .balance-item label {
  font-weight: 500;
  color: #495057;
  font-size: 0.9rem;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .balance-details .balance-section .balance-row .balance-item span {
  font-weight: 600;
  color: #2c3e50;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .balance-details .balance-section .balance-row .balance-item.total {
  background: #e3f2fd;
  border-left-color: #2196f3;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .balance-details .balance-section .balance-row .balance-item.total label,
.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .balance-details .balance-section .balance-row .balance-item.total span {
  color: #1976d2;
  font-weight: 600;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .observations-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .observations-section label {
  font-weight: 600;
  color: #495057;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.5rem;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .observations-section p {
  margin: 0;
  padding: 0.75rem;
  background: white;
  border-radius: 4px;
  border-left: 3px solid #17a2b8;
  color: #495057;
  font-style: italic;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .movements-section h4 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-weight: 600;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .movements-section .loading-container {
  text-align: center;
  padding: 2rem;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .movements-section .loading-container p {
  margin-top: 1rem;
  color: #6c757d;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .movements-section ::ng-deep .p-datatable .movement-type {
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .movements-section ::ng-deep .p-datatable .movement-type.ingreso {
  background: #d4edda;
  color: #155724;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .movements-section ::ng-deep .p-datatable .movement-type.egreso {
  background: #f8d7da;
  color: #721c24;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .movements-section ::ng-deep .p-datatable .positive-amount {
  color: #28a745;
  font-weight: 500;
}

.cash-report-container ::ng-deep .p-dialog .modal-content .movements-section ::ng-deep .p-datatable .negative-amount {
  color: #dc3545;
  font-weight: 500;
}

@media (max-width: 768px) {
  .cash-report-container {
    padding: 0.5rem;
  }

  .cash-report-container .filter-card .filter-grid {
    grid-template-columns: 1fr;
  }

  .cash-report-container .filter-card .filter-actions {
    justify-content: center;
  }

  .cash-report-container .filter-card .filter-actions ::ng-deep .p-button {
    flex: 1;
    min-width: auto;
  }

  .cash-report-container .summary-cards {
    grid-template-columns: 1fr;
  }

  .cash-report-container .summary-cards .summary-card .card-content h3 {
    font-size: 1.25rem;
  }

  .cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .balance-details {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .cash-report-container ::ng-deep .p-dialog .modal-content .assignment-summary .summary-row {
    grid-template-columns: 1fr;
  }

  .cash-report-container ::ng-deep .p-dialog {
    width: 95vw !important;
  }

  .cash-report-container ::ng-deep .p-dialog .modal-content .report-summary .summary-row {
    grid-template-columns: 1fr;
  }
}

.room-wrapper .no-show.room-action{
    flex-direction: row;
}

.form-field .p-autocomplete-input,
.form-field .p-autocomplete{
    width: 100%;
}

@media (max-width: 480px) {
  .cash-report-container .summary-cards .summary-card {
    flex-direction: column;
    text-align: center;
  }

  .cash-report-container .summary-cards .summary-card .card-icon {
    margin-bottom: 0.5rem;
  }
}

.room-action .action.edit .btn.delete {
    background-color: #D71616;
}
.room-action .action.edit .btn.delete:hover {
    background-color: #D71616;
    opacity: 0.8;
}

.factura-actions .main-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.nav-bar .nav-list ul li a {
    text-decoration: none;
    width: 100%;
    display: flex;
    gap: 10px;
    color: var(--text-color);
}

.hoteler-date-field {
    width: 100%;
}