.custom-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
}

/* 1 */
.btn-1 {
    background: rgb(6,14,131);
    background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
    border: none;
}

    .btn-1:hover {
        background: rgb(0,3,255);
        background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
    }

/* 2 */
.btn-2 {
    background: rgb(96,9,240);
    background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
    border: none;
}

    .btn-2:before {
        height: 0%;
        width: 2px;
    }

    .btn-2:hover {
        box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .5), inset -4px -4px 6px 0 rgba(255,255,255,.2), inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
    }


/* 3 */
.btn-3 {
    background: rgb(0,172,238);
    background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
    width: 130px;
    height: 40px;
    line-height: 42px;
    padding: 0;
    border: none;
}

    .btn-3 span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .btn-3:before,
    .btn-3:after {
        position: absolute;
        content: "";
        right: 0;
        top: 0;
        background: rgba(2,126,251,1);
        transition: all 0.3s ease;
    }

    .btn-3:before {
        height: 0%;
        width: 2px;
    }

    .btn-3:after {
        width: 0%;
        height: 2px;
    }

    .btn-3:hover {
        background: transparent;
        box-shadow: none;
    }

        .btn-3:hover:before {
            height: 100%;
        }

        .btn-3:hover:after {
            width: 100%;
        }

    .btn-3 span:hover {
        color: rgba(2,126,251,1);
    }

    .btn-3 span:before,
    .btn-3 span:after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        background: rgba(2,126,251,1);
        transition: all 0.3s ease;
    }

    .btn-3 span:before {
        width: 2px;
        height: 0%;
    }

    .btn-3 span:after {
        width: 0%;
        height: 2px;
    }

    .btn-3 span:hover:before {
        height: 100%;
    }

    .btn-3 span:hover:after {
        width: 100%;
    }

/* 4 */
.btn-4 {
    background-color: #4dccc6;
    background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
    line-height: 42px;
    padding: 0;
    border: none;
}

    .btn-4:hover {
        background-color: #89d8d3;
        background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
    }

    .btn-4 span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .btn-4:before,
    .btn-4:after {
        position: absolute;
        content: "";
        right: 0;
        top: 0;
        box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.9), inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
        transition: all 0.3s ease;
    }

    .btn-4:before {
        height: 0%;
        width: .1px;
    }

    .btn-4:after {
        width: 0%;
        height: .1px;
    }

    .btn-4:hover:before {
        height: 100%;
    }

    .btn-4:hover:after {
        width: 100%;
    }

    .btn-4 span:before,
    .btn-4 span:after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.9), inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
        transition: all 0.3s ease;
    }

    .btn-4 span:before {
        width: .1px;
        height: 0%;
    }

    .btn-4 span:after {
        width: 0%;
        height: .1px;
    }

    .btn-4 span:hover:before {
        height: 100%;
    }

    .btn-4 span:hover:after {
        width: 100%;
    }

/* 5 */
.btn-5 {
    width: 130px;
    height: 40px;
    line-height: 42px;
    padding: 0;
    border: none;
    background: rgb(255,27,0);
    background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
}

    .btn-5:hover {
        color: #f0094a;
        background: transparent;
        box-shadow: none;
    }

    .btn-5:before,
    .btn-5:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 2px;
        width: 0;
        background: #f0094a;
        box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003, 4px 4px 5px 0px #0002;
        transition: 400ms ease all;
    }

    .btn-5:after {
        right: inherit;
        top: inherit;
        left: 0;
        bottom: 0;
    }

    .btn-5:hover:before,
    .btn-5:hover:after {
        width: 100%;
        transition: 800ms ease all;
    }


