/*=====================================================
                    Tipografia
======================================================*/
@font-face{
    font-family: "RobotoCondensedLight";
    src: url("../webfonts/robotocondensed-light.ttf"), 
    url("../webfonts/robotocondensed-light.eot"), 
    url("../webfonts/robotocondensed-light.woff"), 
    url("../webfonts/robotocondensed-light.woff2"), 
    url("../webfonts/robotocondensed-light.svg");
}
@font-face{
    font-family: "RobotoRegular";
    src: url("../webfonts/roboto-regular.ttf"), 
    url("../webfonts/roboto-regular.eot"), 
    url("../webfonts/roboto-regular.woff"), 
    url("../webfonts/roboto-regular.woff2"), 
    url("../webfonts/roboto-regular.svg");
}
@font-face{
    font-family: "OswaldLight";
    src: url("../webfonts/oswald-light.ttf"), 
    url("../webfonts/oswald-light.eot"), 
    url("../webfonts/oswald-light.woff"), 
    url("../webfonts/oswald-light.woff2"), 
    url("../webfonts/oswald-light.svg");
}


:root{
    --color-principal:#1374b4;
    --color-secundario:#253745;
}

body,html{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: "RobotoRegular";
    position: relative;
    background-color: #fff;
}


.is-photo{
    max-width: 300px;
    height: auto;
    margin: 0 auto;
}

.text-condensedLight{ font-family: "RobotoCondensedLight"; }
.tittles{ font-family: "OswaldLight"; }
.full-width{
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;


}
.list-unstyle{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
.img-responsive{
    width: 100%;
    height: auto;
}
.divider-menu-h{
    height: 0 !important;
    border-top: 1px solid #c9c9c9;
    width: 95% !important;
    margin: 0 auto !important;
}

.page-container{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
}

/*  Scrolls */
.scroll::-webkit-scrollbar{
    width: 8px;
}
.scroll::-webkit-scrollbar-thumb{
    background: rgba(102,107,122,1);
}
.scroll::-webkit-scrollbar-thumb:active,
.scroll::-webkit-scrollbar-thumb:hover{
    background: rgba(102,107,122,1);
} 
.scroll::-webkit-scrollbar-track{
    background: rgba(29, 30, 34, 1);
}
.scroll::-webkit-scrollbar-track:hover, 
.scroll::-webkit-scrollbar-track:active{
    background: rgba(29, 30, 34, 1);
}
/*=============Estilos barra superior*/

/* ================================
   🔔 NOTIFICACIONES – ESTILO MODERNO
================================ */
/* ===============================
   Dropdown notificaciones
=============================== */
.notifications-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    max-width: 95vw;
    background: #1e1e1e;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    z-index: 1000;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
    overflow: hidden; /* clave */
}

.notifications-dropdown.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* ===============================
   Título (FUERA del scroll)
=============================== */
.notifications-title {
    font-size: 1rem;
    color: #f1c40f;
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #333;
    background: #1e1e1e;
}

/* ===============================
   Contenedor con scroll (SOLO cards)
=============================== */
.notifications-container {
    max-height: 420px;
    overflow-y: auto;
    
}

/* Scrollbar moderna */
.notifications-container::-webkit-scrollbar {
    width: 6px;
}

.notifications-container::-webkit-scrollbar-track {
    background: transparent;
}

.notifications-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 6px;
}

.notifications-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.3);
}

/* ===============================
   Card notificación
=============================== */
.notification-item-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
    animation: fadeIn .25s ease forwards;
}

.notification-item-modern:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.notification-item-modern:hover {
    background: #2a2a2a;
    transform: translateX(2px);
}

/* Avatar */
.notification-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: #333;
}

/* Contenido */
.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .3px;
}

.notification-subtitle {
    font-size: .75rem;
    color: #bbb;
    opacity: .85;
}

/* Estado */
.notification-status {
    color: #e74c3c;
    font-size: 1rem;
    position: relative;
}

.notification-status::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background: #e74c3c;
    border-radius: 50%;
}

/* ===============================
   Badge campana
=============================== */
.notification-badge {
    background: #e74c3c;
    color: #fff;
    border-radius: 50%;
    font-size: .7rem;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 6px;
    right: -4px;
    box-shadow: 0 0 8px rgba(231,76,60,.8);
}

/* ===============================
   Estado vacío
=============================== */
.notifications-empty {
    text-align: center;
    padding: 30px 10px;
    color: #888;
    font-size: .85rem;
}

.notifications-empty i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
    color: #555;
}

/* ===============================
   Icono campana navbar
=============================== */
.notification-icon {
    margin-right: 1rem;
    position: relative;
}

.notification-icon i {
    font-size: 1.7rem;
    cursor: pointer;
}



/* Estilo del contenedor del menú del usuario */
.user-menu {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Estilo del ícono de flecha */
.user-menu i {
    margin-left: 0.5rem; /* Ajusta el margen según sea necesario */
}


/* Estilo del menú desplegable */
.user-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 200px; /* Ajusta el ancho según sea necesario */
}

.navBar{
    background-color: #1374b4;
    height: 45px;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    margin-bottom: 55px !important;

}



.navBar-options{
    line-height: 45px;
    height: 45px;
    padding: 0;
    transition: all .3s ease-in-out;
    display: flex;
    justify-content: space-between;

}

.navBar-options .fa-bars,
.navBar-options-list{
    line-height: 45px;
    height: 45px;
    margin: 0;
    padding: 0;
}

.navBar-options .fa-bars{
    width: 40px;
    left: 0;
    font-size: 23px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    outline: none;
    margin-left: 9px;
    
}

.navBar-options-list{
    right: 9px;
}

.navBar-options-list .noLink{
    cursor: inherit;
}

.navBar-options-list ul{
    height: 45px;
    display: flex;
    align-items: center; /* Alinea todos los elementos verticalmente en el centro */
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0;
    margin: 0;
}

.navBar-options-list ul li{
    height: 45px;
    line-height: 45px;
    cursor: pointer;
    padding: 0 7px;
    font-size: 21px;
    user-select: none;
    outline: none;
    display: flex;
    align-items: center; /* Alinea todos los elementos verticalmente en el centro */
}

.navBar-options-list ul li a,
.navBar-options-list ul li img{
    margin: 0;
    padding: 0;
    color: #FFF;
}

.navBar-options-list ul li img{
    border: 1px solid #E1E1E1;
    border-radius: 50%;
    width: 39px;
    height: 39px;
    margin-top: 0;
    margin-bottom: 0;
}


/* Estilo de cada opción en el menú desplegable */
.user-menu-dropdown a {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #333 !important;
    text-decoration: none;
    font-size: 0.9rem;
}

.user-menu-dropdown a:hover {
    background-color: #f5f5f5;
}

/* Estilo del ícono en las opciones */
.user-menu-dropdown i {
    margin-right: 0.5rem;
}

/* Mostrar el menú desplegable al hacer hover sobre el contenedor del usuario */
.user-menu:hover .user-menu-dropdown {
    display: block;
}

 .warsoft-brand {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 20px;
}

