/**
 * BINAS Icon System - CSS Approach
 * Sistema de iconos usando pseudo-elementos CSS
 * 
 * @version 4.0.1
 * @date 2025-01-10
 * @encoding UTF-8 sin BOM
 * 
 * Estilo Outlook-inspired (SIMPLIFICADO):
 * - Todos los botones con fondo blanco/transparente
 * - Bordes grises claros (tokens centralizados)
 * - Solo el icono en color (semántico)
 * - Texto gris neutral
 * - Hover sutil (sin movimiento)
 */

/* ============================================
   CONFIGURACIÓN BASE DE ICONOS
   ============================================ */

.btn[class*="btn-"]::before,
.btn[class*="btn-"]::after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   EXCEPCIONES: Bootstrap Native Components
   NO aplicar sistema de iconos a componentes nativos de Bootstrap
   ============================================ */

/* Bootstrap btn-close (X para cerrar modales, alerts, etc) */
.btn-close::before,
.btn-close::after {
    content: none !important;
    display: none !important;
    font-family: inherit !important;
}

/* Resetear estilos Outlook para btn-close */
.btn-close {
    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat !important;
    border: 0 !important;
    border-radius: 0.375rem !important;
    box-shadow: none !important;
    opacity: 0.5 !important;
    padding: 0.25em 0.25em !important;
}

    .btn-close:hover {
        opacity: 0.75 !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    .btn-close:focus {
        opacity: 1 !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    }

/* Otros componentes Bootstrap que no deben tener iconos personalizados */
.btn.dropdown-toggle::after,
.btn.accordion-button::before,
.btn.accordion-button::after,
.btn.carousel-control-prev::before,
.btn.carousel-control-next::before,
.btn.carousel-control-prev::after,
.btn.carousel-control-next::after {
    content: inherit !important;
    font-family: inherit !important;
    margin: inherit !important;
    color: inherit !important;
}

/* ============================================
   CONTINUACIÓN: CONFIGURACIÓN BASE DE ICONOS
   ============================================ */

/* Margen por defecto cuando hay texto */
.btn[class*="btn-"]::before {
    margin-right: 0.5rem;
}

.btn[class*="btn-"]::after {
    margin-left: 0.5rem;
}

/* ============================================
   BOTONES SOLO CON ICONO (SIN TEXTO)
   ============================================ */

.btn[class*="btn-"]:empty::before,
.btn[class*="btn-"]:empty::after {
    margin: 0 !important;
}

/* Botón con solo espacios en blanco */
.btn[class*="btn-"]:not(:empty)::before {
    margin-right: 0.5rem;
}

/* Si el contenido del botón es solo whitespace, también quitar margen */
.btn[class*="btn-"].btn-icon-only::before,
.btn[class*="btn-"].btn-icon-only::after {
    margin: 0 !important;
}

/* ============================================
   ESTILO BASE OUTLOOK-INSPIRED (TOKENS CENTRALIZADOS)
   Aplicado a TODOS los botones del sistema
   ============================================ */

/* Resetear estilos Bootstrap para botones con iconos */
.btn-save,
.btn-guardar,
.btn-edit,
.btn-editar,
.btn-delete,
.btn-eliminar,
.btn-remove,
.btn-cancel,
.btn-cancelar,
.btn-confirm,
.btn-confirmar,
.btn-add,
.btn-agregar,
.btn-create,
.btn-crear,
.btn-export,
.btn-exportar,
.btn-download,
.btn-descargar,
.btn-upload,
.btn-subir,
.btn-import,
.btn-importar,
.btn-filter,
.btn-filtrar,
.btn-search,
.btn-buscar,
.btn-refresh,
.btn-actualizar,
.btn-reload,
.btn-recargar,
.btn-print,
.btn-imprimir,
.btn-copy,
.btn-copiar,
.btn-duplicate,
.btn-duplicar,
.btn-settings,
.btn-configuracion,
.btn-configure,
.btn-configurar,
.btn-tag,
.btn-etiqueta,
.btn-tags,
.btn-etiquetas,
.btn-next,
.btn-siguiente,
.btn-prev,
.btn-anterior,
.btn-previous,
.btn-back,
.btn-volver,
.btn-forward,
.btn-adelante,
.btn-home,
.btn-inicio,
.btn-view,
.btn-ver,
.btn-show,
.btn-mostrar,
.btn-hide,
.btn-ocultar,
.btn-expand,
.btn-expandir,
.btn-collapse,
.btn-contraer,
.btn-file,
.btn-archivo,
.btn-document,
.btn-documento,
.btn-folder,
.btn-carpeta,
.btn-pdf,
.btn-excel,
.btn-user,
.btn-usuario,
.btn-profile,
.btn-perfil,
.btn-login,
.btn-entrar,
.btn-logout,
.btn-salir,
.btn-ok,
.btn-approved,
.btn-aprobado,
.btn-alert,
.btn-alerta,
.btn-error,
.btn-failed,
.btn-fallido,
.btn-details,
.btn-detalles,
.btn-well,
.btn-pozo,
.btn-plant,
.btn-planta,
.btn-network,
.btn-red,
.btn-map,
.btn-mapa,
.btn-chart,
.btn-grafico,
.btn-report,
.btn-reporte,
.btn-statistics,
.btn-estadisticas,
.btn-stats,
.btn-analytics,
.btn-analisis,
.btn-help,
.btn-ayuda,
.btn-support,
.btn-soporte,
.btn-custom {
    /* Estilo Outlook usando tokens */
    background-color: var(--outlook-button-bg);
    border: var(--border-width) solid var(--outlook-button-border);
    color: var(--outlook-text-secondary);
    border-radius: var(--radius-xs);
    padding: var(--spacing-3) var(--spacing-4);
    font-weight: var(--font-weight-normal);
    transition: var(--transition-colors), box-shadow var(--transition-base);
}

    /* Hover: sombreado sutil (sin movimiento) */
    .btn-save:hover,
    .btn-guardar:hover,
    .btn-edit:hover,
    .btn-editar:hover,
    .btn-delete:hover,
    .btn-eliminar:hover,
    .btn-remove:hover,
    .btn-cancel:hover,
    .btn-cancelar:hover,
    .btn-confirm:hover,
    .btn-confirmar:hover,
    .btn-add:hover,
    .btn-agregar:hover,
    .btn-create:hover,
    .btn-crear:hover,
    .btn-export:hover,
    .btn-exportar:hover,
    .btn-download:hover,
    .btn-descargar:hover,
    .btn-upload:hover,
    .btn-subir:hover,
    .btn-import:hover,
    .btn-importar:hover,
    .btn-filter:hover,
    .btn-filtrar:hover,
    .btn-search:hover,
    .btn-buscar:hover,
    .btn-refresh:hover,
    .btn-actualizar:hover,
    .btn-reload:hover,
    .btn-recargar:hover,
    .btn-print:hover,
    .btn-imprimir:hover,
    .btn-copy:hover,
    .btn-copiar:hover,
    .btn-duplicate:hover,
    .btn-duplicar:hover,
    .btn-settings:hover,
    .btn-configuracion:hover,
    .btn-configure:hover,
    .btn-configurar:hover,
    .btn-tag:hover,
    .btn-etiqueta:hover,
    .btn-tags:hover,
    .btn-etiquetas:hover,
    .btn-next:hover,
    .btn-siguiente:hover,
    .btn-prev:hover,
    .btn-anterior:hover,
    .btn-previous:hover,
    .btn-back:hover,
    .btn-volver:hover,
    .btn-forward:hover,
    .btn-adelante:hover,
    .btn-home:hover,
    .btn-inicio:hover,
    .btn-view:hover,
    .btn-ver:hover,
    .btn-show:hover,
    .btn-mostrar:hover,
    .btn-hide:hover,
    .btn-ocultar:hover,
    .btn-expand:hover,
    .btn-expandir:hover,
    .btn-collapse:hover,
    .btn-contraer:hover,
    .btn-file:hover,
    .btn-archivo:hover,
    .btn-document:hover,
    .btn-documento:hover,
    .btn-folder:hover,
    .btn-carpeta:hover,
    .btn-pdf:hover,
    .btn-excel:hover,
    .btn-user:hover,
    .btn-usuario:hover,
    .btn-profile:hover,
    .btn-perfil:hover,
    .btn-login:hover,
    .btn-entrar:hover,
    .btn-logout:hover,
    .btn-salir:hover,
    .btn-ok:hover,
    .btn-approved:hover,
    .btn-aprobado:hover,
    .btn-alert:hover,
    .btn-alerta:hover,
    .btn-error:hover,
    .btn-failed:hover,
    .btn-fallido:hover,
    .btn-details:hover,
    .btn-detalles:hover,
    .btn-well:hover,
    .btn-pozo:hover,
    .btn-plant:hover,
    .btn-planta:hover,
    .btn-network:hover,
    .btn-red:hover,
    .btn-map:hover,
    .btn-mapa:hover,
    .btn-chart:hover,
    .btn-grafico:hover,
    .btn-report:hover,
    .btn-reporte:hover,
    .btn-statistics:hover,
    .btn-estadisticas:hover,
    .btn-stats:hover,
    .btn-analytics:hover,
    .btn-analisis:hover,
    .btn-help:hover,
    .btn-ayuda:hover,
    .btn-support:hover,
    .btn-soporte:hover,
    .btn-custom:hover {
        background-color: var(--outlook-button-hover-bg);
        border-color: var(--outlook-border-hover);
        box-shadow: var(--outlook-shadow-subtle);
        color: var(--outlook-text-primary);
    }

    /* Active/Focus: borde más visible */
    .btn-save:active,
    .btn-save:focus,
    .btn-guardar:active,
    .btn-guardar:focus,
    .btn-edit:active,
    .btn-edit:focus,
    .btn-editar:active,
    .btn-editar:focus,
    .btn-delete:active,
    .btn-delete:focus,
    .btn-eliminar:active,
    .btn-eliminar:focus,
    .btn-cancel:active,
    .btn-cancel:focus,
    .btn-cancelar:active,
    .btn-cancelar:focus,
    .btn-confirm:active,
    .btn-confirm:focus,
    .btn-confirmar:active,
    .btn-confirmar:focus,
    .btn-login:active,
    .btn-login:focus,
    .btn-entrar:active,
    .btn-entrar:focus,
    .btn-custom:active,
    .btn-custom:focus {
        border-color: var(--outlook-text-tertiary);
        box-shadow: 0 0 0 0.2rem rgba(141, 141, 141, 0.25);
    }

    /* ============================================
   COLORES DE ICONOS POR ACCIÓN
   Solo el icono tiene color (usando tokens), el texto es gris
   ============================================ */

    /* Guardar - Icono verde */
    .btn-save::before,
    .btn-guardar::before {
        content: "\f0c7"; /* fa-save */
        color: var(--icon-color-success);
    }

    /* Editar - Icono azul */
    .btn-edit::before,
    .btn-editar::before {
        content: "\f044"; /* fa-edit */
        color: var(--palette-blue-primary);
    }

    /* Eliminar - Icono rojo */
    .btn-delete::before,
    .btn-eliminar::before,
    .btn-remove::before {
        content: "\f2ed"; /* fa-trash */
        color: var(--icon-color-danger);
    }

    /* Cancelar - Icono gris (NO aplicar a btn-close de Bootstrap) */
    .btn-cancel::before,
    .btn-cancelar::before,
    .btn-cerrar::before {
        content: "\f00d"; /* fa-times */
        color: var(--icon-color-neutral);
    }

    /* Confirmar - Icono verde (NO aplicar a btn-close de Bootstrap) */
    .btn-confirm::before,
    .btn-confirm::before,
    .btn-confirmar::before {
        content: "\f00c"; /* fa-check */
        color: var(--icon-color-success);
    }

    /* Agregar - Icono verde */
    .btn-add::before,
    .btn-agregar::before,
    .btn-create::before,
    .btn-crear::before {
        content: "\f067"; /* fa-plus */
        color: var(--icon-color-success);
    }

    /* Exportar - Icono teal */
    .btn-export::before,
    .btn-exportar::before {
        content: "\f1c3"; /* fa-file-excel */
        color: var(--palette-teal);
    }

    /* Descargar - Icono cyan */
    .btn-download::before,
    .btn-descargar::before {
        content: "\f019"; /* fa-download */
        color: var(--palette-cyan);
    }

    /* Subir - Icono azul */
    .btn-upload::before,
    .btn-subir::before {
        content: "\f093"; /* fa-upload */
        color: var(--palette-blue-primary);
    }

    /* Importar - Icono cyan */
    .btn-import::before,
    .btn-importar::before {
        content: "\f56f"; /* fa-file-import */
        color: var(--palette-cyan);
    }

    /* Filtrar - Icono gris */
    .btn-filter::before,
    .btn-filtrar::before {
        content: "\f0b0"; /* fa-filter */
        color: var(--icon-color-neutral);
    }

    /* Buscar - Icono azul */
    .btn-search::before,
    .btn-buscar::before {
        content: "\f002"; /* fa-search */
        color: var(--palette-blue-primary);
    }

    /* Actualizar - Icono gris */
    .btn-refresh::before,
    .btn-actualizar::before,
    .btn-reload::before,
    .btn-recargar::before {
        content: "\f2f1"; /* fa-sync-alt */
        color: var(--icon-color-neutral);
    }

    /* Imprimir - Icono gris oscuro */
    .btn-print::before,
    .btn-imprimir::before {
        content: "\f02f"; /* fa-print */
        color: var(--outlook-text-primary);
    }

    /* Copiar - Icono cyan */
    .btn-copy::before,
    .btn-copiar::before,
    .btn-duplicate::before,
    .btn-duplicar::before {
        content: "\f0c5"; /* fa-copy */
        color: var(--palette-cyan);
    }

    /* Configuración - Icono gris */
    .btn-settings::before,
    .btn-configuracion::before,
    .btn-configure::before,
    .btn-configurar::before {
        content: "\f013"; /* fa-cog */
        color: var(--icon-color-neutral);
    }

    /* Tags - Icono warning */
    .btn-tag::before,
    .btn-etiqueta::before,
    .btn-tags::before,
    .btn-etiquetas::before {
        content: "\f02b"; /* fa-tag */
        color: var(--icon-color-warning);
    }

    /* ============================================
   NAVEGACIÓN
   ============================================ */

    /* Siguiente (icono a la derecha) */
    .btn-next::after,
    .btn-siguiente::after {
        content: "\f054"; /* fa-chevron-right */
        margin-left: 0.5rem;
        margin-right: 0;
        color: var(--palette-blue-primary);
    }

    .btn-next::before,
    .btn-siguiente::before {
        content: none;
    }

    /* Anterior */
    .btn-prev::before,
    .btn-anterior::before,
    .btn-previous::before {
        content: "\f053"; /* fa-chevron-left */
        color: var(--icon-color-neutral);
    }

    /* Volver */
    .btn-back::before,
    .btn-volver::before {
        content: "\f060"; /* fa-arrow-left */
        color: var(--icon-color-neutral);
    }

    /* Adelante */
    .btn-forward::before,
    .btn-adelante::before {
        content: "\f061"; /* fa-arrow-right */
        color: var(--palette-blue-primary);
    }

    /* Inicio */
    .btn-home::before,
    .btn-inicio::before {
        content: "\f015"; /* fa-home */
        color: var(--palette-blue-primary);
    }

    /* ============================================
   VISUALIZACIÓN
   ============================================ */

    .btn-view::before,
    .btn-ver::before,
    .btn-show::before,
    .btn-mostrar::before {
        content: "\f06e"; /* fa-eye */
        color: var(--palette-blue-primary);
    }

    .btn-hide::before,
    .btn-ocultar::before {
        content: "\f070"; /* fa-eye-slash */
        color: var(--icon-color-neutral);
    }

    .btn-expand::before,
    .btn-expandir::before {
        content: "\f078"; /* fa-chevron-down */
        color: var(--icon-color-neutral);
    }

    .btn-collapse::before,
    .btn-contraer::before {
        content: "\f077"; /* fa-chevron-up */
        color: var(--icon-color-neutral);
    }

    /* ============================================
   DOCUMENTOS Y DATOS
   ============================================ */

    .btn-file::before,
    .btn-archivo::before {
        content: "\f15b"; /* fa-file */
        color: var(--icon-color-neutral);
    }

    .btn-document::before,
    .btn-documento::before {
        content: "\f15c"; /* fa-file-alt */
        color: var(--icon-color-neutral);
    }

    .btn-folder::before,
    .btn-carpeta::before {
        content: "\f07b"; /* fa-folder */
        color: var(--icon-color-warning);
    }

    .btn-pdf::before {
        content: "\f1c1"; /* fa-file-pdf */
        color: var(--icon-color-danger);
    }

    .btn-excel::before {
        content: "\f1c3"; /* fa-file-excel */
        color: var(--icon-color-success);
    }

    /* ============================================
   USUARIOS Y AUTENTICACIÓN
   ============================================ */

    .btn-user::before,
    .btn-usuario::before {
        content: "\f007"; /* fa-user */
        color: var(--palette-blue-primary);
    }

    .btn-profile::before,
    .btn-perfil::before {
        content: "\f2bd"; /* fa-user-circle */
        color: var(--palette-blue-primary);
    }

    /* Login / Entrar - Icono verde */
    .btn-login::before,
    .btn-entrar::before {
        content: "\f2f6"; /* fa-sign-in-alt */
        color: var(--icon-color-success);
    }

    /* Logout / Salir - Icono rojo */
    .btn-logout::before,
    .btn-salir::before {
        content: "\f2f5"; /* fa-sign-out-alt */
        color: var(--icon-color-danger);
    }

    /* ============================================
   ESTADOS
   ============================================ */

    .btn-ok::before,
    .btn-approved::before,
    .btn-aprobado::before {
        content: "\f058"; /* fa-check-circle */
        color: var(--icon-color-success);
    }

    .btn-alert::before,
    .btn-alerta::before {
        content: "\f071"; /* fa-exclamation-triangle */
        color: var(--icon-color-warning);
    }

    .btn-error::before,
    .btn-failed::before,
    .btn-fallido::before {
        content: "\f057"; /* fa-times-circle */
        color: var(--icon-color-danger);
    }

    .btn-details::before,
    .btn-detalles::before {
        content: "\f05a"; /* fa-info-circle */
        color: var(--palette-cyan);
    }

    /* ============================================
   INFRAESTRUCTURA
   ============================================ */

    .btn-well::before,
    .btn-pozo::before {
        content: "\f043"; /* fa-water */
        color: var(--palette-blue-primary);
    }

    .btn-plant::before,
    .btn-planta::before {
        content: "\f275"; /* fa-industry */
        color: var(--icon-color-neutral);
    }

    .btn-network::before,
    .btn-red::before {
        content: "\f542"; /* fa-project-diagram */
        color: var(--palette-cyan);
    }

    .btn-map::before,
    .btn-mapa::before {
        content: "\f279"; /* fa-map-marked-alt */
        color: var(--icon-color-success);
    }

    /* ============================================
   ANÁLISIS Y REPORTES
   ============================================ */

    .btn-chart::before,
    .btn-grafico::before {
        content: "\f080"; /* fa-chart-bar */
        color: var(--palette-blue-primary);
    }

    .btn-report::before,
    .btn-reporte::before {
        content: "\e0e7"; /* fa-file-chart-column */
        color: var(--palette-blue-primary);
    }

    .btn-statistics::before,
    .btn-estadisticas::before,
    .btn-stats::before {
        content: "\f1fe"; /* fa-chart-area */
        color: var(--palette-cyan);
    }

    .btn-analytics::before,
    .btn-analisis::before {
        content: "\f200"; /* fa-chart-line */
        color: var(--palette-cyan);
    }

    /* ============================================
   AYUDA Y SOPORTE
   ============================================ */

    .btn-help::before,
    .btn-ayuda::before {
        content: "\f059"; /* fa-question-circle */
        color: var(--palette-cyan);
    }

    .btn-support::before,
    .btn-soporte::before {
        content: "\f1cd"; /* fa-life-ring */
        color: var(--palette-cyan);
    }

/* ============================================
   OVERRIDE: Bootstrap Classes
   Cuando se usa btn-primary, btn-danger, etc.
   se preserva el estilo Bootstrap sólido (valores explícitos)
   ============================================ */

.btn.btn-primary:not(.btn-custom) {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--text-light) !important;
}

