/*  ESTILOS BASE DEL BOTÓN */
.btn-icon-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--black-infolaft) 0% 0% no-repeat padding-box;
    color: var(--white);
    border: none;
    border-radius: 8px;
    width: auto;
    min-width: 140px;
    height: 42px;
    position: relative;
    transition: all 0.3s ease-in-out;
}

/*  Estado Hover */
.btn-icon-custom:hover {
    background-color: #3D4A50;
}

/* Estado Loading */
.btn-icon-custom.loading {
    background: var(--black-infolaft) !important;
    color: var(--white) !important;
    cursor: wait;
}

/* 🔍 Estado de Enfoque y Visitado */
.btn-icon-custom:focus,
.btn-icon-custom:focus-visible,
.btn-icon-custom:visited {
    color: var(--white) !important;
}


/* CONTENIDO DEL BOTÓN */
.button-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ocultar ícono normal cuando el botón está en loading */
.btn-icon-custom.loading i {
    display: none;
}


/*  ESTILOS DEL SPINNER */
.loader-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

/*  Spinner SVG */
.loader {
    width: 18px;
    height: 18px;
    overflow: visible;
    transform: rotate(-90deg);
    transform-origin: center;
}

/*  Círculo Activo (Animado) */
.loader .active {
    stroke:var(--white) !important;
    stroke-linecap: round;
    stroke-dashoffset: 360;
    animation: active-animation 2s ease-in-out infinite;
}

/*  Círculo de Fondo (Track) */
.loader .track {
    stroke: var(--white) !important;
    stroke-linecap: round;
    stroke-dashoffset: 360;
    animation: track-animation 2s ease-in-out infinite;
}

/*  Ajustar grosor del Spinner */
.loader circle {
    stroke-width: 10px;
}


/*  ANIMACIONES DEL SPINNER */
@keyframes active-animation {
    0% { stroke-dasharray: 0 360; }
    50% { stroke-dasharray: 180 180; }
    100% { stroke-dasharray: 360 0; }
}

@keyframes track-animation {
    0% { stroke-dasharray: 0 360; }
    50% { stroke-dasharray: 180 180; }
    100% { stroke-dasharray: 360 0; }
}