/*@import url('font/quicksand.css');
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');*/
/*html, body,*/
/*#app {
    display: flex !important;
    flex: 1 0 auto;
}*/
/*.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}*/
.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/*code {
    color: #c02d76;
}
*/
/*** Inicio Color ***/

.inset-0 {
    inset: 0px;
}

.inset-x-0 {
    left: 0px;
    right: 0px;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.opacity-0 {
    opacity: 0;
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.text-danger {
    color: var(--color-red-600);
}

.text-purple {
    color: #360ccc !important;
}

.text-coffee {
    color: #4c2f27 !important;
}


.ml-12 {
    margin-left: calc(var(--spacing) * 12);
}

.ml-14 {
    margin-left: calc(var(--spacing) * 14);
}

.ml-16 {
    margin-left: calc(var(--spacing) * 16);
}

.ml-18 {
    margin-left: calc(var(--spacing) * 18);
}

.ml-20 {
    margin-left: calc(var(--spacing) * 20);
}

.mt-12 {
    margin-top: calc(var(--spacing) * 12);
}

.mt-14 {
    margin-top: calc(var(--spacing) * 14);
}

.mt-16 {
    margin-top: calc(var(--spacing) * 16);
}

.mt-18 {
    margin-top: calc(var(--spacing) * 18);
}

.mt-20 {
    margin-top: calc(var(--spacing) * 20);
}

.-top-4 {
    top: calc(var(--spacing) * -4);
}

.-top-6 {
    top: calc(var(--spacing) * -6);
}

.-top-8 {
    top: calc(var(--spacing) * -8);
}

.-top-10 {
    top: calc(var(--spacing) * -10);
}

.-top-12 {
    top: calc(var(--spacing) * -12);
}

.-top-14 {
    top: calc(var(--spacing) * -14);
}

.-top-16 {
    top: calc(var(--spacing) * -16);
}

.-bottom-4 {
    bottom: calc(var(--spacing) * -4);
}

.-bottom-6 {
    bottom: calc(var(--spacing) * -6);
}

.-bottom-8 {
    bottom: calc(var(--spacing) * -8);
}

.-bottom-10 {
    bottom: calc(var(--spacing) * -10);
}

.-bottom-12 {
    bottom: calc(var(--spacing) * -12);
}

.-bottom-14 {
    bottom: calc(var(--spacing) * -14);
}

.-bottom-16 {
    bottom: calc(var(--spacing) * -16);
}

.-bottom-18 {
    bottom: calc(var(--spacing) * -18);
}

.-bottom-20 {
    bottom: calc(var(--spacing) * -20);
}


.left-1\/2 {
    left: 50%;
}


.border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
}

.border-6 {
    border-style: var(--tw-border-style);
    border-width: 6px;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.translate-y-4 {
    --tw-translate-y: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/*** Fin Color ***/

/*** Inicio Button ***/

.add-button-cicle {
    color: #FFA500;
    width: 40px;
    height: 40px;
    border: 2px solid #FFA500;
    background: transparent;
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
}

.button-reserved {
    color: #FFA500;
    width: 40px;
    height: 40px;
    border: 2px solid #FFA500;
    background: transparent;
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
}

/*** Fin Button ***/

/****** Inicio Load Bar *****/
div.loadbartext {
    width: 1.5rem;
    height: 1.2rem;
    display: flex;
    justify-content: space-around;
}

    div.loadbartext span {
        width: 0.2rem;
        height: 100%;
        /*background-color: #fff;*/
        animation: loading 2s infinite ease-in-out;
    }

        div.loadbartext span:nth-child(1) {
            animation-delay: 0.5s;
        }

        div.loadbartext span:nth-child(2) {
            animation-delay: 0.9s;
        }

        div.loadbartext span:nth-child(3) {
            animation-delay: 1.7s;
        }

@keyframes loading {
    0%, 100% {
        transform: scaleY(100%);
    }

    50% {
        transform: scaleY(60%);
        background-color: #30c57a;
    }
}
/****** Fin Load Bar *****/

/****** Inicio Formulario *****/

/*Form {
    margin: 0 auto;*/
  /*  padding: 0px 10px 7px 10px;*/
/*}*/

/*.card .card-header {
    min-height: 2.5rem !important;
}*/


@keyframes handTop {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0);
    }

    100% {
        opacity: 1;
        transform: translateY(-50px) translateX(-20px);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(6px); opacity: 0;
    }

    100% {
        transform: translateY(0); opacity: 1;
    }
}

.animate-handTop {
    animation: handTop 2s ease-out infinite;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-slideIn {
    animation: slideIn .6s ease-out both;
}

.banner {
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.85), 0 4px 8px rgba(0, 0, 0, 0.65);
}

.title-stroke {
    text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 3px 8px rgba(0,0,0,.75);
}

.max-w-\[1800px\] {
    max-width: 1800px;
}

.bg-neutral-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}

.scroll-smooth {
    scroll-behavior: smooth;
}

/* Accesibilidad: quitar enfoque por ratón, mantener por teclado */
.focus-ring:focus-visible {
    outline: 3px solid #fb923c;
    outline-offset: 2px;
}

.border-bs-primary {
    border: 2px solid #e3ebf6;
    border-top: 5px solid #5ea4f3;
}

.border-2-b-blue-500 {
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-bottom-color: var(--color-blue-500);
}

.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
}


.hero-bg {
    background-image: url('/assets/media/images/2600x1200/bg-10.png');
}

.formfluid {
    width: 100%;
    max-width: 95%;
    /*border-top: none !important;
    padding-top: 1.2rem !important;*/
}

.form2xl {
    width: 100%;
    max-width: 1535.99px;
    /*border-top: none !important;
    padding-top: 1.2rem !important;
    margin-top: 8px;*/
}

.formxl {
    width: 100%;
    max-width: 1279.99px;
    /*border-top: none !important;
    padding-top: 1.2rem !important;
    margin-top: 8px;*/
}

.formlg {
    width: 100%;
    max-width: 1023.99px;
    /*border-top: none !important;
    padding-top: 1.2rem !important;
    margin-top: 8px;*/
}

.formmd {
    width: 100%;
    max-width: 767.99px;
    /*border-top: none !important;
    padding-top: 1.2rem !important;
    margin-top: 8px;*/
}

.formsm {
    width: 100%;
    max-width: 639.99px;
    /*border-top: none !important;
    padding-top: 1.2rem !important;
    margin-top: 8px;*/
}

.formxs {
    width: 100%;
    max-width: 359.99px;
    /*border-top: none !important;
    padding-top: 1.2rem !important;
    margin-top: 8px;*/
}

.formbg {
    background-position: center center;
    background-size: cover;
    background-repeat: repeat;
    background-color: rgba(0,0,0,0.04);
}

.grid {
    form.kt-card.formfluid {
        margin: auto;
    }
    form.kt-card.form2xl {
        margin: auto;
    }
    form.kt-card.formxl {
        margin: auto;
    }
    form.kt-card.formlg {
        margin: auto;
    }
    form.kt-card.formmd {
        margin: auto;
    }
    form.kt-card.formsm {
        margin: auto;
    }
    form.kt-card.formxs {
        margin: auto;
    }
}

form.kt-card.formfluid {
    .kt-card-header
    {
        min-height: calc(var(--spacing) * 10);
        background-color: var(--muted);
        border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
    }
}
form.kt-card.form2xl {
    .kt-card-header
    {
        min-height: calc(var(--spacing) * 10);
        background-color: var(--muted);
        border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
    }
}
form.kt-card.formxl {
    .kt-card-header
    {
        min-height: calc(var(--spacing) * 10);
        background-color: var(--muted);
        border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
    }
}
form.kt-card.formlg {
    .kt-card-header
    {
        min-height: calc(var(--spacing) * 10);
        background-color: var(--muted);
        border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
    }
}
form.kt-card.formmd {
    .kt-card-header
    {
        min-height: calc(var(--spacing) * 10);
        background-color: var(--muted);
        border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
    }
}
form.kt-card.formsm {
    .kt-card-header
    {
        min-height: calc(var(--spacing) * 10);
        background-color: var(--muted);
        border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
    }
}
form.kt-card.formxs {
    .kt-card-header
    {
        min-height: calc(var(--spacing) * 10);
        background-color: var(--muted);
        border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
    }
}

.formtitle {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 0.2rem;
    font-weight: 600;
    padding-top: 0.1rem;
    padding-bottom: 0.7rem;
}


.modal-body-sides {
    border-left: 1px solid #9ba7ca;
    border-right: 1px solid #9ba7ca;
    padding: 4px 8px;
}

.btn-silver {
    color: #495057 !important;
    background-color: #e9ecef !important;
    border: 1px solid #ced4da !important;
}

.kt-btn-success {
    background-color: var(--color-green-500);
    color: var(--color-white);
}

.modal-footer-sides {
    border-left: 1px solid #9ba7ca;
    border-right: 1px solid #9ba7ca;
    border-bottom: 1px solid #9ba7ca;
    padding-top: 8px;
    padding-bottom: 8px;
}

/****** Fin Formulario *****/



/***Quick Grid Inicio***/

/*.quickgrid {
    margin-top: 15px;
}*/

/*th.actions {
    width: 30px;
}*/

/* Subtle stripe effect */
/*tr:nth-child(even) {
    background: rgba(255,255,255,0.4);
}*/

/* Don't collapse rows even if they are empty */
/*tbody tr {
    height: 1.6rem;
}*/