.btn.btn-secondary:not(.btn-custom) {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--text-light) !important;
}

.btn.btn-success:not(.btn-custom) {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: var(--text-light) !important;
}

.btn.btn-danger:not(.btn-custom) {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: var(--text-light) !important;
}

.btn.btn-warning:not(.btn-custom) {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: var(--bs-dark) !important;
}

.btn.btn-info:not(.btn-custom) {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    color: var(--text-light) !important;
}

.btn.btn-light:not(.btn-custom) {
    background-color: var(--bs-light) !important;
    border-color: var(--bs-light) !important;
    color: var(--bs-dark) !important;
}

.btn.btn-dark:not(.btn-custom) {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
    color: var(--text-light) !important;
}

    /* Icono hereda el color del texto del botón Bootstrap */
    .btn.btn-primary:not(.btn-custom)::before,
    .btn.btn-secondary:not(.btn-custom)::before,
    .btn.btn-success:not(.btn-custom)::before,
    .btn.btn-danger:not(.btn-custom)::before,
    .btn.btn-warning:not(.btn-custom)::before,
    .btn.btn-info:not(.btn-custom)::before,
    .btn.btn-light:not(.btn-custom)::before,
    .btn.btn-dark:not(.btn-custom)::before,
    .btn[class*="btn-outline-"]::before {
        color: inherit !important;
    }

    /* Hover: oscurecer ligeramente con filter */
    .btn.btn-primary:not(.btn-custom):hover,
    .btn.btn-secondary:not(.btn-custom):hover,
    .btn.btn-success:not(.btn-custom):hover,
    .btn.btn-danger:not(.btn-custom):hover,
    .btn.btn-warning:not(.btn-custom):hover,
    .btn.btn-info:not(.btn-custom):hover,
    .btn.btn-light:not(.btn-custom):hover,
    .btn.btn-dark:not(.btn-custom):hover {
        filter: brightness(0.9);
    }

