@import url('/Content/Global/css/colores.css');


.custom-btn, .dropdown-button {
    border-radius: 20px;
    color: var(--blanco);
    padding: 5px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    position: relative;
}

/* Variantes por clase (para no depender de IDs) */
.custom-btn--continue {
    background-color: var(--morado-thona);
    border: 1px solid var(--morado-thona);
}

.custom-btn--continue:hover {
    background-color: var(--azul-thona);
    border-color: var(--azul-thona);
}

.custom-btn--cancel {
    background-color: var(--estrella-venus);
    border: 1px solid var(--estrella-venus);
}

.custom-btn--cancel:hover {
    background-color: var(--azul-thona);
    border-color: var(--azul-thona);
}

/* Estado disabled genérico (por atributo y por clase) */
.custom-btn:disabled,
.dropdown-button:disabled,
.custom-btn.disabled,
.dropdown-button.disabled {
    pointer-events: none;
    opacity: 0.65;
    background-color: var(--ultramar);
    border-color: var(--ultramar);
    color: var(--blanco);
}


#logoutButton {
    background-color: transparent;
    border-color: var(--estrella-venus);
    border-width: 8px;
    border-style: solid;
}


    #logoutButton:hover {
        background-color: var(--estrella-venus);
        border-color: var(--estrella-venus);
    }

#continueButton {
    background-color: var(--morado-thona);
    border-color: var(--morado-thona);
}

    #continueButton:hover {
        background-color: var(--azul-thona);
        border-color: var(--azul-thona);
    }

    #continueButton.disabled {
        pointer-events: none;
        opacity: 0.65;
        background-color: var(--ultramar);
        border-color: var(--ultramar);
        color: var(--ultramar);
    }

#cancelButton {
    background-color: var(--estrella-venus);
    border-color: var(--estrella-venus);
}

    #cancelButton:hover {
        background-color: var(--azul-thona);
        border-color: var(--azul-thona);
    }

#searchButton, #dropdownMenuButton {
    margin-top: 5px;
    background-color: var(--morado-thona);
    color: var(--blanco);
    border-color: var(--morado-thona);
}

#plusButton {
    margin-top: 35px;
    background-color: var(--morado-thona);
    color: var(--blanco);
    border-color: var(--morado-thona);
}

#closeButton {
    background-color: var(--estrella-venus);
    color: var(--blanco);
    border-color: var(--estrella-venus);
}

#returnButton {
    background-color: var(--morado-thona);
    color: var(--blanco);
    border-color: var(--morado-thona);
}

#Asegurados, #Recibos, #detailsSelected, #AvisoCobro {
    background-color: var(--morado-thona);
    color: var(--blanco);
    border-color: var(--morado-thona);
}


#refreshButton {
    background-color: var(--azul-thona);
    border-color: var(--azul-thona);
}

.custom-btn i, #logoutButton i, #continueButton i, .dropdown-button i {
    color: var(--blanco);
    font-size: 16px;
}

.custom-btn.disabled, #logoutButton.disabled, #continueButton.disabled, .dropdown-button.disabled {
    pointer-events: none;
    background-color: var(--ultramar);
    border-color: var(--ultramar);
    color: var(--blanco);
}


a.download-btn.btn.btn-primary.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background-color: transparent;
    color: var(--negro) !important;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    font-size: 20px;
    margin: 5px;
    flex-direction: column;
}

a.download-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Iniciar trámite*/
.small-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .2rem;
}

    .small-button-container button {
        width: 130px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .2rem;
    }

.small-button-procedure-data {
    width: 130px;
    height: 42px;
    font-size: 14px;
    padding: 6px 15px;
    border-radius: 20px;
    background-color: var(--morado-thona);
    color: var(--blanco);
    border: 1px solid var(--morado-thona);
}

    .small-button-procedure-data:hover {
        background-color: var(--azul-thona);
        border-color: var(--azul-thona);
        color: var(--blanco);
    }