.warsoft-brand img {
    width: 42px;
    height: 42px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-text strong {
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.brand-text small {
    font-size: 11px;
    color: rgba(255,255,255,0.8);
}

/*=============Estilos en comun navegacion lateral y contenido pagina*/

.navLateral,
.pageContent,
.navLateral-body{
    height: auto;
}
.navLateral,
.pageContent{
    overflow-y: auto;
}
/*=============Estilos navegacion lateral*/
/* === Sidebar contenedor general === */
.navLateral {
    position: fixed;
    left: 0;
    top: 45px;
    height: calc(100vh - 45px); /* fallback */
    height: calc(100dvh - 45px);
    width: 300px;
    background-color: #253745;
    color: white;
    overflow-y: auto; /* AQUI DEBE ESTAR EL SCROLL */
    transition: width .3s ease, transform .3s ease;
    z-index: 9999;
}






/* === Sidebar colapsado (solo iconos) === */
.navLateral.collapsed {
    width: 70px;
}

/* === Ocultar textos cuando está colapsado === */
.navLateral.collapsed .navLateral-body-cr,
.navLateral.collapsed .navLateral-body-tittle-menu,
.navLateral.collapsed .menu-principal li a div.navLateral-body-cr,
.navLateral.collapsed .btn-subMenu span.fa-angle-down,

.navLateral.collapsed .status small,
.navLateral.collapsed .sub-menu-options {
    display: none !important;
}

/* Ajustar estructura cuando está colapsado (iconos centrados) */
.navLateral.collapsed .navLateral-body-cl {
    width: 100% !important;
}
.navLateral.collapsed .menu-principal li a div.navLateral-body-cl {
    width: 100% !important;
    justify-content: center !important;
}

/* === Sidebar oculto en móvil === */
@media(max-width: 768px){
    .navLateral {
        transform: translateX(-100%);
    }
    .navLateral.open {
        transform: translateX(0);
    }
}
.navLateral-change{
    pointer-events: none;
    opacity: 0;
    width: 0;
    border-right: none;
    height: auto;
}
.navLateral-body{
    position: relative;
    color: white;
}
.navLateral-body-logo{
    height: 45px;
    line-height: 45px;
    color: #fff;
    width: 100%;
    font-size: 25px;
    background-color: #253745;
    
}
.navLateral-body-cl,
.navLateral-body-cr{
    box-sizing: border-box;
    height: 77px;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    
}
.navLateral-body-cl{
    width: 25%;
}
.navLateral-body-cl img{
    width: 57px;
    height: 57px;
    margin: 0 auto;
    display: block;

}
.navLateral-body-cr{
    width: 70%;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.navLateral-body-tittle-menu{
    height: 70px;
    line-height: 70px; 
    font-size:20px; 
    background-color: #1e2c38;
    text-align: center;
}
.menu-principal li,
.menu-principal li a{
    display: block;
}
.menu-principal li a{
    height: 45px;
    color: #ffffff;
    position: relative;
    transition: all .3s ease-in-out;
}
.menu-principal li a:hover{
    background-color: #1585cf;
}
.menu-principal li a div.navLateral-body-cl,
.menu-principal li a div.navLateral-body-cr{
    height: 45px;
    line-height: 45px;
}
.menu-principal li a div.navLateral-body-cl{
    text-align: center;
    font-size: 20px;
}
.btn-subMenu span.fa-angle-down{
    position: absolute;
    top: 0;
    right: 10px;
    line-height: 45px;
    height: 45px;
    font-size: 20px;
    transition: all .3s ease-in-out;
}
.btn-subMenu + .sub-menu-options{
    transition: all .3s ease-in-out;
}
.sub-menu-options{
    height: 0;
    background-color: #F5F5F5;
    overflow-y: hidden;
    transition: all .2s ease-in-out;
}
.sub-menu-options li a{ border-left: 4px solid transparent; }
.sub-menu-options li a:hover{ border-left: 4px solid #ffffff; }
.btn-subMenu-show{
    background-color: rgba(0, 0, 0, 0.1);
}
.btn-subMenu-show .navLateral-body-cl,
.btn-subMenu-show .navLateral-body-cr{
    color: #fff;
}
.btn-subMenu-show + .sub-menu-options{
    height: auto;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.1);
}

.btn-subMenu-show span.fa-angle-down{
    transform: rotate(180deg);
}

/*Estilos encabezado de la barra lateral, online*/
.status {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}


.status-dot {
    height: 10px;
    width: 10px;
    background-color: rgb(13, 187, 13);
    border-radius: 50%;
    flex-shrink: 0;
}


.status small {
    font-size: 13px; /* Tamaño de fuente más pequeño para el estado */
}
.custom-icon{
    width: 33px !important; /* Ajusta el tamaño según sea necesario */
    height: 33px !important; /* Asegura que la altura sea la misma que el ancho */
    vertical-align: middle !important; /* Alinea el icono verticalmente con el texto */
    margin-top: 0 !important;
}
/* === Iconos centrados SOLO cuando está colapsado === */
.navLateral.collapsed .navLateral-body-cl {
    display: flex !important;
    align-items: center !important;
    justify-content: center!important;
}

/*=============Estilos contenido pagina*/
.pageContent{
    margin-left: 70px; /* Sidebar colapsado */
    transition: margin-left .3s ease;
    background-color: #fff;
    transition: all .3s ease-in-out;
    padding-top: 4rem;
}



@media(max-width: 768px){
    .pageContent,
    .pageContent.sidebar-expanded {
        margin-left: 0 !important; /* Siempre full width en móvil */
    }
}

/* --- Hover para expandir (solo escritorio) --- */
@media(min-width: 768px){
    .navLateral.collapsed:hover {
        width: 300px;
    }
    
}

/* Mostrar textos durante hover en escritorio */
@media(min-width: 768px){
    .navLateral.collapsed:hover .navLateral-body-cr,
    .navLateral.collapsed:hover .navLateral-body-tittle-menu,
    .navLateral.collapsed:hover .menu-principal li a div.navLateral-body-cr,
    .navLateral.collapsed:hover .btn-subMenu span.fa-angle-down,

    .navLateral.collapsed:hover .status small,
    .navLateral.collapsed:hover .sub-menu-options {
        display: block !important;
    }

    
}

/* ==========================================
   FIX: Sidebar expandido por hover EN PC
   Debe pasar por encima, no empujar contenido
   ========================================== */
@media(min-width: 768px){

    /* Al pasar mouse, expandir sobre el contenido */
    .navLateral.collapsed:hover {
        transform: translateX(0);
        width: 300px;
        position: fixed;
        z-index: 9999;
    }

    /* Evitar que el contenido se mueva */
    .navLateral.collapsed:hover ~ .pageContent {
        margin-left: 70px !important;
    }

    /* Restaurar estructura correcta */
    .navLateral.collapsed:hover .navLateral-body-cl {
        width: 25% !important;
        display: block !important;
    }

    .navLateral.collapsed:hover .navLateral-body-cr {
        width: 70% !important;
        display: block !important;
    }
}

/* Mostrar textos cuando está expandido POR CLICK */
.navLateral:not(.collapsed) .navLateral-body-cr,
.navLateral:not(.collapsed) .navLateral-body-tittle-menu,
.navLateral:not(.collapsed) .menu-principal li a div.navLateral-body-cr,
.navLateral:not(.collapsed) .btn-subMenu span.fa-angle-down,

.navLateral:not(.collapsed) .status small,
.navLateral:not(.collapsed) .sub-menu-options {
    display: block !important;
}

/* Mostrar textos cuando está expandido POR HOVER */
.navLateral.collapsed:hover .navLateral-body-cr,
.navLateral.collapsed:hover .navLateral-body-tittle-menu,
.navLateral.collapsed:hover .menu-principal li a div.navLateral-body-cr,
.navLateral.collapsed:hover .btn-subMenu span.fa-angle-down,

.navLateral.collapsed:hover .status small,
.navLateral.collapsed:hover .sub-menu-options {
    display: block !important;
}

/* Mantener iconos a la izquierda como menú normal */
.navLateral:not(.collapsed) .navLateral-body-cl,
.navLateral.collapsed:hover .navLateral-body-cl {
    width: 25% !important;
}

/* Restaurar la estructura de texto */
.navLateral:not(.collapsed) .navLateral-body-cr,
.navLateral.collapsed:hover .navLateral-body-cr {
    width: 70% !important;
}

/* ===========================================================
   FIX DEFINITIVO:
   Cuando el sidebar está colapsado pero se expande POR HOVER,
   debe comportarse EXACTAMENTE igual que cuando está expandido
   por clic: iconos a la izquierda, textos alineados, estructura normal
   =========================================================== */

/* Restaurar estructura icono/texto al hacer hover */
.navLateral.collapsed:hover .navLateral-body-cl {
    width: 25% !important;
    display: block !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.navLateral.collapsed:hover .navLateral-body-cr {
    width: 70% !important;
    display: block !important;
}


/* Corregir iconos que siguen centrados */
.navLateral.collapsed:hover .menu-principal li a div.navLateral-body-cl {
    width: 25% !important;
    justify-content: center !important; /* queda como en modo expandido */
}


/* Asegurar que el layout interno NO quede aplastado */
.navLateral.collapsed:hover .menu-principal li a div.navLateral-body-cr {
    width: 70% !important;
    display: block !important;
}
/*=============Estilos detalle de venta*/
.sale-details{
    display: flex;
    justify-content: space-between;
    transition: all .3s ease-in-out;
    padding: 5px;
}
.sale-details:hover{
    background-color: rgba(0, 0, 0, 0.07);
}
/*ESTILOS TABLA REPORTE DE VENTAS */
.custom-tag {
    background-color: #e0e0e0; /* Color de fondo */
    color: #007bff; /* Color del texto */
    border: 1px solid #007bff; /* Color del borde */
    padding: 0.5em 1em; /* Espaciado interno */
    border-radius: 0.25em; /* Bordes redondeados */
    font-size: 0.875em; /* Tamaño de fuente */
    transition: background-color 0.3s, color 0.3s; /* Transición suave para el hover */
}

.custom-tag:hover {
    background-color: #007bff; /* Color de fondo en hover */
    color: #ffffff; /* Color del texto en hover */
}

.custom-tag i {
    margin-right: 5px; /* Espacio entre el ícono y el texto */
    transition: color 0.3s; /* Transición suave para el color del ícono */
}

.custom-tag:hover i {
    color: #ffffff; /* Cambia el color del ícono a blanco en hover */
}


.scrollable-table thead th,
.scrollable-tableventas thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;

}
/* Asegurar que las filas del pie de tabla tengan bordes visibles */
.scrollable-table,
.scrollable-tableventas {
    overflow-y: auto;
    border: 1px solid #dbdbdb; /* Ajustar color de borde según el diseño */
    border-radius: 6px;
    max-height: 750px;
    position: relative; /* Agregamos posición relativa para el contenedor */
}

.scrollable-table table,
.scrollable-tableventas table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0;
}

.scrollable-table th,
.scrollable-table td,
.scrollable-tableventas th,
.scrollable-tableventas td {
    border: 1px solid #dbdbdb; /* Ajustar color de borde según el diseño */
    padding: 8px;
    text-align: center;
}

.scrollable-table th,
.scrollable-tableventas th{
    background-color: #f5f5f5; /* Ajustar color de fondo del encabezado */
}

.scrollable-table tfoot tr,
.scrollable-tableventas tfoot tr {
    background-color: #f5f5f5; /* Ajustar color de fondo del pie de tabla */
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

.scrollable-table tfoot td,
.scrollable-tableventas tfoot td {
    border: 1px solid #dbdbdb; /* Ajustar color de borde según el diseño */
    padding: 8px;
    text-align: center;
}



.scrollable-tableventas{
    max-height: 550px !important; 
}
/* Estilo específico para las filas del pie de tabla que deben tener bordes visibles */
.static-footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 10;
    background-color: #f5f5f5; /* Fondo gris para las filas del pie de tabla */
    border: 1px solid #dbdbdb; /* Añadimos borde gris */
    box-shadow: 0 -4px 5px -5px rgba(0, 0, 0, 0.2); /* Sombra para separar visualmente */
}

.static-footer tfoot tr {
    background-color: #f5f5f5; /* Ajustar color de fondo del pie de tabla */
    border: 1px solid #dbdbdb; /* Añadimos borde gris */
}

.static-footer tfoot td {
    border: 1px solid #dbdbdb; /* Ajustar color de borde según el diseño */
    padding: 8px;
    text-align: center;
}

.text-decoration-none{
    text-decoration: none;
}
    
/*ESTILOS VISTA INVENTARIO*/
.table-container {
    max-width: 100%;
    overflow-x: auto;
}
.container-inventory{
    max-width: 2000px;
    margin-left: 40px;
    margin-right: 40px;
}
.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: #ffffff;
}

.table thead th {
    background-color: #1585cf; /* Color de fondo azul para encabezados */
    color: #ffffff; /* Color de texto blanco para encabezados */
}

.table tbody td {
    border: 1px solid #dbdbdb;
    vertical-align: top;
}

/* Estilos para eliminar el subrayado de las etiquetas <abbr> */
th abbr {
    text-decoration: none !important;/* Eliminar subrayado de las etiquetas <abbr> */
    border-bottom: none !important; /* Eliminar cualquier borde inferior */

}

.pagination-link.is-current {
    background-color: #3e8bbe; /* Azul Bulma - is-info */
    color: white; /* Cambia el color del texto a blanco para contraste */
    border: none;
}
.button.is-link.is-rounded.is-small {
    text-decoration: none; /* Elimina el subrayado */
}

.button.is-link.is-rounded.is-small:hover {
    text-decoration: none; /* Asegura que el subrayado no aparezca en el hover */
}

.alert-stock {
    background-color: #ffdddd; /* Rojo claro para alertar */
    color: #333; /* Color del texto para asegurar que sea legible */
    font-weight: bold; /* Hacer el texto más destacado */
}

.notification-list {
    max-height: 300px;
    overflow-y: auto;
}

.notification.is-danger {
    background-color: #ffcccc; /* Color de fondo rojo claro */
    color: #d8000c; /* Color del texto rojo oscuro */
    margin-bottom: 1rem;
}


/* estilos para las categorias en la vista de productCategory*/
.category-card {
    display: block;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: #1374b4; /* Color del texto por defecto */
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.category-card.selected {
    background-color: #1374b4; /* Fondo azul para la categoría seleccionada */
    color: #ffffff; /* Texto blanco para la categoría seleccionada */
}

.category-card.selected .category-name {
    color: #ffffff; /* Asegúrate de que el nombre de la categoría sea blanco cuando está seleccionado */
}

.category-card-content {
    padding: 1rem;
    text-align: center;
}

.category-name {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.category-description {
    color: #333;
}
/*ESTILOS BOTONES DE DESCARGA PDF Y EXCEL*/
/* Estilos para los botones de descarga */
.button-custom-pdf {
    background: linear-gradient(45deg, #ff6b6b, #f06595);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
    transform: scale(1);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.button-custom-pdf::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-30deg);
    transition: all 0.5s ease;
    z-index: 1;
}

.button-custom-pdf:hover::before {
    left: 100%;
}

.button-custom-pdf:hover {
    background-color: #e63946;
    transform: scale(1.05);
}

.button-custom-excel {
    background: linear-gradient(45deg, #4caf50, #2e7d32);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
    transform: scale(1);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.button-custom-excel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-30deg);
    transition: all 0.5s ease;
    z-index: 1;
}

.button-custom-excel:hover::before {
    left: 100%;
}

.button-custom-excel:hover {
    background-color: #388e3c;
    transform: scale(1.05);
}
.button-custom-ticket {
    background: linear-gradient(45deg, #3088c4, #1374b4);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
    transform: scale(1);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.button-custom-ticket::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-30deg);
    transition: all 0.5s ease;
    z-index: 1;
}

.button-custom-ticket:hover::before {
    left: 100%;
}

.button-custom-ticket:hover {
    background-color: #38678e;
    transform: scale(1.05);
}
.button-custom-pdf .icon i,
.button-custom-ticket .icon i,
.button-custom-excel .icon i {
    color: #fff;
}

/* Ajustes para el tamaño completo y márgenes */
.is-fullwidth {
    width: 100%;
}

.mr-2 {
    margin-right: 0.5rem;
}









.container-dashboard {
    max-width:auto;
    background: linear-gradient(to bottom right, #e4e4e4, #dadada);
    border-radius: 5px;
    padding: 80px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   
}

.small-box {
    border-radius: 15px;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}

.small-box:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.small-box .icon {
    font-size: 60px;
    position: absolute;
    right: 28px;
    top: 28px;
    opacity: 0.4;
}

.card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.card-header {
    background: #007bff;
    color: white;
    font-weight: bold;
    text-align: center;
}

.card-body {
    background: #fdfdfd;
    color: white;
}

.bg-gradient-warning {
    background: linear-gradient(to right, #ffcc00, #ff9900);
}

.bg-gradient-dark {
    background: linear-gradient(to right, #3a3a3a, #1a1a1a);
}

.bg-gradient-danger {
    background: linear-gradient(to right, #ff4d4d, #c70000);
}

.bg-gradient-success {
    background: linear-gradient(to right, #28a745, #218838);
}

.bg-gradient-primary {
    background: linear-gradient(to right, #007bff, #0056b3);
}

.bg-gradient-info {
    background: linear-gradient(to right, #174e74, #3193d4);
}

.small-box-footer {
    display: block;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.small-box-footer:hover {
    background-color: rgba(255, 255, 255, 0.137);
    color: #fff;
    text-decoration: none;
}


 /* Asegúrate de que el canvas sea responsive */
canvas {
    max-width: 100%;
    height: auto; /* Mantiene la proporción de aspecto */
}

/* MODULO GARANTIAS*/

.estado-pendiente {
    background-color: #f8d7da; /* Rojo claro */
    color: #721c24;            /* Texto rojo oscuro */
    font-weight: bold;
    text-align: center;
    padding: 8px;

}

.estado-recibida {
    background-color: #d4edda; /* Verde claro */
    color: #155724;            /* Texto verde oscuro */
    font-weight: bold;
    text-align: center;
    padding: 8px;

}


/* Opcional: Ajusta los tamaños del texto en dispositivos más pequeños */
@media (max-width: 768px) {
    .small-box .inner h4 {
        font-size: 1.5rem; /* Ajusta el tamaño del encabezado */
    }
   
    .small-box .inner p {
        font-size: 1.25rem; /* Ajusta el tamaño del texto */
    }
    .card-header {
        font-size: 1.25rem; /* Ajusta el tamaño del encabezado de la tarjeta */
    }
    .container-dashboard {
        max-width:auto;
        background: linear-gradient(to bottom right, #e4e4e4, #dadada);
        border-radius: 5px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
}

.modal-garantia .modal-content {
    width: 400px; /* Ancho estándar del modal */
    max-width: 90%; /* Para que no se desborde en pantallas pequeñas */
    margin: auto; /* Centra el modal en la pantalla */
    padding: 20px; /* Espaciado interno */
}

.modal-garantia .box {
    border-radius: 8px; /* Bordes redondeados para un diseño más atractivo */
    background-color: #fff; /* Fondo blanco para el contenido */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidad */
}

.modal-garantia .modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Estilos para dispositivos móviles */
@media (max-width: 600px) {
    .modal-garantia .modal-content {
        width: 90%; /* Ancho del modal en dispositivos móviles */
    }

    .modal-garantia .box {
        padding: 15px; /* Menor espaciado interno en móviles */
    }

    .modal-garantia .title {
        font-size: 1.5em; /* Tamaño de fuente más pequeño para el título */
    }

    .modal-garantia .button {
        width: 100%; /* Botón de confirmación ocupa el ancho completo */
    }
}



/* LOGIN */
/* Estilo del fondo */
body {
    margin: 0; /* Eliminar márgenes por defecto */
    overflow: hidden; /* Evita el scroll si la imagen es más grande */
}

.background-container {
    background-image: url('../img/banner1.webp'); /* Cambia la ruta a tu imagen */
    background-size: cover; /* Cubre todo el fondo */
    background-position: center; /* Centra la imagen */
    position: fixed; /* Fija la imagen de fondo */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(8px); /* Borra la imagen */
    z-index: 0; /* Asegura que esté detrás del formulario */
}

.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ocupa toda la altura de la ventana */
    position: relative; /* Para posicionar el formulario encima del fondo */
    z-index: 1; /* Asegura que el contenedor esté encima de la imagen */
}

/* Estilo del formulario */
.login,
.hero-body {
    height: auto;
    width: 100%;
    max-width: 450px;
    min-width: 300px;
    z-index: 2; /* Asegura que el formulario esté encima del fondo borroso */
}

.box {
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco semi-transparente */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Sombra suave */
    padding: 30px;
    transition: transform 0.3s ease; /* Efecto de transformación */
}



/* Resto de estilos */
.label {
    font-weight: bold; /* Negrita en etiquetas */
    color: #333; /* Color de texto */
}

.input {
    border: 1px solid #ddd; /* Borde gris claro */
    border-radius: 5px; /* Bordes redondeados */
    transition: border-color 0.3s; /* Transición suave */
}

.input:focus {
    border-color: #1374b4; /* Cambio de color al hacer foco */
    box-shadow: 0 0 5px rgba(41, 102, 172, 0.5); /* Sombra suave en el foco */
}
.icon-container {
    display: inline-flex; /* Asegura que el contenedor se ajuste al contenido */
    justify-content: center; /* Centra el ícono horizontalmente */
    align-items: center; /* Centra el ícono verticalmente */
    border-radius: 50%; /* Bordes redondeados para darle forma circular */
    width: 100px; /* Ajusta el ancho según lo necesites */
    height: 100px; /* Ajusta la altura según lo necesites */
    margin: 0 auto; /* Centra el contenedor en el párrafo */
}
.icon-user{
    color: #1374b4;
}


.button:hover {
    background-color: #1e3c72; /* Cambio de color al pasar el mouse */
}

.has-text-info {
    color: #2a5298 !important; /* Color del icono */
}


/*ESTILO CAJAS*/
.custom-close-button {
    background-color: #d9534f; /* Color por defecto para abrir */
    color: white; /* Texto blanco */
    padding: 5px 10px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cursor tipo puntero */
    transition: background-color 0.3s, transform 0.2s; /* Transición suave */
}

.custom-close-button:hover {
    background-color: #c9302c; /* Rojo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Aumentar ligeramente al pasar el ratón */
}

.custom-close-button.cerrada {
    background-color: #26516d; /* Azul claro para cuando la caja está cerrada (similar a is-info) */
}

.custom-close-button.cerrada:hover {
    background-color: #1a6797; /* Azul más oscuro al pasar el ratón */
}

.custom-close-button i {
    margin-right: 5px; /* Espacio entre el ícono y el texto */
    font-size: 16px; /* Tamaño del ícono */
}


/*MODAL APERTURA NUEVA CAJA*/

.modal {
    padding-top: 45px;
}

/* Estilo para el fondo del modal */
.modal-background {
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro con transparencia */
}

/* Estilo del card del modal */
.modal-card {
    width: 1000px; /* Ancho del modal */
    max-width: 90%; /* Para que no se desborde en pantallas pequeñas */
    margin: auto; /* Centra el modal en la pantalla */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra suave */
}
/* Estilo del encabezado del modal */
.modal-card-head {
    background-color:  #1374b4; /* Verde pastel */
    border-top-left-radius: 10px; /* Bordes redondeados */
    border-top-right-radius: 10px; /* Bordes redondeados */
}

/* Estilo del título del modal */
.modal-card-title {
    font-size: 1.5rem; /* Tamaño de fuente más grande */
    font-weight: bold; /* Negrita */
    color: #FFF;
    text-align: center;
}

/* Estilo del cuerpo del modal */
.modal-card-body {
    background-color: #f9f9f9; /* Fondo claro para el cuerpo */
}

/* Estilo para los botones del modal */
.modal-card-foot {
    justify-content: flex-end; /* Alinear botones a la derecha */
}

.modal-card-foot .button {
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s, transform 0.2s; /* Transiciones suaves */
}

.modal-card-foot .button.is-success {
    background-color: #1374b4; /* Color de fondo verde pastel */
    color: white; /* Texto blanco */
}

.modal-card-foot .button.is-danger {
    background-color: #ca2d2d; /* Rojo suave para el botón de cancelar */
    color: white; /* Texto blanco */
}

.modal-card-foot .button.is-success:hover {
    background-color: #2695df; /* Verde más oscuro al pasar el mouse */
}

.modal-card-foot .button.is-danger:hover {
    background-color: #e94848; /* Rojo más oscuro al pasar el mouse */
}

.modal-card-foot .button:hover {
    transform: scale(1.05); /* Efecto de aumento al pasar el mouse */
}

/* Estilo del input y select */
.input, .select {
    border: 1px solid #ccc; /* Borde claro */
    border-radius: 5px; /* Bordes redondeados */
    transition: border-color 0.3s; /* Transición para el borde */
}

.input:focus, .select:focus {
    border-color: #2695df; /* Borde verde pastel cuando está enfocado */
    box-shadow: 0 0 5px rgba(0, 127, 201, 0.5); /* Sombra verde pastel */
}

/*ESTILOS OPCIONES DE VENTAS*/
  /* Estilos generales del menú desplegable */
  .dropdown-content {
    background-color: white; /* Fondo blanco */
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 250px; /* Ajusta el ancho del cuadro desplegable */
}

/* Estilos de cada opción */
.dropdown-content .dropdown-option {
    display: flex;
    align-items: center;
    padding: 2px 15px;
    font-size: 14px;
    color: #333; /* Texto negro */
    text-decoration: none;
    border-bottom: 10px solid #f0f0f0; /* Línea separadora */
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.dropdown-content .dropdown-option:last-child {
    border-bottom: none; /* Sin línea en la última opción */
}

.dropdown-content .dropdown-option:hover {
    background-color: #f8f8f8; /* Fondo gris claro al pasar el mouse */
}

/* Estilos para los íconos */
.dropdown-content .dropdown-option i {
    margin-right: 10px;
    font-size: 18px;
}

/* Permite al menú desplegable mostrarse hacia arriba */
.dropdown-menu.is-up {
    bottom: 100%;
    top: auto;
}

.icon-whatsapp {
    color: #25d366; /* Verde WhatsApp */
}

.icon-pdf {
    color: #ff0000; /* Rojo PDF */
}

.icon-ticket {
    color: #007bff; /* Azul para el ticket */
}

.icon-detail {
    color: #17a2b8; /* Azul claro para el detalle */
}

.icon-delete {
    color: #dc3545; /* Rojo para eliminar */
}

.icon-returnProduct {
    color: #ffc107; /* Amarillo para devolución  producto*/
}
.icon-returnSale {
    color: #ff0000; /* Rojo para devolución venta */
}

.is-focused:hover{
    background-color:rgb(238, 244, 252);
}

/*ESTILOS BOTONES SALE LIST SIN MENU DESPLEGABLE*/
.button:hover{
    background-color:#fff;
}


/*=============Estilos select2*/

.select2-container .select2-selection--single {
    height: 40px !important; /* Ajusta la altura al tamaño de los inputs */
    display: flex;
    align-items: center; /* Centra el texto verticalmente */
    border: 1px solid #ddd; /* Mantiene el estilo de Bulma */
    border-radius: 5px; /* Bordes redondeados */
}

.select2-container .select2-selection__rendered {
    line-height: 40px !important; /* Ajusta la alineación del texto */
}

.select2-container .select2-selection__arrow {
    height: 38px !important; /* Ajusta la altura de la flecha */
}
.select2-container--default .select2-selection__placeholder {
    color: rgb(34, 34, 34) !important; /* Cambia el color del placeholder a negro */
}


/* ========== ESTILOS DEL LOADER PRINCIPAL ========== */

/* ========== SWEETALERT POPUP (loader) ========== */
.swal2-loader-popup {
    background: #fff !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 5px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Asegurar que los contenedores internos no vuelvan a poner fondo */
.swal2-loader-popup .swal2-html-container,
.swal2-loader-popup .swal2-title {
    background: transparent !important;
}


/* ========== CONTENEDOR PRINCIPAL DEL LOADER ========== */
.loader-warsoft {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    margin-top: 10px;
}

/* ROTADOR: contiene el aro y la bolita y es el que gira */
.loader-rotator {
    position: absolute;
    inset: 0;                /* top:0; right:0; bottom:0; left:0; */
    display: block;
    z-index: 1;
    transform-origin: 50% 50%;
    animation: spin 1.5s linear infinite;
}

/* CÍRCULO (aro) - está dentro del rotador, no necesita animación propia */
.loader-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    border: 4px solid #3085d6;
    border-top: 4px solid transparent; /* la "muesca" del aro */
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 15px rgba(48,133,214,0.45);
}

/* PUNTO: colocado en la punta superior del rotador (pegado al inicio del aro) */
.loader-dot {
    position: absolute;
    top: 0;                     /* punta superior del rotador */
    left: 50%;
    transform: translate(-50%, -50%); /* centra la bolita sobre la punta */
    width: 18px;
    height: 18px;
    background: #3085d6;
    border-radius: 50%;
    z-index: 2;                 /* encima del aro, debajo del logo */
    box-shadow: 0 0 8px rgba(48,133,214,0.6);
}

/* LOGO en el centro (fuera del rotador para que no gire) */
.loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    z-index: 3;                 /* encima del aro; ocúpalo según preferencia */
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Animación de pulso (respira) */
@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}

/* Animación de giro (aplica al rotador) */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* TEXTO DEBAJO DEL LOADER */
.swal2-loader-popup h2 {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: 1px;
}

.swal2-loader-popup p {
    margin-top: 5px;
    font-size: 16px;
    color: #666;
    font-family: 'Segoe UI', sans-serif;
}

/* Texto "Cargando..." animado */
.swal2-loader-popup p::after {
    content: "...";
    animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
    0% { content: ""; }
    33% { content: "."; }
    66% { content: ".."; }
    100% { content: "..."; }
}

/* RESPONSIVE (móviles) */
@media (max-width: 480px) {
    .loader-warsoft {
        width: 100px;
        height: 100px;
    }

    .loader-logo {
        width: 80px;
        height: 80px;
    }

    .loader-circle {
        width: 100px;
        height: 100px;
        border-width: 3px;
    }

    .loader-dot {
        width: 12px;
        height: 12px;
    }

    .swal2-loader-popup h2 { font-size: 16px; }
    .swal2-loader-popup p { font-size: 14px; }
}

/* Mostrar solo botón de PC en escritorio */
#btnToggle {
    display: block;
}

#btnMenuMobile {
    display: none;
}

/* En móvil se invierte */
@media(max-width: 768px){
    #btnToggle {
        display: none;
    }
    #btnMenuMobile {
        display: block;
    }
}



/* ===== SELECT MULTIPLE TIPO PRODUCTO ===== */

#dropdownTipoProducto {
    width: 100%;
}

#dropdownTipoProducto .dropdown-trigger {
    width: 100%;
}

#dropdownTipoProducto .dropdown-trigger button {
    width: 100%;
    justify-content: space-between;
    height: 2.5em;
}


/* menú desplegable */
#dropdownTipoProducto .dropdown-menu {
    width: 100%;
}


#dropdownTipoProducto .dropdown-content {
    width: 100%;
}


/*-----------------------------------------------------------------------*/

/*ESTILOS CATALOGO*/

/*=====================================
CATALOGO PUBLICO
=====================================*/
.catalogo-publico{

    max-width:1200px;

    margin:auto;

    padding:20px;

    min-height:100vh;

}


/*=====================================
CABECERA
=====================================*/

.catalogo-header{

    display:flex;

    align-items:center;

    gap:30px;

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    margin-bottom:30px;

}


/*=====================================
LOGO
=====================================*/

.empresa-logo{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

}

.empresa-logo img{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:15px;

    border:1px solid #ececec;

}


/*=====================================
INFORMACION
=====================================*/

.empresa-info{

    flex:1;

}
.empresa-info h1{

    font-size:2rem;

    font-weight:700;

    margin-bottom:15px;

    color:#222;

    text-transform:uppercase;

    line-height:1.2;

}


/*=====================================
BUSCADOR
=====================================*/

#buscarProducto{

    border-radius:12px;

    height:48px;

    font-size:15px;

}

#empresaDirecciones{

    margin-top:10px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.direccion-sede{

    display:inline-flex;

    align-items:center;

    gap:6px;

    background:#f7f7f7;

    border:1px solid #ececec;

    border-radius:30px;

    padding:8px 15px;

    font-size:.9rem;

    color:#555;

    transition:.2s;

}

.direccion-sede:hover{

    background:#f0f7ff;

    border-color:var(--color-principal);

}
.direccion-sede i{

    color:var(--color-principal);

    margin-right:5px;

}

/*=====================================
RESPONSIVE
=====================================*/

@media (max-width:768px){

    .catalogo-header{

        flex-direction:column;

        text-align:center;

    }

    .empresa-logo img{

        width:95px;

        height:95px;

    }

    .empresa-info h1{

        font-size:1.5rem;

    }

}


/* ============================================================
   SELECTOR DE MODO DEL CATÁLOGO
============================================================ */

.catalogo-modo {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 650px;
    margin: 25px auto 30px;
    padding: 6px;
    background: #f5f5f5;
    border-radius: 14px;
}


/* BOTONES */

.catalogo-modo-btn {

    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 52px;

    padding: 12px 20px;

    border: 2px solid transparent;
    border-radius: 10px;

    background: transparent;

    color: #555;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* ICONOS */

.catalogo-modo-btn i {

    font-size: 18px;

    transition:
        transform 0.2s ease;

}


/* HOVER */

.catalogo-modo-btn:hover {

    background: #ffffff;

    color: #333;

}


/* BOTÓN ACTIVO */

.catalogo-modo-btn.activo {

    background: #ffffff;

    color: var(--color-principal);

    box-shadow:
        0 3px 10px rgba(0,0,0,0.08);

}


/* EFECTO ICONO ACTIVO */

.catalogo-modo-btn.activo i {

    transform: scale(1.08);

}


/* CLICK */

.catalogo-modo-btn:active {

    transform: scale(0.98);

}


/* ============================================================
   RESPONSIVE
============================================================ */

@media screen and (max-width: 600px) {

    .catalogo-modo {

        margin: 20px 10px 25px;

        gap: 8px;

        padding: 5px;

        border-radius: 12px;

    }


    .catalogo-modo-btn {

        min-height: 48px;

        padding: 10px 12px;

        font-size: 14px;

        gap: 7px;

    }


    .catalogo-modo-btn i {

        font-size: 16px;

    }

}


/* ============================================================
   DURACIÓN DEL SERVICIO EN AGENDA
============================================================ */

.servicio-duracion{

    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 8px;

    font-size: 14px;
    color: #777;

}

.servicio-duracion i{

    font-size: 13px;

}


/* BOTÓN + DE SERVICIO */

.servicio-agenda-agregar{

    width: 42px;
    min-width: 42px;
    height: 42px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

}

.servicio-agenda-agregar i{

    font-size: 17px;

}


.carrito-duracion{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #777;
}

.carrito-duracion i{
    font-size: 12px;
}



/*=====================================
TARJETAS DE PROFESIONALES
=====================================*/

.pedido-profesionales{
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(300px, 1fr)
    );
    gap: 18px;
    margin-top: 25px;
}


/*=====================================
CARD
=====================================*/

.pedido-profesional{

    position: relative;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e8e8e8;

    border-radius: 18px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;

    box-shadow:
        0 4px 15px rgba(0,0,0,0.06);

}


/*=====================================
HOVER
=====================================*/

.pedido-profesional:hover{

    transform: translateY(-3px);

    border-color: var(--color-principal);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.10);

}


/*=====================================
ICONO
=====================================*/

.pedido-profesional-avatar{

    flex-shrink: 0;

}


.pedido-profesional-icono{

    width: 70px;
    height: 70px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #e0e7ff
        );

    border: 1px solid #dbe3ff;

}