/* ============================================
   UTILIDADES
   ============================================ */

.btn-no-icon::before,
.btn-no-icon::after {
    content: none !important;
    margin: 0 !important;
}

/* ============================================
   RESPONSIVE: OCULTAR ICONOS EN MÓVIL
   ============================================ */

@media (max-width: 576px) {
    .btn-hide-icon-mobile::before,
    .btn-hide-icon-mobile::after {
        display: none;
    }
}

/* ============================================
   ANIMACIONES
   ============================================ */

.btn-loading::before {
    content: "\f110"; /* fa-spinner */
    animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }

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

/* ============================================
   SISTEMA DE LOADING CON SPINNER
   Para botones que ejecutan acciones asíncronas (login, submit, redirect)
   ============================================ */

/* Estado de loading: spinner a la derecha, botón deshabilitado */
.btn.is-loading {
    position: relative;
    pointer-events: none; /* Bloquear clicks */
    opacity: 0.7;
}

    /* Ocultar icono izquierdo original cuando está loading */
    .btn.is-loading::before {
        opacity: 0.5;
    }

    /* Spinner a la derecha del texto */
    .btn.is-loading::after {
        content: "\f110"; /* fa-spinner */
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        margin-left: 0.5rem;
        margin-right: 0;
        animation: fa-spin 1s infinite linear;
        color: var(--icon-color-neutral);
    }