/* 6 */
.btn-6 {
    background: rgb(247,150,192);
    background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
    line-height: 42px;
    padding: 0;
    border: none;
}

    .btn-6 span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .btn-6:before,
    .btn-6:after {
        position: absolute;
        content: "";
        height: 0%;
        width: 1px;
        box-shadow: -1px -1px 20px 0px rgba(255,255,255,1), -4px -4px 5px 0px rgba(255,255,255,1), 7px 7px 20px 0px rgba(0,0,0,.4), 4px 4px 5px 0px rgba(0,0,0,.3);
    }

    .btn-6:before {
        right: 0;
        top: 0;
        transition: all 500ms ease;
    }

    .btn-6:after {
        left: 0;
        bottom: 0;
        transition: all 500ms ease;
    }

    .btn-6:hover {
        background: transparent;
        color: #76aef1;
        box-shadow: none;
    }

        .btn-6:hover:before {
            transition: all 500ms ease;
            height: 100%;
        }

        .btn-6:hover:after {
            transition: all 500ms ease;
            height: 100%;
        }

    .btn-6 span:before,
    .btn-6 span:after {
        position: absolute;
        content: "";
        box-shadow: -1px -1px 20px 0px rgba(255,255,255,1), -4px -4px 5px 0px rgba(255,255,255,1), 7px 7px 20px 0px rgba(0,0,0,.4), 4px 4px 5px 0px rgba(0,0,0,.3);
    }

    .btn-6 span:before {
        left: 0;
        top: 0;
        width: 0%;
        height: .5px;
        transition: all 500ms ease;
    }

    .btn-6 span:after {
        right: 0;
        bottom: 0;
        width: 0%;
        height: .5px;
        transition: all 500ms ease;
    }

    .btn-6 span:hover:before {
        width: 100%;
    }

    .btn-6 span:hover:after {
        width: 100%;
    }

/* 7 */
.btn-7 {
    background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
    line-height: 42px;
    padding: 0;
    border: none;
}

    .btn-7 span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .btn-7:before,
    .btn-7:after {
        position: absolute;
        content: "";
        right: 0;
        bottom: 0;
        background: rgba(251,75,2,1);
        box-shadow: -7px -7px 20px 0px rgba(255,255,255,.9), -4px -4px 5px 0px rgba(255,255,255,.9), 7px 7px 20px 0px rgba(0,0,0,.2), 4px 4px 5px 0px rgba(0,0,0,.3);
        transition: all 0.3s ease;
    }

    .btn-7:before {
        height: 0%;
        width: 2px;
    }

    .btn-7:after {
        width: 0%;
        height: 2px;
    }

    .btn-7:hover {
        color: rgba(251,75,2,1);
        background: transparent;
    }

        .btn-7:hover:before {
            height: 100%;
        }

        .btn-7:hover:after {
            width: 100%;
        }

    .btn-7 span:before,
    .btn-7 span:after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        background: rgba(251,75,2,1);
        box-shadow: -7px -7px 20px 0px rgba(255,255,255,.9), -4px -4px 5px 0px rgba(255,255,255,.9), 7px 7px 20px 0px rgba(0,0,0,.2), 4px 4px 5px 0px rgba(0,0,0,.3);
        transition: all 0.3s ease;
    }

    .btn-7 span:before {
        width: 2px;
        height: 0%;
    }

    .btn-7 span:after {
        height: 2px;
        width: 0%;
    }

    .btn-7 span:hover:before {
        height: 100%;
    }

    .btn-7 span:hover:after {
        width: 100%;
    }

/* 8 */
.btn-8 {
    background-color: #f0ecfc;
    background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
    line-height: 42px;
    padding: 0;
    border: none;
}

    .btn-8 span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .btn-8:before,
    .btn-8:after {
        position: absolute;
        content: "";
        right: 0;
        bottom: 0;
        background: #c797eb;
        /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
        transition: all 0.3s ease;
    }

    .btn-8:before {
        height: 0%;
        width: 2px;
    }

    .btn-8:after {
        width: 0%;
        height: 2px;
    }

    .btn-8:hover:before {
        height: 100%;
    }

    .btn-8:hover:after {
        width: 100%;
    }

    .btn-8:hover {
        background: transparent;
    }

    .btn-8 span:hover {
        color: #c797eb;
    }

    .btn-8 span:before,
    .btn-8 span:after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        background: #c797eb;
        /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
        transition: all 0.3s ease;
    }

    .btn-8 span:before {
        width: 2px;
        height: 0%;
    }

    .btn-8 span:after {
        height: 2px;
        width: 0%;
    }

    .btn-8 span:hover:before {
        height: 100%;
    }

    .btn-8 span:hover:after {
        width: 100%;
    }


/* 9 */
.btn-9 {
    border: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .btn-9:after {
        position: absolute;
        content: " ";
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #1fd1f9;
        background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
        transition: all 0.3s ease;
    }

    .btn-9:hover {
        background: transparent;
        box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5), inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
        color: #fff;
    }

        .btn-9:hover:after {
            -webkit-transform: scale(2) rotate(180deg);
            transform: scale(2) rotate(180deg);
            box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5), inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
        }