#searchButton, #continueFolio, #confirmacionFolio, #continueNumeroCotizacion, #continueNumeroPoliza,
#iniciarTramite, #reIniciarConfiguracion, #capturarDatos, #continuar, #btnValidar, #confirmarRenovacion,
#btnDocumentosPrecargados-datosTramiteDocs, #btnrenovacionManual,
#btnsoloFolio, #btnrenovacionPresuscrita, #btn_agente, #alternarSeleccion, #btn_cotizacion, #btn_emision,
#btn_siniestros, #btn-comentarios, #descargar-poliza, #btn-enviar-comentario {
    background-color: var(--morado-thona);
    border-color: var(--morado-thona);
}

    #searchButton:hover,
    #continueFolio:hover,
    #confirmacionFolio:hover,
    #continueNumeroCotizacion:hover,
    #continueNumeroPoliza:hover,
    #descargar-poliza:hover{
        background-color: var(--azul-thona);
        border-color: var(--azul-thona);
    }

    #searchButton.disabled,
    #continueFolio.disabled,
    #continueNumeroCotizacion.disabled,
    #continueNumeroPoliza.disabled,
    #descargar-poliza.disabled {
        pointer-events: none;
        opacity: 0.65;
        background-color: var(--ultramar);
        border-color: var(--ultramar);
        color: var(--blanco);
    }

    #confirmacionFolio:disabled,
    #continueNumeroPoliza:disabled {
        pointer-events: none;
        opacity: 0.65;
        background-color: var(--ultramar);
        border-color: var(--ultramar);
        color: var(--blanco);
    }


#reloadButton {
    background-color: var(--morado-thona);
    border-color: var(--morado-thona);
}

    #reloadButton.disabled {
        pointer-events: none;
        opacity: 0.65;
        background-color: var(--ultramar);
        border-color: var(--ultramar);
        color: var(--blanco);
    }

    #reloadButton:hover {
        background-color: var(--azul-thona);
        border-color: var(--azul-thona);
    }

/* Configuracion de tramite */
.medium-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .2rem;
}

    .medium-button-container button {
        width: 260px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .2rem;
    }


#iniciarTramite.disabled,
#reIniciarConfiguracion.disabled,
#capturarDatos.disabled,
#continuar.disabled,
#btnValidar.disabled,
#confirmarRenovacion.disabled,
#btnrenovacionManual.disabled,
#btnsoloFolio.disabled,
#btnrenovacionPresuscrita.disabled,
#btn_agente.disabled,
#alternarSeleccion.disabled,
#btn_cotizacion.disabled,
#btn_siniestros.disabled,
#btn_emision.disabled,
#btn-comentarios.disabled,
#btn-enviar-comentario.disabled{
    pointer-events: none;
    opacity: 0.65;
    background-color: var(--ultramar);
    border-color: var(--ultramar);
    color: var(--blanco);
}

#generarSubgrupos {
    background-color: var(--morado-thona);
    border-color: var(--morado-thona);
    color: var(--blanco);
    position: relative; /* Necesario para posicionar el badge */
}

#generarSubgrupos:hover {
    background-color: var(--azul-thona);
    border-color: var(--azul-thona);
}

/* Badge para indicar que el botón es obligatorio */
#generarSubgrupos.required::after {
    content: "";
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    background-color: #dc3545;
    border-radius: 50%;
    border: 3px solid var(--blanco);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: pulse 2s infinite;
    z-index: 10;
}

/* Animación de pulso para el badge */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}

/* Hover effect para el badge */
#generarSubgrupos.required:hover::after {
    animation: none;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Estado cuando el botón ya ha sido presionado */
#generarSubgrupos.pressed {
    background-color: var(--morado-thona);
    border-color: var(--morado-thona);
}

/* Estado cuando está presionado pero aún esperando validación */
#generarSubgrupos.pressed.required {
    background-color: var(--azul-thona);
    border-color: var(--azul-thona);
    position: relative;
}

/* El badge desaparece solo cuando se presiona Y se valida completamente */
#generarSubgrupos.pressed.required::after {
    content: "";
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    background-color: #ffc107; /* Color amarillo para indicar "en proceso" */
    border-radius: 50%;
    border: 3px solid var(--blanco);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: pulse 1.5s infinite;
    z-index: 10;
}

/* El badge desaparece completamente solo cuando se presiona Y se valida */
#generarSubgrupos.pressed:not(.required)::after {
    display: none;
}

/* Botones de VerDatosTramite */
#devolver, #rechazar, #atender, #aprobar, #regresarListado {
    background-color: var(--morado-thona);
    border-color: var(--morado-thona);
    color: var(--blanco);
}

    #devolver:hover, #rechazar:hover, #atender:hover, #aprobar:hover, #regresarListado:hover {
        background-color: var(--azul-thona);
        border-color: var(--azul-thona);
        color: var(--blanco);
    }

    #devolver.disabled, #rechazar.disabled, #atender.disabled, #aprobar.disabled, #regresarListado.disabled {
        pointer-events: none;
        opacity: 0.65;
        background-color: var(--ultramar);
        border-color: var(--ultramar);
        color: var(--blanco);
    }

    #devolver i, #rechazar i, #atender i, #aprobar i, #regresarListado i {
        color: var(--blanco);
        font-size: 16px;
    }