.page-size-chooser {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

    .page-size-chooser select {
        margin: 0 1rem;
        padding: 0.25rem 0.5rem;
    }


/*** Ancho columnas ***/
/*
.col-options-button {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>')
}*/
/*.col-options-button, th[b-vznuo5fmpv] .col-options-button {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>') !important;
    background-color: white !important;
    margin-right: 5px;
}*/


/*.col-options {
    color: gray;
}

.col30 {
    width: 30px;
}

.col50 {
    width: 50px;
}

{
    width: 50px;
}

.col70 {
    width: 70px;
}*/

/*** Fin Ancho columnas ***/

/*** Inicio Ancho ***/

.min-w-\[15\%\] {
    min-width: 15%;
}

.min-w-\[25\%\] {
    min-width: 25%;
}

.min-w-\[30\%\] {
    min-width: 30%;
}

.min-w-\[35\%\] {
    min-width: 35%;
}

.min-w-\[40\%\] {
    min-width: 40%;
}

.min-w-\[45\%\] {
    min-width: 45%;
}

.min-w-\[50\%\] {
    min-width: 50%;
}

.min-w-\[55\%\] {
    min-width: 55%;
}

.min-w-\[60\%\] {
    min-width: 60%;
}

.min-w-\[65\%\] {
    min-width: 65%;
}

.min-w-\[70\%\] {
    min-width: 70%;
}

.min-w-\[75\%\] {
    min-width: 75%;
}

.min-w-\[80\%\] {
    min-width: 80%;
}

.min-w-\[85\%\] {
    min-width: 85%;
}

.min-w-\[90\%\] {
    min-width: 90%;
}

.min-w-\[95\%\] {
    min-width: 95%;
}

.md\:min-w-\[65\%\] {
    @media (width >= 48rem) {
        min-width: 65%;
    }
}

/*** Fin Ancho ***/

/*** Inicio Margin ***/

.me-0\.5 {
    margin-inline-end: calc(var(--spacing) * 0.5);
}

/*** Fin Margin ***/




/*** Inicio btn ***/


.kt-btn-xs {
    height: calc(var(--spacing) * 5.90);
    gap: calc(var(--spacing) * 1.05);
    border-radius: calc(var(--radius) - 2px);
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    svg {
        width: calc(var(--spacing) * 3.5);
        height: calc(var(--spacing) * 3.5);
    }
    i {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &.kt-btn-icon {
        width: calc(var(--spacing) * 5.90);
        height: calc(var(--spacing) * 5.90);
        padding: calc(var(--spacing) * 0);
    }
}

/*** Fin btn ***/

.search-box {
    border: solid 1px #0a58ca;
    border-radius: 5px;
    padding: 5px;
    width: 20rem;
}

.icon-delete {
    border: solid 1px #0a58ca;
    border-radius: 5px;
    padding: 2px;
    background-image: url('data:image/svg+xml;utf8,<svg id="katman_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css"> .st0{fill: #3997D3;}.st1 {fill: #2981BA;}.st2 {fill: #FFFFFF;}</style > <g > <g > <circle class="st0" cx="256" cy="256" r="250"/ > </g > <path class="st1" d="M506,258.3c-0.2-0.3-0.4-0.5-0.7-0.8c-39.9-39.8-79.7-79.6-119.5-119.5c-2.3-2.3-4.8-3.3-8.1-3.3   c-18.9,0.1-37.8,0-56.6,0.1c-1.5,0-2.5-0.4-3.6-1.5c-7.2-7.3-14.5-14.5-21.7-21.8c-3.4-3.5-7.4-5.1-12.2-5.1c-9,0.1-18.1,0-27.1,0   c-9,0-17.9,0-26.9,0c-3.7,0-7.1,1-10,3.4c-3.2,2.8-4.9,6.3-4.9,10.5c0,4.6,0,9.3,0,14.3c-1.3,0-2.2,0-3.1,0c-25.1,0-50.2,0-75.4,0   c-0.8,0-1.6,0-2.4,0c-3.4,0.3-6,2.5-6.7,5.6c-0.6,2.7,0.3,5,2.2,7c5.2,5.2,10.3,10.5,15.7,15.6c2,1.9,2.9,3.9,2.9,6.7   c0.6,17.1,1.3,34.2,1.9,51.3c0.4,11,0.8,22.1,1.2,33.1c0.6,15.3,1.2,30.5,1.8,45.8c0.4,9.7,0.7,19.5,1.1,29.3   c0.6,16,1.2,32,1.9,47.9c0.1,2.8,0.2,5.6,0.7,8.4c1,6.1,4.3,10.9,8.6,15.2c21.4,21.3,42.8,42.7,64.2,64.1   c13.4,13.4,26.8,26.8,40.2,40.2c0.3,0.3,0.6,0.6,0.9,0.8C401,498.1,504.8,390.5,506,258.3z"/ > <g > <path class="st2" d="M378.7,134.3h-80.6V120c0-7.7-6.3-14-14-14h-56.1c-7.7,0-14,6.3-14,14v14.2h-80.6c-3.9,0-7.1,3.2-7.1,7.1    c0,3.9,3.2,7.1,7.1,7.1h13.1l8.9,232.3c0.5,14.2,12.1,25.4,26.3,25.4h148.7c14.2,0,25.8-11.1,26.3-25.4l8.9-232.3h13.1    c3.9,0,7.1-3.2,7.1-7.1C385.8,137.4,382.6,134.3,378.7,134.3z M228,120.1H284v14.1H228V120.1z M342.6,380.1    c-0.3,6.6-5.6,11.8-12.2,11.8H181.6c-6.6,0-12-5.2-12.2-11.8l-8.9-231.7h191L342.6,380.1z"/ > <path class="st2" d="M206,205.5c0,0-0.1,0-0.1,0c-3.9,0.1-7,3.3-6.9,7.2l2.2,115.2c0.1,3.9,3.2,6.9,7.1,6.9c0,0,0.1,0,0.1,0    c3.9-0.1,7-3.3,6.9-7.2L213,212.4C212.9,208.5,209.8,205.5,206,205.5z"/ > <path class="st2" d="M256,205.5c-3.9,0-7.1,3.2-7.1,7.1v115.2c0,3.9,3.2,7.1,7.1,7.1c3.9,0,7.1-3.2,7.1-7.1V212.5    C263.1,208.6,259.9,205.5,256,205.5z"/ > <path class="st2" d="M303.7,334.8c0,0,0.1,0,0.1,0c3.8,0,7-3.1,7.1-6.9l2.2-115.2c0.1-3.9-3-7.1-6.9-7.2c-3.9-0.1-7.1,3-7.2,6.9    l-2.2,115.2C296.7,331.5,299.8,334.7,303.7,334.8z"/ > </g > </g > </svg >') !important;
    /*background-color: white !important;*/
    width: 30px;
}

.icon-edit {
    padding: 2px;
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" enable-background="new 0 0 91 91" version="1.1" viewBox="0 0 91 91" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path d="M24.018,49.415L42.149,67.54l38.119-38.122L62.145,11.292L24.018,49.415z M66.444,25.118    c1.259,1.262,1.259,3.306,0,4.566L44.369,51.753c-0.629,0.633-1.455,0.946-2.278,0.946c-0.831,0-1.655-0.313-2.284-0.946    c-1.261-1.262-1.261-3.305,0-4.565l22.072-22.07C63.138,23.857,65.183,23.857,66.444,25.118z" fill="#6EC4A7" /><polygon fill="#65B794" points="15.72,75.578 35.863,70.393 21.111,55.641   " /><path d="M87.621,12.533l-8.593-8.596c-2.548-2.546-6.992-2.543-9.53,0L66.706,6.73l18.129,18.124l2.786-2.788    C90.244,19.436,90.244,15.159,87.621,12.533z" fill="#65B794" /></g><path d="M79.585,89.554H3.461c-1.833,0-3.318-1.486-3.318-3.319V5.512c0-1.833,1.484-3.318,3.318-3.318h51.113   c1.835,0,3.317,1.485,3.317,3.318c0,1.832-1.482,3.318-3.317,3.318H6.779v74.086h72.806c2.592,0,4.701-2.108,4.701-4.701V36.588   c0-1.833,1.484-3.318,3.317-3.318c1.832,0,3.318,1.485,3.318,3.318v41.627C90.922,84.467,85.836,89.554,79.585,89.554z" fill="#647F94" /></g></svg>') !important;
    /*background-color: white !important;*/
    width: 30px;
    height: 30px;
}

.detail-search {
    outline: none;
    border: none;
    width: 17rem;
}

input:focus .detail-search {
    outline: none;
}

/*.table-responsive[data-pattern="priority-columns"] {
    border: 0;
}*/

/*table.quickgrid {
    display: table;
    caption-side: bottom;
    border-collapse: collapse;
    vertical-align: middle;
    text-align: left;
    color: var(--tw-gray-700);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
}*/

.quickgrid[theme=fancy-table] td, 
.quickgrid[theme=fancy-table] th {
    /*   padding-top: 0;
    padding-bottom: 0;*/
    padding: 1px 2px;
}

.quickgrid[theme=fancy-table] thead th {
    background-color: #f4f7fa;
    /*font-weight: 800;*/
    /*  font-size: .75rem;*/
    /*color: #7c858e;*/
    color: var(--tw-gray-700) !important;
    font-weight: bold;
    /*text-transform: uppercase;*/
    border-bottom-width: 2px;
    border-color: #e3e7eb;
    /*padding: .75rem;*/
    /*letter-spacing: .05em;*/
    min-height: 2rem !important;
    border-radius: 0 !important;
    text-wrap: wrap !important;
}

.quickgrid[theme=fancy-table] tbody tr .td-fit, 
.quickgrid[theme=fancy-table] tbody tr .th-fit {
    width: 1%;
    white-space: nowrap;
}

.col-title-text {
    white-space: normal !important;
}

.overflow-x-auto {
    overflow-x: auto;
}

.pointer-events-none {
    pointer-events: none;
}

.via-black\/40 {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.from-black\/75 {
    --tw-gradient-from: rgb(0 0 0 / 0.75) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

/* Gradiente hacia la derecha */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* Gradiente hacia la esquina inferior derecha */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.h-1\/2 {
    height: 50%;
}

.tempC .col-options-button {
    background-image: url('data:image/svg+xml;utf8,<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.0256 6.6C13.0256 8.58823 11.4185 10.2 9.4359 10.2C7.45334 10.2 5.84615 8.58823 5.84615 6.6C5.84615 4.61177 7.45334 3 9.4359 3C11.4185 3 13.0256 4.61177 13.0256 6.6Z" fill="#030D45"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6.6C2 6.17395 2.3444 5.82857 2.76923 5.82857H5.84615C6.27099 5.82857 6.61539 6.17395 6.61539 6.6C6.61539 7.02605 6.27099 7.37143 5.84615 7.37143H2.76923C2.3444 7.37143 2 7.02605 2 6.6Z" fill="#030D45"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3077 6.6C14.3077 6.17395 14.6521 5.82857 15.0769 5.82857L21.2308 5.82857C21.6556 5.82857 22 6.17395 22 6.6C22 7.02605 21.6556 7.37143 21.2308 7.37143L15.0769 7.37143C14.6521 7.37143 14.3077 7.02605 14.3077 6.6Z" fill="#030D45"/> <path d="M10.9744 17.4C10.9744 19.3882 12.5815 21 14.5641 21C16.5467 21 18.1538 19.3882 18.1538 17.4C18.1538 15.4118 16.5467 13.8 14.5641 13.8C12.5815 13.8 10.9744 15.4118 10.9744 17.4Z" fill="#030D45"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M22 17.4C22 16.974 21.6556 16.6286 21.2308 16.6286H18.1538C17.729 16.6286 17.3846 16.974 17.3846 17.4C17.3846 17.826 17.729 18.1714 18.1538 18.1714H21.2308C21.6556 18.1714 22 17.826 22 17.4Z" fill="#030D45"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.69231 17.4C9.69231 16.974 9.34791 16.6286 8.92308 16.6286L2.76923 16.6286C2.3444 16.6286 2 16.974 2 17.4C2 17.826 2.3444 18.1714 2.76923 18.1714L8.92308 18.1714C9.34791 18.1714 9.69231 17.826 9.69231 17.4Z" fill="#030D45"/> </svg>');
}

.detail .col-options-button {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>');
}

.quickgrid[theme=fancy-table] tbody tr:hover td {
    /*background-color: #f6fbff;*//*celeste*/
    background: rgb(23, 198, 83, .1); /*verde*/
}

.quickgrid[theme=fancy-table] tbody tr:nth-child(odd) {
   background: rgb(241, 245, 249, 0.3); /*gris*/
}

.quickgrid[theme=fancy-table] tr:nth-child(even) {
    background: transparent;
}

.icon-actions {
    padding: 1px 5px;
}

/***Quick Grid Fin***/

/*** Inicio Grid ***/

.justify-around {
    justify-content: space-around;
}

.md\:justify-around {
    @media (width >= 48rem) {
        justify-content: space-around;
    }
}

.sm\:justify-end {
    @media (width >= 40rem) {
        justify-content: flex-end;
    }
}

.sm\:gap-1\.5 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 1.5);
    }
}

.sm\:gap-2 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 2);
    }
}