/* Si el botón tiene clase de acción específica, mantener el color del spinner */
.btn-save.is-loading::after,
.btn-guardar.is-loading::after,
.btn-add.is-loading::after,
.btn-agregar.is-loading::after,
.btn-create.is-loading::after,
.btn-crear.is-loading::after {
    color: var(--icon-color-success);
}

.btn-login.is-loading::after,
.btn-entrar.is-loading::after {
    color: var(--icon-color-success);
}

.btn-delete.is-loading::after,
.btn-eliminar.is-loading::after,
.btn-remove.is-loading::after {
    color: var(--icon-color-danger);
}

.btn-edit.is-loading::after,
.btn-editar.is-loading::after,
.btn-search.is-loading::after,
.btn-buscar.is-loading::after {
    color: var(--palette-blue-primary);
}

/* Para botones Bootstrap con colores sólidos */
.btn-primary.is-loading::after,
.btn-success.is-loading::after,
.btn-danger.is-loading::after,
.btn-warning.is-loading::after,
.btn-info.is-loading::after {
    color: inherit;
}

/* Texto opcional de loading */
.btn.is-loading .btn-text-loading {
    display: inline;
}

.btn:not(.is-loading) .btn-text-loading {
    display: none;
}

.btn.is-loading .btn-text-default {
    display: none;
}

