/*
Template Name: MASTEC DIGITAL
Author: LSM
Email: luissantander2002@gmail.com
Color Base:: #fc0038 -> minimalista | #fe082f -> elegante
*/
/*     font-family: Roboto, sans-serif;
*/

html {
    translate: no;
}

.notranslate {
    translate: no;
}

body {
    font-size: 14px;
    color: #545454;
    letter-spacing: 0.2px;
    background: #f7f7ff;
    overflow-x: hidden;
    font-family: Roboto, sans-serif;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

a {
    text-decoration: none;
}

.wrapper {
    width: 100%;
    position: relative;
}

.sidebar-wrapper {
    width: 250px;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    border-right: 0 solid #e4e4e4;
    z-index: 11;
    box-shadow:
        0 2px 6px 0 rgb(218 218 253 / 65%),
        0 2px 6px 0 rgb(206 206 238 / 54%) !important;
    transition: all 0.2s ease-out;
}

.sidebar-header {
    width: 250px;
    height: 61px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    padding: 0 15px;
    z-index: 5;
    background: #fc0038;
    background-clip: padding-box;
    border-bottom: 1px solid #e4e4e4;
    box-shadow: 0 5px 10px rgba(252, 0, 56, 0.25) !important;
}

.logo-icon {
    width: 35px;
}

.logo-text {
    font-size: 22px;
    margin-left: 8px;
    margin-bottom: 0;
    color: white;
}

.toggle-icon {
    margin-left: 20px;
    font-size: 22px;
    cursor: pointer;
    color: white;
}

.topbar {
    position: fixed;
    top: 0;
    left: 250px;
    right: 0;
    height: 60px;
    background: #fc0038;
    border-bottom: 1px solid rgb(228 228 228 / 0%);
    z-index: 10;
    box-shadow: 0 5px 10px rgba(252, 0, 56, 0.25) !important;
}

.topbar .navbar {
    width: 100%;
    height: 60px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.page-wrapper {
    height: 100%;
    margin-top: 60px;
    margin-bottom: 30px;
    margin-left: 250px;
}

.page-dashboard {
    padding: 1.2rem 1.2rem 0.7rem 1.2rem;
}

.page-content {
    padding: 1rem 1rem 0rem 1rem;
}

.page-footer {
    background: #fff;
    left: 250px;
    right: 0;
    bottom: 0;
    position: fixed;
    text-align: center;
    padding: 7px;
    font-size: 14px;
    border-top: 1px solid #e4e4e4;
    z-index: 3;
}

.wrapper.toggled .topbar {
    left: 70px;
}

.wrapper.toggled .page-wrapper {
    margin-left: 70px;
}

.wrapper.toggled .page-footer {
    left: 70px;
}

.sidebar-wrapper ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background: 0 0;
}

.sidebar-wrapper .metismenu {
    background: 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px;
    margin-top: 60px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.sidebar-wrapper .metismenu li + li {
    margin-top: 5px;
}

.sidebar-wrapper .metismenu li:first-child {
    margin-top: 5px;
}

.sidebar-wrapper .metismenu li:last-child {
    margin-bottom: 5px;
}

.sidebar-wrapper .metismenu > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
}

.sidebar-wrapper .metismenu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 6px 16px;
    font-size: 15px;
    color: #5f5f5f;
    outline-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: 0.25rem;
    transition: all 0.3s ease-out;
}

.sidebar-wrapper .metismenu a .parent-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    font-size: 19px;
    line-height: 1;
    box-sizing: border-box;
    color: #344767;
    background-color: #ffffff;
    box-shadow: 4px 4px 5px #aeaeae75;
}

.sidebar-wrapper .metismenu a .menu-title {
    margin-left: 10px;
}

.sidebar-wrapper .metismenu ul a {
    padding: 6px 10px 6px 15px;
    font-size: 15px;
    border: 0;
}

.sidebar-wrapper .metismenu ul a i {
    margin-right: 10px;
}

.sidebar-wrapper .metismenu ul {
    background: #fff;
}

.sidebar-wrapper .metismenu ul ul a {
    padding: 8px 15px 8px 30px;
}

.sidebar-wrapper .metismenu ul ul ul a {
    padding: 8px 15px 8px 45px;
}

/*SE MODIFICO LSM*/
.sidebar-wrapper .metismenu .mm-active > a,
.sidebar-wrapper .metismenu a:active,
.sidebar-wrapper .metismenu a:focus,
.sidebar-wrapper .metismenu a:hover {
    color: #fc0038;
    text-decoration: none;
    border-radius: 10px;
    background: white;
    box-sizing: border-box;
    box-shadow: 5px 5px 10px #aeaeae;
    box-sizing: border-box;
    font-weight: bold;
}

.sidebar-wrapper .metismenu .mm-active > a .parent-icon,
.sidebar-wrapper .metismenu li:hover a .parent-icon {
    color: white;
    background: #fc0038;
}

.menu-label {
    padding: 20px 15px 5px 5px;
    color: #b0afaf;
    text-transform: uppercase;
    font-size: 12px;
}

.metismenu .has-arrow:after {
    position: absolute;
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-style: solid;
    border-width: 1.2px 0 0 1.2px;
    border-color: initial;
    right: 15px;
    transform: rotate(-45deg) translateY(-50%);
    transform-origin: top;
    top: 50%;
    transition: all 0.3s ease-out;
}

@media screen and (min-width: 1025px) {
    .wrapper.toggled:not(.sidebar-hovered)
        .sidebar-wrapper
        .sidebar-header
        .logo-text {
        display: none;
    }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper {
        width: 70px;
    }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        width: 70px;
    }
    .wrapper.toggled:not(.sidebar-hovered)
        .sidebar-wrapper
        .sidebar-header
        .toggle-icon {
        display: none;
    }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        justify-content: center;
    }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        width: 70px;
    }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a {
        justify-content: center;
    }
    .wrapper.toggled:not(.sidebar-hovered)
        .sidebar-wrapper
        .metismenu
        .menu-title {
        display: none;
    }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li ul {
        display: none;
    }
    .wrapper.toggled:not(.sidebar-hovered)
        .sidebar-wrapper
        .metismenu
        li.menu-label {
        display: none;
    }
    .wrapper.toggled:not(.sidebar-hovered)
        .sidebar-wrapper
        .metismenu
        .has-arrow:after {
        display: none;
    }
    .email-toggle-btn {
        display: none !important;
    }
    .chat-toggle-btn {
        display: none !important;
    }
}

/*PRODUCTOS*/
.product-show {
    font-size: 18px;
    left: 15px;
}

.product-stock {
    width: 5.5rem;
    padding: 2px;
    font-size: 14px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    box-shadow:
        0 2px 5px 0 rgba(61, 61, 61, 0.483),
        0 2px 5px 0 rgb(61, 61, 61, 0.483);
}
.product-stock-success {
    background: #17a00e;
    background: -webkit-linear-gradient(to right, #0ed600, #17a00e);
    background: linear-gradient(to right, #0ed600, #17a00e);
}
.product-stock-danger {
    background: #fc0038;
    background: -webkit-linear-gradient(to right, #ff2740, #fc0038);
    background: linear-gradient(to right, #ff2740, #fc0038);
}
.product-stock-info {
    background: #0153a5;
    background: -webkit-linear-gradient(to right, #021b79, #0153a5);
    background: linear-gradient(to right, #021b79, #0153a5);
}

.product-stock-service {
    background: #aa076b;
    background: -webkit-linear-gradient(to right, #61045f, #aa076b);
    background: linear-gradient(to right, #61045f, #aa076b);
}

.color-indigator-item {
    width: 1.2rem;
    height: 1.2rem;
    background-color: #e6e0e0;
    border-radius: 50%;
    cursor: pointer;
}

.product-grid {
    padding-top: 10px;
    max-height: 550px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #fc0038 transparent;
}

.product-grid::-webkit-scrollbar {
    width: 6px;
}

.product-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #fc0038, #ff2740);
    border-radius: 10px;
}

.product-grid > .col {
    display: flex;
    flex-direction: column;
    margin-bottom: 0rem;
}

.product-grid .card {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.164);
    position: relative;
    cursor: pointer;
}
.product-grid .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 10px rgba(255, 11, 64, 0.25);
}
.product-grid .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(252, 0, 56, 0.1),
        transparent
    );
    transition: left 0.4s;
    z-index: 1;
}
.product-grid .card:hover::before {
    left: 100%;
}
/*
CATEGORIA PRODUCTOS
*/
.category-navigation-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
}

.category-nav-btn {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #e1e5e9;
    background-color: #ffffff;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    outline: none;
}

.category-nav-btn:hover {
    background-color: #fc0038;
    border-color: #fc0038;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 4px rgba(252, 0, 56, 0.3);
}

.category-nav-btn:active {
    transform: scale(0.95);
}

.category-content-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.category-scroll-area {
    display: flex;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 8px 4px;
}

.category-item {
    flex-shrink: 0;
    min-width: 110px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    background-color: #ffffff;
    color: #565656;
    cursor: pointer;
    text-transform: uppercase;
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.category-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(252, 0, 56, 0.4);
    border-color: #fc0038;
    color: #fc0038;
}

.category-item.active {
    background: linear-gradient(135deg, #fc0038 0%, #e60032 100%);
    border-color: #fc0038;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(252, 0, 56, 0.4);
    font-weight: 700;
}

.category-item.active:hover {
    box-shadow: 0 3px 8px rgba(252, 0, 56, 0.4);
    transform: translateY(-2px);
}

/* Efectos adicionales */
.category-item:active {
    transform: translateY(0px) scale(0.98);
}

.category-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.category-nav-btn:disabled:hover {
    background-color: #ffffff;
    border-color: #e1e5e9;
    color: #6c757d;
    transform: none;
    box-shadow: 0 3px 8px rgba(252, 0, 56, 0.4);
}

/* Animación suave para el contenedor */
.category-scroll-area {
    transition: transform 0.1s ease;
}

.variant-section {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.3em 0.4em;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #616161;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: linear-gradient(to right, #f3f4f6, #f3f4f6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-to-top {
    display: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 26px;
    color: #fff;
    position: fixed;
    border-radius: 20px;
    bottom: 20px;
    right: 12px;
    background-color: #fc0038;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
    cursor: pointer;
    z-index: 5;
}

.back-to-top:hover {
    color: #fff;
    background-color: #ff0000;
    transform: scale(1.1);
    transition: all 0.5s;
}

.breadcrumb-title {
    font-size: 20px;
    border-right: 1.5px solid #aaa4a4;
}

.page-breadcrumb .breadcrumb li.breadcrumb-item {
    font-size: 16px;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: #6c757d;
    font-family: LineIcons;
    content: "\ea5c";
}

.icon-badge {
    width: 45px;
    height: 45px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.badge-date {
    font-size: 13px;
}

.widgets-icons {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    font-size: 26px;
    border-radius: 10px;
}

.widgets-icons-2 {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    font-size: 27px;
    border-radius: 10px;
}

#geographic-map {
    width: 100%;
    height: 440px;
}

#geographic-map-2 {
    width: 100%;

    height: 300px;
}

#geographic-map-3 {
    width: 100%;

    height: 350px;
}

.product-img {
    width: 60px;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
}

.product-img img {
    width: 60px;
    height: 60px;
    padding: 60px;
}

.product-img-2 {
    width: 45px;
    height: 45px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
}

.product-img-2 img {
    width: 45px;
    height: 45px;
    padding: 1px;
}

.border-light-2 {
    border-color: rgb(255 255 255 / 12%) !important;
}

.product-list {
    position: relative;
    height: 380px;
}

.dashboard-top-countries {
    position: relative;
    height: 360px;
}

.customers-list {
    position: relative;
    height: 450px;
}

.store-metrics {
    position: relative;
    height: 450px;
}

.product-list-2 {
    position: relative;
    height: 450px;
}

.product-list .row {
    background-color: #f8f9fa;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

@media (min-width: 992px) {
    .product-list .row:hover {
        background-color: #fff;
        margin-top: -0.25rem;
        margin-bottom: 0.25rem;
        -webkit-box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);
    }
}

.recent-product-img {
    width: 40px;
    height: 40px;
    background-color: #fbfbfb;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
}

.recent-product-img img {
    width: 40px;
    height: 40px;
    padding: 6px;
}

.theme-icons {
    background-color: #fff;
}

.lead-table .table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.fm-menu .list-group a {
    font-size: 16px;
    color: #5f5f5f;
    display: flex;
    align-items: center;
}

.fm-menu .list-group a i {
    font-size: 23px;
}

.fm-menu .list-group a:hover {
    background: #008cff;
    color: #fff;
    transition: all 0.2s ease-out;
}

.fm-file-box {
    font-size: 25px;
    background: #e9ecef;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

.fm-icon-box {
    font-size: 32px;
    background: #fff;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

.user-plus {
    width: 33px;
    height: 33px;
    margin-left: -14px;
    line-height: 33px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
    cursor: pointer;
    border: 1px dotted #a9b2bb;
    color: #404142;
}

.user-groups img {
    margin-left: -14px;
    border: 1px solid #e4e4e4;
    padding: 2px;
    cursor: pointer;
}

.contacts-social a {
    font-size: 16px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    background: #fff;
    border: 1px solid #eeecec;
    text-align: center;
    border-radius: 50%;
    color: #2b2a2a;
}

.customers-contacts a {
    font-size: 16px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #eeecec;
    text-align: center;
    border-radius: 50%;
    color: #2b2a2a;
}

.order-actions a {
    font-size: 17px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 30%;
}

.order-actions button {
    background-color: white;
    font-size: 17px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 30%;
}

.order-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(100%);
}

.auth-cover-left {
    display: flex;
    background-color: #f7f7ff;
    min-height: 100vh;
}

.auth-cover-right {
    display: flex;
    background-color: #ffffff;
    min-height: 100vh;
}

.auth-img-cover-login {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.error {
    color: #dc3545;
}

form select.error,
form textarea.error,
form input.error,
form input.error:focus,
form textarea.error:focus,
form select.error:focus {
    border-color: #ea5455 !important;
}

.customers-list .customers-list-item {
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

@media (min-width: 992px) {
    .customers-list .customers-list-item:hover {
        background-color: #f8f9fa;
        border-radius: 10px;
        margin-top: -0.25rem;
        margin-bottom: 0.25rem;
        -webkit-box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);
    }
}

.right-15 {
    right: 15px !important;
}

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

.font-14 {
    font-size: 14px;
}

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

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

.font-22 {
    font-size: 22px;
}

.font-24 {
    font-size: 24px;
}

.font-30 {
    font-size: 30px;
}

.font-35 {
    font-size: 35px;
}

.font-50 {
    font-size: 50px;
}

.font-60 {
    font-size: 60px;
}

.radius-30 {
    border-radius: 30px;
}

.radius-10 {
    border-radius: 10px;
}

.radius-15 {
    border-radius: 15px;
}

.row.row-group > div {
    border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.row.row-group > div:last-child {
    border-right: none;
}

.cursor-pointer {
    cursor: pointer;
}

.dash-wrapper {
    margin: -1.5rem -1.5rem -3.5rem -1.5rem;
    padding: 1.5rem 1.5rem 3.5rem 1.5rem;
}

.dash-array-chart-box {
    width: 105px;
    height: 90px;
    position: relative;
    top: -15px;
    right: 30px;
}

.chart-container-0 {
    position: relative;
    height: 320px;
}

.chart-container-1 {
    position: relative;
    height: 260px;
}

.chart-container-2 {
    position: relative;
    height: 220px;
}

.chart-container-3 {
    position: relative;
    height: 188px;
}

.chart-container-4 {
    position: relative;
    height: 162px;
}

.chart-container-5 {
    position: relative;
    height: 110px;
}

.chart-container-6 {
    position: relative;
    height: 205px;
}

.chart-container-7 {
    position: relative;
    height: 60px;
}
.chart-container-8 {
    position: relative;
    height: 260px;
}
.chart-container-9 {
    position: relative;
    height: 280px;
}
.chart-container-10 {
    position: relative;
    height: 300px;
    top: 20px;
}
.chart-container-11 {
    position: relative;
    height: 280px;
}

.chart-container-12 {
    position: relative;
    height: 160px;
}
.chart-container-13 {
    position: relative;
    height: 240px;
}
.chart-container-14 {
    position: relative;
    height: 40px;
}

.w_chart {
    position: relative;
    display: inline-block;
    width: 65px !important;
    height: 65px !important;
    text-align: center;
    color: #32393f;
}

.w_chart canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 65px !important;
    height: 65px !important;
}
.w_percent {
    display: inline-block;
    line-height: 65px !important;
    z-index: 2;
}
.w_percent:after {
    content: "%";
    margin-left: 0.1em;
    font-size: 0.8em;
}

.chip {
    display: inline-block;
    height: 32px;
    padding: 0 12px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    box-shadow: none;
}

.chip img {
    float: left;
    width: 32px;
    height: 32px;
    margin: 0 8px 0 -12px;
    border-radius: 50%;
}

.chip .closebtn {
    padding-left: 10px;
    font-weight: 700;
    float: right;
    font-size: 16px;
    cursor: pointer;
}

.chip.chip-md {
    height: 42px;
    line-height: 42px;
    border-radius: 21px;
}

.chip.chip-md img {
    height: 42px;
    width: 42px;
}

#invoice {
    padding: 0;
}

.invoice {
    position: relative;
    background-color: #fff;
    min-height: 680px;
    padding: 15px;
}

.invoice header {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #008cff;
}

.invoice .company-details {
    text-align: right;
}

.invoice .company-details .name {
    margin-top: 0;
    margin-bottom: 0;
}

.invoice .contacts {
    margin-bottom: 20px;
}

.invoice .invoice-to {
    text-align: left;
}

.invoice .invoice-to .to {
    margin-top: 0;
    margin-bottom: 0;
}

.invoice .invoice-details {
    text-align: right;
}

.invoice .invoice-details .invoice-id {
    margin-top: 0;
    color: #008cff;
}

.invoice main {
    padding-bottom: 50px;
}

.invoice main .thanks {
    margin-top: -100px;
    font-size: 2em;
    margin-bottom: 50px;
}

.invoice main .notices {
    padding-left: 6px;
    border-left: 6px solid #008cff;
    background: #e7f2ff;
    padding: 10px;
}

.invoice main .notices .notice {
    font-size: 1.2em;
}

.invoice table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
}

.invoice table td,
.invoice table th {
    padding: 15px;
    background: #eee;
    border-bottom: 1px solid #fff;
}

.invoice table th {
    white-space: nowrap;
    font-weight: 400;
    font-size: 16px;
}

.invoice table td h3 {
    margin: 0;
    font-weight: 400;
    color: #008cff;
    font-size: 1.2em;
}

.invoice table .qty,
.invoice table .total,
.invoice table .unit {
    text-align: right;
    font-size: 1.2em;
}

.invoice table .no {
    color: #fff;
    font-size: 1.6em;
    background: #008cff;
}

.invoice table .unit {
    background: #ddd;
}

.invoice table .total {
    background: #008cff;
    color: #fff;
}

.invoice table tbody tr:last-child td {
    border: none;
}

.invoice table tfoot td {
    background: 0 0;
    border-bottom: none;
    white-space: nowrap;
    text-align: right;
    padding: 10px 20px;
    font-size: 1.2em;
    border-top: 1px solid #aaa;
}

.invoice table tfoot tr:first-child td {
    border-top: none;
}

.invoice table tfoot tr:last-child td {
    color: #008cff;
    font-size: 1.4em;
    border-top: 1px solid #008cff;
}

.invoice table tfoot tr td:first-child {
    border: none;
}

.invoice footer {
    width: 100%;
    text-align: center;
    color: #777;
    border-top: 1px solid #aaa;
    padding: 8px 0;
}

@media print {
    .invoice {
        font-size: 11px !important;
        overflow: hidden !important;
    }
    .invoice footer {
        position: absolute;
        bottom: 10px;
        page-break-after: always;
    }
    .invoice > div:last-child {
        page-break-before: always;
    }
}

.main-row {
    height: 100vh;
}

.main-col {
    max-width: 500px;
    min-height: 300px;
}

.todo-done {
    text-decoration: line-through;
}

.chat-wrapper {
    width: auto;
    height: 600px;
    border-radius: 0.25rem;
    position: relative;
    background: #fff;
    box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
}

.chat-sidebar {
    width: 340px;
    height: 100%;
    position: absolute;
    background: #fff;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, 0.125);
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.chat-sidebar-header {
    width: auto;
    height: auto;
    position: relative;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-right: 0 solid rgba(0, 0, 0, 0.125);
    border-top-left-radius: 0.25rem;
    padding: 15px;
}

.chat-sidebar-content {
    padding: 0;
}

.chat-user-online {
    position: relative;
}

.chat-sidebar-header .chat-user-online:before {
    content: "";
    position: absolute;
    bottom: 7px;
    left: 40px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e;
}

.chat-list .chat-user-online:before {
    content: "";
    position: absolute;
    bottom: 7px;
    left: 36px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e;
}

.chat-content {
    margin-left: 340px;
    padding: 85px 15px 15px 15px;
}

.chat-header {
    position: absolute;
    height: 70px;
    left: 340px;
    right: 0;
    top: 0;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-top-right-radius: 0.25rem;
    z-index: 1;
}

.chat-footer {
    position: absolute;
    height: 70px;
    left: 340px;
    right: 0;
    bottom: 0;
    padding: 15px;
    background: #f8f9fa;
    border-top: 1px solid rgba(0, 0, 0, 0.125);
    border-bottom-right-radius: 0.25rem;
}

.chat-footer-menu a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #6c757d;
    text-align: center;
    border-radius: 50%;
    margin: 3px;
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / 15%);
}