/* 10 */
.btn-10 {
    background: rgb(22,9,240);
    background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .btn-10:after {
        position: absolute;
        content: " ";
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        transition: all 0.3s ease;
        -webkit-transform: scale(.1);
        transform: scale(.1);
    }

    .btn-10:hover {
        color: #fff;
        border: none;
        background: transparent;
    }

        .btn-10:hover:after {
            background: rgb(0,3,255);
            background: linear-gradient(0deg, rgba(2,126,251,1) 0%, rgba(0,3,255,1)100%);
            -webkit-transform: scale(1);
            transform: scale(1);
        }

/* 11 */
.btn-11 {
    border: none;
    background: rgb(251,33,117);
    background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
    color: #fff;
    overflow: hidden;
}

    .btn-11:hover {
        text-decoration: none;
        color: #fff;
    }

    .btn-11:before {
        position: absolute;
        content: '';
        display: inline-block;
        top: -180px;
        left: 0;
        width: 30px;
        height: 100%;
        background-color: #fff;
        animation: shiny-btn1 3s ease-in-out infinite;
    }

    .btn-11:hover {
        opacity: .7;
    }

    .btn-11:active {
        box-shadow: 4px 4px 6px 0 rgba(255,255,255,.3), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.2), inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
    }


@-webkit-keyframes shiny-btn1 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}


/* 16 */
.btn-16 {
    border: none;
    color: #000;
}

    .btn-16:after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        left: 0;
        direction: rtl;
        z-index: -1;
        box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
        transition: all 0.3s ease;
    }

    .btn-16:hover {
        color: #000;
    }

        .btn-16:hover:after {
            left: auto;
            right: 0;
            width: 100%;
        }

    .btn-16:active {
        top: 2px;
    }


/****************Estilo Grilla********************/
/******************************************************/
.highlighted-item:hover, .highlighted-item:hover > td {
    background-color: black !important;
}