.btn:not(.is-loading) .btn-text-default {
    display: inline;
}

/* ============================================
   EJEMPLO DE USO
   ============================================ */

/*
<!-- Estilo Outlook automático (fondo blanco, borde gris, icono en color) -->
<button class="btn btn-save">Guardar</button>
<button class="btn btn-edit">Editar</button>
<button class="btn btn-delete">Eliminar</button>
<button class="btn btn-login">Entrar</button>

<!-- Override con estilo Bootstrap tradicional (fondo sólido) -->
<button class="btn btn-primary btn-save">Guardar</button>
<button class="btn btn-danger btn-delete">Eliminar</button>

<!-- Botón sin icono -->
<button class="btn btn-no-icon">Solo texto</button>

<!-- Bootstrap btn-close (NO se ve afectado por el sistema de iconos) -->
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

<!-- Botón con loading (agregar clase .is-loading con JavaScript) -->
<button class="btn btn-login" id="btnLogin">
    <span class="btn-text-default">Iniciar Sesión</span>
    <span class="btn-text-loading">Iniciando...</span>
</button>

<script>
// Ejemplo: activar loading al hacer click
document.getElementById('btnLogin').addEventListener('click', function(e) {
    e.currentTarget.classList.add('is-loading');
    
    // Simular acción asíncrona (login, redirect, etc)
    setTimeout(() => {
        // Quitar loading cuando termine
        e.currentTarget.classList.remove('is-loading');
    }, 2000);
});
</script>

<!-- Ejemplo más simple sin texto alternativo -->
<button class="btn btn-save" onclick="this.classList.add('is-loading')">
    Guardar
</button>
*/