.chat-tab-menu li a.nav-link {
    padding: 0.3rem 0.2rem;
    line-height: 1.2;
    color: #4a4b4c;
}

.chat-tab-menu .nav-pills .nav-link.active,
.chat-tab-menu .nav-pills .show > .nav-link {
    color: #008cff;
    background-color: rgb(0 123 255 / 0%);
}

.chat-title {
    font-size: 14px;
    color: #272b2f;
}

.chat-msg {
    font-size: 13px;
    color: #6c757d;
}

.chat-time {
    font-size: 13px;
    color: #6c757d;
}

.chat-list {
    position: relative;
    height: 300px;
}

.chat-list .list-group-item {
    border: 1px solid rgb(0 0 0 / 0%);
    background-color: transparent;
}

.chat-list .list-group-item:hover {
    border: 1px solid rgb(0 0 0 / 0%);
    background-color: rgb(13 110 253 / 0.12);
}

.chat-list .list-group-item.active {
    background-color: rgb(13 110 253 / 0.12);
}

.chart-online {
    color: #16e15e;
}

.chat-top-header-menu a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #6c757d;
    text-align: center;
    border-radius: 50%;
    margin: 3px;
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / 15%);
}

.chat-content {
    position: relative;
    width: auto;
    height: 520px;
}

.chat-content-leftside .chat-left-msg {
    width: fit-content;
    background-color: #eff2f5;
    padding: 0.8rem;
    border-radius: 12px;
    max-width: 480px;
    text-align: left;
    border-top-left-radius: 0;
}

.chat-content-rightside .chat-right-msg {
    width: fit-content;
    background-color: #dcedff;
    padding: 0.8rem;
    border-radius: 12px;
    float: right;
    max-width: 480px;
    text-align: left;
    border-bottom-right-radius: 0;
}

.chat-toggle-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    text-align: center;
    font-size: 24px;
    color: #6c757d;
    border-radius: 50%;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / 15%);
}

.email-wrapper {
    width: auto;
    height: 600px;
    overflow: hidden;
    border-radius: 0.25rem;
    position: relative;
    background: #fff;
    box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1);
}