.sm\:gap-2\.5 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 2.5);
    }
}

.sm\:gap-3 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 3);
    }
}

.sm\:gap-3\.5 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 3.5);
    }
}

.sm\:gap-4 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 4);
    }
}

.sm\:gap-4\.5 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 4.5);
    }
}

.sm\:gap-5 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 5);
    }
}

.sm\:gap-6 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 6);
    }
}

.sm\:gap-7\.5 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 7.5);
    }
}

.sm\:gap-9 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 9);
    }
}

.sm\:gap-10 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 10);
    }
}

.sm\:gap-11 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 11);
    }
}

.sm\:gap-12 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 12);
    }
}

.sm\:gap-14 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 14);
    }
}

.sm\:gap-20 {
    @media (width >= 40rem) {
        gap: calc(var(--spacing) * 20);
    }
}

.sm\:overflow-hidden {
    @media (width >= 40rem) {
        overflow: hidden;
    }
}

.sm\:overflow-visible {
    @media (width >= 40rem) {
        overflow: visible;
    }
}

.sm\:rounded-none {
    @media (width >= 40rem) {
        border-radius: 0;
    }
}

.sm\:rounded-xl {
    @media (width >= 40rem) {
        border-radius: calc(var(--radius) + 4px);
    }
}

.sm\:rounded-e-xl {
    @media (width >= 40rem) {
        border-start-end-radius: calc(var(--radius) + 4px);
        border-end-end-radius: calc(var(--radius) + 4px);
    }
}

.sm\:rounded-t-none {
    @media (width >= 40rem) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

.sm\:rounded-l-none {
    @media (width >= 40rem) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.sm\:rounded-l-xl {
    @media (width >= 40rem) {
        border-top-left-radius: calc(var(--radius) + 4px);
        border-bottom-left-radius: calc(var(--radius) + 4px);
    }
}

.sm\:rounded-tl-xl {
    @media (width >= 40rem) {
        border-top-left-radius: calc(var(--radius) + 4px);
    }
}

.sm\:rounded-r-none {
    @media (width >= 40rem) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.sm\:border {
    @media (width >= 40rem) {
        border-style: var(--tw-border-style);
        border-width: 1px;
    }
}

.sm\:border-0 {
    @media (width >= 40rem) {
        border-style: var(--tw-border-style);
        border-width: 0px;
    }
}

.sm\:border-s {
    @media (width >= 40rem) {
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width: 1px;
    }
}

.sm\:border-e {
    @media (width >= 40rem) {
        border-inline-end-style: var(--tw-border-style);
        border-inline-end-width: 1px;
    }
}

.sm\:border-t {
    @media (width >= 40rem) {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
    }
}

.sm\:border-r {
    @media (width >= 40rem) {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px;
    }
}

.sm\:border-border {
    @media (width >= 40rem) {
        border-color: var(--border);
    }
}

.sm\:border-s-border {
    @media (width >= 40rem) {
        border-inline-start-color: var(--border);
    }
}

.sm\:border-e-border {
    @media (width >= 40rem) {
        border-inline-end-color: var(--border);
    }
}

.sm\:border-t-border {
    @media (width >= 40rem) {
        border-top-color: var(--border);
    }
}

.sm\:border-r-border {
    @media (width >= 40rem) {
        border-right-color: var(--border);
    }
}

.sm\:p-0 {
    @media (width >= 40rem) {
        padding: calc(var(--spacing) * 0);
    }
}

.sm\:p-7 {
    @media (width >= 40rem) {
        padding: calc(var(--spacing) * 7);
    }
}

.sm\:p-7\.5 {
    @media (width >= 40rem) {
        padding: calc(var(--spacing) * 7.5);
    }
}

.sm\:p-10 {
    @media (width >= 40rem) {
        padding: calc(var(--spacing) * 10);
    }
}

.sm\:p-12 {
    @media (width >= 40rem) {
        padding: calc(var(--spacing) * 12);
    }
}

.sm\:p-16 {
    @media (width >= 40rem) {
        padding: calc(var(--spacing) * 16);
    }
}

.sm\:px-6 {
    @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 6);
    }
}

.sm\:px-7 {
    @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 7);
    }
}

.sm\:px-7\.5 {
    @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 7.5);
    }
}

.sm\:px-10 {
    @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 10);
    }
}

.sm\:py-0 {
    @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 0);
    }
}

.sm\:py-3\.5 {
    @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 3.5);
    }
}

.sm\:py-4 {
    @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
    }
}

.sm\:py-5 {
    @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 5);
    }
}

.sm\:py-6 {
    @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 6);
    }
}

.sm\:py-7\.5 {
    @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 7.5);
    }
}

.sm\:py-9 {
    @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 9);
    }
}

.sm\:py-10 {
    @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 10);
    }
}

.sm\:ps-0 {
    @media (width >= 40rem) {
        padding-inline-start: calc(var(--spacing) * 0);
    }
}

.sm\:ps-4 {
    @media (width >= 40rem) {
        padding-inline-start: calc(var(--spacing) * 4);
    }
}

.sm\:ps-5 {
    @media (width >= 40rem) {
        padding-inline-start: calc(var(--spacing) * 5);
    }
}

.sm\:pe-0 {
    @media (width >= 40rem) {
        padding-inline-end: calc(var(--spacing) * 0);
    }
}

.sm\:pe-3 {
    @media (width >= 40rem) {
        padding-inline-end: calc(var(--spacing) * 3);
    }
}

.sm\:pe-5 {
    @media (width >= 40rem) {
        padding-inline-end: calc(var(--spacing) * 5);
    }
}

.sm\:pe-6 {
    @media (width >= 40rem) {
        padding-inline-end: calc(var(--spacing) * 6);
    }
}

.sm\:pe-8 {
    @media (width >= 40rem) {
        padding-inline-end: calc(var(--spacing) * 8);
    }
}

.sm\:pe-10 {
    @media (width >= 40rem) {
        padding-inline-end: calc(var(--spacing) * 10);
    }
}

.sm\:pe-12 {
    @media (width >= 40rem) {
        padding-inline-end: calc(var(--spacing) * 12);
    }
}

.sm\:pe-12\.5 {
    @media (width >= 40rem) {
        padding-inline-end: calc(var(--spacing) * 12.5);
    }
}

.sm\:pt-0 {
    @media (width >= 40rem) {
        padding-top: calc(var(--spacing) * 0);
    }
}

.sm\:pt-4 {
    @media (width >= 40rem) {
        padding-top: calc(var(--spacing) * 4);
    }
}

.sm\:pt-5 {
    @media (width >= 40rem) {
        padding-top: calc(var(--spacing) * 5);
    }
}

.sm\:pt-6 {
    @media (width >= 40rem) {
        padding-top: calc(var(--spacing) * 6);
    }
}