/* ============================================
   BTN-CUSTOM: PARITY WITH ACTION CLASSES
   - Text stays neutral across states
   - Only inline <i> icon changes color via class
   - Loading spinner uses the same color
   - Works with Bootstrap color classes without activating solid styles
   ============================================ */

/* No pseudo-element icons for btn-custom */
.btn-custom::before,
.btn-custom::after {
    content: none !important;
    display: none !important;
    margin: 0 !important;
}

/* Neutral text always (override any earlier hover color change) */
.btn-custom,
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active {
    color: var(--outlook-text-secondary) !important;
}

/* Icon color variable (default neutral) */
.btn-custom { --btn-custom-icon-color: var(--icon-color-neutral); }

/* Color only the inline <i> icon */
.btn-custom i { margin-right: 0.5rem; color: var(--btn-custom-icon-color) !important; }
    /* Remove margin automatically when icon is the only child (no text) */
    .btn-custom i:only-child {
        margin-right: 0 !important;
    }
.btn-custom:hover i,
.btn-custom:focus i,
.btn-custom:active i { color: var(--btn-custom-icon-color) !important; }



/* Spinner color follows the selected icon color */
.btn-custom.is-loading::after { color: var(--btn-custom-icon-color) !important; }

/* Map existing color semantics to icon color (parity with .btn-save, etc.) */
.btn-custom.btn-success,
.btn-custom.btn-green  { --btn-custom-icon-color: var(--icon-color-success); }