.email-sidebar {
    width: 250px;
    height: 100%;
    position: absolute;
    background: #fff;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, 0.125);
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.email-sidebar-header {
    width: auto;
    height: auto;
    position: relative;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-right: 0 solid rgba(0, 0, 0, 0.125);
    border-top-left-radius: 0.25rem;
    padding: 15px;
}

.email-navigation {
    position: relative;
    padding: 0;
    height: 345px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.email-header {
    position: absolute;
    height: 70px;
    left: 250px;
    right: 0;
    top: 0;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-top-right-radius: 0.25rem;
    z-index: 1;
}

.email-content {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: 70px;
    height: auto;
    margin-left: 250px;
    padding: 0;
    background: #fff;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.email-navigation a.list-group-item {
    color: #404142;
    padding: 0.35rem 1.25rem;
    background-color: #fff;
    border-bottom: 1px solid rgb(0 0 0 / 0%);
    transition: all 0.3s ease-out;
}

.email-navigation a.list-group-item:hover {
    background-color: rgb(13 110 253 / 0.12);
}

.email-navigation a.list-group-item.active {
    color: #0b5ed7;
    font-weight: 600;
    background-color: rgb(13 110 253 / 0.12);
}

.email-meeting {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.email-meeting a.list-group-item {
    color: #404142;
    padding: 0.35rem 1.25rem;
    background-color: #fff;
    border-bottom: 1px solid rgb(0 0 0 / 0%);
}

.email-meeting a.list-group-item:hover {
    background-color: rgb(0 123 255 / 15%);
    transition: all 0.3s ease-out;
}

.email-hangout .chat-user-online:before {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 45px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e;
}

.email-toggle-btn {
    width: auto;
    height: auto;
    margin-right: 10px;
    text-align: center;
    font-size: 24px;
    color: #404142;
    border-radius: 0;
    cursor: pointer;
    background-color: #fff;
    border: 0 solid rgb(0 0 0 / 15%);
}

.email-actions {
    width: 230px;
}

.email-time {
    font-size: 13px;
    color: #6c757d;
}

.email-list div.email-message {
    background: #fff;
    border-bottom: 1px solid rgb(0 0 0 / 8%);
    color: #383a3c;
}

.email-list div.email-message:hover {
    transition: all 0.2s ease-out;
    background-color: #eceef1;
}

.email-list {
    position: relative;
    height: 530px;
}

.email-star {
    color: #6c757d;
}

.email-read-box {
    position: relative;
    height: 530px;
}

.compose-mail-popup {
    width: 42%;
    position: fixed;
    bottom: -30px;
    right: 30px;
    z-index: 15;
    display: none;
}

.compose-mail-toggled {
    display: block;
}

.compose-mail-title {
    font-size: 16px;
}

.compose-mail-close {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    border-radius: 2px;
    background-color: rgb(255 255 255 / 0%);
}

.compose-mail-close:hover {
    background-color: rgb(255 255 255 / 20%);
}

.nav-primary.nav-tabs .nav-link.active {
    color: #008cff;
    border-color: #008cff #008cff #fff;
}

.nav-danger.nav-tabs .nav-link.active {
    color: #f41127;
    border-color: #f41127 #f41127 #fff;
}

.nav-success.nav-tabs .nav-link.active {
    color: #17a00e;
    border-color: #17a00e #17a00e #fff;
}

.nav-warning.nav-tabs .nav-link.active {
    color: #ffc107;
    border-color: #ffc107 #ffc107 #fff;
}

.nav-pills-danger.nav-pills .nav-link.active {
    color: white;
    border-bottom: 2px solid white;
}

.nav-pills-success.nav-pills .nav-link.active {
    color: #fff;
    background-color: #17a00e;
}

.nav-pills-warning.nav-pills .nav-link.active {
    color: #4c5258;
    background-color: #ffc107;
}

.nav-search input.form-control {
    background-color: rgb(255 255 255 / 20%);
    border: 1px solid rgb(255 255 255 / 45%);
    color: #fff;
}

.nav-search button[type="submit"] {
    background-color: rgb(255 255 255 / 20%);
    border: 1px solid rgb(255 255 255 / 32%);
    color: #fff;
}

.nav-search input.form-control::placeholder {
    opacity: 0.5 !important;
    color: #fff !important;
}

.nav-search input.form-control::-ms-input-placeholder {
    color: #fff !important;
}

.round-pagination.pagination .page-item:first-child .page-link {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.round-pagination.pagination .page-item:last-child .page-link {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.bg-body {
    background-color: #f7f7ff !important;
}
.bg-light-primary {
    background-color: rgb(13 110 253 / 0.11) !important;
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.25);
}

.bg-light-success {
    background-color: rgb(23 160 14 / 0.11) !important;
    box-shadow: 0 4px 8px rgba(23, 160, 14, 0.25);
}

.bg-light-danger {
    background-color: rgb(244 17 39 / 0.11) !important;
    box-shadow: 0 4px 8px rgba(244, 17, 39, 0.25);
}

.bg-light-warning {
    background-color: rgb(255 193 7 / 0.11) !important;
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.25);
}

.bg-light-info {
    background-color: rgb(13 202 240 / 0.18) !important;
    box-shadow: 0 4px 8px rgba(13, 202, 240, 0.25);
}

.bg-light-orange {
    background-color: rgba(255, 123, 0, 0.278) !important;
    box-shadow: 0 4px 8px rgba(255, 123, 0, 0.25);
}

.text-orange {
    color: #ff8c00 !important; /* naranja oscuro */
}

.bg-light-transparent {
    background-color: rgb(0 0 0 / 15%) !important;
}

.bg-light-deepblue {
    background-color: #6b11cb51 !important;
}

.bg-gradient-deepblue {
    background: #6a11cb;
    background: -webkit-linear-gradient(45deg, #6a11cb, #2575fc) !important;
    background: linear-gradient(45deg, #6a11cb, #2575fc) !important;
}

.bg-gradient-orange {
    background: #fc4a1a;
    background: -webkit-linear-gradient(45deg, #fc4a1a, #f7b733) !important;
    background: linear-gradient(45deg, #fc4a1a, #f7b733) !important;
}

.bg-gradient-ohhappiness {
    background: #00b09b;
    background: -webkit-linear-gradient(45deg, #00b09b, #96c93d) !important;
    background: linear-gradient(45deg, #00b09b, #96c93d) !important;
}

.bg-gradient-ibiza {
    background: #ee0979;
    background: -webkit-linear-gradient(45deg, #ee0979, #ff6a00) !important;
    background: linear-gradient(45deg, #ee0979, #ff6a00) !important;
}

.bg-gradient-scooter {
    background: #17ead9;
    background: -webkit-linear-gradient(45deg, #17ead9, #6078ea) !important;
    background: linear-gradient(45deg, #17ead9, #6078ea) !important;
}

.bg-gradient-bloody {
    background: #f54ea2;
    background: -webkit-linear-gradient(45deg, #f54ea2, #ff7676) !important;
    background: linear-gradient(45deg, #f54ea2, #ff7676) !important;
}

.bg-gradient-quepal {
    background: #42e695;
    background: -webkit-linear-gradient(45deg, #42e695, #3bb2b8) !important;
    background: linear-gradient(45deg, #42e695, #3bb2b8) !important;
}

.bg-gradient-blooker {
    background: #ffdf40;
    background: -webkit-linear-gradient(45deg, #ffdf40, #ff8359) !important;
    background: linear-gradient(45deg, #ffdf40, #ff8359) !important;
}

.bg-gradient-cosmic {
    background: linear-gradient(to right, #8e2de2, #4a00e0) !important;
}

.bg-gradient-burning {
    background: linear-gradient(to right, #ff416c, #ff4b2b) !important;
}

.bg-gradient-lush {
    background: linear-gradient(to right, #56ab2f, #a8e063) !important;
}

.bg-gradient-kyoto {
    background: linear-gradient(to right, #f7971e, #ffd200) !important;
}

.bg-gradient-blues {
    background: linear-gradient(to right, #56ccf2, #2f80ed) !important;
}

.bg-gradient-moonlit {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364) !important;
}

.split-bg-primary {
    background-color: #0c62e0;
    border-color: #0c62e0;
}

.split-bg-secondary {
    background-color: #515a62;
    border-color: #515a62;
}

.split-bg-success {
    background-color: #128e0a;
    border-color: #128e0a;
}

.split-bg-info {
    background-color: #0bb2d3;
    border-color: #0bb2d3;
}

.split-bg-warning {
    background-color: #e4ad07;
    border-color: #e4ad07;
}

.split-bg-danger {
    background-color: #e20e22;
    border-color: #e20e22;
}

.bg-facebook {
    background-color: #3b5998 !important;
}

.bg-twitter {
    background-color: #55acee !important;
}

.bg-google {
    background-color: #e52d27 !important;
}

.bg-linkedin {
    background-color: #0976b4 !important;
}

/* Text Color */

.text-option {
    color: #32393f !important;
}

.text-facebook {
    color: #3b5998 !important;
}

.text-twitter {
    color: #55acee !important;
}

.text-youtube {
    color: #e52d27 !important;
}

.text-sky-light {
    color: #b4d2ff;
}

.section-authentication-signin {
    height: 100vh;
}

.authentication-forgot {
    height: 100vh;
    padding: 0 1rem;
}

.authentication-reset-password {
    height: 100vh;
    padding: 0 1rem;
}

.authentication-lock-screen {
    height: 100vh;
    padding: 0 1rem;
}

.error-404 {
    height: 100vh;
    padding: 0 1rem;
}

.error-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    margin: 5px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.bg-login {
    background-image: url(../images/login-images/bg-login-img.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.bg-forgot {
    background-image: url(../images/login-images/bg-forgot-password.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.bg-lock-screen {
    background-image: url(../images/login-images/bg-lock-screen.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.login-separater span {
    position: relative;
    top: 26px;
    margin-top: -10px;
    background-color: #fff;
    padding: 5px;
    font-size: 12px;
    color: #cbcbcb;
    z-index: 1;
}

.btn i {
    vertical-align: middle;
    font-size: 1.3rem;
    margin-top: -1em;
    margin-bottom: -1em;
    margin-right: 5px;
}

.btn-compuest {
    font-size: 19px;
    font-weight: 500;
    color: rgb(116, 116, 116);
    border: 1px solid #ced4da;
    background-color: #fff;
    background-clip: padding-box;
    padding: 0 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    white-space: nowrap;
}

.btn-category {
    font-size: 16px;
    font-weight: 500;
    color: red;
    border: 2px solid red;
    background-color: white;
    padding: 10px 16px;
    border-radius: 13px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    white-space: nowrap;
}

.btn-category:hover {
    background-color: red;
    color: white;
    transform: translateY(-1px);
}

.btn-category:focus,
.btn-category.active {
    background-color: red;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-action-primary {
    color: #0d6efd;
    border: 1px solid #0d6efd;
    box-shadow: 0 5px 10px rgba(13, 110, 253, 0.25) !important;
}

.btn-action-primary:hover {
    color: white;
    background-color: #0d6efd;
}

.btn-action-secondary {
    color: #75808a;
    border: 1px solid #75808a;
    box-shadow: 0 5px 10px rgba(108, 117, 125, 0.25) !important;
}

.btn-action-secondary:hover {
    color: white;
    background-color: #75808a;
}

.btn-action-success {
    color: #15ca20;
    border: 1px solid #15ca20;
    box-shadow: 0 5px 10px rgba(25, 135, 84, 0.25) !important;
}
.btn-action-success:hover {
    color: white;
    background-color: #15ca20;
}

.btn-inverse-success:hover {
    color: #15ca20;
    background-color: rgba(21, 202, 32, 0.18);
    border-color: rgba(21, 202, 32, 0.18);
}

.btn-action-danger {
    color: #fc0038;
    border: 1px solid #fc0038;
    box-shadow: 0 5px 10px rgba(252, 0, 56, 0.25) !important;
}

.btn-action-danger:hover {
    color: white;
    background-color: #fc0038;
}

.btn-action-warning {
    color: #ff9700;
    border: 1px solid #ff9700;
    box-shadow: 0 5px 10px rgba(255, 193, 7, 0.25) !important;
}

.btn-action-warning:hover {
    color: white;
    background-color: #ff9700;
}

.btn-inverse-info {
    color: #0dceec;
    background-color: rgba(13, 206, 236, 0.18);
    border-color: rgb(211, 246, 252);
}

.btn-inverse-info:hover {
    color: #0dceec;
    background-color: rgba(13, 206, 236, 0.18);
    border-color: rgba(13, 206, 236, 0.18);
}

.btn-inverse-light {
    color: #a7aaaa;
    background-color: rgba(233, 234, 234, 0.2);
    border-color: rgb(251, 251, 251);
}

.btn-inverse-light:hover {
    color: #a7aaaa;
    background-color: rgba(233, 234, 234, 0.2);
    border-color: rgba(233, 234, 234, 0.2);
}

.btn-inverse-dark {
    color: #223035;
    background-color: rgba(34, 48, 53, 0.2);
    border-color: #d7d9da;
}

.btn-inverse-dark:hover {
    color: #223035;
    background-color: rgba(34, 48, 53, 0.2);
    border-color: rgba(34, 48, 53, 0.2);
}

.btn-facebook,
.btn-facebook:hover {
    box-shadow:
        0 2px 2px 0 rgba(59, 89, 152, 0.14),
        0 3px 1px -2px rgba(59, 89, 152, 0.2),
        0 1px 5px 0 rgba(59, 89, 152, 0.12);
    background-color: #3b5998;
    border-color: #3b5998;
    color: #fff;
}

.btn-white {
    background-color: #fff;
    border-color: #e7eaf3;
}

.chart-container1 {
    position: relative;
    height: 380px;
}

.gmaps,
.gmaps-panaroma {
    height: 400px;
    background: #eee;
    border-radius: 3px;
}

.pricing-table .card {
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

.pricing-table .card .card-header {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
/*
.card-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    background-color: #fc0038 !important;
    color: white;
    font-size: 18px !important;
    font-weight: 550;
}
*/

.card-header {
    color: #fc0038;
    font-size: 18px !important;
    font-weight: 550;
}

@media (min-width: 992px) {
    .pricing-table .card:hover {
        margin-top: -0.25rem;
        margin-bottom: 0.25rem;
        -webkit-box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
        box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
    }
}

.pricing-table .card .card-title {
    font-size: 1rem;
    font-weight: 500;
}

.pricing-table .card .card-price {
    font-size: 2.7rem;
}

.pricing-table .card .card-price .term {
    font-size: 0.875rem;
}

.pricing-table .card ul li.list-group-item {
    border-bottom: 1px solid rgb(0 0 0 / 0%);
    color: #3b3b3b;
    font-size: 16px;
}

input::placeholder {
    color: #4c5258 !important;
    opacity: 0.3 !important;
}

.form-floating > .form-control::-moz-placeholder {
    color: transparent !important;
}
.form-floating > .form-control::placeholder {
    color: transparent !important;
}

.card-group {
    margin-bottom: 1.5rem;
}

.input-icon .form-control {
    padding-left: 2.8rem;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.055),
        0 1px 3px rgba(0, 0, 0, 0.055);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.form-control {
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.055),
        0 1px 3px rgba(0, 0, 0, 0.055);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.form-control:focus {
    background-color: #fff;
    border: 2px solid #fc0038;
    outline: none;
    box-shadow: 0 0 0 4px rgba(252, 0, 56, 0.15);
}
.form-anio {
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.055),
        0 1px 3px rgba(0, 0, 0, 0.055);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 5px;
    outline: none;
}

.form-select {
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.055),
        0 1px 3px rgba(0, 0, 0, 0.055);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.custom-input {
    outline: none;
    width: 100%;
    max-width: 100%;
    min-width: 70px;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.055),
        0 1px 3px rgba(0, 0, 0, 0.055);
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 5px;
}
.custom-input:focus {
    background-color: #fff;
    border: 2px solid #fc0038;
    outline: none;
    box-shadow: 0 0 0 4px rgba(252, 0, 56, 0.15);
}

.btn {
    border-radius: 10px !important;
    box-sizing: border-box;
}

.btn-show {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 10px !important; /* Aquí se aplica el borde redondeado solo a la derecha */
    border-bottom-right-radius: 10px !important; /* Aquí también */
    box-sizing: border-box;
    box-shadow: 5px 4px 12px #aeaeae;
}

.input-icon span {
    font-size: 16px;
    left: 15px;
}

.topbar .navbar .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 60px;
}

/* Animación de balanceo suave para la campana */
@keyframes bell-swing {
    0%,
    100% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(14deg);
    }
    20% {
        transform: rotate(-12deg);
    }
    30% {
        transform: rotate(10deg);
    }
    40% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(0deg);
    }
}

/* Animación de pulso suave para la luna */
@keyframes moon-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Animación de brillo giratorio */
@keyframes rotate-glow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.topbar .navbar .navbar-nav .nav-link {
    color: white;
    font-size: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: transparent;
    overflow: hidden;
}

/* Animación constante sutil para ambos iconos */
.topbar .navbar .navbar-nav .nav-link i {
    animation: moon-pulse 3s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

/* La campana tiene su propia animación de balanceo */
.topbar .navbar .navbar-nav .nav-link .fa-bell {
    animation: bell-swing 4s ease-in-out infinite;
    transform-origin: top center;
}

/* Efecto glassmorphism al hacer hover */
.topbar .navbar .navbar-nav .nav-link:hover,
.topbar .navbar .navbar-nav .nav-link:focus {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    transform: scale(1.15);
    box-shadow:
        0 8px 32px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* La campana se balancea más rápido al hacer hover */
.topbar .navbar .navbar-nav .nav-link:hover .fa-bell {
    animation: bell-swing 0.6s ease-in-out infinite;
}

/* La luna se mueve más al hacer hover */
.topbar .navbar .navbar-nav .nav-link:hover .fa-moon {
    animation: moon-pulse 0.8s ease-in-out infinite;
}

/* Efecto de brillo giratorio en el fondo */
.topbar .navbar .navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent 30%
    );
    animation: rotate-glow 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.topbar .navbar .navbar-nav .nav-link:hover::before {
    opacity: 1;
}

/* Círculo interior para efecto de profundidad */
.topbar .navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.2) 0%,
        transparent 70%
    );
    transition: all 0.4s ease;
}

.topbar .navbar .navbar-nav .nav-link:hover::after {
    width: 100%;
    height: 100%;
}
.dropdown-toggle-nocaret:after {
    display: none;
}

.alert-count {
    position: absolute;
    top: 2px;
    left: 22px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background: #f62718;
}

.user-img {
    width: 42px;
    height: 42px;
    border-radius: 30%;
    border: 0 solid #e5e5e5;
    box-shadow: 0 5px 10px rgba(85, 0, 18, 0.316) !important;
    padding: 0;
}

.user-info .user-name {
    font-size: 15px;
    font-weight: 500;
    color: white;
}

.user-info .designattion {
    font-size: 13px;
    color: white;
}

.user-box {
    display: flex;
    align-items: center;
    height: 60px;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
}

.topbar .navbar .dropdown-app .dropdown-menu {
    width: 270px;
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    border-radius: 16px;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
}

.topbar .navbar .dropdown-app .dropdown-menu .app-container {
    position: relative;
    height: 370px;
}

.topbar .navbar .dropdown-app .dropdown-menu .app-box {
    padding: 0.5rem;
    border-radius: 1rem;
    transition: 0.2s;
}

.topbar .navbar .dropdown-app .dropdown-menu .app-box:hover {
    background-color: #edf0f3;
}

.topbar .navbar .dropdown-app .dropdown-menu .app-name {
    color: #212529;
    font-size: 0.64rem;
    text-decoration: none;
    font-weight: 500;
}

.dropdown-large {
    position: relative;
}

.dropdown-large .dropdown-menu {
    width: 360px;
    border: 0;
    padding: 0 0;
    border-radius: 10px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.topbar .navbar .dropdown-large .dropdown-menu::after {
    content: "";
    width: 13px;
    height: 13px;
    background: #fff;
    position: absolute;
    top: -6px;
    right: 16px;
    transform: rotate(45deg);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.topbar .navbar .dropdown-menu::after {
    content: "";
    width: 13px;
    height: 13px;
    background: #ffff;
    position: absolute;
    top: -6px;
    right: 16px;
    transform: rotate(45deg);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.dropdown-large .msg-header {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #ededed;
    background-clip: border-box;
    background-color: #ffffff;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.dropdown-large .msg-header-badge {
    background-color: rgb(0 140 255 / 12%);
    color: #008cff;
    padding: 2px 8px;
    margin-bottom: 0;
    border-radius: 4px;
}

.dropdown-large .msg-header .msg-header-title {
    font-size: 16px;
    color: #1c1b1b;
    margin-bottom: 0;
    font-weight: 500;
}

.dropdown-large .msg-header .msg-header-clear {
    font-size: 13px;
    color: #585858;
    margin-bottom: 0;
}

.dropdown-large .msg-footer {
    padding: 0.8rem 1rem;
    color: #1c1b1b;
    border-top: 1px solid #ededed;
    background-clip: border-box;
    background: 0 0;
    font-size: 14px;
    font-weight: 500;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.dropdown-large .user-online {
    position: relative;
}

.dropdown-large .msg-name {
    font-size: 14px;
    margin-bottom: 0;
    color: #212529;
}

.dropdown-large .msg-info {
    font-size: 13px;
    margin-bottom: 0;
    color: #818189;
}

.dropdown-large .msg-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
}

.dropdown-large .msg-time {
    font-size: 12px;
    margin-bottom: 0;
    color: #818189;
}

.dropdown-large .user-online:after {
    content: "";
    position: absolute;
    bottom: 1px;
    right: 17px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e;
}

.dropdown-large .dropdown-menu .dropdown-item {
    padding: 0.5rem 1.3rem;
    border-bottom: 1px solid #ededed;
}

.header-message-list {
    position: relative;
    height: 360px;
}

.header-notifications-list {
    position: relative;
    height: 360px;
}

.dropdown-large .notify {
    width: 45px;
    height: 45px;
    font-size: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #f1f1f1;
    margin-right: 15px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-large .cart-product-title {
    color: #140e22;
    font-size: 14px;
    margin-bottom: 0px;
}

.dropdown-large .cart-product-price {
    color: #818189;
    font-size: 14px;
    margin-bottom: 0;
}

.dropdown-large .cart-product-cancel {
    right: -7px;
    top: -5px;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #eee;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.dropdown-large .cart-product {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    border-radius: 0px;
    border: 1px solid rgb(231 231 231);
    padding: 4px;
    background-color: rgb(255 255 255);
}

.dropdown-large .cart-product img {
    width: 100%;
}

.user-box .dropdown-menu i {
    vertical-align: middle;
    margin-right: 10px;
}

.dropdown-menu {
    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: 0 solid #e9ecef;
    border-radius: 10px;
    font-size: 14px;
}

.topbar .navbar .dropdown-menu {
    -webkit-animation: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards
        1 animdropdown;
    animation: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1
        animdropdown;
}

@-webkit-keyframes animdropdown {
    from {
        -webkit-transform: translate3d(0, 6px, 0);
        transform: translate3d(0, 6px, 0);
        opacity: 0;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes animdropdown {
    from {
        -webkit-transform: translate3d(0, 6px, 0);
        transform: translate3d(0, 6px, 0);
        opacity: 0;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.search-bar {
    width: 30%;
    cursor: pointer;
}

.search-bar input[disabled] {
    cursor: pointer;
    background-color: #f7f7ff;
    border: 0;
}

.mobile-toggle-menu {
    display: none;
    font-size: 26px;
    color: white;
    margin-right: 10px;
    cursor: pointer;
}

.switcher-wrapper {
    width: 280px;
    height: 100%;
    position: fixed;
    right: -280px;
    top: 0;
    bottom: 0;
    z-index: 16;
    background: #fff;
    border-left: 0 solid #d2d2d2;
    box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.13);
    transition: all 0.2s ease-out;
}

.switcher-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    background: #008cff;
    box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.13);
    color: #fff;
    text-align: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    top: 40%;
    right: 100%;
    cursor: pointer;
}

.switcher-wrapper.switcher-toggled {
    right: 0;
}

.switcher-body {
    padding: 1.25rem;
}

.switcher-body .form-check .form-check-input,
.switcher-body .form-check .form-check-label {
    cursor: pointer;
}

.header-colors-indigators .indigator {
    width: 45px;
    height: 45px;
    background-color: #f4f2f2;
    border-radius: 10px;
    cursor: pointer;
}

@media screen and (max-width: 1280px) {
    .email-header {
        height: auto;
    }
    .email-content {
        padding: 100px 0 0 0;
    }
}

@media only screen and (max-width: 1199px) {
    .row.row-group > div {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    }

    .row.row-group > div:last-child {
        border-right: none;
        border-bottom: 0;
    }
}

@media screen and (max-width: 1024px) {
    .topbar {
        left: 0 !important;
    }

    .mobile-toggle-menu {
        display: block;
    }
    .sidebar-wrapper {
        left: -300px;
        box-shadow: none;
    }
    .page-wrapper {
        margin-left: 0;
    }
    .page-footer {
        left: 0;
    }

    .wrapper.toggled .sidebar-wrapper {
        left: 0;
    }
    .wrapper.toggled .page-wrapper {
        margin-left: 0;
    }
    .wrapper.toggled .overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #4c5258;
        opacity: 0.6;
        z-index: 10;
        display: block;
        cursor: move;
        transition: all 0.2s ease-out;
    }
    .error-404 {
        height: auto;
        padding: 6rem 1rem;
    }
    .chat-header {
        border-top-left-radius: 0.25rem;
    }
    .chat-footer {
        border-bottom-left-radius: 0.25rem;
    }
    .chat-sidebar {
        left: -370px;
    }
    .chat-content {
        margin-left: 0;
    }
    .chat-header {
        left: 0;
    }
    .chat-footer {
        left: 0;
    }
    .chat-toggled .chat-sidebar {
        left: 0;
    }
    .chat-toggled .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 340px;
        background: #4c5258;
        opacity: 0.5;
        z-index: 11;
        display: block;
        cursor: move;
        transition: all 0.3s ease-out;
    }
    .email-header {
        border-top-left-radius: 0.25rem;
    }
    .email-sidebar {
        left: -280px;
    }
    .email-content {
        margin-left: 0;
    }
    .email-header {
        left: 0;
    }
    .email-toggled .email-sidebar {
        left: 0;
    }
    .email-toggled .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 250px;
        background: #4c5258;
        opacity: 0.5;
        z-index: 9;
        display: block;
        cursor: move;
        transition: all 0.3s ease-out;
    }
}

@media screen and (max-width: 991px) {
    .section-authentication-signin {
        height: 100%;
        margin-top: 6rem;
        margin-bottom: 2rem;
    }
    .authentication-reset-password {
        height: auto;
        padding: 2rem 1rem;
    }
    .authentication-lock-screen {
        height: auto;
        padding: 2rem 1rem;
    }
    .compose-mail-popup {
        width: auto;
        position: fixed;
        bottom: -30px;
        right: 0;
        left: 0;
    }
}

@media screen and (max-width: 767px) {
    .user-box .user-info {
        display: none;
    }
    .authentication-forgot {
        height: auto;
        padding: 2.5rem 1rem;
    }
}

@media screen and (max-width: 620px) {
    .topbar .navbar .dropdown-menu::after {
        display: none;
    }
    .topbar .navbar .dropdown {
        position: static !important;
    }
    .topbar .navbar .dropdown-menu {
        width: 100% !important;
    }
}

@media screen and (max-width: 520px) {
    .chat-footer-menu,
    .chat-top-header-menu {
        display: none;
    }
}

/* PAYMENTS MODERN DESIGN */
.payments-section {
    margin-bottom: 20px;
    margin-left: -10px;
    margin-right: -10px;
}

.payments-section .payments-container form input {
    display: none;
}

.payment-method {
    height: 120px;
    border: 2px solid #dddddd4f;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.payment-method:hover {
    border-color: #fc0038;
    box-shadow: 0 8px 25px rgba(252, 0, 56, 0.15);
    transform: translateY(-2px);
}

input[type="radio"]:checked ~ .payment-method {
    border-color: #fc0038;
    box-shadow: 0 5px 10px rgba(252, 0, 56, 0.25);
    transform: translateY(-2px);
}

input[type="radio"]:checked ~ .payment-method::before {
    opacity: 1;
}

input[type="radio"]:checked ~ .payment-method .check {
    display: flex;
}

.check {
    display: none;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 24px;
    height: 24px;
    background: #fc0038;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    animation: checkPulse 0.4s ease-out;
}

.check i {
    font-size: 14px;
    color: white;
}

@keyframes checkPulse {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.imgName {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.imgContainer {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.imgName img {
    width: 60px;
    height: 55px;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

input[type="radio"]:checked ~ .payment-method .imgName img {
    filter: grayscale(0%);
}

.imgName .name {
    font-size: 11px;
    font-weight: 600;
    color: #495057;
    text-align: center;
    letter-spacing: 0.4px;
    transition: color 0.3s ease;
}

input[type="radio"]:checked ~ .payment-method .imgName .name {
    color: #fc0038;
}

/* RESPONSIVE DESIGN */
/* Móviles: 2 filas de 3 columnas */
@media (max-width: 767px) {
    .imgContainer {
        width: 80px;
        height: 80px;
    }

    .imgName img {
        width: 60px;
        height: 55px;
    }

    .imgName .name {
        font-size: 13px;
    }
}

/* Tablets y superiores: 1 fila de 6 columnas */
@media (min-width: 768px) {
    .imgContainer {
        width: 70px;
        height: 70px;
    }

    .imgName img {
        width: 60px;
        height: 55px;
    }

    .imgName .name {
        font-size: 13px;
    }
}

/* Pantallas grandes */
@media (min-width: 1200px) {
    .imgContainer {
        width: 80px;
        height: 80px;
    }

    .imgName img {
        width: 60px;
        height: 55px;
    }

    .imgName .name {
        font-size: 14px;
    }
}
/*fin*/

.text-select-date {
    font-size: 17px;
    font-weight: 500;
    text-align: center; /* Texto centrado */
    color: #2c3e50; /* Color oscuro */
}

.card-total {
    font-size: 32px; /* Tamaño del subtotal */
    font-weight: bold; /* Texto principal en negrita */
    text-align: center; /* Texto centrado */
    color: #2c3e50; /* Color oscuro */
    background-color: #f8f9fa; /* Fondo suave */
    padding: 10px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra */
    transition: transform 0.3s ease; /* Efecto hover */
    margin-bottom: 15px; /* Separación inferior */
    line-height: 1.2; /* Espaciado entre líneas reducido */
}

.card-total:hover {
    transform: scale(1.05);
}

.card-total-literal {
    font-size: 15px;
    margin-top: 5px;
    display: block;
}
.card-balance {
    font-size: 20px; /* Tamaño del subtotal */
    font-weight: bold; /* Texto principal en negrita */
    text-align: center; /* Texto centrado */
    color: #505050; /* Color oscuro */
    background-color: #f8f9fa; /* Fondo suave */
    padding: 10px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra */
    transition: transform 0.3s ease; /* Efecto hover */
    margin-bottom: 15px; /* Separación inferior */
    line-height: 1.2; /* Espaciado entre líneas reducido */
}

.tittle-cambio {
    font-size: 20px;
    font-weight: bold;
    color: #2c3e50;
}

.modal-backdrop.show.second-backdrop {
    z-index: 1060; /* Un valor mayor que el primer backdrop */
}

#categoryModal {
    z-index: 1070; /* Mayor que el primer modal */
}

#brandModal {
    z-index: 1070; /* Mayor que el primer modal */
}

#unitModal {
    z-index: 1070; /* Mayor que el primer modal */
}

#additionalModal {
    z-index: 1070; /* Mayor que el primer modal */
}
#ingredientModal {
    z-index: 1070; /* Mayor que el primer modal */
}

#variantModal {
    z-index: 1070; /* Mayor que el primer modal */
}

/**IMAGEN PRODCUTOS*/
.image-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    color: white;
    font-size: 14px;
}

.upload-spinner {
    font-size: 24px;
    margin-bottom: 8px;
}

.progress-bar-custom {
    width: 80%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}

.progress-fill {
    height: 100%;
    background-color: #dc3545;
    transition: width 0.3s ease;
}

.img-thumbnail {
    border-radius: 25px;
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

/*LISTA DE PRODUCTOS*/
.listsearch {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: -10;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.listsearch-item {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #f8f9fc;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.listsearch-item:hover {
    background-color: #f8f9fc;
    transform: translateX(2px);
}

.listsearch-content {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.listsearch-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.listsearch-code {
    font-weight: 600;
    color: #5a5c69;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.listsearch-name {
    color: #6c757d;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listsearch-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}

.listsearch-price {
    font-weight: 600;
    color: #1cc88a;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.listsearch-stock {
    font-size: 0.75rem;
    color: #858796;
    background: #f8f9fc;
    padding: 2px 6px;
    border-radius: 10px;
}

/* Stock en rojo cuando es 0 */
.listsearch-stock.stock-zero {
    color: #e74a3b;
    background: #ffeaea;
    font-weight: 600;
    border: 1px solid #f5c6cb;
}

/* También puedes agregar un ícono de advertencia para stock 0 */
.listsearch-stock.stock-zero::before {
    content: "⚠ ";
    font-size: 0.7rem;
}

.listsearch-empty {
    padding: 20px;
    text-align: center;
    color: #858796;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.listsearch-empty i {
    font-size: 1.2rem;
    opacity: 0.6;
}

/* Scrollbar personalizado */
.listsearch::-webkit-scrollbar {
    width: 6px;
}

.listsearch::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.listsearch::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.listsearch::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Prevenir scroll horizontal */
.listsearch {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

.listsearch-content {
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.listsearch-main {
    overflow: hidden;
    max-width: 60%;
}

.listsearch-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listsearch-info {
    max-width: 40%;
    overflow: hidden;
}

/* TAGS DE INFORMACIÓN ADICIONAL - DISEÑO MODERNO */
.listsearch-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.tag i {
    font-size: 0.75rem;
}

/* MARCA - Azul Elegante */
.tag-brand {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.2);
}

/* CATEGORÍA - Verde Profesional */
.tag-category {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
    border: 1px solid rgba(25, 135, 84, 0.2);
}

/* UNIDAD DE MEDIDA - Naranja Vibrante */
.tag-unit {
    background: rgba(255, 152, 0, 0.12);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.2);
}

/* Hover Efecto - Tags */
.listsearch-item:hover .tag {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* RESPONSIVE - Ocultar en móviles si es necesario */
@media (max-width: 576px) {
    .listsearch-tags {
        gap: 3px;
    }

    .tag {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
}
/* Responsivo */
@media (max-width: 768px) {
    .map-container {
        overflow: scroll !important;
        overflow-x: scroll !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }
    .listsearch-content {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px 12px;
    }

    .listsearch-main {
        max-width: 100%;
    }

    .listsearch-info {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        max-width: 100%;
    }

    .listsearch {
        max-height: 250px;
    }
}

/* Animación de entrada */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.listsearch {
    animation: slideDown 0.2s ease-out;
}

/* SUCURSALES */
.branch-selector-modern {
    position: relative;
}

.branch-info {
    position: relative;
}

.branch-current {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.534);
    border-radius: 12px;
    padding: 8px 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.branch-current:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.branch-icon {
    margin-right: 10px;
    color: #ffffff;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.branch-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.branch-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-bottom: 2px;
}

.branch-name {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.branch-switch-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.534);
    color: #ffffff;
    border-radius: 8px;
    padding: 8px 7px;
    margin-left: 2px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.branch-switch-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: translateY(-1px);
}

.branch-switch-btn i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.branch-switch-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.branch-dropdown {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 8px;
    min-width: 200px;
    margin-top: 8px;
}

.branch-option {
    border-radius: 8px;
    padding: 0;
    margin-bottom: 2px;
    transition: all 0.15s ease;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.branch-option:hover {
    background: #f8f9fa;
    text-decoration: none;
}

.branch-option.active {
    background: rgba(252, 0, 56, 0.1);
}

.branch-option.active:hover {
    background: rgba(252, 0, 56, 0.15);
}

.branch-option-content {
    display: flex;
    align-items: center;
    padding: 12px;
    position: relative;
}

.branch-option-content i {
    font-size: 16px;
    margin-right: 12px;
    color: #6c757d;
    width: 16px;
    text-align: center;
    transition: color 0.15s ease;
}

.branch-option.active .branch-option-content i {
    color: #fc0038;
}

.branch-option-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.badge-current {
    background: #fc0038;
    color: #ffffff;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 8px;
}

/* LOADER SÚPER RÁPIDO */
.pacelsm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999999 !important;
    /* ✅ Altísimo para asegurar visibilidad */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 1;
    /* Transición súper rápida */
    transition: opacity 0.1s ease-out;
    /* Optimización GPU */
    will-change: opacity;
    transform: translateZ(0);
}

.pacelsm .pacelsm-activity {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    will-change: transform;
}

.pacelsm .pacelsm-activity::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid #ffffff;
    border-right: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: pacelsm-spin 0.5s linear infinite;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    will-change: transform;
}

.pacelsm .pacelsm-activity::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border: 2px solid transparent;
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    border-left: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: pacelsm-spin 0.7s linear infinite reverse;
    will-change: transform;
}

.pacelsm::after {
    content: "Cambiando sucursal...";
    color: #ffffff;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-top: 20px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: pacelsm-pulse 1s ease-in-out infinite;
}

@keyframes pacelsm-spin {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes pacelsm-pulse {
    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .branch-current {
        padding: 6px 8px;
    }

    .branch-name {
        font-size: 11px;
        max-width: 150px;
    }

    .branch-switch-btn {
        padding: 6px;
    }
}

.dropdown-menu {
    z-index: 10000 !important;
    position: absolute !important;
}

/* ============================================
   MAPA DE DISEÑO DE ZONAS CON DRAG & DROP
   ============================================ */
.map-container {
    width: 100%;
    height: 600px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    position: relative;
    background-color: #ffffff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    padding: 5px;
}

/* ============================================
   ESTILOS BASE DE MESAS
   ============================================ */

.table-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    cursor: move;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    user-select: none;
    border: 3px solid rgba(0, 0, 0, 0.2);
}

/* ============================================
   MESA REDONDA CON SILLAS PEGADAS
   ============================================ */

.table-item.redondo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: relative;
    box-shadow:
        inset 0 -8px 15px rgba(0, 0, 0, 0.2),
        0 4px 15px rgba(0, 0, 0, 0.3);
}

.table-item.redondo::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 50%
    );
    pointer-events: none;
}

.table-item.redondo .table-side-chairs {
    position: absolute;
    width: 18px;
    height: 20px;
    background: linear-gradient(180deg, #5a5a5a 0%, #3d3d3d 100%);
    border-radius: 4px 4px 2px 2px;
    border: 2px solid #2a2a2a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.table-item.redondo .table-side-chairs::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background: linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 100%);
    border-radius: 3px 3px 0 0;
    border: 2px solid #2a2a2a;
    border-bottom: none;
}

.table-item.redondo .chair-top {
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
}

.table-item.redondo .chair-bottom {
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
}

.table-item.redondo .chair-left {
    left: -26px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}

.table-item.redondo .chair-right {
    right: -26px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}

/* ============================================
   MESA CUADRADA CON SILLAS PEGADAS
   ============================================ */

.table-item.cuadrado {
    width: 85px;
    height: 85px;
    border-radius: 10px;
    position: relative;
    box-shadow:
        inset 0 -8px 15px rgba(0, 0, 0, 0.2),
        0 4px 15px rgba(0, 0, 0, 0.3);
}

.table-item.cuadrado::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 8px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 50%
    );
    pointer-events: none;
}

.table-item.cuadrado .table-side-chairs {
    position: absolute;
    width: 18px;
    height: 20px;
    background: linear-gradient(180deg, #5a5a5a 0%, #3d3d3d 100%);
    border-radius: 4px 4px 2px 2px;
    border: 2px solid #2a2a2a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.table-item.cuadrado .table-side-chairs::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background: linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 100%);
    border-radius: 3px 3px 0 0;
    border: 2px solid #2a2a2a;
    border-bottom: none;
}

.table-item.cuadrado .chair-top {
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
}

.table-item.cuadrado .chair-bottom {
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
}

.table-item.cuadrado .chair-left {
    left: -26px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}

.table-item.cuadrado .chair-right {
    right: -26px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}

/* ============================================
   MESA RECTANGULAR CON SILLAS PEGADAS
   ============================================ */

.table-item.rectangular {
    width: 120px;
    height: 75px;
    border-radius: 12px;
    position: relative;
    box-shadow:
        inset 0 -8px 15px rgba(0, 0, 0, 0.2),
        0 4px 15px rgba(0, 0, 0, 0.3);
}

.table-item.rectangular::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 50%
    );
    pointer-events: none;
}

.table-item.rectangular .table-side-chairs {
    position: absolute;
    width: 18px;
    height: 20px;
    background: linear-gradient(180deg, #5a5a5a 0%, #3d3d3d 100%);
    border-radius: 4px 4px 2px 2px;
    border: 2px solid #2a2a2a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.table-item.rectangular .table-side-chairs::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background: linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 100%);
    border-radius: 3px 3px 0 0;
    border: 2px solid #2a2a2a;
    border-bottom: none;
}

.table-item.rectangular .chair-top-left {
    top: -26px;
    left: 22%;
}

.table-item.rectangular .chair-top-right {
    top: -26px;
    right: 22%;
}

.table-item.rectangular .chair-bottom-left {
    bottom: -26px;
    left: 22%;
}

.table-item.rectangular .chair-bottom-right {
    bottom: -26px;
    right: 22%;
}

.table-item.rectangular .chair-left {
    left: -26px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}

.table-item.rectangular .chair-right {
    right: -26px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}

/* ============================================
   INFORMACIÓN DE LA MESA - DISEÑO MODERNO GLASSMORPHISM
   ============================================ */

.table-number {
    font-size: 16px;
    font-weight: 700;
    position: relative;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

/* NÚMERO DE PERSONAS DENTRO DE LA MESA - DISEÑO GLASSMORPHISM MODERNO */
.table-chairs {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
}

.table-chairs i {
    font-size: 11px;
    margin-right: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* ============================================
   SELECTOR DE TIPO DE MESA (EN MODAL)
   ============================================ */

.table-type-selector {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
}

.table-type-option {
    cursor: pointer;
    padding: 20px 15px;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    transition: all 0.3s;
    text-align: center;
    min-width: 110px;
    background: white;
}

.table-type-option:hover {
    border-color: #0d6efd;
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.table-type-option.active {
    border-color: #dc3545;
    background-color: #ffe5e7;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}

.table-type-icon {
    margin: 0 auto 12px;
    position: relative;
}

.table-type-icon.redondo {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #7a7a7a 0%, #5a5a5a 100%);
    border-radius: 50%;
    position: relative;
    box-shadow:
        inset 0 -4px 8px rgba(0, 0, 0, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(0, 0, 0, 0.2);
}

.table-type-icon.redondo::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 17px;
    background: linear-gradient(180deg, #5a5a5a 0%, #3d3d3d 100%);
    border-radius: 3px 3px 1px 1px;
    border: 2px solid #2a2a2a;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.table-type-icon.redondo::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 7px;
    background: linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 100%);
    border-radius: 2px 2px 0 0;
    border: 2px solid #2a2a2a;
    border-bottom: none;
    top: -29px;
    left: 50%;
    transform: translateX(-50%);
}

.table-type-icon.cuadrado {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #7a7a7a 0%, #5a5a5a 100%);
    border-radius: 10px;
    position: relative;
    box-shadow:
        inset 0 -4px 8px rgba(0, 0, 0, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(0, 0, 0, 0.2);
}

.table-type-icon.cuadrado::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 17px;
    background: linear-gradient(180deg, #5a5a5a 0%, #3d3d3d 100%);
    border-radius: 3px 3px 1px 1px;
    border: 2px solid #2a2a2a;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.table-type-icon.cuadrado::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 7px;
    background: linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 100%);
    border-radius: 2px 2px 0 0;
    border: 2px solid #2a2a2a;
    border-bottom: none;
    top: -29px;
    left: 50%;
    transform: translateX(-50%);
}

.table-type-icon.rectangular {
    width: 70px;
    height: 45px;
    background: linear-gradient(135deg, #7a7a7a 0%, #5a5a5a 100%);
    border-radius: 10px;
    position: relative;
    box-shadow:
        inset 0 -4px 8px rgba(0, 0, 0, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(0, 0, 0, 0.2);
}

.table-type-icon.rectangular::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 17px;
    background: linear-gradient(180deg, #5a5a5a 0%, #3d3d3d 100%);
    border-radius: 3px 3px 1px 1px;
    border: 2px solid #2a2a2a;
    top: -22px;
    left: 20%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.table-type-icon.rectangular::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 7px;
    background: linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 100%);
    border-radius: 2px 2px 0 0;
    border: 2px solid #2a2a2a;
    border-bottom: none;
    top: -29px;
    left: calc(20% + 1px);
}

/* ============================================
   DROPDOWN DE ACCIONES - BOTÓN MÁS ABAJO
   ============================================ */

.table-dropdown {
    position: absolute;
    top: 2px;
    right: 2px;
}

.table-dropdown-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    color: #333;
}

.table-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    overflow: hidden;
    z-index: 1000;
}

.table-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 15px;
    border: none;
    background: white;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
    text-align: left;
}

.table-menu-item:hover {
    background: #f8f9fa;
}

.table-menu-item.text-danger:hover {
    background: #ffe5e7;
}

.table-menu-item i {
    font-size: 16px;
}

/* ============================================
   ETIQUETA DE MESA INACTIVA
   ============================================ */

.table-inactive {
    opacity: 0.7;
    cursor: not-allowed !important;
}

.table-inactive-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(220, 53, 69, 0.95);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* ============================================
   PREVIEW FANTASMA PARA DRAG & DROP
   ============================================ */

.ghost-preview {
    border: 3px dashed #3b82f6 !important;
    background: rgba(59, 130, 246, 0.15) !important;
    border-radius: 8px !important;
}

/* ============================================
   NÚMERO DE ORDEN - DISEÑO GLASS UI/UX PREMIUM
   ============================================ */

.table-item > div[style*="top: -28px"] {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.15) 100%
    ) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    color: #1a1a1a !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    z-index: 5 !important;
    letter-spacing: 0.8px !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    position: absolute !important;
    top: -30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.table-item > div[style*="top: -28px"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 7px !important;
    padding: 1.5px !important;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* ============================================
   MESA SELECCIONADA PARA UNIÓN
   ============================================ */

.table-selected {
    animation: pulseSelection 1.5s ease-in-out infinite !important;
    box-shadow:
        0 0 0 4px rgba(255, 193, 7, 0.6),
        0 8px 25px rgba(255, 193, 7, 0.4) !important;
    border: 3px solid rgba(255, 193, 7, 0.8) !important;
}

@keyframes pulseSelection {
    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(255, 193, 7, 0.6),
            0 8px 25px rgba(255, 193, 7, 0.4);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(255, 193, 7, 0.4),
            0 12px 35px rgba(255, 193, 7, 0.6);
    }
}

/* ============================================
   CONTENIDO DEL MODAL DE RECETAS/ADICIONALES
   ============================================ */

/* Header del producto */
.recipe-product-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.recipe-product-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #fc0038 0%, #d90030 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(252, 0, 56, 0.25);
}

.recipe-product-info {
    flex: 1;
}

.recipe-product-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    color: #2d3748;
}

.recipe-product-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: #48bb78;
    margin: 0;
}

/* Secciones */
.recipe-section {
    margin-bottom: 2rem;
}

.recipe-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

/* Cards de variantes */
.recipe-variant-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    height: 100%;
}

.recipe-variant-card:hover {
    border-color: rgba(252, 0, 56, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(252, 0, 56, 0.12);
}

.recipe-variant-selected {
    border-color: #fc0038;
    box-shadow: 0 4px 16px rgba(252, 0, 56, 0.15);
}

.recipe-variant-radio {
    position: absolute;
    top: 10px;
    right: 10px;
}

.recipe-variant-radio .form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s;
}

.recipe-variant-radio .form-check-input:checked {
    background-color: #fc0038;
    border-color: #fc0038;
    box-shadow: 0 0 0 4px rgba(252, 0, 56, 0.1);
}

.recipe-variant-content {
    padding-right: 30px;
}

.recipe-variant-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.recipe-variant-price {
    font-size: 1rem;
    font-weight: 700;
    color: #48bb78;
    margin: 0;
}

/* Cards de adicionales */
.recipe-additional-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recipe-additional-card:hover {
    border-color: rgba(252, 0, 56, 0.4);
    box-shadow: 0 8px 20px rgba(252, 0, 56, 0.12);
}

.recipe-additional-selected {
    border-color: #fc0038;
    box-shadow: 0 4px 16px rgba(252, 0, 56, 0.15);
}

/* Badges - GLASSMORPHISM ELEGANTE */
.recipe-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.recipe-badge-required {
    background: linear-gradient(135deg, #fc0038 0%, #d90030 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(252, 0, 56, 0.35);
}

.recipe-badge-optional {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1.5px solid rgba(252, 0, 56, 0.25);
    color: #fc0038;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* Header del adicional */
.recipe-additional-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 10px;
}

.recipe-checkbox {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    border: 2px solid #e2e8f0;
    transition: all 0.3s;
}

.recipe-checkbox:checked {
    background-color: #fc0038;
    border-color: #fc0038;
    box-shadow: 0 0 0 4px rgba(252, 0, 56, 0.1);
}

.recipe-additional-label {
    flex: 1;
    cursor: pointer;
    margin: 0;
}

.recipe-additional-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.3rem;
}

.recipe-additional-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: #48bb78;
    margin: 0;
}

/* Control de cantidad - GLASSMORPHISM MODERNO */
.recipe-quantity-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 2px solid rgba(226, 232, 240, 0.8);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.recipe-additional-selected .recipe-quantity-control {
    border-color: rgba(252, 0, 56, 0.3);
    box-shadow:
        0 4px 12px rgba(252, 0, 56, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.recipe-quantity-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.recipe-quantity-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #4a5568;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.recipe-quantity-btn:hover:not(:disabled) {
    background: rgba(252, 0, 56, 0.1);
    color: #fc0038;
    transform: scale(1.05);
}

.recipe-quantity-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.recipe-additional-selected .recipe-quantity-btn:hover:not(:disabled) {
    background: rgba(252, 0, 56, 0.15);
    color: #fc0038;
}

.recipe-quantity-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.recipe-quantity-minus {
    border-right: 1px solid rgba(226, 232, 240, 0.6);
}

.recipe-quantity-plus {
    border-left: 1px solid rgba(226, 232, 240, 0.6);
}

.recipe-quantity-input {
    width: 55px;
    height: 40px;
    border: none;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: #2d3748;
    background: transparent;
}

/* Responsive */
@media (max-width: 576px) {
    .recipe-product-header {
        flex-direction: column;
        text-align: center;
    }

    .recipe-product-name {
        font-size: 1.1rem;
    }

    .recipe-section-title {
        font-size: 0.95rem;
    }

    .recipe-quantity-btn {
        width: 36px;
        height: 36px;
    }

    .recipe-quantity-input {
        width: 50px;
        height: 36px;
    }
}

/* ============================================
   CUSTOM RESTAURANT POS LAYOUT - 65/35 SPLIT
   ============================================ */

/* Clase para productos (65% del ancho) */
@media (min-width: 992px) {
    .col-lg-rest-products {
        flex: 0 0 auto;
        width: 65% !important;
    }
}

/* Clase para resumen de venta (35% del ancho) */
@media (min-width: 992px) {
    .col-lg-rest-summary {
        flex: 0 0 auto;
        width: 35% !important;
    }
}

/* ============================================
   ALTERNATIVA: LAYOUT 60/40 (MÁS ESPACIO RESUMEN)
   ============================================ */

/* Si quieres más ancho para el resumen, usa estas clases */
@media (min-width: 992px) {
    .col-lg-rest-products-60 {
        flex: 0 0 auto;
        width: 60% !important;
    }

    .col-lg-rest-summary-40 {
        flex: 0 0 auto;
        width: 40% !important;
    }
}

/* ============================================
   ALTERNATIVA: LAYOUT 70/30 (MÁS ESPACIO PRODUCTOS)
   ============================================ */

@media (min-width: 992px) {
    .col-lg-rest-products-70 {
        flex: 0 0 auto;
        width: 70% !important;
    }

    .col-lg-rest-summary-30 {
        flex: 0 0 auto;
        width: 30% !important;
    }
}

/* ============================================
   RESPONSIVE - TABLET Y MÓVIL
   ============================================ */

/* En tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .col-lg-rest-products,
    .col-lg-rest-summary,
    .col-lg-rest-products-60,
    .col-lg-rest-summary-40,
    .col-lg-rest-products-70,
    .col-lg-rest-summary-30 {
        width: 100% !important;
    }
}

/* En móviles (menos de 768px) */
@media (max-width: 767px) {
    .col-lg-rest-products,
    .col-lg-rest-summary,
    .col-lg-rest-products-60,
    .col-lg-rest-summary-40,
    .col-lg-rest-products-70,
    .col-lg-rest-summary-30 {
        width: 100% !important;
    }
}

/* ============================================
   MEJORAS VISUALES PARA EL RESUMEN
   ============================================ */

/* Hace que el resumen use mejor el espacio vertical */
.rest-summary-optimized .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Hace que la tabla de productos use scroll cuando es necesario */
.rest-summary-optimized .table-responsive {
    flex: 1;
    min-height: 0;
}

/* Mantiene los botones siempre visibles al fondo */
.rest-summary-optimized .mt-auto {
    margin-top: auto !important;
}

/* =========================================
   ESTILOS PERSONALIZADOS (PREFIJO GL-)
   ========================================= */

:root {
    --gl-primary: #435ebe;
    --gl-success: #198754;
    --gl-danger: #dc3545;
    --gl-warning: #ffc107;
    --gl-info: #0dcaf0;
    --gl-dark: #252b36;
    --gl-muted: #6c757d;
    --gl-glass-bg: rgba(255, 255, 255, 0.95);
}

/* Tarjetas con efecto Glass */
.gl-card {
    background: var(--gl-glass-bg);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.gl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Títulos y textos */
.gl-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gl-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gl-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--gl-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.gl-value-lg {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0;
    color: var(--gl-dark);
}

/* Colores de texto forzados */
.gl-text-success {
    color: var(--gl-success) !important;
}
.gl-text-danger {
    color: var(--gl-danger) !important;
}
.gl-text-info {
    color: var(--gl-info) !important;
}
.gl-text-warning {
    color: #d69e00 !important;
}

/* Iconos cuadrados */
.gl-icon-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.gl-bg-success-subtle {
    background: rgba(25, 135, 84, 0.1);
    color: var(--gl-success);
}
.gl-bg-danger-subtle {
    background: rgba(220, 53, 69, 0.1);
    color: var(--gl-danger);
}
.gl-bg-info-subtle {
    background: rgba(13, 202, 240, 0.1);
    color: var(--gl-info);
}

/* KPI Especial (Flujo Caja) */
.gl-kpi-highlight {
    border: none;
    color: white;
}
.gl-kpi-highlight.positive {
    background: linear-gradient(135deg, #198754 0%, #146c43 100%);
}
.gl-kpi-highlight.negative {
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%);
}
.gl-kpi-highlight .gl-label,
.gl-kpi-highlight .gl-value-lg,
.gl-kpi-highlight small,
.gl-kpi-highlight i {
    color: white !important;
    opacity: 0.95;
}

/* Tabla personalizada */
.gl-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
}
.gl-table {
    width: 100%;
    border-collapse: collapse;
}
.gl-table thead th {
    background: #f8f9fa;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gl-muted);
    padding: 1rem;
    border-bottom: 1px solid #eee;
}
.gl-table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
    color: var(--gl-dark);
}
.gl-table-footer td {
    background: #f8f9fa;
    font-weight: 800;
    color: var(--gl-dark);
    padding: 1rem;
}

/* Alerta de Análisis */
.gl-alert-analysis {
    border-left: 5px solid var(--gl-info);
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* Badges */
.gl-badge {
    padding: 0.35em 0.8em;
    font-size: 0.75em;
    font-weight: 700;
    border-radius: 50rem;
    display: inline-block;
}
.gl-badge-pill {
    background: #eee;
    color: #444;
}

/* Lista Métodos Pago */
.gl-list-group {
    padding: 0;
}
.gl-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px dashed #e0e0e0;
}
.gl-list-item:last-child {
    border-bottom: none;
}

/* ==========================================================================
   DARK MODE OVERRIDES (MODO OSCURO PERSONALIZADO)
   ========================================================================== */
/* ==========================================================================
   DARK MODE PREMIUM (SOFT DARK)
   ========================================================================== */
body.dark-mode {
    background-color: #181818 !important; /* Gris muy oscuro, no negro puro */
    color: #e4e6eb !important;
}

/* Tarjetas y Contenedores (Un tono más claro que el fondo) */
body.dark-mode .sidebar-wrapper,
body.dark-mode .card,
body.dark-mode .bg-white,
body.dark-mode .header-colors-indigators .indigator,
body.dark-mode .dropdown-menu,
body.dark-mode .footer,
body.dark-mode .page-footer,
body.dark-mode .email-sidebar,
body.dark-mode .email-header,
body.dark-mode .chat-sidebar,
body.dark-mode .chat-header,
body.dark-mode .chat-footer,
body.dark-mode .user-box,
body.dark-mode .gl-card {
    background-color: #242424 !important; /* Gris Grafito */
    color: #e4e6eb !important;
    border-color: #383838 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important; /* Sombra más suave */
}

/* === BRANDING ROJO (Se mantiene brillante) === */
body.dark-mode .sidebar-header,
body.dark-mode .topbar,
body.dark-mode .btn-action-danger,
body.dark-mode .product-stock-danger {
    background: #fc0038 !important;
    border-color: #fc0038 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(252, 0, 56, 0.4) !important; /* Glow rojo en modo oscuro */
}

/* Inputs y Formularios */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input,
body.dark-mode .custom-input {
    background-color: #2f2f2f !important;
    border-color: #444 !important;
    color: #fff !important;
}

body.dark-mode ::placeholder {
    color: #888 !important;
}

/* Menú Lateral */
body.dark-mode .sidebar-wrapper .metismenu a {
    color: #b0b3b8;
}
body.dark-mode .sidebar-wrapper .metismenu a:hover,
body.dark-mode .sidebar-wrapper .metismenu .mm-active > a {
    background: #2f2f2f;
    color: #fc0038;
    box-shadow: inset 4px 0 0 #fc0038; /* Indicador lateral rojo elegante */
}
body.dark-mode .sidebar-wrapper .metismenu ul {
    background: #1f1f1f;
}

/* Tablas */
body.dark-mode .table {
    color: #e4e6eb;
    border-color: #383838;
}
body.dark-mode .table td,
body.dark-mode .table th,
body.dark-mode .gl-table tbody td,
body.dark-mode .gl-table thead th {
    background-color: #242424;
    border-color: #383838;
    color: #e4e6eb;
}

/* Textos oscuros a claros */
body.dark-mode .gl-header-title,
body.dark-mode .gl-value-lg,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .text-dark,
body.dark-mode .mb-0 {
    color: #e4e6eb !important;
}

body.dark-mode .text-secondary {
    color: #a0a0a0 !important;
}

/* Botón Dark Mode Activo */
body.dark-mode .nav-link.dark-mode-icon {
    color: #ffc107; /* Amarillo Sol */
}
/* ==========================================================================
   FIX: MODALES Y SWEETALERT EN DARK MODE
   ========================================================================== */

/* --- 1. MODALES BOOTSTRAP (Tus CRUDs) --- */
body.dark-mode .modal-content {
    background-color: #242424 !important; /* Mismo gris que las cards */
    border: 1px solid #383838;
    color: #e4e6eb;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #383838; /* Líneas separadoras oscuras */
}

body.dark-mode .modal-title {
    color: #e4e6eb;
}

/* Invertir el color del botón de cerrar (la X) para que se vea en oscuro */
body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- 2. SWEETALERT2 (Tus Alertas y Toasts) --- */
/* Fondo general del popup y toast */
body.dark-mode div:where(.swal2-container) div:where(.swal2-popup) {
    background-color: #242424 !important;
    border: 1px solid #383838;
    color: #e4e6eb !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Títulos y Contenido del SweetAlert */
body.dark-mode div:where(.swal2-container) .swal2-title,
body.dark-mode div:where(.swal2-container) .swal2-html-container,
body.dark-mode div:where(.swal2-container) .swal2-content {
    color: #e4e6eb !important;
}

/* Botón "Entendido" (Mantener estilo, asegurar borde) */
body.dark-mode div:where(.swal2-container) button.swal2-styled.swal2-confirm {
    background-color: #fc0038 !important; /* Rojo corporativo */
    color: #fff !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

/* Iconos de SweetAlert (Success/Error/Warning) sin fondo blanco feo */
body.dark-mode .swal2-icon.swal2-success .swal2-success-ring {
    background-color: transparent !important;
    border: 0.25em solid rgba(165, 220, 134, 0.3);
}
body.dark-mode .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #a5dc86 !important;
}

/* --- 3. FIX SELECT2 (Desplegables dentro de modales) --- */
body.dark-mode .select2-container--bootstrap-5 .select2-selection {
    background-color: #2f2f2f !important;
    border-color: #444 !important;
    color: #fff !important;
}

body.dark-mode
    .select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__rendered {
    color: #e4e6eb !important;
}

body.dark-mode .select2-dropdown {
    background-color: #242424 !important;
    border-color: #383838 !important;
    color: #e4e6eb;
}

body.dark-mode .select2-container--bootstrap-5 .select2-results__option {
    color: #e4e6eb;
}

body.dark-mode
    .select2-container--bootstrap-5
    .select2-results__option--highlighted {
    background-color: #fc0038 !important; /* Rojo al pasar el mouse */
    color: #fff !important;
}

body.dark-mode .select2-search__field {
    background-color: #2f2f2f !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* --- 4. FIX TABS (Pestañas en ajustes) --- */
body.dark-mode .nav-tabs .nav-link {
    color: #aaa;
}
body.dark-mode .nav-tabs .nav-link:hover {
    border-color: #383838 #383838 #242424;
    color: #fff;
}
body.dark-mode .nav-tabs .nav-link.active {
    color: #fc0038;
    background-color: #242424;
    border-color: #383838 #383838 #242424;
}
/* ==========================================================================
   FIXES FINALES DARK MODE (Acordeones, Placeholders, Menú Rojo)
   ========================================================================== */

/* --- 1. ARREGLO DE ÁREAS BLANCAS EN MODALES (Acordeones y Cards internas) --- */
/* Si usas Accordion de Bootstrap */
body.dark-mode .modal .accordion-item,
body.dark-mode .modal .accordion-button.collapsed {
    background-color: #2f2f2f !important; /* Fondo del encabezado cerrado */
    color: #e4e6eb !important;
    border-color: #383838 !important;
}

body.dark-mode .modal .accordion-button:not(.collapsed) {
    background-color: #fc0038 !important; /* Rojo cuando está abierto (opcional, se ve bien) */
    color: #ffffff !important;
    box-shadow: none !important;
}

body.dark-mode .modal .accordion-body {
    background-color: #242424 !important; /* El fondo del contenido que se veía blanco */
    color: #e4e6eb !important;
    border-top: 1px solid #383838;
}

/* Si usas Cards internas dentro del modal */
body.dark-mode .modal .card,
body.dark-mode .modal .card-body {
    background-color: transparent !important; /* Que tome el fondo del modal */
    color: #e4e6eb !important;
}

/* --- 2. ARREGLO DE PLACEHOLDERS (Texto "opaco" en inputs) --- */
/* Los haremos más oscuros y sutiles */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode .form-control::placeholder,
body.dark-mode .select2-search__field::placeholder {
    color: #6c757d !important; /* Gris medio de Bootstrap, más sutil que el blanco */
    opacity: 0.7 !important; /* Un poco de transparencia ayuda */
}

/* --- 3. ARREGLO MENÚ DE USUARIO (Mantenerlo ROJO) --- */
/* Apuntamos específicamente al dropdown dentro de la caja de usuario en el topbar */
body.dark-mode .topbar .user-box .dropdown-menu {
    background-color: #fc0038 !important; /* Forzar fondo ROJO */
    border: none !important;
}

/* Los textos e iconos dentro del menú rojo deben ser blancos */
body.dark-mode .topbar .user-box .dropdown-item,
body.dark-mode .topbar .user-box .dropdown-item i {
    color: #ffffff !important;
}

/* Color al pasar el mouse por las opciones del menú rojo */
body.dark-mode .topbar .user-box .dropdown-item:hover,
body.dark-mode .topbar .user-box .dropdown-item:focus {
    background-color: #d1002f !important; /* Un rojo un poco más oscuro para el efecto hover */
    color: #ffffff !important;
}

/* Arreglar la línea divisoria dentro del menú rojo */
body.dark-mode .topbar .user-box .dropdown-divider {
    border-top-color: rgba(
        255,
        255,
        255,
        0.3
    ) !important; /* Línea blanca semitransparente */
}
/* ==========================================================================
   FIX FINAL: MODAL RECETAS, ACORDEONES Y MENU USUARIO
   ========================================================================== */

/* --- 1. MODAL "PERSONALIZA TU PEDIDO" (Recetas/Variantes) --- */

/* Cabecera del producto seleccionado */
body.dark-mode .recipe-product-header {
    background: #2f2f2f !important; /* Gris oscuro */
    border: 1px solid #383838;
}

/* Tarjetas de Variantes y Adicionales (Esas que salían blancas) */
body.dark-mode .recipe-variant-card,
body.dark-mode .recipe-additional-card {
    background-color: #242424 !important; /* Fondo oscuro */
    border-color: #383838 !important;
    box-shadow: none !important;
}

/* Textos dentro de las tarjetas (Nombres y Precios) */
body.dark-mode .recipe-product-name,
body.dark-mode .recipe-product-price,
body.dark-mode .recipe-section-title,
body.dark-mode .recipe-variant-name,
body.dark-mode .recipe-additional-name,
body.dark-mode .recipe-additional-price,
body.dark-mode .recipe-variant-price {
    color: #e4e6eb !important; /* Texto claro brillante */
}

/* Efecto Hover en tarjetas */
body.dark-mode .recipe-variant-card:hover,
body.dark-mode .recipe-additional-card:hover {
    border-color: #fc0038 !important; /* Borde rojo al pasar el mouse */
    transform: translateY(-2px);
}

/* Controles de Cantidad (+ / -) */
body.dark-mode .recipe-quantity-control {
    background-color: #2f2f2f !important;
    border-color: #444 !important;
}
body.dark-mode .recipe-quantity-btn {
    background-color: transparent !important;
    color: #fff !important;
}
body.dark-mode .recipe-quantity-input {
    color: #fff !important;
    background: transparent !important;
}

/* Checkboxes y Radios */
body.dark-mode .recipe-variant-radio .form-check-input,
body.dark-mode .recipe-checkbox {
    background-color: #2a2a2a;
    border-color: #555;
}
body.dark-mode .recipe-variant-radio .form-check-input:checked,
body.dark-mode .recipe-checkbox:checked {
    background-color: #fc0038;
    border-color: #fc0038;
    box-shadow: 0 0 0 3px rgba(252, 0, 56, 0.2);
}

/* --- 2. ACORDEONES (Ej: "Otros Precios" en Registrar Producto) --- */

/* Fondo del contenedor del item */
body.dark-mode .accordion-item {
    background-color: #242424 !important;
    border: 1px solid #383838 !important;
}

/* Botón del acordeón cuando está CERRADO */
body.dark-mode .accordion-button.collapsed {
    background-color: #2f2f2f !important;
    color: #e4e6eb !important;
    box-shadow: none !important;
}

/* Botón del acordeón cuando está ABIERTO */
body.dark-mode .accordion-button:not(.collapsed) {
    background-color: #fc0038 !important; /* Rojo corporativo */
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Cuerpo del acordeón (contenido interior) */
body.dark-mode .accordion-body {
    background-color: #242424 !important;
    color: #e4e6eb !important;
    border-top: 1px solid #383838;
}

/* Labels dentro de acordeones */
body.dark-mode .accordion-body label {
    color: #b0b3b8 !important;
}

/* --- 3. MENÚ DE USUARIO (Debe ser ROJO) --- */

/* Fondo Rojo para el dropdown del usuario */
body.dark-mode .user-box .dropdown-menu {
    background-color: #fc0038 !important;
    border: 1px solid #d1002f !important;
    box-shadow: 0 4px 15px rgba(252, 0, 56, 0.3) !important;
}

/* Items del menú (Perfil, Salir, etc.) */
body.dark-mode .user-box .dropdown-item {
    color: #ffffff !important; /* Texto blanco siempre */
}

/* Iconos dentro del menú */
body.dark-mode .user-box .dropdown-item i {
    color: #ffffff !important;
}

/* Hover en los items (Un rojo un poco más oscuro para dar efecto) */
body.dark-mode .user-box .dropdown-item:hover,
body.dark-mode .user-box .dropdown-item:focus {
    background-color: #d1002f !important;
    color: #ffffff !important;
}

/* Línea divisoria */
body.dark-mode .user-box .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   CORRECCIONES FINALES Y DEFINITIVAS UI (Dark Mode)
   ========================================================================== */

/* --- 1. ACORDEONES (Ej: "Otros Precios" en Registrar Producto) --- */
body.dark-mode .accordion-item {
    background-color: #242424 !important;
    border: 1px solid #383838 !important;
    color: #fff !important;
}
body.dark-mode .accordion-button {
    background-color: #2f2f2f !important;
    color: #fff !important;
    box-shadow: none !important;
}
body.dark-mode .accordion-button:not(.collapsed) {
    background-color: #fc0038 !important; /* Rojo al abrir */
    color: #fff !important;
    box-shadow: none !important;
}
body.dark-mode .accordion-body {
    background-color: #1f1f1f !important;
    color: #e4e6eb !important;
    border-top: 1px solid #383838;
}

/* --- 2. MODAL RECETAS / PERSONALIZAR PEDIDO (Tarjetas Blancas) --- */
/* Fondo de tarjetas de variantes y adicionales */
body.dark-mode .recipe-variant-card,
body.dark-mode .recipe-additional-card {
    background-color: #242424 !important;
    border-color: #383838 !important;
    box-shadow: none !important;
}
/* Textos dentro de las tarjetas */
body.dark-mode .recipe-variant-name,
body.dark-mode .recipe-additional-name,
body.dark-mode .recipe-variant-price,
body.dark-mode .recipe-additional-price,
body.dark-mode .recipe-product-name,
body.dark-mode .recipe-product-price {
    color: #fff !important;
}
/* Hover en tarjetas */
body.dark-mode .recipe-variant-card:hover,
body.dark-mode .recipe-additional-card:hover {
    border-color: #fc0038 !important;
    background-color: #2a2a2a !important;
}
/* Controles de cantidad (+/-) */
body.dark-mode .recipe-quantity-control {
    background-color: #1f1f1f !important;
    border-color: #383838 !important;
}
body.dark-mode .recipe-quantity-btn,
body.dark-mode .recipe-quantity-input {
    color: #fff !important;
    background: transparent !important;
}

/* --- 3. MODAL DE PAGO (El cuadro grande del Total) --- */
body.dark-mode .card-total {
    background-color: #1f1f1f !important; /* Fondo oscuro */
    color: #ffffff !important; /* Texto Blanco */
    border: 1px solid #383838 !important;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5) !important;
}
/* El texto literal "SON: Ciento cincuenta..." */
body.dark-mode .card-total-literal {
    color: #aaa !important;
}
/* Etiquetas de "Cambio" */
body.dark-mode .tittle-cambio {
    color: #fff !important;
}

/* --- 4. NOTIFICACIONES (Hover y Textos) --- */
/* Fondo del item al pasar el mouse (para que no se ponga blanco) */
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #333 !important;
    color: #fff !important;
}
/* Títulos y textos dentro de la notificación */
body.dark-mode .msg-name,
body.dark-mode .msg-header-title {
    color: #fff !important;
}
body.dark-mode .msg-info,
body.dark-mode .msg-time {
    color: #b0b3b8 !important;
}
/* Fondo del encabezado de notificaciones */
body.dark-mode .msg-header,
body.dark-mode .msg-footer {
    background-color: #242424 !important;
    border-color: #383838 !important;
}

/* --- 5. MENÚ DE USUARIO (ROJO) --- */
/* Forzar fondo ROJO solo en el menú del usuario */
body.dark-mode .user-box .dropdown-menu {
    background-color: #fc0038 !important;
    border: 1px solid #d1002f !important;
}
/* Items del menú usuario siempre blancos */
body.dark-mode .user-box .dropdown-item {
    color: #ffffff !important;
}
/* Hover en items del menú usuario (rojo más oscuro) */
body.dark-mode .user-box .dropdown-item:hover {
    background-color: #d6002f !important;
    color: #fff !important;
}
/* Línea divisoria en menú rojo */
body.dark-mode .user-box .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.3) !important;
}
/* ==========================================================================
   CORRECCIONES FINALES: PERFIL ROJO Y NOTIFICACIONES
   ========================================================================== */

/* --- 1. ARREGLO PERFIL DE USUARIO (Header) --- */
/* Quitamos el fondo gris para que se vea el ROJO del header */
body.dark-mode .user-box {
    background-color: transparent !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Asegurar que el nombre y cargo sean blanco puro */
body.dark-mode .user-info .user-name,
body.dark-mode .user-info .designattion {
    color: #ffffff !important;
}

/* --- 2. ARREGLO NOTIFICACIONES (Hover Invisible) --- */
/* Items de la lista de notificaciones en reposo */
body.dark-mode .header-notifications-list .dropdown-item {
    background-color: #242424 !important;
    border-bottom: 1px solid #383838 !important;
}

/* AL PASAR EL MOUSE (HOVER): Fondo gris oscuro en vez de blanco */
body.dark-mode .header-notifications-list .dropdown-item:hover,
body.dark-mode .header-notifications-list .dropdown-item:focus {
    background-color: #383838 !important; /* Gris un poco más claro que el fondo */
    cursor: pointer;
}

/* Texto del título de la notificación */
body.dark-mode .msg-name {
    color: #ffffff !important;
}

/* Texto del mensaje y la hora */
body.dark-mode .msg-info,
body.dark-mode .msg-time {
    color: #b0b3b8 !important; /* Gris claro */
}

/* Iconos de notificaciones (Círculos) */
body.dark-mode .notify {
    border: none !important; /* Quitar bordes blancos si los hubiera */
}
/* ============================================================
    ESTILOS MODAL DETALLE PREMIUM (CARRUSEL & ZOOM FIX)
   ============================================================ */
.main-image-viewport {
    background: #f8f9fa;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #eee;
    position: relative;
}

/* ZOOM LUPA */
.zoom-container {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    cursor: zoom-in;
    display: flex;
    justify-content: center;
    align-items: center;
}
.zoom-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    transform-origin: center;
}
.zoom-lens-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.9);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fc0038;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 5;
}

/* Navegación Carrusel */
.carousel-nav-btn {
    background: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* MINIATURAS */
.thumbnail-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}
.thumb-box {
    width: 65px;
    height: 65px;
    border-radius: 12px;
    border: 2px solid #eee;
    padding: 2px;
    cursor: pointer;
    transition: all 0.3s;
    background: white;
}
.thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* BORDE ROJO ACTIVO - FIX */
.thumb-box.selected-thumb {
    border-color: #fc0038 !important;
    border-width: 3px;
    box-shadow: 0 0 12px rgba(252, 0, 56, 0.3);
    transform: scale(1.05);
}

/* INFO TÉCNICA */
.badge-code {
    background: #f8f9fa;
    color: #6c757d;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 11px;
    border: 1px solid #eee;
}
.description-highlight {
    background: #fffcfc;
    padding: 15px;
    border-radius: 15px;
    border-left: 4px solid #fc0038;
}
.features-scroll {
    max-height: 100px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
}

.info-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.info-pill p {
    margin: 0;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
}
.info-pill strong {
    font-size: 13px;
    color: #333;
    display: block;
}

/* Dark Mode */
body.dark-mode .modal-content {
    background: #1a1a25;
    border: 1px solid #333;
}
body.dark-mode .description-highlight {
    background: #252535;
}
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode strong {
    color: white !important;
}
body.dark-mode .thumb-box {
    background: #252535;
    border-color: #333;
}
body.dark-mode .badge-code {
    background: #252535;
    border-color: #444;
    color: #aaa;
}

/* Botones flotantes mejorados para responsive */
.btn-action-float {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    cursor: pointer;
    background-color: #fff;
}

.btn-action-float:hover {
    transform: scale(1.1);
}

.btn-eye {
    color: #7b09c2;
    border: 2px solid #7b09c2;
}

.btn-stock {
    color: #ffc107;
    border: 2px solid #ffc107;
}

/* Ajuste visual carrusel */
.carousel-indicators [data-bs-target] {
    background-color: #7b09c2;
}

/* FIX RESPONSIVE: BOTONES Y PRECIO 
   Se ajusta el tamaño en móviles para que no se pierda el ojito
*/
@media (max-width: 450px) {
    .price-tag {
        font-size: 0.85rem; /* Reducir fuente precio */
    }
    .btn-action-float {
        width: 28px; /* Reducir botón */
        height: 28px;
        font-size: 14px; /* Reducir icono */
    }
    .action-btn-container {
        gap: 3px; /* Reducir espacio entre botones */
    }
    .product-footer-actions {
        padding: 8px; /* Menos padding interno */
    }
}

/* ============================================================
   PRODUCT CARD ELITE V7 - FINAL (Precio Vertical + Codigo)
   ============================================================ */

.product-card-premium {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    height: 100%;
    cursor: pointer;
}

.product-card-premium:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
    border-color: rgba(252, 0, 56, 0.2);
}

/* IMAGEN */
.premium-image-wrapper {
    width: 100%;
    height: 155px;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.premium-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card-premium:hover .premium-img {
    transform: scale(1.08);
}

/* AREA DE TEXTO */
.premium-body-info {
    padding: 5px 10px 5px 10px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* CODIGO DEL PRODUCTO */
.premium-product-code-badge {
    font-size: 11px;
    color: #6c757d;
    background-color: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 auto 6px auto;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* NOMBRE DEL PRODUCTO */
.premium-product-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    text-transform: uppercase;
    line-height: 1.3;
    height: auto;
    display: block;
    overflow: visible; /* Asegura que se vea todo */
    margin-bottom: 8px;
    word-wrap: break-word; /* Rompe palabras largas si es necesario */
}

/* --- FOOTER BAR (CAMBIOS CLAVE AQUI) --- */
.premium-footer-actions {
    background: #fdfdfd;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Alinea los botones con la base del precio */
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
    gap: 5px;
}

/* CONTENEDOR DE PRECIO VERTICAL */
.price-container {
    display: flex;
    flex-direction: column; /* Pone el Bs. arriba del numero */
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
    flex: 1; /* Toma el espacio disponible */
    min-width: 0; /* Evita que rompa el flexbox */
}

.price-container .currency {
    font-size: 10px;
    font-weight: 700;
    color: #fc0038;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.price-container .amount {
    font-size: 16px;
    font-weight: 800;
    color: #fc0038;
    white-space: normal; /* Permite ver todo el numero */
    word-break: break-all; /* Si es gigante, que baje de linea */
}

/* BOTONES DE ACCION */
.action-buttons {
    display: flex;
    gap: 3px;
    flex-shrink: 0; /* Evita que los botones se aplasten */
}

.btn-action-premium {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-action-premium:hover {
    background: #fc0038;
    color: #ffffff;
}

/* --- AJUSTES PARA MOVILES (PANTALLAS MUY PEQUEÑAS) --- */
@media (max-width: 576px) {
    .premium-footer-actions {
        padding: 8px 6px; /* Reducir padding lateral */
    }

    /* Botones más pequeños en móvil */
    .btn-action-premium {
        width: 28px;
        height: 28px;
        font-size: 14px;
        border-radius: 6px;
    }

    .price-container .amount {
        font-size: 15px; /* Un pelin mas chico para asegurar */
    }

    .premium-product-name {
        font-size: 11px;
    }
}

/* STOCK BADGE (INTACTO) */
.premium-stock-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
}
.stock-success-vibrant {
    background: linear-gradient(135deg, #28c76f 0%, #15a356 100%);
    color: white;
}
.stock-danger-vibrant {
    background: linear-gradient(135deg, #ff0000 0%, #d90000 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
}
.stock-label {
    font-size: 11px;
    font-weight: 800;
}
.stock-number {
    font-size: 12px;
    font-weight: 900;
}

/* AJUSTES DARK MODE (INTACTO) */
body.dark-mode .product-card-premium {
    background: #242424 !important;
    border-color: #383838 !important;
}
body.dark-mode .premium-image-wrapper {
    background: #1a1a1a !important;
}
body.dark-mode .premium-body-info {
    background: #242424 !important;
}
body.dark-mode .premium-product-name {
    color: #e4e6eb !important;
}
body.dark-mode .premium-product-code-badge {
    background: #333;
    color: #aaa;
}
body.dark-mode .premium-footer-actions {
    background: #2f2f2f !important;
    border-top-color: #3d3d3d !important;
}
body.dark-mode .btn-action-premium {
    background: #3d3d3d !important;
    color: #cbd5e1 !important;
}
body.dark-mode .btn-action-premium:hover {
    background: #fc0038 !important;
    color: #ffffff !important;
}

/* Ajuste del Shimmer para que no se vea gris en Dark Mode */
body.dark-mode .premium-shimmer {
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
}

/* Shimmer general */
.premium-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transform: skewX(-20deg);
    z-index: 2;
    pointer-events: none;
}
.product-card-premium:hover .premium-shimmer {
    animation: shimmer 1.2s;
}
@keyframes shimmer {
    100% {
        left: 150%;
    }
}

/* Cápsula contenedora */
.qty-capsule {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
    width: 115px;
    height: 38px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    margin: 0 auto;
    transition: border-color 0.2s;
}

/* Input numérico EDITABLE */
.qty-capsule .form-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
    font-weight: 700;
    color: #1e293b;
    padding: 0;
    font-size: 15px;
    width: 40px;
    cursor: text; /* Cursor de texto */
    -moz-appearance: textfield;
}
.qty-capsule .form-control:focus {
    outline: none;
    background: #f8fafc !important; /* Ligero fondo al escribir */
}
.qty-capsule .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Estilo Base de Botones */
.qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    flex-shrink: 0;
}

/* Botón MENOS (Gris) */
.qty-btn.minus {
    background-color: #e2e8f0;
    color: #64748b;
}
.qty-btn.minus:hover:not(:disabled) {
    background-color: #cbd5e1;
    color: #334155;
}

/* Botón MÁS (Verde) */
.qty-btn.plus {
    background-color: #10b981;
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}
.qty-btn.plus:hover:not(:disabled) {
    background-color: #059669;
    transform: scale(1.05);
}
.qty-btn.plus:active:not(:disabled) {
    transform: scale(0.95);
}

/* Estado Deshabilitado (Bloqueado) */
.qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ESTILOS CARRUSEL GALERIA - LIVEWIRE */
.gallery-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 10px 5px;
    border: 1px solid #dee2e6;
    margin-top: 10px;
}

.gallery-scroll-area {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 100%;
    padding: 5px;
    /* Ocultar barra scroll */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.gallery-scroll-area::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.gallery-item-box {
    position: relative;
    min-width: 80px;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.gallery-item-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-nav-btn {
    background: #fff;
    border: 1px solid #ccc;
    color: #333;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    flex-shrink: 0;
}

.gallery-nav-btn:hover {
    background: #fc0038;
    color: white;
    border-color: #fc0038;
}

.gallery-nav-btn.prev {
    margin-right: 5px;
}
.gallery-nav-btn.next {
    margin-left: 5px;
}

.btn-remove-gallery {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255, 0, 0, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}
.btn-remove-gallery:hover {
    transform: scale(1.1);
}

/* ============================================================
   NUEVOS ESTILOS ÚNICOS PARA MODAL DE PRODUCTO (BOTONES)
   ============================================================ */

/* Contenedor de botones flotantes (Lupa + Expandir) */
.prod-modal-action-group {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    gap: 10px; /* Espacio entre botones */
    z-index: 10;
    pointer-events: auto;
}

/* Estilo base para los botones circulares */
.prod-modal-btn-float {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #444;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Botón de Lupa (Existente estilizado) */
.prod-modal-btn-zoom {
    color: #6c757d;
}

/* Botón Nuevo de Pantalla Completa (El que pidió el cliente) */
.prod-modal-btn-expand {
    color: #fc0038; /* Color rojo de tu marca */
    font-weight: bold;
}

.prod-modal-btn-float:hover {
    transform: scale(1.1);
    background: #fff;
    box-shadow: 0 6px 16px rgba(252, 0, 56, 0.2);
}

/* ============================================================
   LIGHTBOX RÁPIDO (Visor de imagen completa)
   ============================================================ */
.prod-modal-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 100000; /* Super alto para tapar todo */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.prod-modal-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.prod-modal-lightbox-img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.prod-modal-lightbox.active .prod-modal-lightbox-img {
    transform: scale(1);
}

.prod-modal-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.prod-modal-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* =========================================
   BUSCADOR PREMIUM (Sales Interface)
   ========================================= */

.search-premium-group {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: visible; /* Para que el dropdown salga bien */
}

/* Botón del filtro a la izquierda */
.btn-search-filter {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 15px;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-right: 1px solid #e9ecef;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-search-filter:hover,
.btn-search-filter:focus {
    background-color: #e9ecef;
    color: #fc0038; /* Tu rojo */
    border-color: #dee2e6;
}

/* Iconos dentro del botón */
.btn-search-filter i {
    font-size: 16px;
}

/* Input principal */
.search-premium-group .form-control {
    border: 1px solid #dee2e6;
    border-left: none;
    box-shadow: none;
    padding: 12px 10px;
    font-size: 14px;
}

.search-premium-group .form-control:focus {
    background-color: #fff;
    border-color: #dee2e6;
    box-shadow: none; /* Quitamos el glow azul default */
}

/* Icono de lupa estático */
.search-premium-group .input-group-text {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-right: none;
}

/* Dropdown Menu */
.search-premium-group .dropdown-menu {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 8px;
    margin-top: 8px !important;
}

.search-premium-group .dropdown-item {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    transition: all 0.15s;
}

.search-premium-group .dropdown-item:hover {
    background-color: rgba(252, 0, 56, 0.08); /* Rojo muy suave */
    color: #fc0038;
}

.search-premium-group .dropdown-item i {
    font-size: 16px;
    vertical-align: middle;
    margin-bottom: 2px;
}

/* Dark Mode Ajustes */
body.dark-mode .btn-search-filter {
    background-color: #2f2f2f;
    border-color: #444;
    color: #e4e6eb;
}
body.dark-mode .search-premium-group .form-control,
body.dark-mode .search-premium-group .input-group-text,
body.dark-mode .search-premium-group button.bg-white {
    background-color: #242424 !important;
    border-color: #444;
    color: #fff;
}
body.dark-mode .search-premium-group .dropdown-menu {
    background-color: #2f2f2f;
}
body.dark-mode .search-premium-group .dropdown-item {
    color: #e4e6eb;
}
body.dark-mode .search-premium-group .dropdown-item:hover {
    background-color: #3f3f3f;
}


/* =========================================
   BUSCADOR ULTRA PREMIUM (Estilo Cápsula)
   ========================================= */

.sp-search-container {
    position: relative;
    z-index: 5;
}

.sp-search-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-search-wrapper:focus-within {
    border-color: #fc0038;
    box-shadow: 0 0 0 4px rgba(252, 0, 56, 0.1), 
                0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.sp-search-type {
    position: relative; 
    height: 100%;
}

.sp-type-btn {
    height: 100%;
    background: #f8fafc;
    border: none;
    border-radius: 50px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #475569;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 5px;
}

.sp-type-btn:hover {
    background: #f1f5f9;
    color: #fc0038;
}

.sp-type-btn i {
    font-size: 20px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.05));
}

.sp-type-btn::after {
    display: none; 
}

.sp-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 0 15px;
    font-size: 15px;
    font-weight: 500;
    color: #1e293b;
    outline: none !important;
    box-shadow: none !important;
    height: 100%;
}

.sp-search-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.sp-search-actions {
    display: flex;
    align-items: center;
    padding-right: 15px;
    gap: 8px;
}

.sp-divider {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
    margin: 0 5px;
}

.sp-action-btn.sp-clear {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fee2e2;
    color: #ef4444;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s;
}

.sp-action-btn.sp-clear:hover {
    background: #ef4444;
    color: white;
    transform: scale(1.1);
}

.sp-search-icon {
    color: #fc0038;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(252, 0, 56, 0.05);
}

.sp-dropdown {
    position: absolute !important;
    top: 120% !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    min-width: 180px;
    background: white;
    z-index: 1000;
    will-change: opacity, transform;
    animation: spFadeIn 0.2s ease-out forwards;
}

@keyframes spFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.sp-dropdown .dropdown-item {
    border-radius: 10px;
    padding: 10px 15px;
    font-weight: 500;
    font-size: 14px;
    color: #475569;
    display: flex;
    align-items: center;
    transition: all 0.15s;
    margin-bottom: 2px;
}

.sp-dropdown .dropdown-item i {
    font-size: 18px;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.sp-dropdown .dropdown-item:hover {
    background-color: #f1f5f9;
    color: #fc0038;
    transform: translateX(3px);
}

.sp-dropdown .dropdown-item.active {
    background: linear-gradient(135deg, #fc0038 0%, #e11d48 100%) !important;
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(252, 0, 56, 0.3);
}

/* =========================================
   DARK MODE 
   ========================================= */
body.dark-mode .sp-search-wrapper {
    background: #1e1e2d;
    border-color: #333;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

body.dark-mode .sp-search-wrapper:focus-within {
    border-color: #fc0038;
    box-shadow: 0 0 0 1px #fc0038;
}

body.dark-mode .sp-type-btn {
    background: #2b2b40;
    color: #a0a0b0;
}

body.dark-mode .sp-type-btn:hover {
    background: #363650;
    color: #fff;
}

body.dark-mode .sp-search-input {
    color: #e4e6eb;
}

body.dark-mode .sp-search-input::placeholder {
    color: #64748b !important;
}

body.dark-mode .sp-divider {
    background: #3f3f46;
}

body.dark-mode .sp-dropdown {
    background: #1e1e2d;
    border: 1px solid #333 !important;
}

body.dark-mode .sp-dropdown .dropdown-item {
    color: #cbd5e1;
}

body.dark-mode .sp-dropdown .dropdown-item:hover {
    background-color: #2b2b40;
    color: #fff;
}