:root {
    /* PowerVal */
    --primary-powerval: #6A4393;
    --secondary-powerval: #00B6EC;
    /* Estado / Alertas */
    --empty: #FFF;
    --info: #DADADA;
    --success: #82D616;
    --danger: #E30613;
    --warning: #FBCF33;
}
/* field validation error */
.field-validation-error {
    color: #ea0606 !important;
    font-size: 0.8rem;
    padding-left: 0.3rem;
}

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

.accordion-pval {
    border-radius: 10px;
    overflow: hidden;
}

.accordion-pval-item:nth-child(2) {
    border-radius: 10px;
}

.accordion-pval-item {
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

/* Efecto acordion activo debe ser igual a primary de powerval*/
.accordion-button:not(.collapsed) {
    color: #6A4393;
}

.labelRequiere::after {
    content: "\00a0\002a";
    color: #ea0606 !important;
}

.Pvalh6 {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0px;
    opacity: 1;
    color: #67748E;
}

.Pvalh1 {
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0px;
    color: #6A4393;
    opacity: 1;
}

.PvalContent {
    text-align: left;
    letter-spacing: 0px;
    color: #67748E;
    opacity: 1;
    font-size: 14px;
    font-weight: normal !important;
}

.PvalAyuda {
    text-align: left;
    letter-spacing: 0px;
    color: #67748E;
    opacity: 1;
    font-size: 12px;
}

.PvalPlaceHolder::placeholder {
    text-align: left;
    letter-spacing: 0px;
    color: #67748E;
    opacity: 1;
}

.PvalPopupAlertSuccess {
    background-color: #FFFFFF;
    border-radius: 27px;
    opacity: 1;
}

.PvalPopupAlertError {
    background-color: #FFFFFF;
    border-radius: 27px;
    opacity: 1;
}

.PvalPopupAlertWarning {
    background-color: #FFFFFF;
    border-radius: 27px;
    opacity: 1;
}

.PvalTitleAlert {
    text-align: center;
    font: normal normal bold 30px !important;
    letter-spacing: 0px;
    color: #666365;
    opacity: 1;
}

.PvalTitleCustomAlert {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.375;
    color: #67748E;
}

.PvalTextAlert {
    letter-spacing: 0px;
    color: #666365;
    opacity: 1;
    font-size: 16px;
}

.PvalButtonPrimary {
    width: 141px;
    height: 42px;
    color: #FFFFFF;
    background: #6A4393 0% 0% no-repeat padding-box;
    border-radius: 8px;
    opacity: 1;
    border: none !important;
    transition: transform 0.3s;
}

/* Boton de alerta primario */
.pValButtonAlertPrimary {
    color: #FFFFFF;
    background: #6A4393 0% 0% no-repeat padding-box;
    opacity: 1;
    border: none !important;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    min-width: 100px;
}

.pValButtonAlertPrimary:hover:not(:disabled) {
    background: #5a3780;
    transform: translateY(-3px);
}

.pValButtonAlertPrimary:active:not(:disabled) {
    transform: translateY(0);
}

.pValButtonAlertPrimary:disabled {
    background: #B0B0B0;
    color: #FFFFFF;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Boton de alerta eliminar elemento*/
.pvalButtonAlertDelete {
    color: #FFFFFF;
    background: #E30613 0% 0% no-repeat padding-box;
    opacity: 1;
    border: none !important;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    min-width: 100px;
}

.pvalButtonAlertDelete:hover:not(:disabled) {
    background: #CC0510;
    transform: translateY(-3px);
}

.pvalButtonAlertDelete:active:not(:disabled) {
    transform: translateY(0);
}

.pvalButtonAlertDelete:disabled {
    background: #E58287;
    color: #FFFFFF;
    cursor: not-allowed;
    opacity: 0.6;
}

.PvalButtonConfirm {
    width: 141px;
    height: 42px;
    color: white;
    background: #E30613 0% 0% no-repeat padding-box;
    border-radius: 8px;
    opacity: 1;
    border: none !important;
    transition: transform 0.3s;
}

.PvalButtonOutLinePrimary {
    width: 141px;
    height: 42px;
    color: #6A4393;
    border: 1px solid #6A4393;
    border-radius: 8px;
    background: transparent;
    transition: transform 0.3s;
    font-weight: bold;
}

/* Boton de alerta Outline primario*/
.pValButtonAlertOutlinePrimary {
    color: #6A4393;
    border: 1px solid #6A4393;
    border-radius: 8px;
    background: transparent;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
    min-width: 100px;
}

.pValButtonAlertOutlinePrimary:hover:not(:disabled) {
    background: #F8F8F8;
    transform: translateY(-3px);
}

.pValButtonAlertOutlinePrimary:active:not(:disabled) {
    transform: translateY(0);
}

.pValButtonAlertOutlinePrimary:disabled {
    color: #B0B0B0;
    border-color: #D0D0D0;
    background: transparent;
    cursor: not-allowed;
    opacity: 0.6;
}

.PvalButtonPrimary:hover {
    transform: scale(1.1);
}

.PvalButtonOutLinePrimary:hover {
    transform: scale(1.1);
}

.zoom-effect {
    transition: transform 0.3s ease !important;
    opacity: 1;
}

.zoom-effect:hover {
    transform: scale(1.5) !important;
}

.circleFormSaldos {
    width: 25px;
    height: 25px;
    border: 1px solid #6A4393;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    background-color: #fff;
}

.circleFormSaldos p {
    padding-top: 15px;
}

.lineFormSaldos {
    border-top: 1px solid #6A4393;
    flex-grow: 1;
}

.lineSeparator {
    border-top: 2px solid #adb5bd;
    flex-grow: 1;
}

.swal2-icon.swal2-warning {
    color: #FBCF33 !important;
    border-color: #FBCF33 !important;
    font-weight: bold;
    border-width: 5px !important;
}

.PValTextSecondary {
    text-align: left;
    font-weight: bold;
    letter-spacing: 0px;
    color: #00B6EC;
    opacity: 1;
    font-size: 20px;
}

.icon-validation {
    color: var(--empty);
    font-size: 1rem;
}

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

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

.oculto {
    display: none !important;
}

/* CSS para formularios de la plataforma basados en UX Writting */

.PvalLabelForm {
    text-align: left;
    letter-spacing: 0px;
    color: #67748E;
    font-weight: bold;
}

.PvalInputForm {
    text-align: left;
    letter-spacing: 0px;
    color: #67748E;
    font-weight: normal;
}

.tituloFormularioPowerVal {
    font-weight: 700;
    letter-spacing: var(--unnamed-character-spacing-0);
    color: #6A4393;
    font-size: 20px;
    opacity: 1;
}

.powerval-font-primary {
    opacity: 1;
    color: #6A4393;
    font-weight: bold;
    letter-spacing: var(--unnamed-character-spacing-0);
}

.font-bold-on-hover:hover {
    font-weight: bold;
}

.nav-item.active > .nav-link {
    background-color: #f0f2f5 !important;
    border-radius: 0.9rem;
    font-weight: 700;
    color: #66748E !important;
}
.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item.active .nav-link::before {
    background-color: #66748E !important;
}

.color-icon {
    color: #67748e !important;
}

.icon-plain-white {
    background-image: none !important;
    background-color: #ffffff !important;
}

/*
  Estilos para la tabla de transacciones
*/

/* Contenedor principal para la celda del monto */
.transaction-amount {
    display: flex;
    align-items: center;
    font-weight: bold;
}

.transaction-amount--positive {
    color: #82D616;
}

.transaction-amount--negative {
    color: #DE1B23;
}

.transaction-amount--neutral {
    color: #6c757d;
}

.transaction-amount__sign {
    width: 1ch;
    text-align: center;
}

.transaction-amount__currency {
    margin: 0 0.3em;
}

.transaction-amount__value {
    min-width: 5em;
    text-align: right;
}

/***********media queries para status Tarjeta***********/
@media (max-width: 1700px) {
    .col-power-3 {
        flex: 0 0 auto;
        width: 25%;
        max-width: 25%;
    }

    .col-power-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
        max-width: 33.33333333%;
    }

    .col-power-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
        max-width: 41.66666667%;
    }

    .my-card-estatus {
        display: flex;
        justify-content: initial;
        align-items: flex-end;
    }

    .my-img-card {
        width: auto;
        height: auto;
    }

    
}

