/* ========================
   1. Variables globales
======================== */
:root {
    --ingenia-color: #003366;
    --ingenia-color-hover: #004080;
    --ingenia-color-active: #001F4D;
    --ingenia-color-disabled: #7A8CA3;
    /* Base */
    --button-base: var(--ingenia-color);
    --button-base-hover: var(--ingenia-color-hover);
    --button-base-active: var(--ingenia-color-active);
    --button-base-disabled: var(--ingenia-color-disabled);
    /* Secondary */
    --button-secondary: #006633;
    --button-secondary-hover: #008040;
    --button-secondary-active: #004D26;
    --button-secondary-disabled: #A6CCB3;
    /* Tertiary */
    --button-tertiary: #007A99;
    --button-tertiary-hover: #0099B3;
    --button-tertiary-active: #005C73;
    --button-tertiary-disabled: #A6C9D1;
    /* Danger */
    --button-danger: #993333;
    --button-danger-hover: #B34747;
    --button-danger-active: #802626;
    --button-danger-disabled: #D1A6A6;
}

/* ========================
   2. Estilo base de botón
======================== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}

    .button:focus {
        outline: none;
    }

    .button:disabled {
        pointer-events: none;
        opacity: 0.5;
    }

/* ================================
   3. Variantes por color (contexto)
================================ */
.button-base {
    --button-color: var(--button-base);
    --button-hover: var(--button-base-hover);
    --button-active: var(--button-base-active);
    --button-disabled: var(--button-base-disabled);
    background-color: var(--button-color);
    color: white;
}

.button-secondary {
    --button-color: var(--button-secondary);
    --button-hover: var(--button-secondary-hover);
    --button-active: var(--button-secondary-active);
    --button-disabled: var(--button-secondary-disabled);
    background-color: var(--button-color);
    color: white;
}

.button-tertiary {
    --button-color: var(--button-tertiary);
    --button-hover: var(--button-tertiary-hover);
    --button-active: var(--button-tertiary-active);
    --button-disabled: var(--button-tertiary-disabled);
    background-color: var(--button-color);
    color: white;
}

.button-danger {
    --button-color: var(--button-danger);
    --button-hover: var(--button-danger-hover);
    --button-active: var(--button-danger-active);
    --button-disabled: var(--button-danger-disabled);
    background-color: var(--button-color);
    color: white;
}

/* ========================
   4. Variantes por tamaño
======================== */
.button-default {
    height: 2.5rem; /* 40px */
    padding: 0.5rem 1rem; /* 8px 16px */
}

.button-icon {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0;
    justify-content: center;
}

    /* Iconos con Bootstrap Icons */
    .button-icon.bi, .button-default.bi {
        font-size: 1.25rem;
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
    }

/* ========================
   5. Variantes visuales
======================== */

/* Default (ya definido por .button-[tipo]) */
.button-default:not(.button-outline):not(.button-ghost) {
    background-color: var(--button-color);
    color: white;
}

.button-default:hover:not(:disabled) {
    background-color: var(--button-hover);
}

.button-default:active:not(:disabled) {
    background-color: var(--button-active);
}

.button-default:disabled {
    background-color: var(--button-disabled);
}

/* Outline */
.button-outline {
    background-color: transparent;
    border: 1px solid var(--button-color);
    color: var(--button-color);
}

    .button-outline:hover:not(:disabled) {
        background-color: var(--button-hover);
        color: white;
        border-color: var(--button-hover);
    }

    .button-outline:active:not(:disabled) {
        background-color: var(--button-active);
        color: white;
        border-color: var(--button-active);
    }

    .button-outline:disabled {
        color: var(--button-disabled);
        background-color: inherit;
        border-color: var(--button-disabled);
    }

/* Ghost */
.button-ghost {
    background-color: transparent;
    color: var(--button-color);
    border: none;
}

    .button-ghost:hover:not(:disabled) {
        background-color: var(--button-hover);
        color: white;
    }

    .button-ghost:active:not(:disabled) {
        background-color: var(--button-active);
        color: white;
    }

    .button-ghost:disabled {
        color: var(--button-disabled);
    }