.sm\:pt-7 {
    @media (width >= 40rem) {
        padding-top: calc(var(--spacing) * 7);
    }
}

.sm\:pt-7\.5 {
    @media (width >= 40rem) {
        padding-top: calc(var(--spacing) * 7.5);
    }
}

.sm\:pt-9 {
    @media (width >= 40rem) {
        padding-top: calc(var(--spacing) * 9);
    }
}

.sm\:pt-10 {
    @media (width >= 40rem) {
        padding-top: calc(var(--spacing) * 10);
    }
}

.sm\:pr-12\.5 {
    @media (width >= 40rem) {
        padding-right: calc(var(--spacing) * 12.5);
    }
}

.sm\:pb-0 {
    @media (width >= 40rem) {
        padding-bottom: calc(var(--spacing) * 0);
    }
}

.sm\:pb-2\.5 {
    @media (width >= 40rem) {
        padding-bottom: calc(var(--spacing) * 2.5);
    }
}

.sm\:pb-4 {
    @media (width >= 40rem) {
        padding-bottom: calc(var(--spacing) * 4);
    }
}

.sm\:pb-5 {
    @media (width >= 40rem) {
        padding-bottom: calc(var(--spacing) * 5);
    }
}

.sm\:pb-7 {
    @media (width >= 40rem) {
        padding-bottom: calc(var(--spacing) * 7);
    }
}

.sm\:pb-7\.5 {
    @media (width >= 40rem) {
        padding-bottom: calc(var(--spacing) * 7.5);
    }
}

.sm\:pb-9 {
    @media (width >= 40rem) {
        padding-bottom: calc(var(--spacing) * 9);
    }
}

.sm\:pb-10 {
    @media (width >= 40rem) {
        padding-bottom: calc(var(--spacing) * 10);
    }
}

.sm\:text-end {
    @media (width >= 40rem) {
        text-align: end;
    }
}

.sm\:text-right {
    @media (width >= 40rem) {
        text-align: right;
    }
}

.sm\:text-2xl {
    @media (width >= 40rem) {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
}

.sm\:text-sm {
    @media (width >= 40rem) {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
}

.md\:justify-end {
    @media (width >= 48rem) {
        justify-content: flex-end;
    }
}

.md\:gap-1\.5 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 1.5);
    }
}

.md\:gap-2 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 2);
    }
}

.md\:gap-2\.5 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 2.5);
    }
}

.md\:gap-3 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 3);
    }
}

.md\:gap-3\.5 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 3.5);
    }
}

.md\:gap-4 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 4);
    }
}

.md\:gap-4\.5 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 4.5);
    }
}

.md\:gap-5 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 5);
    }
}

.md\:gap-6 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 6);
    }
}

.md\:gap-7\.5 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 7.5);
    }
}

.md\:gap-9 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 9);
    }
}

.md\:gap-10 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 10);
    }
}

.md\:gap-11 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 11);
    }
}

.md\:gap-12 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 12);
    }
}

.md\:gap-14 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 14);
    }
}

.md\:gap-20 {
    @media (width >= 48rem) {
        gap: calc(var(--spacing) * 20);
    }
}

.md\:overflow-hidden {
    @media (width >= 48rem) {
        overflow: hidden;
    }
}

.md\:overflow-visible {
    @media (width >= 48rem) {
        overflow: visible;
    }
}

.md\:rounded-none {
    @media (width >= 48rem) {
        border-radius: 0;
    }
}

.md\:rounded-xl {
    @media (width >= 48rem) {
        border-radius: calc(var(--radius) + 4px);
    }
}

.md\:rounded-e-xl {
    @media (width >= 48rem) {
        border-start-end-radius: calc(var(--radius) + 4px);
        border-end-end-radius: calc(var(--radius) + 4px);
    }
}