@media (min-width: 1700px) {
    .my-card-estatus {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .my-img-card {
        width: 400px;
        height: auto;
    }
}

/* Focus azul para el grupo completo (input-group) */
.empresa-focus-group {
    border: 2px solid #00B6EC !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 182, 236, 0.25) !important;
    background-color: rgba(0, 182, 236, 0.05) !important;
    transition: all 0.3s ease !important;
    animation: pulseFocus 3s ease-in-out;
}

/* Animación de pulso sutil */
@keyframes pulseFocus {
    0%, 100% {
        box-shadow: 0 0 0 0.25rem rgba(0, 182, 236, 0.25);
    }

    50% {
        box-shadow: 0 0 0 0.4rem rgba(0, 182, 236, 0.35);
    }
}

/* Fallback para el select solo */
.empresa-focus {
    border: 2px solid #00B6EC !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 182, 236, 0.25) !important;
    transition: all 0.3s ease !important;
}

/* Transición suave para el input-group */
.input-group {
    transition: all 0.3s ease;
}

/* Contenedor de alertas - Flujo normal del documento */
#alert-container {
    margin: 1rem 1.5rem 0 1.5rem !important; /* Mismo margen que el navbar (mx-4) */
    z-index: 1000 !important;
}

.alert-empresa-cambio {
    background: #82D616 no-repeat padding-box !important;
    border-radius: 10px !important;
    opacity: 1 !important;
    font: normal normal bold 21px/28px 'Open Sans', sans-serif !important;
    letter-spacing: 0px !important;
    text-align: left !important;
    color: #1B1B1B !important;
    border: none !important;
    padding: 16px 48px 16px 20px !important;
    width: 100% !important;
    position: relative !important;
    animation: slideInDown 0.4s ease-out;
}

/* Animación desde arriba */
@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

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

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

.selector-fijo {
    flex: 0 0 300px;
    min-width: 300px;
    width: 300px;
}

angular-selector-empresa {
    width: 100%;
    min-width: 0;
}

.dropzone-border {
    border-radius: 1rem !important;
    border: 1px solid #8E98AB !important;
}