/*---------------*GhostButtom Component*-------------------------------------------------------------/

/* Estilos Base del Ghost Button */
.btn-ghost {
    background-color: transparent;
    color: var(--primary, #0d6efd); /* Usa tu variable de color principal o azul bootstrap por defecto */
    border: 2px solid var(--primary, #0d6efd);
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    user-select: none;
}

    /* Efecto Hover Inteligente (Eleva el contraste sin perder el estilo "fantasma") */
    .btn-ghost:hover:not(:disabled) {
        background-color: rgba(13, 110, 253, 0.06); /* Un toque sutil del color de fondo */
        border-color: var(--primary-hover, #0b5ed7);
        color: var(--primary-hover, #0b5ed7);
        box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
    }

    /* Efecto Active (Al hacer clic) */
    .btn-ghost:active:not(:disabled) {
        transform: scale(0.98);
        background-color: rgba(13, 110, 253, 0.12);
    }

    /* Estado Deshabilitado */
    .btn-ghost:disabled {
        border-color: #dee2e6;
        color: #adb5bd;
        cursor: not-allowed;
        box-shadow: none;
        background-color: transparent;
    }

/* Margen del Icono */
.btn-ghost-icon {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
}

/* Animación del Spinner de Carga */
.spinner-ghost {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation-ghost 0.75s linear infinite;
}

@keyframes rotation-ghost {
    0% {
        transform: rotate(0deg);
    }

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

/* Style for image icons inside ghost buttons */
.btn-ghost-img-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    /* Optional: If using black SVGs, this turns them into your primary color on hover */
    transition: filter 0.25s ease;
}

/* Optional alignment tweak for the wrapper */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}



/*end GhostButtom Component*/

/*------------------AVATAR*---------------------------------/
    /* Table mini avatar styling */
.avatar-circle {
    width: 38px;
    height: 38px;
    background-color: #e9ecef;
    color: #495057;
    font-weight: 700;
    font-size: 13px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

    .avatar-circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Modal registration form avatar styling */
.avatar-circle-lg {
    width: 80px;
    height: 80px;
    background-color: #f1f3f5;
    font-size: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px dashed #ced4da;
}

    .avatar-circle-lg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
/*end AVATAR*---------------------------------*/

/*popup*/
/* Contenedor principal de la carga de imagen */
.user-avatar-upload-container {
    background-color: #f8f9fa;
    border: 1px solid #e3e6f0 !important;
    transition: border-color 0.2s ease;
}

/* Círculo perfecto para la foto de perfil en el modal */
.avatar-circle-profile {
    width: 84px;
    height: 84px;
    background-color: #eaecf4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

    /* Ajuste de la foto cargada */
    .avatar-circle-profile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Icono genérico cuando no hay foto */
    .avatar-circle-profile .avatar-placeholder {
        font-size: 32px;
        color: #a3a6b5;
        user-select: none;
    }

/* Suavizar bordes generales de campos DevExpress para un look moderno */
.dxbl-text-edit {
    border-color: #d1d3e2 !important;
}

    .dxbl-text-edit:focus-within {
        border-color: #4e73df !important;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25) !important;
    }
/* Fin del popup */

/*ghost button*/
/* Ajuste de alineación interna del botón */
.btn-ghost {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important; /* Espacio simétrico entre el ojo y el texto */
    white-space: nowrap !important; /* Evita que la palabra "Info" se rompa en dos renglones */
}

/* Control estricto de la imagen para que sea compacta */
.btn-ghost-img-icon {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}
/*************-------------------*/
/* Fin del ghost button */


/*zoom Popup*/
/* Contenedor del visor que bloquea el desborde y permite scroll interno */
.image-zoom-viewport {
    width: 100%;
    max-height: 55vh;
    overflow: auto; /* Muestra barras de scroll si la imagen se hace muy grande */
    background-color: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Propiedades de animación suave para la transición del Zoom */
.image-zoom-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); */ /* Activar si deseas una animación fluida al hacer zoom */
    transform-origin: center center; /* El zoom se expande desde el centro */
}


/*End zoom Popup*/


/* ==========================================
   🖨️ CORRECCIÓN DE IMPRESIÓN ADAPTADA A BLAZOR
   ========================================== */

/* Vista en pantalla normal: Mantiene oculto el ticket en el monitor */
.receipt-print-area {
    display: none;
}

@media print {
    /* Forzar visibilidad base en el lienzo físico */
    html, body {
        background: #ffffff !important;
        color: #000000 !important;
        display: block !important;
        visibility: visible !important;
    }

    /* 1. Ocultar estrictamente los componentes estructurales externos del sistema */
    .app-sidebar,
    .app-topbar,
    .app-main,
    .page-header,
    .card,
    .no-print,
    .dxbl-popup-window {
        display: none !important;
    }

    /* 2. Forzar al contenedor del ticket a ser el único elemento visible en la hoja */
    .print-modal-overlay {
        position: absolute !important;
        background: transparent !important;
        box-shadow: none !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .receipt-print-area {
        display: block !important; /* Muestra el contenido del ticket */
        visibility: visible !important;
        opacity: 1 !important;
        width: 80mm !important; /* Tamaño estándar para tiqueteras térmicas */
        margin: 0 auto !important; /* Centra el ticket en la página */
        padding: 10px !important;
        background: #ffffff !important;
        color: #000000 !important;
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 12px !important;
    }
}
/* <--- 🌟 ¡ESTA ES LA LLAVE CRUCIAL QUE FALTABA PARA CERRAR EL @MEDIA PRINT! */


/*Chat Whassap---------*/
/* Contenedor Principal (Fondo WhatsApp Web Oscuro) */


/* CSS BLINDADO CON PREFIJOS 'wa-' CONTRA EL ESTILO GLOBAL */
.wa-chat-wrapper {
    background-color: #0f171e !important;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    font-family: Segoe UI, Helvetica Neue, sans-serif;
    /* Cambios clave para permitir el colapso del menú lateral */
    width: 100%;
    max-width: 100%;
    flex-grow: 1;
    overflow: hidden;
}
/* 🚀 CONTENEDOR FLEXIBLE: Deja de usar anchos fijos en píxeles */
.wa-chat-main-container {
    display: flex;
    width: 100%; /* 🌟 Cambiado de 95% a 100% para fluir con el Layout */
    max-width: 1200px;
    height: 650px;
    background-color: #0b141a !important;
    border: 1px solid #222e35 !important;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    /* Permite que las columnas internas (sidebar del chat y mensajes) se recalculen al encoger el menú */
    flex-shrink: 1;
}

/* SIDEBAR */
.wa-sidebar {
    width: 30%;
    background-color: #111b21 !important;
    border-right: 1px solid #222e35;
    display: flex;
    flex-direction: column;
    p: 10px;
}

.wa-section-title {
    font-size: 11px;
    font-weight: bold;
    color: #8696a0 !important;
    padding: 12px 15px 5px 15px;
    letter-spacing: 0.5px;
}

.wa-list-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 10px;
}

.wa-list-item {
    background: transparent !important;
    border: none !important;
    color: #e9edef !important;
    text-align: left;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    transition: 0.2s;
    cursor: pointer;
}

    .wa-list-item:hover {
        background-color: #202c33 !important;
    }

.wa-active {
    background-color: #2a3942 !important;
    font-weight: bold;
}

/* LISTA DE USUARIOS */
.wa-users-list {
    flex: 1;
    overflow-y: auto;
}

.wa-user-card {
    padding: 8px 12px;
    border-radius: 6px;
    transition: 0.2s;
}

    .wa-user-card:hover {
        background-color: #202c33 !important;
    }

.wa-online-indicator {
    width: 10px;
    height: 10px;
    background-color: #00a884;
    border-radius: 50%;
    min-width: 10px;
}

.wa-user-info {
    display: flex;
    flex-direction: column;
}

.wa-user-name {
    color: #e9edef !important;
    font-size: 13.5px;
    font-weight: 500;
}
.wa-user-status {
    color: #8696a0 !important;
    font-size: 11px;
}
/* ÁREA DE MENSAJES */

.wa-chat-area {
    width: 70%;
    display: flex;
    flex-direction: column;
    background-color: #0b141a !important;
}

.wa-header {
    background-color: #202c33 !important;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #222e35;
}

.wa-header-avatar {
    width: 40px;
    height: 40px;
    background-color: #6a737d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.wa-header-title {
    color: #white !important;
    font-weight: bold;
    font-size: 15px;
    color: #fff !important;
}

.wa-header-subtitle {
    color: #8696a0 !important;
    font-size: 12px;
}

.wa-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #0b141a !important;
    background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 0);
    background-size: 20px 20px;
}
/* GLOBOS */

.wa-bubble {
    position: relative;
    padding: 6px 12px;
    border-radius: 8px;
    max-width: 65%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.wa-outgoing {
    background-color: #005c4b !important;
    border-top-right-radius: 0;
    align-self: flex-end;
}

.wa-incoming {
    background-color: #202c33 !important;
    border-top-left-radius: 0;
    align-self: flex-start;
}

.wa-bubble-sender {
    font-size: 11.5px;
    color: #53bdeb !important;
    font-weight: bold;
    margin-bottom: 2px;
}

.wa-bubble-text {
    color: #e9edef !important;
    font-size: 14px;
    word-break: break-word;
    text-align: left;
}

.wa-bubble-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #8696a0 !important;
    margin-top: 2px;
    margin-bottom: -2px;
}

.wa-checks {
    color: #53bdeb !important;
}
/* FOOTER INPUT */

.wa-footer {
    background-color: #202c33 !important;
    padding: 12px 20px;
    display: flex;
    align-items: center;
}

.wa-input-container {
    display: flex;
    width: 100%;
    gap: 12px;
    align-items: center;
}

.wa-input {
    flex: 1;
    background-color: #2a3942 !important;
    border: none !important;
    color: #e9edef !important;
    padding: 9px 15px;
    border-radius: 8px;
    font-size: 14px;
}

    .wa-input:focus {
        outline: none !important;
    }

.wa-btn-send {
    width: 38px;
    height: 38px;
    background-color: #00a884 !important;
    border: none !important;
    border-radius: 50%;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .wa-btn-send:hover {
        background-color: #008f72 !important;
    }

.style-scroll::-webkit-scrollbar {
    width: 5px;
}

.style-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

/*Agregado Mas*/
/* Badges de Roles Estilo WhatsApp */
.wa-role-badge {
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-wa-admin {
    background-color: rgba(220, 53, 69, 0.2) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(220, 53, 69, 0.4);
}

.badge-wa-super {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: #ffd166 !important;
    border: 1px solid rgba(255, 193, 7, 0.4);
}

.badge-wa-vendor {
    background-color: rgba(13, 202, 240, 0.2) !important;
    color: #4cc9f0 !important;
    border: 1px solid rgba(13, 202, 240, 0.4);
}

/* Tarjeta dedicada a tu propio perfil */
.wa-my-profile-card {
    background-color: #202c33 !important;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Efecto de pulso verde para confirmar que estás en línea */
.wa-online-pulse {
    width: 10px;
    height: 10px;
    background-color: #00a884;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.7);
    animation: wa-pulse 1.6s infinite;
}

@keyframes wa-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(0, 168, 132, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0);
    }
}

.text-whatsapp-muted {
    color: #8696a0 !important;
}

/* Fin del Chat WhatsApp */