.pedido-profesional-icono i{

    font-size: 28px;

    color: var(--color-principal);

}


/*=====================================
INFORMACIÓN
=====================================*/

.pedido-profesional-info{

    flex: 1;

    min-width: 0;

}


.pedido-profesional-label{

    display: block;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #8a8a8a;

    margin-bottom: 2px;

}


.pedido-profesional-info h4{

    margin: 0;

    font-size: 18px;

    font-weight: 700;

    color: #222;

}


/*=====================================
ESTRELLAS
=====================================*/

.pedido-profesional-estrellas{

    display: flex;

    gap: 3px;

    margin: 5px 0 9px;

}


.pedido-profesional-estrellas i{

    font-size: 12px;

    color: #f5b301!important;

}


/*=====================================
SEDE
=====================================*/

.pedido-profesional-info p{

    display: flex;

    align-items: center;

    gap: 6px;

    margin: 4px 0;

    font-size: 13px;

    color: #555;

}


.pedido-profesional-info p i{

    color: var(--color-principal);

    font-size: 12px;

}


/*=====================================
DIRECCIÓN
=====================================*/

.pedido-profesional-info small{

    display: flex;

    align-items: flex-start;

    gap: 6px;

    color: #888;

    font-size: 12px;

    line-height: 1.4;

}


.pedido-profesional-info small i{

    color: var(--color-principal);

    margin-top: 2px;

}


/*=====================================
FLECHA
=====================================*/

.pedido-profesional-flecha{

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f5f5f5;

    color: #777;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.pedido-profesional:hover
.pedido-profesional-flecha{

    background: #e6f5ff;

    color: #ffffff;

}


/*=====================================
MÓVIL
=====================================*/

@media (max-width: 600px){

    .pedido-profesionales{

        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 20px;

    }


    .pedido-profesional{

        padding: 15px;

        gap: 13px;

        border-radius: 15px;

    }


    .pedido-profesional-icono{

        width: 58px;
        height: 58px;

    }


    .pedido-profesional-icono i{

        font-size: 23px;

    }


    .pedido-profesional-info h4{

        font-size: 16px;

    }


    .pedido-profesional-estrellas{

        margin: 4px 0 7px;

    }


    .pedido-profesional-estrellas i{

        font-size: 10px;

    }


    .pedido-profesional-flecha{

        width: 30px;
        height: 30px;

    }

}


/* ============================================================
   PASO FECHA Y HORA - AGENDA
   ============================================================ */

.agenda-fecha-hora{
    width: 100%;
}


/* ============================================================
   ENCABEZADO
   ============================================================ */

.agenda-fecha-hora .pedido-titulo{
    margin-bottom: 22px;
}

.agenda-fecha-hora .pedido-titulo h3{
    margin-bottom: 6px;
}


/* ============================================================
   PROFESIONAL SELECCIONADO
   ============================================================ */

.agenda-profesional-seleccionado{
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 16px;

    margin-bottom: 22px;

    background: #f7f9fc;

    border: 1px solid #e7ebf0;

    border-radius: 14px;
}

.agenda-profesional-seleccionado-icono{
    width: 46px;
    min-width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--color-principal);

    color: #fff;

    font-size: 19px;
}

