:root {
    /* PowerLok */
    --primary-powerlok: #269FFF;
    --secondary-powerlok: #1B4451;
    /* PowerVal */
    --primary-powerval: #6A4393;
    --secondary-powerval: #00B6EC;
    /* PowerLife */
    --primary-powerlife: #E52932;
    --secondary-powerlife: #666365;
    --background-plife: #F8F9FA;
    /* PowerLife auxiliares */
    --font-powerlife: #67748E;
    --icon-background-powerlife: #E9ECEF;
    --icon-color-powerlife: #344767;
    /* PowerGas */
    --primary-powergas: #009d42;
    --secondary-powergas: #666365;
    --rojo-powergas: #de1b23;
    /* Estado / Alertas */
    --empty: #FFF;
    --info: #DADADA;
    --success: #82D616;
    --danger: #E30613;
    --warning: #FBCF33;
    /*Background gris*/
    --bs-light-list: #fafafa;
    --bs-light-pill: #636363;
    /*Tarjetas*/
    --color-purple: #7b1fa2;
    --color-yellow: #f6c844;
    --color-red: #ef4f4f;
    --color-green: #22c55e;
    --color-blue: #0d6efd;
}

#pace-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(250, 250, 250, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    display: flex;
}

/* Clases para uso global*/
.pg-secondary-powerlife {
    color: var(--secondary-powerlife);
}

/* Fix Button Close of Alert Dismissible */
.alert-dismissible .btn-close {
    padding: 1rem !important;
    opacity: 0.75 !important;
}

    .alert-dismissible .btn-close:hover {
        opacity: 1 !important;
    }
/* ---------------------------- */

/* field validation error */
.field-validation-error {
    color: #ea0606 !important;
    font-size: 0.8rem;
    padding-left: 0.3rem;
}

/* input, select, and textarea required */
.form-label:has( + input[data-val-required].form-control, + select[data-val-required].form-select, + textarea[data-val-required].form-control, + div.input-group input[data-val-required].form-control, + div.input-group select[data-val-required].form-select, + div.input-group textarea[data-val-required].form-control)::after {
    content: "\00a0\002a";
    color: #ea0606 !important;
}

/* Fix input-group */
.input-group:not(.has-validation) > .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.form-switch .form-check-input:checked {
    background-color: #007BFF !important;
    border-color: #0d6efd !important;
}

/*Fix z-index in sidenav*/
.z-index-sidenav {
    z-index: 1021 !important;
}

/*History icons*/
.text-gradient.text-space {
    background-image: linear-gradient(310deg, #7928CA, #FF0080);
}

.modal-body .body-scroll {
    max-height: 55vh;
    overflow-y: auto;
    position: relative;
}

.render-body-z-index
{
    position: relative !important;
    z-index: 1 !important;
}

.sticky-title {
    position: -webkit-sticky; /* Para compatibilidad con navegadores WebKit */
    position: sticky; /* Hace que el elemento sea sticky */
    top: 0; /* Pegado al borde superior del contenedor */
    background: white; /* Color de fondo para que no se mezcle con el contenido debajo */
}

/*aparenta desactivar cualquier control y su contenido*/
.disabled-any {
    pointer-events: none;
    opacity: 0.4;
}

/*Efecto de zoom a los botones de listados*/
.zoom-effect {
    transition: transform 0.3s ease !important;
    opacity: 1;
}

.zoom-effect:hover {
    transform: scale(1.5) !important;
}
/* Estilo para el contenedor de sugerencias */
.autocomplete-suggestions {
    border: 1px solid #ccc;
    max-height: 55vh;
    overflow-y: auto;
    z-index: 1100 !important;
    background: white;
    display: none;
    position: absolute;
    border-radius: 0.5rem;
    top: calc(100% + 0.3rem);
    left: 0;
    right: 0;
}

.autocomplete-suggestion {
    padding: 8px;
    cursor: pointer;
    border-radius: 0.5rem;
}

.autocomplete-suggestion:hover {
    background: #f0f0f0;
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

@media (max-width: 768px) {
    .autocomplete-suggestions {
        max-height: 35vh;
    }
}

@media (max-width: 480px) {
    .autocomplete-suggestions {
        max-height: 25vh;
    }
}

.boton-eliminar {
    background-color: #000 !important;
    color: #fff !important;
}

.btn-sweet {
    min-width: 100px !important;
    padding: 0.7rem 0.75rem !important;
}
/*Estilos en card de filtros*/
.card-filter-gray {
    background-color: #E9ECEF !important;
    border-radius: 10px !important;
}

.btn-color-white{
    background-color: white;
}

.fixed-badge {
    width: 2.5rem !important;
    height: 1.5rem !important;
    text-align: center !important;
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.75rem !important;
    line-height: 1em !important;
}

.navbar-vertical.navbar-expand-xs {
    top: 21px;
    box-shadow: 0px 3px 6px #00000029;
}

#navbarDropdownMenuLink2.brand-no-selected {
    animation: vibrate 1.5s;
    animation-iteration-count: infinite;
    box-shadow: 0px 3px 6px #E801019E;
    border: 1px solid #E52932;
}

#dropdown-brands {
    right: 23px !important;
}
#dropdown-brands > li {
    width: 150px;
}