.md\:rounded-t-none {
    @media (width >= 48rem) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

.md\:rounded-l-none {
    @media (width >= 48rem) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.md\:rounded-l-xl {
    @media (width >= 48rem) {
        border-top-left-radius: calc(var(--radius) + 4px);
        border-bottom-left-radius: calc(var(--radius) + 4px);
    }
}

.md\:rounded-tl-xl {
    @media (width >= 48rem) {
        border-top-left-radius: calc(var(--radius) + 4px);
    }
}

.md\:rounded-r-none {
    @media (width >= 48rem) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.md\:border {
    @media (width >= 48rem) {
        border-style: var(--tw-border-style);
        border-width: 1px;
    }
}

.md\:border-0 {
    @media (width >= 48rem) {
        border-style: var(--tw-border-style);
        border-width: 0px;
    }
}

.md\:border-s {
    @media (width >= 48rem) {
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width: 1px;
    }
}

.md\:border-e {
    @media (width >= 48rem) {
        border-inline-end-style: var(--tw-border-style);
        border-inline-end-width: 1px;
    }
}

.md\:border-t {
    @media (width >= 48rem) {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
    }
}

.md\:border-r {
    @media (width >= 48rem) {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px;
    }
}

.md\:border-border {
    @media (width >= 48rem) {
        border-color: var(--border);
    }
}

.md\:border-s-border {
    @media (width >= 48rem) {
        border-inline-start-color: var(--border);
    }
}

.md\:border-e-border {
    @media (width >= 48rem) {
        border-inline-end-color: var(--border);
    }
}

.md\:border-t-border {
    @media (width >= 48rem) {
        border-top-color: var(--border);
    }
}

.md\:border-r-border {
    @media (width >= 48rem) {
        border-right-color: var(--border);
    }
}

.md\:p-0 {
    @media (width >= 48rem) {
        padding: calc(var(--spacing) * 0);
    }
}

.md\:p-2 {
    @media (width >= 48rem) {
        padding: calc(var(--spacing) * 2);
    }
}

.md\:p-7 {
    @media (width >= 48rem) {
        padding: calc(var(--spacing) * 7);
    }
}

.md\:p-7\.5 {
    @media (width >= 48rem) {
        padding: calc(var(--spacing) * 7.5);
    }
}

.md\:p-10 {
    @media (width >= 48rem) {
        padding: calc(var(--spacing) * 10);
    }
}

.md\:p-12 {
    @media (width >= 48rem) {
        padding: calc(var(--spacing) * 12);
    }
}

.md\:p-16 {
    @media (width >= 48rem) {
        padding: calc(var(--spacing) * 16);
    }
}

.md\:px-6 {
    @media (width >= 48rem) {
        padding-inline: calc(var(--spacing) * 6);
    }
}

.md\:px-7 {
    @media (width >= 48rem) {
        padding-inline: calc(var(--spacing) * 7);
    }
}

.md\:px-7\.5 {
    @media (width >= 48rem) {
        padding-inline: calc(var(--spacing) * 7.5);
    }
}

.md\:px-10 {
    @media (width >= 48rem) {
        padding-inline: calc(var(--spacing) * 10);
    }
}

.md\:py-0 {
    @media (width >= 48rem) {
        padding-block: calc(var(--spacing) * 0);
    }
}

.md\:py-3\.5 {
    @media (width >= 48rem) {
        padding-block: calc(var(--spacing) * 3.5);
    }
}

.md\:py-4 {
    @media (width >= 48rem) {
        padding-block: calc(var(--spacing) * 4);
    }
}

.md\:py-5 {
    @media (width >= 48rem) {
        padding-block: calc(var(--spacing) * 5);
    }
}

.md\:py-6 {
    @media (width >= 48rem) {
        padding-block: calc(var(--spacing) * 6);
    }
}

.md\:py-7\.5 {
    @media (width >= 48rem) {
        padding-block: calc(var(--spacing) * 7.5);
    }
}

.md\:py-9 {
    @media (width >= 48rem) {
        padding-block: calc(var(--spacing) * 9);
    }
}

.md\:py-10 {
    @media (width >= 48rem) {
        padding-block: calc(var(--spacing) * 10);
    }
}

.md\:ps-0 {
    @media (width >= 48rem) {
        padding-inline-start: calc(var(--spacing) * 0);
    }
}

.md\:ps-4 {
    @media (width >= 48rem) {
        padding-inline-start: calc(var(--spacing) * 4);
    }
}

.md\:ps-5 {
    @media (width >= 48rem) {
        padding-inline-start: calc(var(--spacing) * 5);
    }
}

.md\:pe-0 {
    @media (width >= 48rem) {
        padding-inline-end: calc(var(--spacing) * 0);
    }
}

.md\:pe-3 {
    @media (width >= 48rem) {
        padding-inline-end: calc(var(--spacing) * 3);
    }
}

.md\:pe-5 {
    @media (width >= 48rem) {
        padding-inline-end: calc(var(--spacing) * 5);
    }
}

.md\:pe-6 {
    @media (width >= 48rem) {
        padding-inline-end: calc(var(--spacing) * 6);
    }
}

.md\:pe-8 {
    @media (width >= 48rem) {
        padding-inline-end: calc(var(--spacing) * 8);
    }
}

.md\:pe-10 {
    @media (width >= 48rem) {
        padding-inline-end: calc(var(--spacing) * 10);
    }
}

.md\:pe-12 {
    @media (width >= 48rem) {
        padding-inline-end: calc(var(--spacing) * 12);
    }
}

.md\:pe-12\.5 {
    @media (width >= 48rem) {
        padding-inline-end: calc(var(--spacing) * 12.5);
    }
}

.md\:pt-0 {
    @media (width >= 48rem) {
        padding-top: calc(var(--spacing) * 0);
    }
}

.md\:pt-4 {
    @media (width >= 48rem) {
        padding-top: calc(var(--spacing) * 4);
    }
}

.md\:pt-5 {
    @media (width >= 48rem) {
        padding-top: calc(var(--spacing) * 5);
    }
}

.md\:pt-6 {
    @media (width >= 48rem) {
        padding-top: calc(var(--spacing) * 6);
    }
}

.md\:pt-7 {
    @media (width >= 48rem) {
        padding-top: calc(var(--spacing) * 7);
    }
}

.md\:pt-7\.5 {
    @media (width >= 48rem) {
        padding-top: calc(var(--spacing) * 7.5);
    }
}

.md\:pt-9 {
    @media (width >= 48rem) {
        padding-top: calc(var(--spacing) * 9);
    }
}

.md\:pt-10 {
    @media (width >= 48rem) {
        padding-top: calc(var(--spacing) * 10);
    }
}

.md\:pr-12\.5 {
    @media (width >= 48rem) {
        padding-right: calc(var(--spacing) * 12.5);
    }
}

.md\:pb-0 {
    @media (width >= 48rem) {
        padding-bottom: calc(var(--spacing) * 0);
    }
}

.md\:pb-2\.5 {
    @media (width >= 48rem) {
        padding-bottom: calc(var(--spacing) * 2.5);
    }
}

.md\:pb-4 {
    @media (width >= 48rem) {
        padding-bottom: calc(var(--spacing) * 4);
    }
}

.md\:pb-5 {
    @media (width >= 48rem) {
        padding-bottom: calc(var(--spacing) * 5);
    }
}

.md\:pb-7 {
    @media (width >= 48rem) {
        padding-bottom: calc(var(--spacing) * 7);
    }
}

.md\:pb-7\.5 {
    @media (width >= 48rem) {
        padding-bottom: calc(var(--spacing) * 7.5);
    }
}

.md\:pb-9 {
    @media (width >= 48rem) {
        padding-bottom: calc(var(--spacing) * 9);
    }
}

.md\:pb-10 {
    @media (width >= 48rem) {
        padding-bottom: calc(var(--spacing) * 10);
    }
}

.md\:text-end {
    @media (width >= 48rem) {
        text-align: end;
    }
}

.md\:text-right {
    @media (width >= 48rem) {
        text-align: right;
    }
}

.md\:text-2xl {
    @media (width >= 48rem) {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
}

.md\:text-sm {
    @media (width >= 48rem) {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
}

.md\:grid-cols-1 {
    @media (width >= 48rem) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.md\:grid-cols-3 {
    @media (width >= 48rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lg\:p-2 {
    @media (width >= 64rem) {
        padding: calc(var(--spacing) * 2);
    }
}

.lg\:grid-cols-1 {
    @media (width >= 64rem) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}



.lg\:text-3xl {
    @media (width >= 64rem) {
        font-size: var(--text-3xl);
    }
}

/*** Fin Grid ****/


    .color-title-text {
    color: #00275f;
}

/*** inicio Font ***/

.font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
}

/*** fin Font***/

/*** inicio Margin ***/
.m-0\.5 {
    margin: calc(var(--spacing) * 0.5);
}

.m-1\.5 {
    margin: calc(var(--spacing) * 1.5);
}

.m-1 {
    margin: calc(var(--spacing) * 1);
}

.m-2 {
    margin: calc(var(--spacing) * 2);
}

.mb-6 {
    margin-bottom: 1.5rem;
}
/*** fin Margin ***/

/*** Inicio grid-cols ***/


.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-full {
    grid-column: 1 / -1;
}

@media (min-width: 640px) {
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sm\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  
    .sm\:col-span-1 {
      grid-column: span 1 / span 1;
    }
  
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  
    .sm\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .sm\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .sm\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .sm\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .sm\:w-5 {
        max-width: 1.25rem; /* 20px */
    }

    .sm\:w-52 {
        max-width: 13rem; /* 208px */
    }

    .sm\:w-56 {
        max-width: 14rem; /* 224px */
    }

    .sm\:w-60 {
        max-width: 15rem;
    }

    .sm\:w-64 {
        max-width: 16rem;
    }

    .sm\:w-72 {
        max-width: 18rem; 
    }

    .sm\:max-w-6 {
        max-width: 1.5rem; /* 24px */
    }

    .sm\:max-w-7 {
        max-width: 1.75rem; /* 28px */
    }

    .sm\:max-w-8 {
        max-width: 2rem; /* 32px */
    }

    .sm\:max-w-9 {
        max-width: 2.25rem; /* 36px */
    }

    .sm\:max-w-10 {
        max-width: 2.5rem; /* 40px */
    }

    .sm\:max-w-11 {
        max-width: 2.75rem; /* 44px */
    }

    .sm\:max-w-12 {
        max-width: 3rem; /* 48px */
    }

    .sm\:max-w-14 {
        max-width: 3.5rem; /* 56px */
    }

    .sm\:max-w-16 {
        max-width: 4rem; /* 64px */
    }

    .sm\:max-w-20 {
        max-width: 5rem; /* 80px */
    }

    .sm\:max-w-24 {
        max-width: 6rem; /* 96px */
    }

    .sm\:max-w-28 {
        max-width: 7rem; /* 112px */
    }

    .sm\:max-w-32 {
        max-width: 8rem; /* 128px */
    }

    .sm\:max-w-36 {
        max-width: 9rem; /* 144px */
    }

    .sm\:max-w-40 {
        max-width: 10rem; /* 160px */
    }

    .sm\:max-w-44 {
        max-width: 11rem; /* 176px */
    }

    .sm\:max-w-48 {
        max-width: 12rem; /* 192px */
    }

    .sm\:max-w-52 {
        max-width: 13rem; /* 208px */
    }

    .sm\:max-w-56 {
        max-width: 14rem; /* 224px */
    }

    .sm\:max-w-60 {
        max-width: 15rem;
    }

    .sm\:max-w-64 {
        max-width: 16rem;
    }

    .sm\:max-w-72 {
        max-width: 18rem;
    }

    .sm\:mr-5 {
        margin-right: 1.25rem;
    }

    .sm\:mr-6 {
        margin-right: 1.5rem;
    }

    .sm\:ml-5 {
        margin-left: 1.25rem;
    }

    .sm\:ml-6 {
        margin-left: 1.5rem;
    }

    .sm\:wl-7 {
        margin-left: 1.75rem; /* 28px */
    }

    .sm\:wl-8 {
        margin-left: 2rem; /* 32px */
    }

    .sm\:wl-9 {
        margin-left: 2.25rem; /* 36px */
    }

    .sm\:w-1\/2 {
        width: 50%;
    }

    .sm\:w-1\/3 {
        width: 33%;
    }

    .sm\:w-1\/4 {
        width: 25%;
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .md\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  
    .md\:col-span-1 {
      grid-column: span 1 / span 1;
    }
  
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  
    .md\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .md\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .md\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .md\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .md\:max-w-6 {
        max-width: 1.5rem; /* 24px */
    }

    .md\:max-w-7 {
        max-width: 1.75rem; /* 28px */
    }

    .md\:max-w-8 {
        max-width: 2rem; /* 32px */
    }

    .md\:max-w-9 {
        max-width: 2.25rem; /* 36px */
    }

    .md\:max-w-10 {
        max-width: 2.5rem; /* 40px */
    }

    .md\:max-w-11 {
        max-width: 2.75rem; /* 44px */
    }

    .md\:max-w-12 {
        max-width: 3rem; /* 48px */
    }

    .md\:max-w-14 {
        max-width: 3.5rem; /* 56px */
    }

    .md\:max-w-16 {
        max-width: 4rem; /* 64px */
    }

    .md\:max-w-20 {
        max-width: 5rem; /* 80px */
    }

    .md\:max-w-24 {
        max-width: 6rem; /* 96px */
    }

    .md\:max-w-28 {
        max-width: 7rem; /* 112px */
    }

    .md\:max-w-32 {
        max-width: 8rem; /* 128px */
    }

    .md\:max-w-36 {
        max-width: 9rem; /* 144px */
    }

    .md\:max-w-40 {
        max-width: 10rem; /* 160px */
    }

    .md\:max-w-44 {
        max-width: 11rem; /* 176px */
    }

    .md\:max-w-48 {
        max-width: 12rem; /* 192px */
    }

    .md\:max-w-52 {
        max-width: 13rem; /* 208px */
    }

    .md\:max-w-56 {
        max-width: 14rem; /* 224px */
    }

    .md\:mr-5 {
        margin-right: 1.25rem;
    }

    .md\:mr-6 {
        margin-right: 1.5rem;
    }

    .md\:ml-5 {
        margin-left: 1.25rem;
    }

    .md\:ml-6 {
        margin-left: 1.5rem;
    }

    .md\:wl-7 {
        margin-left: 1.75rem; /* 28px */
    }

    .md\:wl-8 {
        margin-left: 2rem; /* 32px */
    }

    .md\:wl-9 {
        margin-left: 2.25rem; /* 36px */
    }

    .md\:w-1\/2 {
        width: 50%;
    }

    .md\:w-1\/3 {
        width: 50%;
    }

    .md\:w-1\/4 {
        width: 25%;
    }

    .md\:w-450 {
        width: 450px;
    }

    /***Inica Text***/
    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .md\:text-22px {
        font-size: 22px; /* tamaño de letra */
        line-height: 28px; /* altura de línea */
    }

    /***fin Text***/
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .lg\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .lg\:max-w-6 {
        max-width: 1.5rem; /* 24px */
    }

    .lg\:max-w-7 {
        max-width: 1.75rem; /* 28px */
    }

    .lg\:max-w-8 {
        max-width: 2rem; /* 32px */
    }

    .lg\:max-w-9 {
        max-width: 2.25rem; /* 36px */
    }

    .lg\:max-w-10 {
        max-width: 2.5rem; /* 40px */
    }

    .lg\:max-w-11 {
        max-width: 2.75rem; /* 44px */
    }

    .lg\:max-w-12 {
        max-width: 3rem; /* 48px */
    }

    .lg\:max-w-14 {
        max-width: 3.5rem; /* 56px */
    }

    .lg\:max-w-16 {
        max-width: 4rem; /* 64px */
    }

    .lg\:max-w-20 {
        max-width: 5rem; /* 80px */
    }

    .lg\:max-w-24 {
        max-width: 6rem; /* 96px */
    }

    .lg\:max-w-28 {
        max-width: 7rem; /* 112px */
    }

    .lg\:max-w-32 {
        max-width: 8rem; /* 128px */
    }

    .lg\:max-w-36 {
        max-width: 9rem; /* 144px */
    }

    .lg\:max-w-40 {
        max-width: 10rem; /* 160px */
    }

    .lg\:max-w-44 {
        max-width: 11rem; /* 176px */
    }

    .lg\:max-w-48 {
        max-width: 12rem; /* 192px */
    }

    .lg\:max-w-52 {
        max-width: 13rem; /* 208px */
    }

    .lg\:max-w-56 {
        max-width: 14rem; /* 224px */
    }

    .lg\:mr-5 {
        margin-right: 1.25rem;
    }

    .lg\:mr-6 {
        margin-right: 1.5rem;
    }

    .lg\:ml-5 {
        margin-left: 1.25rem;
    }

    .lg\:ml-6 {
        margin-left: 1.5rem;
    }

    .lg\:wl-7 {
        margin-left: 1.75rem; /* 28px */
    }

    .lg\:wl-8 {
        margin-left: 2rem; /* 32px */
    }

    .lg\:wl-9 {
        margin-left: 2.25rem; /* 36px */
    }

    .lg\:w-1\/2 {
        width: 50%;
    }

    .lg\:w-1\/3 {
        width: 50%;
    }

    .lg\:w-1\/4 {
        width: 25%;
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .xl\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .xl\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .xl\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .xl\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .xl\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .xl\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .xl\:max-w-6 {
        max-width: 1.5rem; /* 24px */
    }

    .xl\:max-w-7 {
        max-width: 1.75rem; /* 28px */
    }

    .xl\:max-w-8 {
        max-width: 2rem; /* 32px */
    }

    .xl\:max-w-9 {
        max-width: 2.25rem; /* 36px */
    }

    .xl\:max-w-10 {
        max-width: 2.5rem; /* 40px */
    }

    .xl\:max-w-11 {
        max-width: 2.75rem; /* 44px */
    }

    .xl\:max-w-12 {
        max-width: 3rem; /* 48px */
    }

    .xl\:max-w-14 {
        max-width: 3.5rem; /* 56px */
    }

    .xl\:max-w-16 {
        max-width: 4rem; /* 64px */
    }

    .xl\:max-w-20 {
        max-width: 5rem; /* 80px */
    }

    .xl\:max-w-24 {
        max-width: 6rem; /* 96px */
    }

    .xl\:max-w-28 {
        max-width: 7rem; /* 112px */
    }

    .xl\:max-w-32 {
        max-width: 8rem; /* 128px */
    }

    .xl\:max-w-36 {
        max-width: 9rem; /* 144px */
    }

    .xl\:max-w-40 {
        max-width: 10rem; /* 160px */
    }

    .xl\:max-w-44 {
        max-width: 11rem; /* 176px */
    }

    .xl\:max-w-48 {
        max-width: 12rem; /* 192px */
    }

    .xl\:max-w-52 {
        max-width: 13rem; /* 208px */
    }

    .xl\:max-w-56 {
        max-width: 14rem; /* 224px */
    }

    .xl\:w-1\/2 {
        width: 50%;
    }

    .xl\:w-1\/3 {
        width: 50%;
    }

    .xl\:w-1\/4 {
        width: 25%;
    }
}


/*@media (max-width: 1208px){
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
}

@media (max-width: 640px) {
}*/

/*** Fin grid-cols ***/

/*** inicio bg color ***/
.bg-available {
    background-color: var(--color-green-500);
}

.bg-reserved {
    background-color: #2d2d2d;
}

.bg-available {
    background-color: #FF8C00;
}

.bg-amber-100 {
    background-color: rgb(254 243 199);
}	
.bg-amber-200 {
    background-color: rgb(253 230 138);
}

.bg-white\/5 {
    background-color: color-mix(in srgb, #fff 5%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
}

.bg-white\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
}

.bg-white\/15 {
    background-color: color-mix(in srgb, #fff 15%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
}

.bg-white\/20 {
    background-color: color-mix(in srgb, #fff 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
}

.bg-white\/30 {
    background-color: color-mix(in srgb, #fff 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
}

.bg-white\/80 {
    background-color: color-mix(in srgb, #fff 80%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
}

.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px); /* valor típico de Tailwind para sm */
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.hover\:bg-white\/20 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
    }
}
}

.hover\:bg-white\/30 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
        }
    }
}
}

.hover\:bg-white\/40 {
    &:hover

{
    @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
        }
    }
}
}

.bg-black\/40 {
    background-color: color-mix(in oklab,var(--color-black)40%,transparent)
}

.bg-black\/50 {
    background-color: color-mix(in oklab,var(--color-black)50%,transparent)
}

.bg-orange-500 {
    background-color: #F97316; /* Naranja */
}

.bg-orange {
    background-color: #ff8700; /* Naranja */
}

.bg-red-50 {
    background-color: var(--color-red-50); /* Rojo */
}

.bg-red-100 {
    background-color: var(--color-red-100); /* Rojo */
}

.bg-red-600 {
    background-color: #DC2626; /* Rojo */
}

.bg-green-100 {
    background-color: #DCFCE7; /* Verde claro, equivalente a Tailwind bg-green-100 */
}
.bg-green-600 {
    background-color: #16A34A; /* Verde */
}

.bg-gray-200 {
    background-color: var(--color-gray-200);
}

.bg-gray-300 {
    background-color: var(--color-gray-300);
}

.bg-gray-400 {
    background-color: var(--color-gray-400);
}

.bg-gray-500 {
    background-color: var(--color-gray-500);
}

.bg-gray-600 {
    background-color: var(--color-gray-600);
}

.bg-gray-700 {
    background-color: var(--color-gray-700);
}

.bg-gray-800 {
    background-color: var(--color-gray-800);
}

.bg-blue-950 {
    background-color: var(--color-blue-950);
}

/*** fin bg color ***/

/*** Inicio switch ***/

/*.kt-switch {
    background-color: var(--color-gray-800);
}

.kt-switch:checked, .kt-switch[aria-checked=true] {
    background-color: var(--primary);
}

.kt-switch:disabled {
    background-color: var(--color-gray-800);
}*/

/*** Fin switch ***/

/*** Inicio text color ***/

.text-green-50 {
    color: var(--color-green-50);
}

.text-green-100 {
    color: var(--color-green-100);
}

.text-green-200 {
    color: var(--color-green-200);
}
.text-orange-950 {
    color: var(--color-orange-950);
}

/*** Fin text color ***/


.kt-table {
    & tbody {
    td {
            padding-block: calc(var(--spacing) * 1) !important;
        }
    }
}

/*.kt-table {
    & tbody {
    & tr:nth-child(odd)
{
    @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in oklab, var(--color-green-100) 5%, transparent);*/
        /* background: rgb(241, 245, 249, 0.3); */ /*gris*/
    /*}
}
}

.kt-table {
    & tbody {
    & tr {
    &:has(td):hover {
                @supports (color: color-mix(in lab, red, red)) {
                    background-color: color-mix(in oklab, var(--muted) 50%, transparent) !important;
                }
            }
        }
    }
}*/

/*** Inicio w-[?px]***/

.select-none {
    -webkit-user-select: none;
    user-select: none;
}

.right-1 {
    right: calc(var(--spacing) * 1);
}

.top-1 {
    top: calc(var(--spacing) * 1);
}

.to-gray-100 {
    --tw-gradient-to: #f3f4f6; /* Color base de gray-100 */
}

.to-blue-100 {
    --tw-gradient-to: #dbeafe; /* Color base de blue-100 */
}


.left-1 {
    left: calc(var(--spacing) * 1);
}

.bottom-1 {
    bottom: calc(var(--spacing) * 1);
}

.w-2 {
    width: calc(var(--spacing) * 2);
}

.w-3 {
    width: calc(var(--spacing) * 3);
}

.w-3\.5 {
    width: calc(var(--spacing) * 3.5);
}

.w-4 {
    width: calc(var(--spacing) * 4);
}

.w-8\.5 {
    width: calc(var(--spacing) * 8.5);
}

.w-26 {
    width: calc(var(--spacing) * 26);
}
.w-28 {
    width: calc(var(--spacing) * 28);
}
.w-30 {
    width: calc(var(--spacing) * 30);
}
.w-32 {
    width: calc(var(--spacing) * 32);
}

.w-\[350px\] {
    width: 350px;
}
/*** fin w-[?px] ***/

/*** Inicio h-[?px]***/

.h-0\.5 {
    height: calc(var(--spacing) * 0.5);
}

.h-3 {
    height: calc(var(--spacing) * 3);
}

.h-5\.5 {
    height: calc(var(--spacing) * 5.5);
}

.h-26 {
    height: calc(var(--spacing) * 26);
}

.h-28 {
    height: calc(var(--spacing) * 28);
}

.h-30 {
    height: calc(var(--spacing) * 30);
}

.h-32 {
    height: calc(var(--spacing) * 32);
}

.h-\[350px\] {
    height: 350px;
}
/*** fin h-[?px] ***/

/*** Inicio max-w ***/
.max-w-px 	{ max-width: 1px; }
.max-w-\.5	{ max-width: 0.125rem; /* 2px */ }
.max-w-1	{ max-width: 0.25rem; /* 4px */ }
.max-w-1\.5	{ max-width: 0.375rem; /* 6px */ }
.max-w-2	{ max-width: 0.5rem; /* 8px */ }
.max-w-2\.5	{ max-width: 0.625rem; /* 10px */ }
.max-w-3	{ max-width: 0.75rem; /* 12px */ }
.max-w-3\.5	{ max-width: 0.875rem; /* 14px */ }
.max-w-4	{ max-width: 1rem; /* 16px */ }
.max-w-5	{ max-width: 1.25rem; /* 20px */ }
.max-w-6	{ max-width: 1.5rem; /* 24px */ }
.max-w-7	{ max-width: 1.75rem; /* 28px */ }
.max-w-8	{ max-width: 2rem; /* 32px */ }
.max-w-9	{ max-width: 2.25rem; /* 36px */ }
.max-w-10	{ max-width: 2.5rem; /* 40px */ }
.max-w-11	{ max-width: 2.75rem; /* 44px */ }
.max-w-12	{ max-width: 3rem; /* 48px */ }
.max-w-14	{ max-width: 3.5rem; /* 56px */ }
.max-w-20	{ max-width: 5rem; /* 80px */ }
.max-w-28	{ max-width: 7rem; /* 112px */ }
.max-w-36	{ max-width: 9rem; /* 144px */ }
.max-w-40	{ max-width: 10rem; /* 160px */ }
.max-w-44	{ max-width: 11rem; /* 176px */ }
.max-w-52	{ max-width: 13rem; /* 208px */ }
.max-w-60	{ max-width: 15rem; /* 240px */ }
.max-w-64	{ max-width: 16rem; /* 256px */ }
.max-w-80	{ max-width: 20rem; /* 320px */ }
.max-w-96	{ max-width: 24rem; /* 384px */ }
.max-w-xs	{ max-width: 20rem; /* 320px */ }
.max-w-sm	{ max-width: 24rem; /* 384px */ }
.max-w-md	{ max-width: 28rem; /* 448px */ }
.max-w-lg	{ max-width: 32rem; /* 512px */ }
.max-w-xl	{ max-width: 36rem; /* 576px */ }
.max-w-2xl	{ max-width: 42rem; /* 672px */ }
.max-w-3xl	{ max-width: 48rem; /* 768px */ }
.max-w-4xl	{ max-width: 56rem; /* 896px */ }
.max-w-5xl	{ max-width: 64rem; /* 1024px */ }
.max-w-6xl	{ max-width: 72rem; /* 1152px */ }
.max-w-7xl	{ max-width: 80rem; /* 1280px */ }
.max-w-full	{ max-width: 100%; }
.max-w-min	{ max-width: min-content; }
.max-w-max	{ max-width: max-content; }
.max-w-fit	{ max-width: fit-content; }
.max-w-prose	{ max-width: 65ch; }
.max-w-screen-sm	{ max-width: 640px; }
.max-w-screen-md	{ max-width: 768px; }
.max-w-screen-lg	{ max-width: 1024px; }
.max-w-screen-xl	{ max-width: 1280px; }
.max-w-screen-2xl	{ max-width: 1536px; }
/*** Fin max-w ***/

/*** Inicio File Input ***/

.file-input {
    display: block;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    outline: none;
    font-size: .8125rem;
    line-height: 1;
    background-color: var(--tw-light-active);
    /*border-radius: .375rem;*/
    height: 2.5rem;
    padding: 0 1rem 0 0;
    /*border: 1px solid var(--tw-gray-300);*/
    color: var(--tw-gray-700);
}

.file-input-sm {
    font-weight: 500;
    font-size: .75rem;
    height: 2rem;
    padding-right: .75rem;
}

.file-input-lg {
    font-weight: 500;
    font-size: .875rem;
    height: 3rem;
    padding-right: 1.25rem;
}

/*** Fin File Input ***/

/*** Inicio Text ***/
.text-4xl {
    font-size: 2.25rem; /* 36px */
    line-height: 2.5rem; /* 40px */
}

.text-5xl {
    font-size: 3rem; /* 48px */
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem; /* 60px */
    line-height: 1;
}

.text-7xl {
    font-size: 4.5rem; /* 72px */
    line-height: 1;
}
/*** Fin Text ***/

/*** Inicio Menu ***/
.menu-title {
    width: min-content;
}
/*** Fin Menu ***/

/*** Inicio Width and Height ***/
.min-w-\[125px\] {
    min-width: 125px;
}

.min-w-\[170px\] {
    min-width: 170px;
}

.w-\[1px\] {
    width: 1px;
}

.w-\[700px\] {
    width: 700px;
}

.min-h-1 {
    min-height: 0.25rem;
}

.min-h-40 {
    min-height: calc(var(--spacing)*40)
}

.min-h-44 {
    min-height: calc(var(--spacing)*44)
}

.min-h-48 {
    min-height: calc(var(--spacing)*48)
}

/*** Fin Width and Height ***/

/*** Inicio Form ***/
.form-label {
    display: flex;
    width: 100%;
    color: var(--tw-gray-700);
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.form-info {
    color: var(--tw-gray-700);
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

/*** Fin Form ***/

/*** Inicio Object ***/

.object-contain {
    object-fit: contain;
}

.object-cover {
    object-fit: cover;
}

.object-fill {
    object-fit: fill;
}

.object-none {
    object-fit: none;
}

.object-scale-down {
    object-fit: scale-down;
}

.sm\:object-contain {
    @media (width >= 40rem) {
        object-fit: contain;
    }
}

.md\:object-contain {
    @media (width >= 48rem) {
        object-fit: contain;
    }
}

.sm\:object-cover {
    @media (width >= 40rem) {
        object-fit: cover;
    }
}

.md\:object-cover {
    @media (width >= 48rem) {
        object-fit: cover;
    }
}

/*** Fin Object ***/

/*** Inicio Banner ***/
.carousel-container {
    @apply relative w-full overflow-hidden select-none;
}

.carousel-track {
    @apply flex transition-transform duration-700 ease-in-out;
}

.carousel-slide {
    @apply flex-none w-full h-64 md:h-96 object-cover;
}

.carousel-btn {
    @apply absolute top-1/2 -translate-y-1/2 z-10 rounded-full p-2 bg-black/40 text-white hover:bg-black/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-white;
}

.carousel-indicator {
    @apply h-2 w-2 rounded-full transition-colors duration-300;
}

.is-active {
    @apply bg-white;
}

.is-inactive {
    @apply bg-white/40;
}
/*** Fin Banner ***/

/*** Inicio style page ***/
.page-bg {
    background-image: url('/assets/media/images/2600x1200/bg-1.png');
}

.dark .page-bg {
    background-image: url('/assets/media/images/2600x1200/bg-1-dark.png');
}
/*** Fin style page ***/

/*** Inicio Font ***/

.font-title {
    font-family: 'Anton';
    src: url('fonts/Anton-Regular.ttf') format('truetype');
    color: #00275f;
}

.font-subtitle {
    font-family: 'Rajdhani';
    src: url('/fonts/Rajdhani-Bold.ttf') format('truetype');
    color: #00275f;
    font-weight: bold;
}

.font-subtitle-orange-400 {
    font-family: 'Rajdhani';
    src: url('/fonts/Rajdhani-Bold.ttf') format('truetype');
    color: var(--color-orange-400);
    font-weight: bold;
}

.border-orange-400 {
    border-color: var(--color-orange-400);
}

.font-paragraph {
    font-family: 'Roboto';
    src: url('fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
}

.font-text {
    font-family: 'Roboto';
    src: url('fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Anton';
    src: url('fonts/Anton-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

/*** Fin Font ***/

/*** Inicio Padding ***/
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.py-2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
/*** Fin Padding ***/
/*** Inicio Colors ***/
.bg-amber-100 {
    background-color: rgb(254 243 199);
}
.bg-amber-200 {
    background-color: rgb(253 230 138);
}	

/*** Fin Colors ***/
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 -4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color), 0 -2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Form Labels */
.form-label {
    display: flex;
    width: 100%;
    color: var(--tw-gray-700);
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

    /* Required field indicator */
    .form-label.required::after,
    .form-label .required::after {
        content: "*";
        color: #ef4444;
        margin-left: 0.25rem;
        font-weight: 600;
    }

/* Input Controls */
.input {
    display: flex;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

    .input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background-color: #ffffff;
    }

    .input:hover {
        border-color: #9ca3af;
    }

    .input:disabled,
    .input[readonly] {
        background-color: #f9fafb;
        color: #6b7280;
        cursor: not-allowed;
        opacity: 0.7;
    }

    .input::placeholder {
        color: #9ca3af;
        font-style: italic;
    }

/* Input variants */
.input-solid {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

    .input-solid:focus {
        background-color: #ffffff;
        border-color: #3b82f6;
    }

/* Input with icons (input groups) */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

    .input-group .input {
        border-radius: 0.5rem 0 0 0.5rem;
        border-right: none;
    }

.input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    background-color: #f8fafc;
    border: 1px solid #d1d5db;
    border-left: none;
    border-radius: 0 0.5rem 0.5rem 0;
    color: #6b7280;
    font-size: 0.875rem;
    min-width: 45px;
}

.input-group:focus-within .input-group-text {
    border-color: #3b82f6;
    background-color: #eff6ff;
    color: #3b82f6;
}

/* Input with left icon */
.input-group-left .input {
    border-radius: 0 0.5rem 0.5rem 0;
    border-left: none;
}

.input-group-left .input-group-text {
    border-radius: 0.5rem 0 0 0.5rem;
    border-right: none;
    border-left: 1px solid #d1d5db;
}

/*** Inicio reservation ***/
.reservation-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "image"
        "text"
        "price";
    gap: 1rem;
    align-items: start;
}

.reservation-image {
    grid-area: image;
}

.reservation-text {
    grid-area: text;
}

.reservation-price {
    grid-area: price;
}

.reservation-image img {
    display: block;
    width: 100%;
    height: calc(var(--spacing) * 36);
    object-fit: cover;
}

/* Breakpoint para tablets */
@media (min-width: 48rem) {
    .reservation-card {
        grid-template-columns: 1.2fr 2.5fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "image text"
            "image price";
        gap: 1.25rem;
    }

    .reservation-image img {
        height: calc(var(--spacing) * 60);
    }

    .reservation-price {
        align-self: start;
        justify-self: stretch;
    }
}

/* Breakpoint para desktop - Layout estilo Amazon */
@media (min-width: 64rem) {
    .reservation-card {
        grid-template-columns: 1fr 3fr 1.2fr;
        grid-template-rows: auto;
        grid-template-areas:
            "image text price";
        gap: 2rem;
    }

    .reservation-image {
        grid-area: image;
    }

        .reservation-image img {
            height: calc(var(--spacing) * 40);
        }

    .reservation-text {
        grid-area: text;
    }

    .reservation-price {
        grid-area: price;
        align-self: start;
        justify-self: stretch;
    }
}

/* Estilos para los controles inline (estilo Amazon) */
.reservation-text button {
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

    .reservation-text button:hover {
        background-color: #f3f4f6;
    }

/* Estilos para los botones de cantidad originales  */
.add-button-cicle {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: #4b5563;
    font-weight: bold;
    font-size: 1.125rem;
    transition: color 0.2s, background-color 0.2s;
    border: none;
    cursor: pointer;
}

    .add-button-cicle:hover {
        background-color: #e5e7eb;
        color: #1f2937;
    }

/* Hover effects */
/*.reservation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}*/

/* Responsive text clamping */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Máximo 4 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Focus states para accesibilidad */
.reservation-card button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/*** Fin reservation ***/

/*** Inicio productos ***/
/* Breakpoint para desktop  */
@media (min-width: 48rem) {
    .productheader {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 8px;
    }

    .productimagen {
        grid-row: span 3 / span 3;
    }

    .productcontent {
        grid-column: span 2 / span 2;
        grid-row: span 3 / span 3;
    }
}
    /*** Fin productos ***/

/*** Inicio iconos ***/
.icon-container-horizontal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .icon-container-horizontal i {
        font-size: 1.25rem; /* tamaño más pequeño */
        color: #6b7280; /* gris base */
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }

        .icon-container-horizontal i:hover {
            color: #f97316; /* naranja al pasar el cursor */
            transform: scale(1.1);
        }

.icon-label-horizontal {
    font-size: 0.875rem;
    color: #4b5563;
}

/*** Fin iconos ***/

/*** Inicio carrusel ***/
.destinos-section {
    padding: 1rem 0;
    overflow: hidden;
}

/* Contenedor principal */
.carousel {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Pista deslizante */
.carousel-track {
    display: flex;
    align-items: center;
    gap: 20px;
    width: max-content;
    animation: scroll 25s linear infinite;
}

/* Cada imagen */
.carousel-slide {
    flex-shrink: 0;
}

/* Imagen principal */
.carousel-img {
    width: 10rem; /* tamaño base */
    height: 8rem;
    object-fit: cover;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

    .carousel-img:hover {
        transform: scale(1.08);
    }

/* Animación desplazamiento */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* === Ajustes Responsivos === */
@media (max-width: 1024px) { /* tablets */
    .carousel-track {
        gap: 16px;
        animation-duration: 30s; /* más lento */
    }

    .carousel-img {
        width: 8rem;
        height: 6.5rem;
    }
}

@media (max-width: 768px) { /* móviles medianos */
    .carousel-track {
        gap: 14px;
        animation-duration: 35s; /* más lento */
    }

    .carousel-img {
        width: 7rem;
        height: 5.5rem;
    }
}

@media (max-width: 480px) { /* móviles pequeños */
    .carousel-track {
        gap: 12px;
        animation-duration: 40s;
    }

    .carousel-img {
        width: 5.5rem;
        height: 4.5rem;
        border-radius: 0.5rem;
    }
}
/*** Fin carrusel ***/


/*** Inicio Foter ***/

.tracking-wide {
    letter-spacing: 0.025em;
}

.text-18px {
    font-size: 18px;
}
.text-20px {
    font-size: 20px;
}

.hover\:opacity-90 {
    opacity: 1; /* opacidad normal */
    transition: opacity 0.3s ease;
}

    .hover\:opacity-90:hover {
        opacity: 0.9; /* opacidad al pasar el cursor */
    }

.fill-white {
    fill: var(--color-white);
    
}

.hover-underline {
    text-decoration: none; /* sin subrayado por defecto */
    text-underline-offset: 4px; /* separa la línea del texto */
    text-decoration-thickness: 3px; /* grosor de la línea */
    transition: text-decoration 0.2s ease;
}

    .hover-underline:hover {
        text-decoration: underline;
    }

.decoration-3px {
    text-decoration-thickness: 3px; /* grosor del subrayado */
}

.underline-offset-4 {
    text-underline-offset: 4px; /* distancia de la línea respecto al texto */
}
.border-white {
    border-color: var(--color-white);
}

/* Cinta superior compuesta (azul + cuña roja + franja naranja) */
.cinta {
    position: relative;
    overflow: hidden;
    background: var(--color-orange-400);
}

.cinta::before { /* franja azul izquierda */
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 16%;
    background: var(--color-blue-300);
}

.cinta::after { /* cuña roja inclinada */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15%;
    width: 28px;
    background: var(--color-red-700);
    transform: skewX(-18deg);
    transform-origin: left;
    box-shadow: 2px 0 0 rgba(0,0,0,.08) inset;
}
/* separadores tipo barra roja entre ítems */
.menu-sep {
    display: inline-block;
    width: 1.5px;
    height: 0.8rem;
    background: var(--color-red-700);
    margin: 0 15px;
    transform: translateY(2px);
}
/* botón flotante subir */
.backtop {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 50;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: var(--azul);
    color: var(--color-white);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.18);
    transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
}

.backtop.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
}

.backtop:hover {
    transform: translateY(-2px) scale(1.03)
}

/* Iconos circulares */
.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 2px solid rgba(255,255,255,.85);
    display: grid;
    place-items: center
}

.social-btn:hover {
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 0 6px rgba(255,255,255,.08) inset
}

/* Responsivo */
@media (max-width: 1400px) {
   /* .cinta {
        height: 45px
    }*/

    .cinta::before {
        width: 15%
    }

    .cinta::after {
        left: 14%;
        width: 25px
    }

    .menu-sep {
        margin: 0 12px
    }
}

@media (max-width: 1200px) {
   /* .cinta {
        height: 45px
    }*/

    .cinta::before {
        width: 12%
    }

    .cinta::after {
        left: 11%;
        width: 20px
    }

    .menu-sep {
        margin: 0 12px
    }
}

@media (max-width: 1024px) {
  /*  .cinta {
        height: 45px
    }*/

    .cinta::before {
        width: 8%
    }

    .cinta::after {
        left: 7%;
        width: 18px
    }

    .menu-sep {
        margin: 0 12px
    }
}

@media (max-width: 992px) {
    /*.cinta {
        height: 45px
    }*/

    .cinta::before {
        width: 4%
    }

    .cinta::after {
        left: 3%;
        width: 15px;
        transform: skewX(-9deg)
    }

    .menu-sep {
        margin: 0 12px
    }
}

@media (max-width: 768px) {
   /* .cinta {
        height: 40px
    }*/

    .cinta::before {
        width: 1px
    }

    .cinta::after {
        width: 0px
    }

    .menu-sep {
        margin: 0 12px
    }
}

/*** Fin Foter ***/

/* Efecto de zoom general al pasar el cursor sobre la tarjeta */
article:hover {
    transform: scale(1.03);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Suaviza la transición cuando no está en hover */
article {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

    /* Zoom más notorio en la imagen interna */
    article img {
        transition: transform 0.8s ease;
    }

    /* Cuando pasas el cursor, la imagen hace zoom */
    article:hover img {
        transform: scale(1.15);
    }

    /* Botón animado con rebote suave */
    article button:hover {
        transform: scale(1.1);
        transition: transform 0.3s ease;
    }

    /* Efecto de “levantamiento” visual al pasar el mouse */
    article:hover .bg-white {
        background-color: #f9fafb;
        transition: background-color 0.4s ease;
    }

.shimmer {
    position: relative;
    overflow: hidden;
}

    .shimmer::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        /* banda luminosa */
        background-image: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100% );
        animation: shimmer-move 1.6s infinite;
    }

@keyframes shimmer-move {
    100% {
        transform: translateX(100%);
    }
}

/* Respeto a usuarios con “reduce motion” */
@media (prefers-reduced-motion: reduce) {
    .shimmer::after {
        animation: none;
    }

    .animate-pulse {
        animation: none;
    }
}

.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shimmer {
        animation: none;
    }
}

.carddiversion {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem; /* igual al rounded-2xl */
    transition: box-shadow 0.4s ease-in-out, border-color 0.4s ease-in-out;
}

    .carddiversion:hover {
        /*border-color: rgba(0, 174, 255, 0.8);*/ /* azul brillante */
        border-color: rgba(255, 165, 0, 0.8); /* naranja brillante */
        box-shadow: 0 0 20px rgba(255, 165, 0, 0.4), 0 0 40px rgba(255, 165, 0, 0.2);
    }


.shine::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(from 180deg, rgba(0,184,255,.35), transparent 20% 80%, rgba(243,183,0,.35));
    filter: blur(16px);
    opacity: .0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.shine:hover::after {
    opacity: .7;
}

.card:hover img {
    transform: scale(1.04);
}

.btn-ripple {
    position: relative;
    overflow: hidden;
}

    .btn-ripple span.ripple {
        position: absolute;
        border-radius: 50%;
        transform: scale(0);
        animation: ripple .6s linear;
        background: rgba(255,255,255,.5);
    }

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.btn-whatsapp:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.blend-multiply {
    mix-blend-mode: multiply;
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}