.agenda-profesional-seleccionado-info{
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.agenda-profesional-seleccionado-label{
    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .7px;

    color: #8a94a6;

    font-weight: 700;
}

.agenda-profesional-seleccionado-nombre{
    font-size: 16px;

    font-weight: 700;

    color: #363636;
}


/* ============================================================
   DURACIÓN
   ============================================================ */

.agenda-duracion{
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 9px 13px;

    border-radius: 10px;

    background: #f5f7fa;

    color: #6b7280;

    font-size: 13px;

    white-space: nowrap;
}

.agenda-duracion i{
    color: var(--color-principal);

    font-size: 14px;
}

.agenda-duracion strong{
    color: #363636;
}


/* ============================================================
   FECHA
   ============================================================ */

.agenda-fecha{
    margin-bottom: 24px;
}

.agenda-fecha label{
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 700;

    color: #363636;
}

.agenda-fecha label i{
    margin-right: 5px;

    color: var(--color-principal);
}

.agenda-fecha input{
    width: 100%;

    height: 48px;

    border: 1px solid #dfe3e8;

    border-radius: 11px;

    padding: 0 14px;

    font-size: 15px;

    background: #fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.agenda-fecha input:focus{
    outline: none;

    border-color: var(--color-principal);

    box-shadow:
        0 0 0 3px rgba(50,115,220,.10);
}


/* ============================================================
   ENCABEZADO HORARIOS
   ============================================================ */

.agenda-horarios{
    margin-top: 10px;
}

.agenda-horarios-header{
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;

    padding-bottom: 14px;

    border-bottom: 1px solid #edf0f3;
}

.agenda-horarios-header h4{
    margin: 0;

    font-size: 17px;

    font-weight: 700;

    color: #363636;
}

.agenda-horarios-header h4 i{
    color: var(--color-principal);

    margin-right: 6px;
}

.agenda-horarios-header p{
    margin: 4px 0 0;

    font-size: 13px;

    color: #8a94a6;
}


/* ============================================================
   LISTA VERTICAL DE HORARIOS
   ============================================================ */

.agenda-horarios-lista{
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    width: 100%;
}

/* ============================================================
   BOTÓN DE HORA
   ============================================================ */

.agenda-hora{
    width: 100%;

    min-height: 58px;

    display: flex;

    align-items: center;

    text-align: left;

    padding: 9px 14px;

    border: 1px solid #e4e8ed;

    border-radius: 12px;

    background: #fff;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.agenda-hora:hover{
    border-color: var(--color-principal);

    background: #f8fbff;

    box-shadow:
        0 4px 12px rgba(0,0,0,.06);

    transform: translateY(-1px);
}


/* ============================================================
   ICONO
   ============================================================ */

.agenda-hora-icono{
    width: 40px;

    min-width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 13px;

    border-radius: 10px;

    background: #f3f6fa;

    color: var(--color-principal);

    transition:
        background-color .2s ease,
        color .2s ease;
}

.agenda-hora-icono i{
    font-size: 16px;
}


/* ============================================================
   TEXTO DE LA HORA
   ============================================================ */

.agenda-hora-texto{
    flex: 1;

    font-size: 16px;

    font-weight: 700;

    color: #363636;

    letter-spacing: .2px;
}


/* ============================================================
   FLECHA
   ============================================================ */

.agenda-hora-flecha{
    width: 32px;

    min-width: 32px;

    display: flex;

    justify-content: flex-end;

    color: #a0a7b2;

    font-size: 12px;

    transition:
        color .2s ease,
        transform .2s ease;
}

.agenda-hora:hover .agenda-hora-flecha{
    color: var(--color-principal);

    transform: translateX(2px);
}


/* ============================================================
   HORARIO SELECCIONADO
   ============================================================ */

.agenda-hora.seleccionado{
    border-color: var(--color-principal);

    background: #f0f6ff;

    box-shadow:
        0 4px 14px rgba(50,115,220,.14);
}

.agenda-hora.seleccionado
.agenda-hora-icono{
    background: var(--color-principal);

    color: #fff;
}

.agenda-hora.seleccionado
.agenda-hora-texto{
    color: var(--color-principal);
}

.agenda-hora.seleccionado
.agenda-hora-flecha{
    color: var(--color-principal);
}


/* ============================================================
   SIN FECHA
   ============================================================ */

.agenda-sin-fecha{
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 35px 20px;

    border: 1px dashed #dfe3e8;

    border-radius: 14px;

    background: #fafbfc;
}

.agenda-sin-fecha-icono{
    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    border-radius: 50%;

    background: #f1f5f9;

    color: var(--color-principal);

    font-size: 23px;
}

.agenda-sin-fecha h4{
    margin: 0 0 5px;

    font-size: 16px;

    font-weight: 700;
}

.agenda-sin-fecha p{
    margin: 0;

    max-width: 350px;

    color: #8a94a6;

    font-size: 13px;
}


/* ============================================================
   SIN HORARIOS
   ============================================================ */

.agenda-sin-horarios{
    text-align: center;

    padding: 30px 20px;

    border-radius: 14px;

    background: #fff8ed;

    border: 1px solid #f6dfbd;
}

.agenda-sin-horarios-icono{
    font-size: 30px;

    color: #d88a00;

    margin-bottom: 10px;
}

.agenda-sin-horarios h4{
    margin: 0 0 5px;

    font-size: 16px;
}

.agenda-sin-horarios p{
    margin: 0;

    font-size: 13px;

    color: #777;
}


.agenda-hora-ocupado{

    background:
        #fff1f2 !important;

    border-color:
        #ef4444 !important;

    color:
        #dc2626 !important;

    cursor:
        not-allowed !important;

    opacity:
        1 !important;

}


.agenda-hora-ocupado:hover{

    transform:
        none !important;

    box-shadow:
        none !important;

}


.agenda-hora-ocupado
.agenda-hora-icono{

    color:
        #dc2626 !important;

}


.agenda-hora-ocupado
.agenda-hora-flecha{

    color:
        #dc2626 !important;

}


.agenda-hora-ocupado
.agenda-hora-texto{

    color:
        #dc2626 !important;

}


.agenda-hora-ocupado
.agenda-hora-texto
small{

    display:
        block;

    font-size:
        11px;

    font-weight:
        600;

    margin-top:
        2px;

    text-transform:
        uppercase;

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 768px){

    .agenda-horarios-header{
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }

    .agenda-duracion{
        width: 100%;

        justify-content: space-between;

        white-space: normal;
    }

    .agenda-horarios-lista{
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .agenda-hora{
        min-height: 54px;

        padding: 8px 10px;
    }

    .agenda-hora-icono{
        width: 34px;

        min-width: 34px;

        height: 34px;

        margin-right: 8px;
    }

    .agenda-hora-icono i{
        font-size: 14px;
    }

    .agenda-hora-texto{
        font-size: 14px;

        letter-spacing: 0;
    }

    .agenda-hora-flecha{
        width: 20px;

        min-width: 20px;

        font-size: 10px;
    }

}



/* ============================================================
   PASO 4 - DATOS DEL CLIENTE - AGENDA
   ============================================================ */


/* ============================================================
   CONTENEDOR GENERAL DE LOS DATOS DE RESERVA
   ============================================================ */

.agenda-datos-reserva{
    width: 100%;

    margin-bottom: 24px;

    border: 1px solid #e5e9ef;

    border-radius: 14px;

    background: #fafbfc;

    overflow: hidden;
}


/* ============================================================
   ENCABEZADO DEL RESUMEN DE RESERVA
   ============================================================ */

.agenda-datos-reserva-header{
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 16px;

    border-bottom: 1px solid #e8ecf1;

    background: #f5f7fa;
}


.agenda-datos-reserva-icono{
    width: 40px;

    min-width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: var(--color-principal);

    color: #fff;

    font-size: 17px;
}


.agenda-datos-reserva-header > div:last-child{
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.agenda-datos-reserva-header strong{
    font-size: 15px;

    font-weight: 700;

    color: #363636;
}


.agenda-datos-reserva-header span{
    font-size: 12px;

    color: #8a94a6;
}


/* ============================================================
   DATOS DE LA RESERVA
   ============================================================ */

.agenda-datos-reserva-grid{
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0;

    background: #fff;
}


.agenda-datos-reserva-item{
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px 16px;

    min-width: 0;

    border-bottom: 1px solid #edf0f3;
}


.agenda-datos-reserva-item:nth-child(odd){
    border-right: 1px solid #edf0f3;
}


.agenda-datos-reserva-item:nth-last-child(-n+2){
    border-bottom: none;
}


/* ============================================================
   ICONOS DE LOS DATOS
   ============================================================ */

.agenda-datos-reserva-item-icono{
    width: 36px;

    min-width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #f3f6fa;

    color: var(--color-principal);

    font-size: 14px;
}


/* ============================================================
   TEXTO DE LOS DATOS
   ============================================================ */

.agenda-datos-reserva-item > div:last-child{
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.agenda-datos-reserva-item small{
    font-size: 11px;

    color: #8a94a6;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .4px;
}


.agenda-datos-reserva-item strong{
    font-size: 14px;

    font-weight: 700;

    color: #363636;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   SECCIÓN "TUS DATOS"
   ============================================================ */

.agenda-datos-cliente{
    width: 100%;
}


.agenda-datos-cliente-header{
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    padding-bottom: 10px;

    border-bottom: 1px solid #edf0f3;
}


.agenda-datos-cliente-header i{
    color: var(--color-principal);

    font-size: 16px;
}


.agenda-datos-cliente-header span{
    font-size: 16px;

    font-weight: 700;

    color: #363636;
}


/* ============================================================
   CAMPOS
   ============================================================ */

.agenda-datos-cliente .field{
    margin-bottom: 17px;
}


.agenda-datos-cliente .label{
    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 700;

    color: #363636;
}


/* ============================================================
   INPUTS
   ============================================================ */

.agenda-datos-cliente .input,
.agenda-datos-cliente .textarea,
.agenda-datos-cliente .select select{
    border-color: #dfe4ea;

    border-radius: 10px;

    box-shadow: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.agenda-datos-cliente .input{
    height: 46px;

    font-size: 14px;
}


.agenda-datos-cliente .textarea{
    min-height: 90px;

    font-size: 14px;

    resize: vertical;
}


.agenda-datos-cliente .select{
    width: 100%;
}


.agenda-datos-cliente .select select{
    width: 100%;

    height: 46px;

    font-size: 14px;

    background-color: #fff;
}


/* ============================================================
   FOCUS
   ============================================================ */

.agenda-datos-cliente .input:focus,
.agenda-datos-cliente .textarea:focus,
.agenda-datos-cliente .select select:focus{
    border-color: var(--color-principal);

    box-shadow:
        0 0 0 3px rgba(50,115,220,.10);
}


/* ============================================================
   ICONOS DENTRO DE LOS INPUTS
   ============================================================ */

.agenda-datos-cliente .has-icons-left .icon.is-left{
    color: #9aa3af;

    pointer-events: none;
}


.agenda-datos-cliente
.has-icons-left
.input:focus
~ .icon.is-left{
    color: var(--color-principal);
}


/* ============================================================
   TEXTAREA
   ============================================================ */

.agenda-datos-cliente textarea::placeholder{
    color: #a5adb8;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 768px){

    .agenda-datos-reserva{
        margin-bottom: 20px;

        border-radius: 12px;
    }


    .agenda-datos-reserva-header{
        padding: 12px 13px;
    }


    .agenda-datos-reserva-icono{
        width: 37px;

        min-width: 37px;

        height: 37px;

        font-size: 15px;
    }


    .agenda-datos-reserva-header strong{
        font-size: 14px;
    }


    .agenda-datos-reserva-header span{
        font-size: 11px;
    }


    .agenda-datos-reserva-grid{
        grid-template-columns: 1fr;
    }


    .agenda-datos-reserva-item{
        padding: 12px 13px;
    }


    .agenda-datos-reserva-item:nth-child(odd){
        border-right: none;
    }


    .agenda-datos-reserva-item:last-child{
        border-bottom: none;
    }


    .agenda-datos-reserva-item-icono{
        width: 34px;

        min-width: 34px;

        height: 34px;
    }


    .agenda-datos-reserva-item strong{
        font-size: 13px;
    }


    .agenda-datos-cliente-header{
        margin-bottom: 14px;
    }


    .agenda-datos-cliente .field{
        margin-bottom: 15px;
    }


    .agenda-datos-cliente .input{
        height: 44px;
    }


    .agenda-datos-cliente .select select{
        height: 44px;
    }

}


/*=====================================
PRODUCTOS
=====================================*/

.producto-card{

    height:100%;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.25s;

    display:flex;

    flex-direction:column;

}

.producto-card:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}


/*=====================================
IMAGEN
=====================================*/

.producto-imagen{

    width:100%;

    height:220px;

    background:#fafafa;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.producto-imagen img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*=====================================
IMAGEN PRODUCTO CLICKEABLE
=====================================*/

.producto-imagen-click{

    cursor:pointer;

    position:relative;

}

.producto-imagen-click img{

    transition:transform .25s ease;

}

.producto-imagen-click:hover img{

    transform:scale(1.03);

}


/*=====================================
INFO
=====================================*/

.producto-info{

    padding:18px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.producto-info h3{

    font-size:1rem;

    font-weight:600;

    color:#222;

    line-height:1.4;

    min-height:48px;

    margin-bottom:10px;

}

.producto-precio{

    font-size:1.35rem;

    font-weight:bold;

    color:var(--color-secundario);

    margin-bottom:18px;

}

.producto-info .button{

    margin-top:auto;

    border-radius:10px;

}


@media(max-width:768px){

    .producto-card{

        flex-direction:row;

        align-items:stretch;

    }

    .producto-imagen{

        width:130px;

        min-width:130px;

        height:130px;

    }

    .producto-info{

        padding:14px;

    }

    .producto-info h3{

        min-height:auto;

        font-size:.95rem;

        margin-bottom:8px;

    }

    .producto-precio{

        font-size:1.1rem;

        margin-bottom:12px;

    }

}


.producto-acciones{

    display:flex;

    gap:10px;

    margin-top:15px;

}

.producto-acciones .button:first-child{

    flex:1;

}

.producto-acciones .button:last-child{

    width:50px;

}


.modal-producto{

    width:900px;

    max-width:95%;

}

#detalleProducto{

    min-height:350px;

}


/*MODAL DE VER DETALLE DEL PRODUCTO*/

.producto-modal{
    display:grid;
    grid-template-columns:350px 1fr;
    gap:35px;
}

.producto-modal-imagen img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;
}

.stock-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #ececec;
}

.stock-sede{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.stock-sede small{
    display:block;
    color:#777;
}

.stock-cantidad{
    font-weight:700;
}

.precio-modal{
    font-size:2rem;
    font-weight:700;
    color:var(--color-principal);
}

.descripcion-modal{
    margin-top:18px;
    color:#555;
    line-height:1.7;
}

.cantidad-modal{
    display:flex;
    gap:10px;
    margin-top:25px;
}

.cantidad-modal input{
    width:80px;
    text-align:center;
}

@media(max-width:768px){

    .producto-modal{

        grid-template-columns:1fr;

    }

}

/* =========================================
   CARRITO FLOTANTE - PC
   ========================================= */

.carrito-flotante{
    position:fixed;

    right:25px;
    bottom:25px;

    z-index:1000;

    display:flex;
    align-items:center;
    gap:15px;

    padding:14px 18px;

    background:#fff;
    border-radius:16px;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

    cursor:pointer;
    transition:.25s;
}

.carrito-flotante:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,0,0,.20);

}

.carrito-flotante-icono{

    position:relative;

    width:55px;

    height:55px;

    border-radius:50%;

    background:#209cee;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.carrito-flotante-icono span{

    position:absolute;

    top:-4px;

    right:-4px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#ff3860;

    color:#fff;

    font-size:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}

.carrito-flotante-info{

    display:flex;

    flex-direction:column;

    line-height:1.2;

}

.carrito-flotante-info small{

    color:#777;

}

.carrito-flotante-info strong{

    font-size:15px;

}

.carrito-flotante-info span{

    font-size:18px;

    color:var(--color-principal);

    font-weight:700;

}
/* =========================================
   CARRITO FLOTANTE - CELULAR
   ========================================= */

@media (max-width:768px){

    .carrito-flotante{

        left:12px;
        right:20px;

        bottom:12px;
        top:auto;

        width:auto;

        padding:10px 14px;
        gap:10px;

        border-radius:16px;

        box-shadow:0 8px 25px rgba(0,0,0,.20);
    }


    .carrito-flotante-icono{

        width:45px;
        height:45px;

        font-size:20px;

        flex-shrink:0;
    }


    .carrito-flotante-info{

        display:flex;

        flex:1;

        align-items:center;
    }


    .carrito-flotante-info small{
        font-size:11px;
    }


    .carrito-flotante-info strong{
        font-size:13px;
    }


    .carrito-flotante-info span{
        font-size:16px;
    }


    /* Espacio para que el carrito no tape
       el contenido final del catálogo */

    .catalogo-publico{
        padding-bottom:90px;
    }

}

/*CARRITO DE COMPRAS*/

.modal-carrito{

    width:500px;

}


#detalleCarrito{

    max-height:500px;

}


@media(max-width:768px){

    .modal-carrito{

        width:95%;

    }

}


/* CONTENEDOR DE PRODUCTOS DEL CARRITO */

.carrito-producto{

    display:flex;
    align-items:center;
    gap:15px;

    padding:15px 0;

    border-bottom:1px solid #ddd;

}


/* IMAGEN */

.carrito-producto-imagen{

    width:80px;
    height:80px;

    flex-shrink:0;

}


.carrito-producto-imagen img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:10px;

}



/* INFORMACION */

.carrito-producto-info{

    flex:1;

}


.carrito-producto-info h4{

    font-weight:bold;

    margin-bottom:5px;

}


.carrito-precio{

    color:#555;

    margin-bottom:10px;

}



/* BOTONES + - */

.carrito-controles{

    display:flex;

    align-items:center;

    gap:10px;

}


.carrito-cantidad{

    font-weight:bold;

    min-width:25px;

    text-align:center;

}



/* SUBTOTAL */

.carrito-subtotal{

    text-align:right;

    min-width:90px;

}


@media(max-width:600px){


    .carrito-producto{

        gap:10px;

    }


    .carrito-producto-imagen{

        width:65px;
        height:65px;

    }



    .carrito-producto-info h4{

        font-size:14px;

    }



    .carrito-precio{

        font-size:13px;

    }



    .carrito-subtotal{

        font-size:13px;

        min-width:auto;

    }



}


/*CONTENIDO VISTA PUBLICA*/

.publicPage{

    width:100%;

    height:100vh;

    overflow-y:auto;

    background:#fff;

}

/*CATEGORIAS EN VISTA PUBLICA*/

.catalogo-filtros{

    position: sticky;

    top: 0;

    z-index: 40;

    background: #fff;

    padding: 15px 0;

    border-bottom: 1px solid #eee;

}

#contenedorCategorias{

    display:flex;

    gap:10px;

    overflow-x:auto;

    margin-bottom:15px;

    padding-bottom:5px;

}

#contenedorCategorias::-webkit-scrollbar{

    display:none;

}

.categoria-activa{

    box-shadow:0 4px 12px rgba(32,156,238,.35);

}




/*ESTILOS NOTIFICACION TOAST CARRITO*/

/*=====================================
TOAST CARRITO
=====================================*/

.toast-carrito{

    position:fixed;

    top:20px;

    right:20px;

    display:flex;

    align-items:center;

    gap:12px;

    min-width:300px;

    max-width:380px;

    padding:14px 18px;

    background:#fff;

    color:#363636;

    border-left:5px solid #48c774;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    opacity:0;

    visibility:hidden;

    transform:translateY(-20px);

    transition:.25s;

    z-index:99999;

}

.toast-carrito.toast-success{

    border-left-color:#48c774;

}

.toast-carrito.toast-success i{

    color:#48c774;

}

.toast-carrito.toast-error{

    border-left-color:#f14668;

}

.toast-carrito.toast-error i{

    color:#f14668;

}

.toast-carrito.activo{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.toast-carrito i{

    font-size:22px;

    flex-shrink:0;

}

.toast-carrito span{

    font-size:15px;

    font-weight:500;

    line-height:1.3;

}

@media(max-width:768px){

    .toast-carrito{

        left:15px;

        right:15px;

        top:50px;

        min-width:auto;

        max-width:none;

    }

}



/*estilos para el modal para los pedidos*/

/*=====================================
BARRA PASOS PEDIDO
=====================================*/

#barraPasosPedido{

    display:flex;

    justify-content:center;

    gap:15px;

    padding:15px;

    border-bottom:1px solid #eee;

    background:#fafafa;

}

.paso-pedido{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#ddd;

    color:#666;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

    transition:.25s;

}

.paso-pedido.activo{

    background:#1374b4;

    color:#fff;

}

/*=====================================
PASO TIPO ENTREGA
=====================================*/

.pedido-titulo{

    text-align:center;

    margin-bottom:25px;

}

.pedido-titulo h3{

    font-size:24px;

    font-weight:700;

    margin-bottom:8px;

}

.pedido-titulo p{

    color:#777;

}