#brand-selected {
    width: 2rem;
    height: 2rem;
}

#dropdown-brands > li > span.separator {
    border: 0.5px solid #DADADA;
    opacity: 0.4;
    display: block;
    margin: 14px 0;
}

#dropdown-brands > li > button > img {
    width: 23px;
    height: 23px;
}

#dropdown-brands > li > .dropdown-item:hover {
    background: inherit;
}

.btn-image {
    background-color: white !important;
}

.font-plife {
    color: #67748E !important;
}
.pg-warning {
    background-color: #FBCF33;
    color: #666365;
}
#pg-render-overlay {
    position: absolute;
    top: 15px;
    left: 1.5rem;
    border-radius: 19px;
    width: 97%;
    height: 100%;
    background: #00000029;
    z-index: 999;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.bg-light-pill {
    background: var(--bs-light-pill);
}


@keyframes vibrate {
    0% {
        transform: rotate(0deg);
    }

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

    20% {
        transform: rotate(4deg);
    }

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

    40% {
        transform: rotate(4deg);
    }

    50% {
        transform: rotate(-4deg);
    }

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

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

    80% {
        transform: rotate(1deg);
    }

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

    100% {
        transform: rotate(-1deg);
    }
}


/* APLICACIÓN defs PAGOS */
.nav.ap-nav-pills {
    background: #EBEBEB;
    color: #666365;
}

.nav.ap-nav-pills .nav-link.active {
    background: #666365;
    color: white;
    font-weight: bold;
}

.nav-link-date-filer a.text-primary {
    color: #67748E !important;
    text-decoration: underline;
}

/* THead no capitalize*/
thead th {
    text-transform: none !important;
}

/* Seccion para cambiar el color del seleccionado en el compomente Select2*/
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #e52932;
    color: white;
}

/* Separación de botones de acción en SweetAlert componente personalizado */
.swal2-actions{
    gap:1.0rem !important;
}

/* Validación para inputs */
.custom-validation-error {
    color: #ea0606 !important;
    font-size: 0.8rem !important;
    padding-left: 0.3rem !important;
}


/*Transición para mostrar la notificación de ajuste de Saldo (Aplicación de pagos)*/
.notificacion {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.notificacion.mostrar {
    opacity: 1;
    transform: translateY(0);
}

/* Iconos de validación */
.icon-validation {
    color: var(--empty);
    font-size: 1rem;
}

.icon-validation.success {
    color: var(--success);
}

.icon-validation.error {
    color: var(--danger);
}

/* Textos de alertas */
.span-alert{
    font-weight: bold;
    font-size: 16px !important;
}

.span-alert.success{
    color: var(--success);
}

.span-alert.warning{
    color: var(--warning);
}

.span-alert.info {
    font-weight: 500 !important;
    color: var(--secondary-powergas);
}

/* Estilos de texto reutilizables */
.font-bold {
    font-weight: 800 !important;
}

.text-black {
    color: black !important;
}

.text-white {
    color: white !important;
}

.border-bottom-rounded {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

progress.progress-bar-custom {
    width: 100%;
    height: 10px;
    appearance: none;
    border: none;
    border-radius: 4px;
    background-color: var(--icon-background-powerlife);
    overflow: hidden;
}

progress.progress-bar-custom::-webkit-progress-bar {
    background-color: transparent;
}

progress.progress-bar-custom::-webkit-progress-value {
    border-radius: 4px;
}

progress.progress-bar-custom.progress-danger::-webkit-progress-value {
    background-color: var(--danger);
}

progress.progress-bar-custom.progress-warning::-webkit-progress-value {
    background-color: var(--warning);
}

progress.progress-bar-custom.progress-success::-webkit-progress-value {
    background-color: var(--success);
}

/*Mantener color de texto en botón primario con disabled*/
.btn-primary.disabled {
    color: var(--empty);
}

.btn-secondary {
    background: var(--secondary-powerlife) !important;
    color: #fff;
}

/** CHOISES INPUT **/
.choices__input {
    background-color: transparent !important;
}
.choices {
    background-color: var(--empty) !important;
}

/*Configuración personalizada para los mensajes de validación en un sweetAlert (XmlCEP)*/
.swal2-popup.msg-up .swal2-validation-message {
    content: none !important;
    margin-bottom: 0.5rem;
    margin-top: 0;
    color: red;
    font-size: 14px;
    background: none;
    font-weight: 500;
    text-align: left;
}
.swal2-popup.msg-up .swal2-validation-message::before {
    content: none !important;
}

input[type="radio"].swal2-radio-error {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 0px solid #ccc;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
}

input[type="radio"].swal2-radio-error::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #E30613;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    pointer-events: none;
}
/*************/
.nav-link.text-body.bg-light, a[data-scroll]:hover {
    border-radius: 19px;
    font-weight: bold;
}

.listado-contenedor {
    max-height: 100px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 13px;
    border-radius: 6px;
    background-color: var(--bs-light-list);
    margin-top: 5px;
}

/*Clase color primario de powerLife*/
.text-disabled {
    opacity: 0.5;
}

/*Border PowerLife*/
.border-pw {
    border: 1px solid var( --background-plife);
}