.btn-custom.btn-danger,
.btn-custom.btn-red    { --btn-custom-icon-color: var(--icon-color-danger); }

.btn-custom.btn-warning,
.btn-custom.btn-yellow { --btn-custom-icon-color: var(--icon-color-warning); }

.btn-custom.btn-info,
.btn-custom.btn-cyan   { --btn-custom-icon-color: var(--palette-cyan); }

.btn-custom.btn-primary,
.btn-custom.btn-blue   { --btn-custom-icon-color: var(--palette-blue-primary); }

.btn-custom.btn-teal   { --btn-custom-icon-color: var(--palette-teal); }

.btn-custom.btn-neutral,
.btn-custom.btn-gray,
.btn-custom.btn-grey   { --btn-custom-icon-color: var(--icon-color-neutral); }

/* Keep Outlook style even when Bootstrap solid/outline color classes are present */
.btn.btn-custom.btn-primary,
.btn.btn-custom.btn-secondary,
.btn.btn-custom.btn-success,
.btn.btn-custom.btn-danger,
.btn.btn-custom.btn-warning,
.btn.btn-custom.btn-info,
.btn.btn-custom.btn-light,
.btn.btn-custom.btn-dark,
.btn.btn-custom[class*="btn-outline-"] {
    background-color: var(--outlook-button-bg) !important;
    background-image: none !important;
    border-color: var(--outlook-button-border) !important;
    color: var(--outlook-text-secondary) !important;
}

    .btn.btn-custom.btn-primary:hover,
    .btn.btn-custom.btn-secondary:hover,
    .btn.btn-custom.btn-success:hover,
    .btn.btn-custom.btn-danger:hover,
    .btn.btn-custom.btn-warning:hover,
    .btn.btn-custom.btn-info:hover,
    .btn.btn-custom.btn-light:hover,
    .btn.btn-custom.btn-dark:hover,
    .btn.btn-custom[class*="btn-outline-"]:hover {
        background-color: var(--outlook-button-hover-bg) !important;
        background-image: none !important;
        border-color: var(--outlook-border-hover) !important;
        color: var(--outlook-text-secondary) !important; /* text stays neutral */
    }