.pedido-opciones{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.pedido-opcion{

    border:2px solid #e5e5e5;

    border-radius:18px;

    padding:30px;

    cursor:pointer;

    transition:.25s;

    text-align:center;

}

.pedido-opcion:hover{

    border-color:#1374b4;

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.pedido-icono{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#eef4ff;

    display:flex;

    justify-content:center;

    align-items:center;

}

.pedido-icono i{

    font-size:30px;

    color: #1374b4;

}

.pedido-opcion h4{

    font-size:20px;

    margin-bottom:10px;

}

.pedido-opcion p{

    color:#666;

    line-height:1.5;

}

@media(max-width:768px){

    .pedido-opciones{

        grid-template-columns:1fr;

    }

}



/*=====================================
SEDES PEDIDO
=====================================*/

.pedido-sedes{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:20px;

}

.pedido-sede{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    border:1px solid #e5e5e5;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

    background:#fff;

}

.pedido-sede:hover{

    border-color:#3273dc;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.pedido-sede-icono{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#eff5fb;

    color:#1374b4;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.pedido-sede-info{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.pedido-sede-info small{

    color:#666;

}


/*=====================================
RESUMEN DEL PEDIDO
=====================================*/

.resumen-seccion{

    padding:18px;

    margin-bottom:12px;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:12px;

    box-shadow:0 2px 8px rgba(0,0,0,.04);

}


.resumen-seccion h4{

    display:flex;

    align-items:center;

    font-size:15px;

    font-weight:600;

    color:#363636;

    margin-bottom:12px;

}


.resumen-seccion h4 i{

    color:#1374b4;

}


.resumen-seccion p{

    margin-bottom:6px;

    color:#555;

    line-height:1.5;

    overflow-wrap:anywhere;

    word-break:break-word;

}


/*=====================================
SEDE
=====================================*/

.resumen-sede{

    background:#f8fbff;

    border-color:#dceaff;

}


.resumen-sede p{

    color:#555;

}


.resumen-sede strong{

    color:#363636;

}



/* ============================================================
   PASO 5 - RESUMEN DE RESERVA - AGENDA
   ============================================================ */


/* ============================================================
   BLOQUE PRINCIPAL DE LA CITA
   ============================================================ */

.agenda-resumen-cita{
    width: 100%;

    margin-bottom: 20px;

    border: 1px solid #e2e7ed;

    border-radius: 14px;

    background: #fff;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0,0,0,.03);
}


/* ============================================================
   ENCABEZADO
   ============================================================ */

.agenda-resumen-cita-header{
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 17px;

    background: #f5f7fa;

    border-bottom: 1px solid #e8ecf1;
}


.agenda-resumen-cita-icono{
    width: 42px;

    min-width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: var(--color-principal);

    color: #fff;

    font-size: 18px;
}


.agenda-resumen-cita-header > div:last-child{
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.agenda-resumen-cita-header strong{
    font-size: 15px;

    font-weight: 700;

    color: #363636;
}


.agenda-resumen-cita-header span{
    font-size: 12px;

    color: #8a94a6;
}


/* ============================================================
   DATOS DE LA CITA
   ============================================================ */

.agenda-resumen-cita-grid{
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));
}


.agenda-resumen-cita-dato{
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px 16px;

    min-width: 0;

    border-bottom: 1px solid #edf0f3;
}


.agenda-resumen-cita-dato:nth-child(odd){
    border-right: 1px solid #edf0f3;
}


.agenda-resumen-cita-dato:nth-last-child(-n+2){
    border-bottom: none;
}


/* ============================================================
   ICONOS DE LOS DATOS
   ============================================================ */

.agenda-resumen-cita-dato-icono{
    width: 36px;

    min-width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #f3f6fa;

    color: var(--color-principal);

    font-size: 14px;
}


/* ============================================================
   TEXTO DE LOS DATOS
   ============================================================ */

.agenda-resumen-cita-dato > div:last-child{
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.agenda-resumen-cita-dato small{
    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .5px;

    color: #8a94a6;

    font-weight: 700;
}


.agenda-resumen-cita-dato strong{
    font-size: 14px;

    font-weight: 700;

    color: #363636;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   SECCIONES
   ============================================================ */

.agenda-resumen-seccion{
    width: 100%;

    margin-bottom: 16px;

    padding: 16px;

    border: 1px solid #e5e9ef;

    border-radius: 13px;

    background: #fff;
}


/* ============================================================
   ENCABEZADO DE SECCIÓN
   ============================================================ */

.agenda-resumen-seccion-header{
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 13px;

    padding-bottom: 10px;

    border-bottom: 1px solid #edf0f3;
}


.agenda-resumen-seccion-header > div{
    display: flex;

    align-items: center;

    gap: 8px;
}


.agenda-resumen-seccion-header i{
    color: var(--color-principal);

    font-size: 15px;
}


.agenda-resumen-seccion-header span{
    font-size: 15px;

    font-weight: 700;

    color: #363636;
}


/* ============================================================
   CONTADOR DE ELEMENTOS
   ============================================================ */

.agenda-resumen-seccion-contador{
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 25px;

    height: 25px;

    padding: 0 7px;

    border-radius: 20px;

    background: #f0f4f8;

    color: #6b7280;

    font-size: 12px !important;

    font-weight: 700 !important;
}


/* ============================================================
   LISTA DE SERVICIOS / PRODUCTOS
   ============================================================ */

.agenda-resumen-items{
    width: 100%;
}


/* ============================================================
   ELEMENTO INDIVIDUAL
   ============================================================ */

.agenda-resumen-item{
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px 0;

    border-bottom: 1px solid #f0f2f5;
}


.agenda-resumen-item:last-child{
    border-bottom: none;
}


/* ============================================================
   ICONO DEL ELEMENTO
   ============================================================ */

.agenda-resumen-item-icono{
    width: 38px;

    min-width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #f3f6fa;

    color: var(--color-principal);

    font-size: 15px;
}


.agenda-resumen-producto-icono{
    background: #f5f5f5;

    color: #6b7280;
}


/* ============================================================
   INFORMACIÓN
   ============================================================ */

.agenda-resumen-item-info{
    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.agenda-resumen-item-info strong{
    font-size: 14px;

    font-weight: 700;

    color: #363636;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.agenda-resumen-item-info small{
    font-size: 12px;

    color: #8a94a6;
}


.agenda-resumen-item-info small i{
    font-size: 10px;

    margin-right: 2px;

    color: var(--color-principal);
}


/* ============================================================
   SEPARADOR DE INFORMACIÓN
   ============================================================ */

.agenda-resumen-separador{
    margin: 0 5px;

    color: #c5cad1;
}


/* ============================================================
   PRECIO DEL ELEMENTO
   ============================================================ */

.agenda-resumen-item-precio{
    flex-shrink: 0;

    text-align: right;
}


.agenda-resumen-item-precio strong{
    font-size: 14px;

    font-weight: 700;

    color: #363636;
}


/* ============================================================
   SUBTOTAL DE SECCIÓN
   ============================================================ */

.agenda-resumen-subtotal{
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 11px;

    padding-top: 11px;

    border-top: 1px solid #edf0f3;
}


.agenda-resumen-subtotal span{
    font-size: 13px;

    color: #777;
}


.agenda-resumen-subtotal strong{
    font-size: 14px;

    color: #363636;
}


/* ============================================================
   DATOS DEL CLIENTE
   ============================================================ */

.agenda-resumen-cliente{
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 12px;
}


.agenda-resumen-cliente > div{
    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 11px 12px;

    border-radius: 10px;

    background: #f8fafc;
}


.agenda-resumen-cliente small{
    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .4px;

    color: #8a94a6;

    font-weight: 700;
}


.agenda-resumen-cliente strong{
    font-size: 14px;

    color: #363636;

    word-break: break-word;
}


/* ============================================================
   MÉTODO DE PAGO
   ============================================================ */

.agenda-resumen-pago{
    display: inline-flex;

    align-items: center;

    padding: 8px 13px;

    margin: 0;

    border-radius: 20px;

    background: #f3f6fa;

    color: #363636;

    font-size: 13px;

    font-weight: 700;
}


/* ============================================================
   NOTA
   ============================================================ */

.agenda-resumen-nota{
    background: #fafbfc;
}


.agenda-resumen-nota p{
    margin: 0;

    padding: 11px 12px;

    border-radius: 9px;

    background: #f6f8fa;

    color: #666;

    font-size: 13px;

    line-height: 1.5;

    white-space: pre-wrap;

    word-break: break-word;
}


/* ============================================================
   TOTAL GENERAL
   ============================================================ */

.agenda-resumen-total{
    width: 100%;

    margin-top: 4px;

    padding: 16px;

    border-radius: 13px;

    background: #f5f7fa;

    border: 1px solid #e1e6ec;
}


.agenda-resumen-total > div{
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 5px 0;
}


.agenda-resumen-total span{
    font-size: 13px;

    color: #777;
}


.agenda-resumen-total strong{
    font-size: 14px;

    color: #363636;
}


/* ============================================================
   TOTAL FINAL
   ============================================================ */

.agenda-resumen-total-final{
    margin-top: 9px;

    padding-top: 12px !important;

    border-top: 1px solid #dfe4e9;
}


.agenda-resumen-total-final span{
    font-size: 15px;

    font-weight: 700;

    color: #363636;
}


.agenda-resumen-total-final strong{
    font-size: 20px;

    font-weight: 800;

    color: var(--color-principal);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 768px){

    /*=====================================
    CITA
    =====================================*/

    .agenda-resumen-cita{
        border-radius: 12px;

        margin-bottom: 16px;
    }


    .agenda-resumen-cita-header{
        padding: 12px 13px;
    }


    .agenda-resumen-cita-icono{
        width: 38px;

        min-width: 38px;

        height: 38px;

        font-size: 16px;
    }


    .agenda-resumen-cita-header strong{
        font-size: 14px;
    }


    .agenda-resumen-cita-header span{
        font-size: 11px;
    }


    /*=====================================
    DATOS CITA
    =====================================*/

    .agenda-resumen-cita-grid{
        grid-template-columns: 1fr;
    }


    .agenda-resumen-cita-dato{
        padding: 11px 13px;
    }


    .agenda-resumen-cita-dato:nth-child(odd){
        border-right: none;
    }


    .agenda-resumen-cita-dato:last-child{
        border-bottom: none;
    }


    .agenda-resumen-cita-dato-icono{
        width: 34px;

        min-width: 34px;

        height: 34px;
    }


    .agenda-resumen-cita-dato strong{
        font-size: 13px;
    }


    /*=====================================
    SECCIONES
    =====================================*/

    .agenda-resumen-seccion{
        padding: 13px;

        margin-bottom: 13px;

        border-radius: 11px;
    }


    .agenda-resumen-seccion-header{
        margin-bottom: 10px;
    }


    .agenda-resumen-seccion-header span{
        font-size: 14px;
    }


    /*=====================================
    ITEMS
    =====================================*/

    .agenda-resumen-item{
        gap: 9px;

        padding: 9px 0;
    }


    .agenda-resumen-item-icono{
        width: 35px;

        min-width: 35px;

        height: 35px;

        font-size: 14px;
    }


    .agenda-resumen-item-info strong{
        font-size: 13px;
    }


    .agenda-resumen-item-info small{
        font-size: 11px;
    }


    .agenda-resumen-item-precio strong{
        font-size: 13px;
    }


    /*=====================================
    CLIENTE
    =====================================*/

    .agenda-resumen-cliente{
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .agenda-resumen-cliente > div{
        padding: 10px 11px;
    }


    /*=====================================
    TOTAL
    =====================================*/

    .agenda-resumen-total{
        padding: 14px;

        border-radius: 11px;
    }


    .agenda-resumen-total-final strong{
        font-size: 18px;
    }

}


/*=====================================
PRODUCTOS
=====================================*/

.resumen-producto{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:12px 0;

    border-bottom:1px solid #f0f0f0;

}


.resumen-producto:last-child{

    border-bottom:none;

    padding-bottom:0;

}


.resumen-producto:first-child{

    padding-top:0;

}


.resumen-producto > div:first-child{

    min-width:0;

    flex:1;

}


.resumen-producto strong{

    display:block;

    color:#363636;

    overflow-wrap:anywhere;

    word-break:break-word;

}


.resumen-producto small{

    display:block;

    color:#777;

    margin-top:4px;

}


.resumen-producto > strong{

    white-space:nowrap;

}


/*=====================================
COMENTARIO
=====================================*/

.resumen-comentario{

    background:#fafafa;

}


.resumen-comentario p{

    margin:0;

    padding:10px 12px;

    background:#fff;

    border-radius:8px;

    border:1px solid #eee;

    color:#555;

    white-space:normal;

    overflow-wrap:anywhere;

    word-break:break-word;

}


/*=====================================
TOTALES
=====================================*/

.resumen-totales{

    margin-top:18px;

    padding:18px;

    background:#f7f9fc;

    border:1px solid #e5e8ed;

    border-radius:12px;

}


.resumen-totales > div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-bottom:12px;

    color:#555;

}


.resumen-totales > div:last-child{

    margin-bottom:0;

}


.resumen-totales > div strong{

    white-space:nowrap;

    color:#363636;

}


/*=====================================
TOTAL FINAL
=====================================*/

.resumen-total-final{

    border-top:1px solid #d9dde3;

    padding-top:15px;

    margin-top:15px;

    font-size:17px;

    color:#363636 !important;

}


.resumen-total-final span{

    font-weight:600;

}


.resumen-total-final strong{

    font-size:21px;

    font-weight:700;

    color:#1374b4 !important;

}


/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:768px){

    .resumen-seccion{

        padding:15px;

    }


    .resumen-producto{

        gap:10px;

    }


    .resumen-total-final strong{

        font-size:19px;

    }

}




/*=====================================
PAGINACIÓN CATÁLOGO PÚBLICO
=====================================*/

.paginacion-productos{

    margin-top:35px;
    margin-bottom:20px;

    display:flex;
    justify-content:center;

}


/*=====================================
CONTENEDOR PRINCIPAL
=====================================*/

.paginacion-productos .pagination{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

}


/*=====================================
BOTONES ANTERIOR Y SIGUIENTE
=====================================*/

.paginacion-productos .pagination-previous,
.paginacion-productos .pagination-next{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:38px;

    padding:0 14px;

    border:1px solid #e5e7eb;

    border-radius:9px;

    background:#ffffff;

    color:#4b5563;

    font-size:14px;

    font-weight:500;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;

}


/*=====================================
HOVER ANTERIOR Y SIGUIENTE
=====================================*/

.paginacion-productos .pagination-previous:hover,
.paginacion-productos .pagination-next:hover{

    background:#f5f7fa;

    border-color:var(--color-principal);

    color:var(--color-principal);

}


/*=====================================
BOTONES NUMÉRICOS
=====================================*/

.paginacion-productos .pagination-link{

    min-width:38px;

    height:38px;

    border:1px solid #e5e7eb;

    border-radius:9px;

    background:#ffffff;

    color:#4b5563;

    font-size:14px;

    font-weight:500;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;

}


/*=====================================
HOVER NÚMEROS
=====================================*/

.paginacion-productos .pagination-link:hover{

    background:#f5f7fa;

    border-color:var(--color-principal);

    color:var(--color-principal);

}


/*=====================================
PÁGINA ACTUAL
=====================================*/

.paginacion-productos .pagination-link.is-current{

    background:var(--color-principal);

    border-color:var(--color-principal);

    color:#ffffff;

    font-weight:600;

    box-shadow:
        0 3px 8px rgba(0,0,0,.15);

}


/*=====================================
ELLIPSIS
=====================================*/

.paginacion-productos .pagination-ellipsis{

    color:#9ca3af;

    font-weight:600;

    padding:0 3px;

}


/*=====================================
BOTONES DESHABILITADOS
=====================================*/

.paginacion-productos .pagination-previous.is-disabled,
.paginacion-productos .pagination-next.is-disabled{

    background:#f8f9fa;

    border-color:#eeeeee;

    color:#b5b5b5;

    cursor:not-allowed;

    opacity:.75;

}


/*=====================================
QUITAR EFECTOS EN DISABLED
=====================================*/

.paginacion-productos .pagination-previous.is-disabled:hover,
.paginacion-productos .pagination-next.is-disabled:hover{

    background:#f8f9fa;

    border-color:#eeeeee;

    color:#b5b5b5;

}


/*=====================================
RESPONSIVE
=====================================*/

@media screen and (max-width:768px){

    .paginacion-productos{

        margin-top:30px;

    }


    .paginacion-productos .pagination{

        gap:4px;

    }


    .paginacion-productos .pagination-previous,
    .paginacion-productos .pagination-next{

        min-width:38px;

        width:38px;

        padding:0;

        font-size:0;

    }


    .paginacion-productos .pagination-previous i,
    .paginacion-productos .pagination-next i{

        font-size:14px;

        margin:0 !important;

    }


    .paginacion-productos .pagination-link{

        min-width:36px;

        width:36px;

        height:36px;

    }

}

/* ============================================================
   PEDIDOS / RESERVAS - DISEÑO PROFESIONAL WARSOFT
   ============================================================ */

.container-pedidos-catalogo {
    width: 100%;
}


/* ------------------------------------------------------------
   CONTENEDOR DE LAS CARDS
   ------------------------------------------------------------ */

.pedidos-catalogo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}


/* ------------------------------------------------------------
   CARD PRINCIPAL
   ------------------------------------------------------------ */

.pedido-catalogo-card {
    position: relative;
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    box-shadow:
        0 2px 6px rgba(37, 55, 69, 0.04),
        0 8px 24px rgba(37, 55, 69, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

    animation: pedidoCardEntrada 0.35s ease both;
}


/* ------------------------------------------------------------
   IDENTIFICADOR VISUAL DEL ESTADO
   ------------------------------------------------------------ */

/*
 * Ya no usamos una simple barra lateral.
 * El estado ahora tiene presencia en toda la parte superior
 * de la tarjeta.
 */

.pedido-catalogo-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: var(--color-principal);

    z-index: 2;
}


/* ------------------------------------------------------------
   CARD PENDIENTE
   ------------------------------------------------------------ */

.pedido-catalogo-card.estado-pendiente {
    border-color: #f3dfb0;
}

.pedido-catalogo-card.estado-pendiente::before {
    background: linear-gradient(
        90deg,
        #f59e0b,
        #f97316
    );
}


/* ------------------------------------------------------------
   CARD TERMINADA
   ------------------------------------------------------------ */

.pedido-catalogo-card.estado-terminado {
    border-color: #b7e4cf;
}

.pedido-catalogo-card.estado-terminado::before {
    background: linear-gradient(
        90deg,
        #10b981,
        #059669
    );
}


/* ------------------------------------------------------------
   CARD CANCELADA
   ------------------------------------------------------------ */

.pedido-catalogo-card.estado-cancelado {
    border-color: #f3c5c5;
}

.pedido-catalogo-card.estado-cancelado::before {
    background: linear-gradient(
        90deg,
        #ef4444,
        #dc2626
    );
}


/* ------------------------------------------------------------
   HOVER
   ------------------------------------------------------------ */

.pedido-catalogo-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 5px 12px rgba(37, 55, 69, 0.06),
        0 16px 35px rgba(37, 55, 69, 0.10);
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.pedido-catalogo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 19px 20px 15px;

    border-bottom: 1px solid #edf1f5;

    background: #ffffff;
}


/* ------------------------------------------------------------
   NÚMERO DEL PEDIDO
   ------------------------------------------------------------ */

.pedido-catalogo-numero {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pedido-catalogo-numero-icono {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: linear-gradient(
        135deg,
        #e8f4fb,
        #d9edf8
    );

    color: var(--color-principal);

    font-size: 17px;

    border: 1px solid #c9e3f2;
}

.pedido-catalogo-numero-texto {
    display: flex;
    flex-direction: column;
}

.pedido-catalogo-numero-label {
    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.7px;

    color: #94a3b8;
}

.pedido-catalogo-numero-valor {
    font-size: 17px;
    font-weight: 800;

    color: var(--color-secundario);
}


/* ------------------------------------------------------------
   BADGES DE TIPO
   ------------------------------------------------------------ */

.pedido-tipo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 11px;

    border-radius: 8px;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.4px;
}


/* ------------------------------------------------------------
   TIPO COMPRA
   ------------------------------------------------------------ */

.pedido-tipo-compra {
    color: #075985;

    background: #e0f2fe;

    border: 1px solid #bae6fd;
}


/* ------------------------------------------------------------
   TIPO RESERVA
   ------------------------------------------------------------ */

.pedido-tipo-reserva {
    color: var(--color-principal);

    background: #e8f4fb;

    border: 1px solid #c9e3f2;
}


/* ------------------------------------------------------------
   CONTENIDO
   ------------------------------------------------------------ */

.pedido-catalogo-content {
    padding: 18px 20px 20px;
}


/* ------------------------------------------------------------
   CLIENTE
   ------------------------------------------------------------ */

.pedido-cliente {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 17px;
}

.pedido-cliente-icono {
    flex-shrink: 0;

    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f5f9;

    color: var(--color-secundario);

    font-size: 17px;

    border: 1px solid #e2e8f0;
}

.pedido-cliente-info {
    min-width: 0;
}

.pedido-cliente-nombre {
    display: block;

    color: var(--color-secundario);

    font-size: 15px;
    font-weight: 800;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pedido-cliente-telefono {
    display: block;

    margin-top: 2px;

    color: #64748b;

    font-size: 12px;
}


/* ------------------------------------------------------------
   INFORMACIÓN GENERAL
   ------------------------------------------------------------ */

.pedido-info-box {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 12px;

    margin-bottom: 8px;

    border-radius: 10px;

    background: #f8fafc;

    border: 1px solid #e8edf2;
}

.pedido-info-icono {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #ffffff;

    color: #64748b;

    border: 1px solid #e8edf2;

    font-size: 13px;

    box-shadow: 0 2px 5px rgba(37,55,69,0.05);
}

.pedido-info-texto {
    min-width: 0;
}

.pedido-info-label {
    display: block;

    color: #94a3b8;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pedido-info-valor {
    display: block;

    margin-top: 2px;

    color: #334155;

    font-size: 12px;
    font-weight: 700;
}


/* ------------------------------------------------------------
   BLOQUE DE RESERVA
   ------------------------------------------------------------ */

/*
 * Antes era morado.
 * Ahora utiliza el azul corporativo de WARSOFT.
 */

.pedido-reserva-box {
    position: relative;

    margin: 14px 0;

    padding: 15px;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #f2f8fc 0%,
        #eaf4fa 100%
    );

    border: 1px solid #c9e3f2;
}


/* Línea interna superior */

.pedido-reserva-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background: var(--color-principal);

    border-radius: 13px 13px 0 0;
}


.pedido-reserva-titulo {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;

    color: var(--color-principal);

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pedido-reserva-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 9px;
}

.pedido-reserva-dato {
    padding: 9px;

    border-radius: 8px;

    background: rgba(255,255,255,0.75);

    border: 1px solid #d9eaf4;
}

.pedido-reserva-dato-label {
    display: block;

    color: #7b91a0;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
}

.pedido-reserva-dato-valor {
    display: block;

    margin-top: 3px;

    color: var(--color-secundario);

    font-size: 12px;
    font-weight: 800;
}


/* ------------------------------------------------------------
   PROFESIONAL
   ------------------------------------------------------------ */

.pedido-profesional {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 11px;

    color: #256d96;

    font-size: 12px;
    font-weight: 700;
}

.pedido-profesional i {
    font-size: 13px;

    color: var(--color-principal);
}


/* ------------------------------------------------------------
   ENTREGA
   ------------------------------------------------------------ */

.pedido-entrega {
    margin: 14px 0;

    padding: 13px 14px;

    border-radius: 11px;

    background: #f0f7fb;

    border: 1px solid #d5e8f3;
}

.pedido-entrega-titulo {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--color-principal);

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
}

.pedido-entrega-detalle {
    margin-top: 5px;

    color: #475569;

    font-size: 12px;
    line-height: 1.5;
}


/* ------------------------------------------------------------
   PRODUCTOS / SERVICIOS
   ------------------------------------------------------------ */

.pedido-detalles {
    margin-top: 17px;
}

.pedido-detalles-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 9px;

    color: var(--color-secundario);

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pedido-detalles-lista {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pedido-detalle-item {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px;

    border-radius: 9px;

    background: #ffffff;

    border: 1px solid #e8edf2;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.pedido-detalle-item:hover {
    background: #f8fafc;

    border-color: #d8e1e8;
}

.pedido-detalle-icono {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #f1f5f9;

    color: #64748b;

    font-size: 13px;
}

.pedido-detalle-info {
    min-width: 0;

    flex: 1;
}

.pedido-detalle-nombre {
    display: block;

    color: #334155;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pedido-detalle-cantidad {
    display: block;

    margin-top: 2px;

    color: #94a3b8;

    font-size: 10px;
}

.pedido-detalle-precio {
    color: var(--color-secundario);

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
}


/* ------------------------------------------------------------
   TOTAL
   ------------------------------------------------------------ */

.pedido-total-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 18px;

    padding: 15px 16px;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        var(--color-secundario) 0%,
        #31495a 100%
    );

    box-shadow:
        0 5px 15px rgba(37,55,69,0.15);
}

.pedido-total-label {
    color: #cbd5e1;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pedido-total-valor {
    color: #ffffff;

    font-size: 20px;
    font-weight: 900;

    letter-spacing: -0.5px;
}


/* ------------------------------------------------------------
   ESTADO
   ------------------------------------------------------------ */

.pedido-estado {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 15px;

    padding: 10px 11px;

    border-radius: 10px;

    background: #f8fafc;

    border: 1px solid #e8edf2;
}

.pedido-estado-label {
    color: #64748b;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.pedido-estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    border-radius: 7px;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.3px;
}

.pedido-estado-badge i {
    font-size: 7px;
}


/* ------------------------------------------------------------
   ESTADO PENDIENTE
   ------------------------------------------------------------ */

.estado-pendiente-badge {
    color: #92400e;

    background: #fef3c7;

    border: 1px solid #fcd978;

    box-shadow:
        0 2px 6px rgba(245,158,11,0.10);
}


/* ------------------------------------------------------------
   ESTADO TERMINADO
   ------------------------------------------------------------ */

.estado-terminado-badge {
    color: #065f46;

    background: #d1fae5;

    border: 1px solid #8ee6bf;

    box-shadow:
        0 2px 6px rgba(16,185,129,0.10);
}


/* ------------------------------------------------------------
   ESTADO CANCELADO
   ------------------------------------------------------------ */

.estado-cancelado-badge {
    color: #991b1b;

    background: #fee2e2;

    border: 1px solid #f5b5b5;

    box-shadow:
        0 2px 6px rgba(239,68,68,0.10);
}


/* ------------------------------------------------------------
   FOOTER / BOTONES
   ------------------------------------------------------------ */

.pedido-catalogo-footer {
    display: flex;
    gap: 8px;

    padding: 14px 20px 16px;

    border-top: 1px solid #edf1f5;

    background: #fafbfc;
}

.pedido-btn {
    flex: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 38px;

    padding: 8px 12px;

    border-radius: 9px;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.pedido-btn:hover {
    transform: translateY(-1px);
}


/* ------------------------------------------------------------
   BOTÓN VER
   ------------------------------------------------------------ */

.pedido-btn-ver {
    color: var(--color-secundario);

    background: #ffffff;

    border: 1px solid #d8e0e7;
}

.pedido-btn-ver:hover {
    background: #f5f8fa;

    border-color: #c5d1da;

    box-shadow:
        0 3px 8px rgba(37,55,69,0.08);
}


/* ------------------------------------------------------------
   BOTÓN TERMINAR
   ------------------------------------------------------------ */

.pedido-btn-terminar {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #10b981,
        #059669
    );

    border: none;

    box-shadow:
        0 4px 10px rgba(16,185,129,0.20);
}

.pedido-btn-terminar:hover {
    box-shadow:
        0 6px 15px rgba(16,185,129,0.28);
}


/* ------------------------------------------------------------
   BOTÓN CANCELAR
   ------------------------------------------------------------ */

.pedido-btn-cancelar {
    color: #dc2626;

    background: #fff7f7;

    border: 1px solid #f3caca;
}

.pedido-btn-cancelar:hover {
    background: #fff0f0;

    border-color: #efb5b5;
}


/* ------------------------------------------------------------
   ESTADO VACÍO
   ------------------------------------------------------------ */

.pedidos-catalogo-empty {
    grid-column: 1 / -1;

    padding: 60px 25px;

    text-align: center;

    background: #ffffff;

    border: 1px dashed #cbd5e1;

    border-radius: 16px;

    box-shadow:
        0 3px 12px rgba(37,55,69,0.04);
}

.pedidos-catalogo-empty-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #e8f4fb;

    color: var(--color-principal);

    font-size: 28px;

    border: 1px solid #c9e3f2;
}

.pedidos-catalogo-empty h3 {
    margin-bottom: 5px;

    color: var(--color-secundario);

    font-size: 17px;
    font-weight: 800;
}

.pedidos-catalogo-empty p {
    color: #94a3b8;

    font-size: 13px;
}


/* ------------------------------------------------------------
   ANIMACIÓN
   ------------------------------------------------------------ */

@keyframes pedidoCardEntrada {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media screen and (max-width: 1100px) {

    .pedidos-catalogo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* ------------------------------------------------------------
   MÓVIL
   ------------------------------------------------------------ */

@media screen and (max-width: 700px) {

    .pedidos-catalogo-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .pedido-catalogo-header {
        padding: 17px 16px 14px;
    }

    .pedido-catalogo-content {
        padding: 15px 16px 17px;
    }

    .pedido-catalogo-footer {
        padding: 12px 16px 14px;
    }

    .pedido-reserva-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pedido-total-valor {
        font-size: 18px;
    }

}


/* ------------------------------------------------------------
   MÓVIL PEQUEÑO
   ------------------------------------------------------------ */

@media screen and (max-width: 430px) {

    .pedido-catalogo-footer {
        flex-wrap: wrap;
    }

    .pedido-btn-ver {
        flex: 1 1 100%;
    }

    .pedido-btn-terminar,
    .pedido-btn-cancelar {
        flex: 1;
    }

}



/* ============================================================
   MODAL PEDIDO / RESERVA
   ============================================================ */

.modal-pedido-catalogo {
    width: 95%;
    max-width: 1100px;
}


/* ============================================================
   HEADER DEL MODAL
   ============================================================ */

#modalPedidoCatalogo .modal-card-head {
    background: #ffffff;
    border-bottom: 1px solid #e8edf1;
    padding: 18px 24px;
}


#modalPedidoCatalogo .modal-card-title {
    color: #253745;
    font-size: 20px;
    font-weight: 700;
}


/* ============================================================
   BODY
   ============================================================ */

#modalPedidoCatalogo .modal-card-body {
    background: #f7f9fb;
    padding: 24px;
}


/* ============================================================
   RESUMEN GENERAL
   ============================================================ */

.pedido-modal-resumen {
    background: #ffffff;
    border: 1px solid #e4e9ed;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(37, 55, 69, 0.06);
}


.pedido-modal-resumen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid #edf0f2;
}


.pedido-modal-label {
    display: block;
    color: #7b8790;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 4px;
}


.pedido-modal-numero {
    color: #253745;
    font-size: 28px;
    font-weight: 800;
    margin: 0;
}


/* ============================================================
   BADGES
   ============================================================ */

.pedido-modal-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.pedido-tipo-badge,
.pedido-estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
}


.pedido-tipo-compra {
    background: #e8f4fb;
    color: #1374b4;
}


.pedido-tipo-reserva {
    background: #e8f4fb;
    color: #1374b4;
}


.estado-pendiente-badge {
    background: #fff4df;
    color: #b86b00;
}


.estado-terminado-badge {
    background: #e8f7ee;
    color: #16834b;
}


.estado-cancelado-badge {
    background: #fdebec;
    color: #c43d46;
}


/* ============================================================
   INFORMACIÓN DEL CLIENTE
   ============================================================ */

.pedido-modal-cliente {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border: 1px solid #edf1f4;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}


.pedido-modal-cliente-icono {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #e8f4fb;
    color: #1374b4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}


.pedido-modal-cliente strong {
    display: block;
    color: #253745;
    font-size: 15px;
    margin-bottom: 3px;
}


.pedido-modal-cliente span:last-child {
    color: #697780;
    font-size: 13px;
}


/* ============================================================
   GRID DE INFORMACIÓN
   ============================================================ */

.pedido-modal-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}


.pedido-modal-info-item {
    background: #ffffff;
    border: 1px solid #e7ecef;
    border-radius: 10px;
    padding: 13px;
}


.pedido-modal-info-item strong {
    display: block;
    color: #253745;
    font-size: 13px;
}


.pedido-modal-info-item strong i {
    color: #1374b4;
    margin-right: 5px;
}


/* ============================================================
   SECCIÓN PRODUCTOS / SERVICIOS
   ============================================================ */

.pedido-modal-seccion {
    background: #ffffff;
    border: 1px solid #e4e9ed;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(37, 55, 69, 0.06);
}


.pedido-modal-seccion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}


.pedido-modal-seccion-header h3 {
    color: #253745;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 3px;
}


.pedido-modal-seccion-header h3 i {
    color: #1374b4;
}


.pedido-modal-seccion-header p {
    color: #7b8790;
    font-size: 12px;
    margin: 0;
}


/* ============================================================
   BUSCADOR
   ============================================================ */

#buscadorPedidoCatalogo {
    margin-bottom: 18px;
}


.pedido-modal-buscador {
    background: #f6f9fb;
    border: 1px solid #dfe8ed;
    border-radius: 12px;
    padding: 16px;
}


.pedido-modal-buscador .label {
    color: #253745;
    font-size: 13px;
    margin-bottom: 7px;
}


.pedido-modal-buscador .input {
    border-radius: 9px;
    border-color: #d7e0e5;
    box-shadow: none;
}


.pedido-modal-buscador .input:focus {
    border-color: #1374b4;
    box-shadow: 0 0 0 2px rgba(19, 116, 180, 0.08);
}


/* ============================================================
   RESULTADOS DEL BUSCADOR
   ============================================================ */

#resultadosProductoPedidoCatalogo {
    max-height: 280px;
    overflow-y: auto;
}


#resultadosProductoPedidoCatalogo table {
    background: #ffffff;
    margin-bottom: 0;
}


#resultadosProductoPedidoCatalogo tr.sugerencia-producto-pedido {
    cursor: pointer;
    transition: background .15s ease;
}


#resultadosProductoPedidoCatalogo tr.sugerencia-producto-pedido:hover {
    background: #f0f7fb;
}


/* ============================================================
   TABLA DE DETALLES
   ============================================================ */

#detallePedidoCatalogoTabla td {
    vertical-align: middle;
}


#detallePedidoCatalogoTabla strong {
    color: #253745;
}


#detallePedidoCatalogoTabla small {
    font-size: 11px;
}


#detallePedidoCatalogoTabla .icon {
    color: #1374b4;
}


/* ============================================================
   TOTAL
   ============================================================ */

.pedido-modal-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-principal);
    border-radius: 12px;
    padding: 17px 20px;
    margin-top: 18px;
    color: #ffffff;
}


.pedido-modal-total span {
    font-size: 24px;
    font-weight: 600;
}


.pedido-modal-total strong {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
}


/* ============================================================
   COMENTARIO
   ============================================================ */

.pedido-modal-comentario {
    background: #fffdf5;
    border: 1px solid #f1e5b9;
    border-radius: 12px;
    padding: 15px 17px;
    margin-top: 18px;
}


.pedido-modal-comentario strong {
    color: #725d16;
    display: block;
    margin-bottom: 7px;
}


.pedido-modal-comentario p {
    color: #665d3d;
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}


/* ============================================================
   FOOTER
   ============================================================ */

#modalPedidoCatalogo .modal-card-foot {
    background: #ffffff;
    border-top: 1px solid #e8edf1;
    padding: 15px 24px;
    justify-content: flex-end;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 900px){

    .pedido-modal-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media screen and (max-width: 600px){

    .modal-pedido-catalogo {
        width: 96%;
    }


    #modalPedidoCatalogo .modal-card-body {
        padding: 14px;
    }


    .pedido-modal-resumen-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .pedido-modal-badges {
        width: 100%;
    }


    .pedido-modal-info-grid {
        grid-template-columns: 1fr;
    }


    .pedido-modal-seccion-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .pedido-modal-seccion-header .button {
        width: 100%;
    }


    .pedido-modal-total strong {
        font-size: 20px;
        color: #ffffff !important;
    }

}



/* ============================================================
   CONTROL DE CANTIDAD PEDIDO / RESERVA
   ============================================================ */

.pedido-control-cantidad {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pedido-btn-cantidad {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border-radius: 7px;
}

.pedido-btn-cantidad i {
    font-size: 10px;
}

.pedido-cantidad-valor {
    min-width: 32px;
    text-align: center;
    font-weight: 700;
    color: #253745;
    font-size: 14px;
}

.subtotal-detalle-pedido {
    white-space: nowrap;
}

.precio-detalle-pedido {
    white-space: nowrap;
}

@media screen and (max-width: 600px){

    .pedido-control-cantidad {
        gap: 3px;
    }

    .pedido-btn-cantidad {
        width: 27px;
        min-width: 27px;
        height: 27px;
    }

    .pedido-cantidad-valor {
        min-width: 25px;
    }

}



/* ============================================================
   VARIANTES DEL CATÁLOGO
   CARD + MODAL
   ============================================================ */

.catalogo-atributo{
    margin-top: 14px;
}


.catalogo-atributo-titulo{
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #363636;
}


.catalogo-atributo-valores{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}


/* ============================================================
   BOTONES DE TALLAS / ATRIBUTOS
   ============================================================ */

.catalogo-atributo-opcion{

    appearance: none;

    min-width: 30px;
    height: 26px;

    padding: 0 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d9d9d9;
    border-radius: 6px;

    background: #ffffff;
    color: #363636;

    font-size: 0.70rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


/* ============================================================
   HOVER
   ============================================================ */

.catalogo-atributo-opcion:hover{

    border-color: var(--color-principal);

    background: var(--color-principal);

    color: #ffffff;

    transform: translateY(-1px);

}


/* ============================================================
   VARIANTE SELECCIONADA
   ============================================================ */

.catalogo-atributo-opcion.is-selected{

    background: var(--color-principal);

    border-color: var(--color-principal);

    color: #ffffff;

    transform: translateY(-1px);

}


/* ============================================================
   HOVER SOBRE LA SELECCIONADA
   ============================================================ */

.catalogo-atributo-opcion.is-selected:hover{

    background: var(--color-principal);

    border-color: var(--color-principal);

    color: #ffffff;

}


/* ============================================================
   COLORES
   ============================================================ */

.catalogo-color{

    appearance: none;

    width: 32px;
    height: 32px;

    padding: 0;

    border: 2px solid #ffffff;

    border-radius: 50%;

    cursor: pointer;

    box-shadow:
        0 0 0 1px #d9d9d9;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;

}


/* ============================================================
   HOVER COLOR
   ============================================================ */

.catalogo-color:hover{

    transform: scale(1.08);

    box-shadow:
        0 0 0 2px #3273dc;

}


/* ============================================================
   COLOR SELECCIONADO
   ============================================================ */

.catalogo-color.is-selected{

    transform: scale(1.08);

    box-shadow:
        0 0 0 2px #3273dc,
        0 0 0 4px rgba(50,115,220,0.15);

}



/* ========================================================= */
/* CALENDARIO DE RESERVAS */
/* ========================================================= */

.calendario-catalogo-contenedor{

    width: 100%;

    background: #fff;

    border-radius: 12px;

    padding: 20px;

    box-shadow:
        0 2px 12px rgba(0,0,0,0.06);

}


/* ========================================================= */
/* HEADER */
/* ========================================================= */

.calendario-catalogo-header{

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-bottom: 15px;

}


.calendario-catalogo-titulo{

    min-width: 230px;

    text-align: center;

    font-size: 24px;

    font-weight: 700;

}


.calendario-btn-navegacion{

    width: 42px;

    height: 42px;

    border-radius: 50%;

}


/* ========================================================= */
/* BOTÓN HOY */
/* ========================================================= */

.calendario-catalogo-acciones{

    display: flex;

    justify-content: flex-end;

    margin-bottom: 15px;

}


/* ========================================================= */
/* SEMANA */
/* ========================================================= */

.calendario-catalogo-semana{

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    border-bottom:
        1px solid #e5e5e5;

}


.calendario-catalogo-semana > div{

    text-align: center;

    padding: 12px 5px;

    font-size: 12px;

    font-weight: 700;

    color: #777;

}


/* ========================================================= */
/* GRID */
/* ========================================================= */

.calendario-catalogo-grid{

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    border-left:
        1px solid #e5e5e5;

    border-top:
        1px solid #e5e5e5;

}


/* ========================================================= */
/* DÍA */
/* ========================================================= */

.calendario-catalogo-dia{

    min-height: 125px;

    padding: 10px;

    border-right:
        1px solid #e5e5e5;

    border-bottom:
        1px solid #e5e5e5;

    cursor: pointer;

    transition:
        background-color .15s ease;

    position: relative;

}


.calendario-catalogo-dia:hover{

    background-color: #f7f7f7;

}


/* ========================================================= */
/* NÚMERO DEL DÍA */
/* ========================================================= */

.calendario-dia-numero{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    font-size: 14px;

    font-weight: 600;

}


/* ========================================================= */
/* DÍAS OTRO MES */
/* ========================================================= */

.calendario-dia-otro-mes{

    background-color: #fafafa;

    color: #bbb;

    cursor: default;

}


/* ========================================================= */
/* HOY */
/* ========================================================= */

.calendario-dia-hoy
.calendario-dia-numero{

    background-color: #3273dc;

    color: #fff;

    border-radius: 50%;

}


/* ========================================================= */
/* SELECCIONADO */
/* ========================================================= */

.calendario-dia-seleccionado{

    background-color: #f0f7ff;

    box-shadow:
        inset 0 0 0 2px #3273dc;

}


/* ========================================================= */
/* INDICADORES */
/* ========================================================= */

.calendario-dia-indicadores{

    margin-top: 10px;

}


/* ========================================================= */
/* CARGANDO */
/* ========================================================= */

.calendario-catalogo-cargando{

    grid-column: 1 / -1;

    min-height: 300px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #777;

}


/* ========================================================= */
/* RESERVAS */
/* ========================================================= */

.calendario-catalogo-reservas{

    margin-top: 25px;

}


.calendario-catalogo-reservas-vacio{

    background: #fff;

    border-radius: 12px;

    padding: 45px 20px;

    text-align: center;

    box-shadow:
        0 2px 12px rgba(0,0,0,0.05);

}


.calendario-catalogo-reservas-icono{

    font-size: 42px;

    color: #3273dc;

    margin-bottom: 15px;

}


.calendario-catalogo-reservas-vacio h3{

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 8px;

}


.calendario-catalogo-reservas-vacio p{

    color: #777;

}


/* ========================================================= */
/* RESPONSIVE */
/* ========================================================= */

@media screen and (max-width: 768px){

    .calendario-catalogo-contenedor{

        padding: 10px;

    }


    .calendario-catalogo-header{

        gap: 10px;

    }


    .calendario-catalogo-titulo{

        min-width: 170px;

        font-size: 20px;

    }


    .calendario-catalogo-dia{

        min-height: 85px;

        padding: 6px;

    }


    .calendario-dia-numero{

        width: 28px;

        height: 28px;

    }


    .calendario-catalogo-semana > div{

        font-size: 10px;

    }

}

/* ========================================================= */
/* CALENDARIO MÓVIL */
/* ========================================================= */

.calendario-catalogo-movil{

    display: none;

    width: 100%;

}


/* ========================================================= */
/* HEADER MÓVIL */
/* ========================================================= */

.calendario-movil-header{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 15px;

}


.calendario-movil-titulo{

    font-size: 20px;

    font-weight: 700;

}


.calendario-movil-hoy{

    flex-shrink: 0;

}


/* ========================================================= */
/* CONTENEDOR DE FECHAS */
/* ========================================================= */

.calendario-movil-fechas{

    display: flex;

    gap: 8px;

    overflow-x: auto;

    overflow-y: hidden;

    padding: 4px 2px 12px 2px;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

}


/* ========================================================= */
/* OCULTAR BARRA DE SCROLL */
/* ========================================================= */

.calendario-movil-fechas::-webkit-scrollbar{

    height: 4px;

}


.calendario-movil-fechas::-webkit-scrollbar-track{

    background: #f1f1f1;

    border-radius: 10px;

}


.calendario-movil-fechas::-webkit-scrollbar-thumb{

    background: #ccc;

    border-radius: 10px;

}


/* ========================================================= */
/* TARJETA DE FECHA */
/* ========================================================= */

.calendario-movil-fecha{

    flex: 0 0 82px;

    min-width: 82px;

    height: 92px;

    background: #fff;

    border: 1px solid #e5e5e5;

    border-radius: 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition:
        all .15s ease;

    user-select: none;

}


/* ========================================================= */
/* HOVER */
/* ========================================================= */

.calendario-movil-fecha:hover{

    background-color: #f7f7f7;

}


/* ========================================================= */
/* FECHA SELECCIONADA */
/* ========================================================= */

.calendario-movil-fecha-seleccionada{

    background-color: #3273dc;

    border-color: #3273dc;

    color: #fff;

    box-shadow:
        0 3px 8px rgba(50,115,220,.25);

}


.calendario-movil-fecha-seleccionada:hover{

    background-color: #3273dc;

}


/* ========================================================= */
/* HOY */
/* ========================================================= */

.calendario-movil-fecha-hoy{

    border: 2px solid #3273dc;

}


/* ========================================================= */
/* NOMBRE DEL DÍA */
/* ========================================================= */

.calendario-movil-dia{

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    color: #777;

    margin-bottom: 3px;

}


.calendario-movil-fecha-seleccionada
.calendario-movil-dia{

    color: rgba(255,255,255,.9);

}


/* ========================================================= */
/* NÚMERO */
/* ========================================================= */

.calendario-movil-numero{

    font-size: 24px;

    font-weight: 700;

    line-height: 1;

}


/* ========================================================= */
/* MES PEQUEÑO */
/* ========================================================= */

.calendario-movil-mes{

    font-size: 10px;

    color: #888;

    margin-top: 4px;

}


.calendario-movil-fecha-seleccionada
.calendario-movil-mes{

    color: rgba(255,255,255,.85);

}


/* ========================================================= */
/* RESERVAS */
/* ========================================================= */

.calendario-movil-reservas{

    margin-top: 5px;

    font-size: 11px;

    font-weight: 700;

}


.calendario-movil-reservas i{

    margin-right: 2px;

}


/* ========================================================= */
/* SIN RESERVAS */
/* ========================================================= */

.calendario-movil-sin-reservas{

    color: #aaa;

}


/* ========================================================= */
/* CARGANDO */
/* ========================================================= */

.calendario-movil-cargando{

    width: 100%;

    min-height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #777;

}

/* ========================================================= */
/* CALENDARIO ESCRITORIO */
/* ========================================================= */

.calendario-catalogo-escritorio{
    display: block;
}


/* ========================================================= */
/* CALENDARIO MÓVIL */
/* ========================================================= */

.calendario-catalogo-movil{
    display: none;
}


/* ========================================================= */
/* SOLO MÓVIL */
/* ========================================================= */

@media screen and (max-width: 768px){

    /* ----------------------------------------- */
    /* OCULTAR CALENDARIO DE ESCRITORIO */
    /* ----------------------------------------- */

    .calendario-catalogo-escritorio{
        display: none;
    }


    /* ----------------------------------------- */
    /* MOSTRAR CALENDARIO MÓVIL */
    /* ----------------------------------------- */

    .calendario-catalogo-movil{
        display: block;
    }


    /* ----------------------------------------- */
    /* CONTENEDOR */
    /* ----------------------------------------- */

    .calendario-catalogo-contenedor{
        padding: 12px;
    }


    /* ----------------------------------------- */
    /* TARJETAS */
    /* ----------------------------------------- */

    .calendario-movil-fecha{

        flex-basis: 78px;

        min-width: 78px;

        height: 90px;

    }


    .calendario-movil-numero{

        font-size: 23px;

    }

}

/* ========================================================= */
/* INDICADOR DE RESERVAS */
/* ========================================================= */

.calendario-indicador-reservas{

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    background: #eef6ff;

    color: #3273dc;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 600;

}


/* ========================================================= */
/* ICONO */
/* ========================================================= */

.calendario-indicador-reservas i{

    font-size: 10px;

}



/* ========================================================= */
/* CONTENEDOR RESERVAS DEL DÍA */
/* ========================================================= */

.calendario-reservas-dia-contenedor{

    background: #fff;

    border-radius: 12px;

    padding: 20px;

    box-shadow:
        0 2px 12px rgba(0,0,0,0.05);

}


/* ========================================================= */
/* HEADER RESERVAS */
/* ========================================================= */

.calendario-reservas-dia-header{

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

}


.calendario-reservas-dia-header h3{

    margin: 0;

    font-size: 20px;

    font-weight: 700;

}


.calendario-reservas-dia-header p{

    margin-top: 5px;

    color: #777;

}


/* ========================================================= */
/* LISTA */
/* ========================================================= */

.calendario-reservas-lista{

    display: flex;

    flex-direction: column;

    gap: 10px;

}


/* ========================================================= */
/* RESERVA */
/* ========================================================= */

.calendario-reserva-item{

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 15px;

    border: 1px solid #e8e8e8;

    border-radius: 10px;

    cursor: pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .15s ease;

}


.calendario-reserva-item:hover{

    background-color: #f8fbff;

    border-color: #3273dc;

    transform: translateY(-1px);

}


/* ========================================================= */
/* HORA */
/* ========================================================= */

.calendario-reserva-hora{

    min-width: 90px;

    display: flex;

    flex-direction: column;

}


.calendario-reserva-hora strong{

    font-size: 18px;

}


.calendario-reserva-hora span{

    color: #777;

    font-size: 12px;

    margin-top: 3px;

}


/* ========================================================= */
/* INFORMACIÓN */
/* ========================================================= */

.calendario-reserva-info{

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.calendario-reserva-info strong{

    font-size: 15px;

}


.calendario-reserva-info span{

    color: #777;

    font-size: 13px;

}


/* ========================================================= */
/* ESTADO */
/* ========================================================= */

.calendario-reserva-estado{

    font-size: 12px;

    color: #777;

}


/* ========================================================= */
/* FLECHA */
/* ========================================================= */

.calendario-reserva-flecha{

    color: #999;

}


/* ========================================================= */
/* RESPONSIVE */
/* ========================================================= */

@media screen and (max-width: 768px){

    .calendario-reserva-item{

        gap: 10px;

        padding: 12px;

    }


    .calendario-reserva-hora{

        min-width: 65px;

    }


    .calendario-reserva-hora strong{

        font-size: 16px;

    }


    .calendario-reserva-estado{

        display: none;

    }

}


/* ========================================================= */
/* INFORMACIÓN ADICIONAL DE LAS RESERVAS */
/* ========================================================= */

.calendario-reserva-info span{
    display: block;
}

.calendario-reserva-info span i{
    width: 16px;
    margin-right: 4px;
}


/* ========================================================= */
/* TOTAL */
/* ========================================================= */

.calendario-reserva-total{
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.calendario-reserva-total small{
    color: #999;
    font-size: 11px;
    margin-bottom: 3px;
}

.calendario-reserva-total strong{
    font-size: 15px;
    font-weight: 700;
}


/* ========================================================= */
/* RESPONSIVE */
/* ========================================================= */

@media screen and (max-width: 768px){

    .calendario-reserva-total{
        min-width: auto;
        align-items: flex-start;
    }

}


/* ========================================================= */
/* MODAL DE RESERVAS DEL CALENDARIO */
/* ========================================================= */

.calendario-modal-reservas{
    width: 900px;
    max-width: 95%;
    border-radius: 12px;
    overflow: hidden;
}


/* ========================================================= */
/* CABECERA */
/* ========================================================= */

.calendario-modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendario-modal-header > div{
    flex: 1;
}

.calendario-modal-header .modal-card-title{
    margin-bottom: 4px;
    font-size: 22px;
    font-weight: 700;
}

.calendario-modal-subtitulo{
    margin: 0;
    color: #fff;
    font-size: 13px;
}


/* ========================================================= */
/* CONTENIDO */
/* ========================================================= */

.calendario-modal-reservas .modal-card-body{
    padding: 20px;
    max-height: 65vh;
    overflow-y: auto;
}


/* ========================================================= */
/* LISTA */
/* ========================================================= */

.calendario-modal-lista{
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* ========================================================= */
/* RESERVA */
/* ========================================================= */

.calendario-modal-reserva{
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.calendario-modal-reserva:hover{
    background-color: #f8fbff;
    border-color: #3273dc;
    transform: translateY(-1px);
}


/* ========================================================= */
/* HORA */
/* ========================================================= */

.calendario-modal-reserva-hora{
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #eee;
    padding-right: 18px;
}

.calendario-modal-reserva-hora strong{
    font-size: 20px;
    font-weight: 700;
}

.calendario-modal-reserva-hora span{
    margin-top: 4px;
    color: #777;
    font-size: 11px;
}


/* ========================================================= */
/* INFORMACIÓN */
/* ========================================================= */

.calendario-modal-reserva-info{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.calendario-modal-reserva-cliente{
    font-size: 16px;
    font-weight: 700;
}

.calendario-modal-reserva-dato{
    color: #777;
    font-size: 13px;
}

.calendario-modal-reserva-dato i{
    width: 17px;
    text-align: center;
    margin-right: 4px;
}


/* ========================================================= */
/* TOTAL */
/* ========================================================= */

.calendario-modal-reserva-total{
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.calendario-modal-reserva-total small{
    color: #999;
    font-size: 11px;
}

.calendario-modal-reserva-total strong{
    font-size: 16px;
    margin-top: 3px;
}


/* ========================================================= */
/* ESTADO */
/* ========================================================= */

.calendario-modal-reserva-estado{
    min-width: 90px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #777;
}


/* ========================================================= */
/* FLECHA */
/* ========================================================= */

.calendario-modal-reserva-flecha{
    color: #aaa;
    font-size: 14px;
}


/* ========================================================= */
/* CARGANDO */
/* ========================================================= */

.calendario-modal-cargando{
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #777;
}


/* ========================================================= */
/* SIN RESERVAS */
/* ========================================================= */

.calendario-modal-vacio{
    padding: 50px 20px;
    text-align: center;
}

.calendario-modal-vacio-icono{
    font-size: 45px;
    color: #3273dc;
    margin-bottom: 15px;
}

.calendario-modal-vacio h3{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.calendario-modal-vacio p{
    color: #777;
}


/* ========================================================= */
/* FOOTER */
/* ========================================================= */

.calendario-modal-footer{
    justify-content: flex-end;
}



/* ========================================================= */
/* RESPONSIVE */
/* ========================================================= */

@media screen and (max-width: 768px){

    .calendario-modal-reservas{
        width: 95%;
    }

    .calendario-modal-reserva{
        gap: 10px;
        padding: 12px;
        align-items: flex-start;
    }

    .calendario-modal-reserva-hora{
        min-width: 65px;
        padding-right: 10px;
    }

    .calendario-modal-reserva-hora strong{
        font-size: 16px;
    }

    .calendario-modal-reserva-total{
        display: none;
    }

    .calendario-modal-reserva-estado{
        display: none;
    }

    .calendario-modal-reserva-flecha{
        margin-top: 5px;
    }

}


/* ========================================================= */
/* ESTADOS DE RESERVA */
/* ========================================================= */

.calendario-modal-reserva-estado{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-width: 105px;

    padding: 7px 11px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    border: 1px solid transparent;

    white-space: nowrap;

}


/* ========================================================= */
/* CANCELADO */
/* ========================================================= */

.calendario-modal-reserva-estado.estado-cancelado{

    background: #fff0f0;

    color: #dc3545;

    border-color: #ffd1d1;

}


/* ========================================================= */
/* PENDIENTE */
/* ========================================================= */

.calendario-modal-reserva-estado.estado-pendiente{

    background: #fff8df;

    color: #c58a00;

    border-color: #ffe7a3;

}


/* ========================================================= */
/* TERMINADO */
/* ========================================================= */

.calendario-modal-reserva-estado.estado-terminado{

    background: #ecf9f0;

    color: #24934d;

    border-color: #c8efd6;

}


/* ========================================================= */
/* ICONO */
/* ========================================================= */

.calendario-modal-reserva-estado i{

    font-size: 12px;

}


/* ========================================================= */
/* RESPONSIVE FINAL - MODAL RESERVAS */
/* ========================================================= */

@media screen and (max-width: 768px){

    /* ============================================= */
    /* MODAL */
    /* ============================================= */

    #modalReservasCalendario{

        padding: 10px;

    }


    .calendario-modal-reservas{

        width: 100%;

        max-width: 100%;

        margin: 0;

    }


    /* ============================================= */
    /* CARD DE RESERVA */
    /* ============================================= */

    .calendario-modal-reserva{

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: flex-start !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box;

        gap: 12px;

        padding: 12px;

    }


    /* ============================================= */
    /* HORA */
    /* ============================================= */

    .calendario-modal-reserva-hora{

        flex: 0 0 75px !important;

        width: 75px !important;

        min-width: 75px !important;

        max-width: 75px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        box-sizing: border-box;

        padding-right: 10px;

        border-right: 1px solid #eee;

    }


    .calendario-modal-reserva-hora strong{

        font-size: 16px;

        white-space: nowrap;

    }


    .calendario-modal-reserva-hora span{

        font-size: 10px;

        white-space: nowrap;

    }


    /* ============================================= */
    /* INFORMACION */
    /* ============================================= */

    .calendario-modal-reserva-info{

        flex: 1 1 auto !important;

        width: auto !important;

        min-width: 0 !important;

        max-width: none !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 5px;

        overflow: hidden;

    }


    .calendario-modal-reserva-cliente{

        width: 100%;

        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        font-size: 15px;

    }


    .calendario-modal-reserva-dato{

        width: 100%;

        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        font-size: 12px;

    }


    /* ============================================= */
    /* TOTAL */
    /* ============================================= */

    .calendario-modal-reserva-total{

        display: none !important;

    }


    /* ============================================= */
/* ESTADO EN MOVIL */
/* ============================================= */

.calendario-modal-reserva-estado{

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    min-width: auto !important;

    width: auto;

    padding: 5px 7px;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

}


.calendario-modal-reserva-estado i{

    font-size: 9px;

}


/* ============================================= */
/* COLORES DEL ESTADO */
/* ============================================= */

.calendario-modal-reserva-estado.estado-pendiente{

    background: #fff8df;

    color: #c58a00;

    border: 1px solid #ffe7a3;

}


.calendario-modal-reserva-estado.estado-terminado{

    background: #ecf9f0;

    color: #24934d;

    border: 1px solid #c8efd6;

}


.calendario-modal-reserva-estado.estado-cancelado{

    background: #fff0f0;

    color: #dc3545;

    border: 1px solid #ffd1d1;

}


    /* ============================================= */
    /* FLECHA */
    /* ============================================= */

    .calendario-modal-reserva-flecha{

        flex: 0 0 20px !important;

        width: 20px;

        min-width: 20px;

        max-width: 20px;

        margin: 0 !important;

        text-align: center;

        color: #aaa;

    }

}


/* ========================================================= */
/* CELULARES */
/* ========================================================= */

@media screen and (max-width: 480px){

    #modalReservasCalendario{

        padding: 5px;

    }


    .calendario-modal-reserva{

        gap: 9px;

        padding: 10px;

    }


    .calendario-modal-reserva-hora{

        flex: 0 0 68px !important;

        width: 68px !important;

        min-width: 68px !important;

        max-width: 68px !important;

        padding-right: 8px;

    }


    .calendario-modal-reserva-hora strong{

        font-size: 14px;

    }


    .calendario-modal-reserva-hora span{

        font-size: 9px;

    }


    .calendario-modal-reserva-cliente{

        font-size: 14px;

    }


    .calendario-modal-reserva-dato{

        font-size: 11px;

    }


    .calendario-modal-reserva-flecha{

        flex-basis: 16px !important;

        width: 16px;

        min-width: 16px;

        max-width: 16px;

    }

}


/* ========================================================= */
/* CELULARES MUY PEQUEÑOS */
/* ========================================================= */

@media screen and (max-width: 380px){

    .calendario-modal-reserva{

        gap: 7px;

        padding: 9px;

    }


    .calendario-modal-reserva-hora{

        flex: 0 0 62px !important;

        width: 62px !important;

        min-width: 62px !important;

        max-width: 62px !important;

    }


    .calendario-modal-reserva-hora strong{

        font-size: 13px;

    }


    .calendario-modal-reserva-hora span{

        font-size: 8px;

    }


    .calendario-modal-reserva-cliente{

        font-size: 13px;

    }


    .calendario-modal-reserva-dato{

        font-size: 10px;

    }

}


/* ========================================================= */
/* CALENDARIO DE RESERVAS - DISEÑO RESPONSIVE */
/* ========================================================= */


/* ========================================================= */
/* CONTENEDOR PRINCIPAL */
/* ========================================================= */

.calendario-catalogo-container{

    width: 100%;
    max-width: 100%;
    margin: 0 auto;

}


/* ========================================================= */
/* CABECERA DEL CALENDARIO */
/* ========================================================= */

.calendario-catalogo-header{

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;

    flex-wrap: wrap;

}


.calendario-catalogo-header-left{

    display: flex;
    align-items: center;

    gap: 10px;

}


.calendario-catalogo-header-center{

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1;

    min-width: 180px;

}


.calendario-catalogo-header-right{

    display: flex;
    align-items: center;

    gap: 8px;

}


/* ========================================================= */
/* TITULO MES */
/* ========================================================= */

#calendarioCatalogoMes{

    font-size: 1.5rem;
    font-weight: 700;

    margin: 0;

    text-align: center;

}


/* ========================================================= */
/* BOTONES NAVEGACION */
/* ========================================================= */

#calendarioCatalogoAnterior,
#calendarioCatalogoSiguiente{

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

}


#calendarioCatalogoHoy{

    height: 42px;

}


/* ========================================================= */
/* SEMANA */
/* ========================================================= */

.calendario-catalogo-semana{

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    border: 1px solid #e5e7eb;

    border-bottom: none;

    background: #f8f9fa;

}


.calendario-catalogo-semana-dia{

    padding: 12px 8px;

    text-align: center;

    font-size: 0.85rem;

    font-weight: 700;

    color: #4a4a4a;

    border-right: 1px solid #e5e7eb;

}


.calendario-catalogo-semana-dia:last-child{

    border-right: none;

}


/* ========================================================= */
/* GRID PRINCIPAL */
/* ========================================================= */

#calendarioCatalogoGrid{

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;

    background: #fff;

}


/* ========================================================= */
/* CELDA DEL DIA */
/* ========================================================= */

.calendario-catalogo-dia{

    position: relative;

    min-height: 145px;

    padding: 10px;

    background: #fff;

    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;

    overflow: hidden;

}


.calendario-catalogo-dia:hover{

    background: #fafafa;

    box-shadow:
        inset 0 0 0 1px rgba(72, 95, 199, 0.15);

    z-index: 2;

}


/* ========================================================= */
/* NUMERO DEL DIA */
/* ========================================================= */

.calendario-dia-numero{

    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    font-size: 0.9rem;

    font-weight: 600;

    color: #363636;

    margin-bottom: 7px;

}


/* ========================================================= */
/* DIAS DE OTRO MES */
/* ========================================================= */

.calendario-dia-otro-mes{

    background: #fafafa;

    cursor: default;

}


.calendario-dia-otro-mes
.calendario-dia-numero{

    color: #b5b5b5;

}


/* ========================================================= */
/* DIA ACTUAL */
/* ========================================================= */

.calendario-dia-hoy
.calendario-dia-numero{

    background: #485fc7;

    color: #fff;

}


/* ========================================================= */
/* DIA SELECCIONADO */
/* ========================================================= */

.calendario-dia-seleccionado{

    background: #f7f8ff;

    box-shadow:
        inset 0 0 0 2px #485fc7;

    z-index: 3;

}


/* ========================================================= */
/* CONTENEDOR INDICADORES */
/* ========================================================= */

.calendario-dia-indicadores{

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 5px;

}


/* ========================================================= */
/* INDICADOR CANTIDAD */
/* ========================================================= */

.calendario-indicador-reservas{

    display: inline-flex;
    align-items: center;

    width: fit-content;

    max-width: 100%;

    gap: 5px;

    padding: 4px 7px;

    border-radius: 6px;

    background: #eef0ff;

    color: #485fc7;

    font-size: 0.72rem;

    font-weight: 700;

    line-height: 1;

}


.calendario-indicador-reservas i{

    font-size: 0.68rem;

}


/* ========================================================= */
/* LISTA DE RESERVAS */
/* ========================================================= */

.calendario-resumen-reservas{

    display: flex;

    flex-direction: column;

    gap: 3px;

    width: 100%;

}


/* ========================================================= */
/* CADA RESERVA */
/* ========================================================= */

.calendario-resumen-reserva{

    display: flex;
    align-items: center;

    width: 100%;

    min-width: 0;

    gap: 5px;

    padding: 4px 5px;

    border-radius: 5px;

    background: #f5f5f5;

    border-left: 3px solid #485fc7;

    line-height: 1.2;

}


/* ========================================================= */
/* HORA */
/* ========================================================= */

.calendario-resumen-hora{

    flex: 0 0 auto;

    font-size: 0.68rem;

    font-weight: 700;

    color: #485fc7;

    white-space: nowrap;

}


/* ========================================================= */
/* CLIENTE */
/* ========================================================= */

.calendario-resumen-cliente{

    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 0.68rem;

    font-weight: 600;

    color: #363636;

}


/* ========================================================= */
/* + X MAS */
/* ========================================================= */

.calendario-resumen-mas{

    padding: 2px 5px;

    font-size: 0.67rem;

    font-weight: 700;

    color: #7a7a7a;

    white-space: nowrap;

}


/* ========================================================= */
/* MODAL DE RESERVAS DEL DIA */
/* ========================================================= */

#modalReservasCalendario{

    padding: 20px;

}


#modalReservasCalendario
.modal-card{

    width: 100%;

    max-width: 850px;

    max-height: calc(100vh - 40px);

}


#modalReservasCalendario
.modal-card-body{

    overflow-y: auto;

}


/* ========================================================= */
/* RESERVA DENTRO DEL MODAL */
/* ========================================================= */

.calendario-modal-reserva{

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 15px;

    margin-bottom: 10px;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    background: #fff;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;

}


.calendario-modal-reserva:hover{

    background: #fafafa;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.06);

    transform: translateY(-1px);

}


/* ========================================================= */
/* ESTADO RESERVA */
/* ========================================================= */

.calendario-modal-reserva-estado{

    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    border-radius: 6px;

    font-size: 0.72rem;

    font-weight: 700;

    white-space: nowrap;

}



/* ========================================================= */
/* TABLETS */
/* ========================================================= */

@media screen and (max-width: 1024px){

    .calendario-catalogo-dia{

        min-height: 125px;

        padding: 8px;

    }


    .calendario-dia-numero{

        width: 28px;
        height: 28px;

        font-size: 0.85rem;

    }


    .calendario-resumen-hora{

        font-size: 0.62rem;

    }


    .calendario-resumen-cliente{

        font-size: 0.62rem;

    }


    .calendario-resumen-mas{

        font-size: 0.61rem;

    }


    .calendario-indicador-reservas{

        font-size: 0.65rem;

        padding: 4px 6px;

    }

}


/* ========================================================= */
/* TABLETS PEQUEÑAS */
/* ========================================================= */

@media screen and (max-width: 768px){

    .calendario-catalogo-header{

        gap: 10px;

    }


    .calendario-catalogo-header-center{

        order: -1;

        width: 100%;

        flex-basis: 100%;

    }


    #calendarioCatalogoMes{

        font-size: 1.3rem;

    }


    .calendario-catalogo-semana-dia{

        padding: 9px 4px;

        font-size: 0.72rem;

    }


    .calendario-catalogo-dia{

        min-height: 115px;

        padding: 6px;

    }


    .calendario-dia-numero{

        width: 26px;
        height: 26px;

        font-size: 0.78rem;

        margin-bottom: 5px;

    }


    .calendario-resumen-reserva{

        gap: 3px;

        padding: 3px 4px;

        border-left-width: 2px;

    }


    .calendario-resumen-hora{

        font-size: 0.56rem;

    }


    .calendario-resumen-cliente{

        font-size: 0.56rem;

    }


    .calendario-resumen-mas{

        font-size: 0.56rem;

    }


    .calendario-indicador-reservas{

        font-size: 0.58rem;

        padding: 3px 5px;

    }


    .calendario-indicador-reservas i{

        font-size: 0.55rem;

    }

}


/* ========================================================= */
/* CELULARES */
/* ========================================================= */

@media screen and (max-width: 600px){

    .calendario-catalogo-container{

        width: 100%;

        overflow-x: hidden;

    }


    .calendario-catalogo-header{

        display: grid;

        grid-template-columns:
            auto
            1fr
            auto;

        align-items: center;

        gap: 6px;

    }


    .calendario-catalogo-header-center{

        order: initial;

        width: auto;

        min-width: 0;

    }


    .calendario-catalogo-header-left{

        gap: 5px;

    }


    .calendario-catalogo-header-right{

        gap: 5px;

    }


    #calendarioCatalogoMes{

        font-size: 1.05rem;

        white-space: nowrap;

    }


    #calendarioCatalogoAnterior,
    #calendarioCatalogoSiguiente{

        width: 34px;
        height: 34px;

        min-width: 34px;

    }


    #calendarioCatalogoHoy{

        height: 34px;

        padding-left: 8px;
        padding-right: 8px;

        font-size: 0.7rem;

    }


    .calendario-catalogo-semana-dia{

        padding: 7px 2px;

        font-size: 0.62rem;

    }


    .calendario-catalogo-dia{

        min-height: 105px;

        padding: 5px 4px;

    }


    .calendario-dia-numero{

        width: 23px;
        height: 23px;

        font-size: 0.7rem;

        margin-bottom: 4px;

    }


    .calendario-dia-indicadores{

        gap: 3px;

    }


    .calendario-indicador-reservas{

        gap: 3px;

        padding: 3px 4px;

        border-radius: 4px;

        font-size: 0.52rem;

    }


    .calendario-indicador-reservas i{

        font-size: 0.5rem;

    }


    .calendario-resumen-reservas{

        gap: 2px;

    }


    .calendario-resumen-reserva{

        gap: 2px;

        padding: 3px;

        border-radius: 3px;

        border-left-width: 2px;

    }


    .calendario-resumen-hora{

        font-size: 0.49rem;

    }


    .calendario-resumen-cliente{

        font-size: 0.49rem;

    }


    .calendario-resumen-mas{

        padding: 1px 3px;

        font-size: 0.49rem;

    }

}


/* ========================================================= */
/* CELULARES MUY PEQUEÑOS */
/* ========================================================= */

@media screen and (max-width: 400px){

    .calendario-catalogo-header{

        gap: 4px;

    }


    #calendarioCatalogoMes{

        font-size: 0.95rem;

    }


    #calendarioCatalogoAnterior,
    #calendarioCatalogoSiguiente{

        width: 30px;
        height: 30px;

        min-width: 30px;

        font-size: 0.65rem;

    }


    #calendarioCatalogoHoy{

        height: 30px;

        padding-left: 6px;
        padding-right: 6px;

        font-size: 0.62rem;

    }


    .calendario-catalogo-semana-dia{

        font-size: 0.55rem;

        padding: 6px 1px;

    }


    .calendario-catalogo-dia{

        min-height: 92px;

        padding: 4px 3px;

    }


    .calendario-dia-numero{

        width: 21px;
        height: 21px;

        font-size: 0.65rem;

    }


    .calendario-resumen-hora{

        font-size: 0.43rem;

    }


    .calendario-resumen-cliente{

        font-size: 0.43rem;

    }


    .calendario-resumen-mas{

        font-size: 0.43rem;

    }


    .calendario-indicador-reservas{

        font-size: 0.46rem;

        padding: 2px 3px;

    }

}


/* ========================================================= */
/* MODAL RESPONSIVE - TABLET */
/* ========================================================= */

@media screen and (max-width: 768px){

    #modalReservasCalendario{

        padding: 10px;

    }


    #modalReservasCalendario
    .modal-card{

        max-height: calc(100vh - 20px);

    }


    .calendario-modal-reserva{

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

        padding: 12px;

    }

}


/* ========================================================= */
/* MODAL RESPONSIVE - CELULAR */
/* ========================================================= */

@media screen and (max-width: 600px){

    #modalReservasCalendario{

        padding: 5px;

    }


    #modalReservasCalendario
    .modal-card{

        width: 100%;

        max-width: 100%;

        max-height: calc(100vh - 10px);

        margin: 5px;

    }


    #modalReservasCalendario
    .modal-card-head{

        padding: 12px;

    }


    #modalReservasCalendario
    .modal-card-title{

        font-size: 1rem;

    }


    #modalReservasCalendario
    .modal-card-body{

        padding: 10px;

    }


    #modalReservasCalendario
    .modal-card-foot{

        padding: 10px;

        flex-wrap: wrap;

    }


    .calendario-modal-reserva{

        padding: 10px;

        margin-bottom: 8px;

        gap: 7px;

    }


    .calendario-modal-reserva-estado{

        font-size: 0.65rem;

        padding: 4px 6px;

    }

}


/* ========================================================= */
/* EVITAR DESBORDAMIENTOS */
/* ========================================================= */

.calendario-catalogo-container *,
#calendarioCatalogoGrid *{

    box-sizing: border-box;

}


.calendario-catalogo-container{

    overflow-x: hidden;

}


/* ========================================================= */
/* SCROLL SUAVE EN MODAL */
/* ========================================================= */

#modalReservasCalendario
.modal-card-body{

    scrollbar-width: thin;

}


/* ========================================================= */
/* MEJORAS PARA PANTALLAS TACTILES */
/* ========================================================= */

@media (hover: none){

    .calendario-catalogo-dia:hover{

        background: inherit;

        box-shadow: none;

    }


    .calendario-catalogo-dia:active{

        background: #f7f8ff;

    }


    .calendario-modal-reserva:hover{

        transform: none;

        box-shadow: none;

    }


    .calendario-modal-reserva:active{

        background: #f5f5f5;

    }

}



/* ========================================================= */
/* HEADER MODAL GESTIONAR HORARIO EMPLEADO */
/* ========================================================= */

.horario-empleado-modal-header{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}


/* ========================================================= */
/* CONTENIDO DEL TÍTULO */
/* ========================================================= */

.horario-empleado-modal-titulo{

    flex:1;

    text-align:center;

}


/* ========================================================= */
/* TÍTULO */
/* ========================================================= */

.horario-empleado-modal-titulo
.modal-card-title{

    margin:0;

    text-align:center;

}


/* ========================================================= */
/* NOMBRE DEL EMPLEADO */
/* ========================================================= */

.nombre-empleado-horario{

    color:#ffffff !important;

    font-weight:600;

    margin-bottom:0 !important;

    font-size:1.2rem !important;

}


/* ========================================================= */
/* BOTÓN CERRAR */
/* ========================================================= */

.horario-empleado-modal-header
.delete{

    position:absolute;

    right:1.25rem;

    top:50%;

    transform:translateY(-50%);

}

/*=====================================================
                    Media  Queries
======================================================*/
@media (max-width: 768px) {
    .is-fullwidth-mobile {
      width: 100%;
    }
  }
  
  @media (min-width: 769px) {
    .is-medium-desktop {
      max-width: 200px; 
    }
  }

  /* Asegurar que el modal no se corte en pantallas pequeñas */
@media (max-width: 768px) {
    #notifications-modal .modal-content {
        width: 95vw; /* Ajustar el ancho al 95% del ancho de la ventana */
        padding: 0.5rem; /* Reducir el padding en pantallas pequeñas */
        margin-right: 0;
        margin-left: 0;
    }
    
    #notifications-modal .modal-close {
        font-size: 1.2rem; /* Reducir el tamaño del ícono de cerrar */
        right: 5px; /* Ajustar posición respecto al borde derecho */
        top: 5px; /* Ajustar posición respecto al borde superior */
    }
}

/* Adaptar modal PRINCIPAL en pantallas pequeñas */
@media screen and (max-width: 1024px) { /* Tablets y celulares grandes */
    .modal-card {
        width: 95%; /* Ocupa casi todo el ancho */
        max-width: 95%;
    }
}

@media screen and (max-width: 768px) { /* Celulares y tablets pequeñas */
    .modal-card {
        width: 100%;
        max-width: 100%;
        border-radius: 0; /* Quita bordes para usar todo el espacio */
    }
}

/* TABLA REPORTE VENTAS */
@media (max-width: 480px) {
    .scrollable-table {
        max-height: 1000px !important;
    }
}

@media (min-width: 481px) and (max-width: 1500px) {
    .scrollable-table {
        max-height: 1000px !important; 
    }
}