/**
 * Botones — UIkit base + variantes de marca (Untitled).
 * Componente: templates/front/component/buttons.html
 * Tokens: styles.css (:root) — --btn-*, --icon-size-*, --control-height-*
 * Iconos: component/icons.css
 */

/* --- Base estándar (bridge global UIkit) --- */
.uk-button {
    box-sizing: border-box;
    height: var(--btn-height);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    text-transform: none;
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);
    font-weight: var(--btn-font-weight);
}

.uk-button-small {
    height: var(--btn-height-sm);
    padding: 0 var(--btn-padding-x-sm);
    font-size: var(--btn-font-size-sm);
    line-height: var(--btn-line-height-sm);
    font-weight: var(--font-weight-regular);
}

/* --- Default (marca) --- */
.uk-button-default {
    color: var(--text-secondary) !important;
    background-color: var(--color-white) !important;
    border: 1px solid var(--border-primary) !important;

    &:hover,
    &:focus {
        color: var(--text-secondary) !important;
        background-color: var(--color-white) !important;
        border-color: var(--color-primary) !important;
    }

    .uk-icon svg path {
        stroke: currentColor;
    }
}

/* --- Primary --- */
.uk-button-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: 1px solid transparent !important;

    .uk-icon,
    [uk-icon] {
        color: var(--color-white) !important;

        svg {
            fill: var(--color-white) !important;
        }
    }

    &:hover,
    &:focus {
        background-color: var(--color-primary-darker) !important;
        color: var(--color-white) !important;
    }

    &[disabled],
    &:disabled {
        background-color: var(--color-primary-lighter) !important;
        color: var(--color-white) !important;
    }
}

/* Primary con icono stroke (wizard, save-change) */
.uk-button-primary.c-buttons--flex,
#save-change-btn.uk-button-primary {
    [data-save-change-label],
    .uk-icon,
    [uk-icon] {
        color: var(--color-white) !important;
    }

    .uk-icon svg path,
    [uk-icon] svg path {
        stroke: var(--color-white) !important;
    }
}

/* --- Danger (UIkit + marca) --- */
.uk-button-danger {
    background-color: var(--color-error) !important;
    color: var(--color-white) !important;
    border: 1px solid var(--color-error) !important;

    &:hover,
    &:focus {
        background-color: var(--badge-color-danger-text) !important;
        border-color: var(--badge-color-danger-text) !important;
        color: var(--color-white) !important;
    }

    &[disabled],
    &:disabled {
        opacity: 0.6;
    }
}

.uk-button[disabled]:not(.uk-button-primary):not(.uk-button-danger) {
    background-color: var(--color-background) !important;
}

/* --- Text --- */
.uk-button-text {
    height: auto;
    min-height: 0;
    padding: 0;
    text-decoration: none !important;

    &::before {
        content: none !important;
        display: none !important;
        border-bottom: 0 !important;
    }

    &:hover,
    &:focus {
        text-decoration: none !important;
        font-weight: 700;
    }

    &.uk-text-muted {
        color: var(--text-tertiary) !important;
    }

    &.uk-text-primary {
        color: var(--color-primary) !important;
    }

    &.uk-text-small {
        font-weight: var(--font-weight-regular);
        line-height: var(--line-height-text-sm);
    }
}

/* --- Custom: destructive (outline rojo) --- */
.uk-button-customiq-destructive {
    background-color: var(--color-white) !important;
    color: var(--color-error) !important;
    border: 1px solid var(--color-error) !important;

    &:hover:not([disabled]),
    &:focus:not([disabled]) {
        background-color: var(--badge-color-danger) !important;
        color: var(--badge-color-danger-text) !important;
        border-color: var(--color-error) !important;
    }

    &[disabled],
    &:disabled {
        background-color: var(--color-white) !important;
        color: var(--color-error) !important;
        border-color: var(--color-error) !important;
        opacity: 0.6;
    }
}

/* --- Custom: save disabled (AI Assistants) --- */
.uk-button-customiq-save[disabled],
.uk-button-customiq-save:disabled,
.ai-assistants__save-btn.uk-button-primary[disabled],
.ai-assistants__save-btn.uk-button-primary:disabled {
    color: var(--text-quaternary) !important;
    background-color: var(--color-background) !important;
    border: 1px solid var(--border-primary) !important;
    cursor: not-allowed;
    opacity: 1;
}

/* --- Custom: inactive (next deshabilitado, etc.) --- */
.uk-button-customiq-inactive {
    color: var(--text-quaternary) !important;
    background-color: var(--color-background) !important;
    border: 1px solid var(--border-primary) !important;
    cursor: not-allowed;
    opacity: 1;

    .uk-icon,
    [uk-icon] {
        color: var(--text-quaternary) !important;
    }

    svg path {
        stroke: var(--text-quaternary) !important;
        fill: none !important;
    }

    &:hover,
    &:focus {
        color: var(--text-quaternary) !important;
        background-color: var(--color-background) !important;
        border-color: var(--border-primary) !important;
    }
}

/* --- Custom: next (layout flex + icono arrow) --- */
.uk-button-customiq-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);

    &.uk-button-primary {
        .uk-icon svg {
            fill: none !important;
        }

        svg path {
            stroke: currentColor;
        }
    }
}

/* --- Custom: card-list request --- */
.uk-button-customiq-request {
    border-color: var(--text-tertiary) !important;
    color: var(--color-black) !important;
    background-color: var(--color-white) !important;

    &:hover,
    &:focus {
        color: var(--color-black) !important;
    }

    .uk-icon,
    [uk-icon],
    .card-list__request-icon {
        color: var(--color-black) !important;
    }

    .uk-icon svg path,
    [uk-icon] svg path,
    .card-list__request-icon svg path {
        stroke: var(--color-black) !important;
    }
}

/* --- Custom: icon help (? contextual) --- */
.uk-button-customiq-icon-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    min-height: var(--icon-size-sm);
    margin: 0 var(--spacing-xxs);
    padding: 0;
    color: var(--text-tertiary) !important;
    line-height: 1;
    background: transparent !important;
    border: none !important;

    &:hover,
    &:focus {
        color: var(--text-tertiary) !important;
        background: transparent !important;
    }

    &.uk-button-customiq-icon-help--modal,
    &#help-button {
        width: auto;
        height: auto;
        min-height: auto;
    }
}

/* --- Custom: icon link (download, editar wizard) --- */
.uk-button-customiq-icon-link,
.uk-icon-link:not(.uk-button-customiq-icon-help) {
    color: var(--text-tertiary) !important;
    background: transparent !important;
    border: none !important;
    padding: 0;
    min-height: auto;
    height: auto;
    cursor: pointer;

    .uk-icon-customiq {
        color: inherit !important;

        &:hover {
            color: var(--text-primary) !important;
        }
    }
}

/* --- Custom: botón cuadrado icon-only (filtros tabla) --- */
.table-filters__range-button,
.columns-filters__range-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-height);
    min-width: var(--btn-height);
    height: var(--btn-height);
    padding: 0;
    color: var(--text-tertiary) !important;
    border-color: var(--text-tertiary) !important;

    .uk-icon-customiq {
        color: var(--text-tertiary) !important;
    }

    &:hover,
    &:focus {
        color: var(--text-tertiary) !important;
        border-color: var(--text-tertiary) !important;
    }

    &.is-active,
    &[aria-pressed="true"] {
        color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;

        .uk-icon-customiq {
            color: var(--color-primary) !important;
        }
    }
}

/* --- Contexto sidebar: icon-link tonos --- */
.sidebar .uk-offcanvas-bar {
    .uk-button.uk-icon-link {
        color: var(--text-tertiary) !important;

        &.uk-text-secondary,
        &.uk-text-secondary .uk-icon {
            color: var(--text-secondary) !important;
        }

        &.uk-text-secondary svg path {
            stroke: currentColor;
        }
    }

    button.uk-icon-link:not(.uk-button) {
        color: var(--text-tertiary) !important;
        background: transparent !important;

        &.uk-text-secondary,
        &.uk-text-secondary .uk-icon {
            color: var(--text-secondary) !important;
        }

        &.uk-text-quaternary,
        &.uk-text-quaternary .uk-icon {
            color: var(--text-quaternary) !important;
        }

        &.uk-text-secondary svg path,
        &.uk-text-quaternary svg path {
            stroke: currentColor;
        }
    }

    [data-wizard-summary] button.uk-button-customiq-icon-link {
        padding: 0;
        border: none !important;
        background: transparent !important;
        color: var(--text-quaternary) !important;
        line-height: 1;
        cursor: pointer;

        &:hover,
        &:focus {
            background: transparent !important;
            color: var(--text-quaternary) !important;
        }

        .uk-icon-customiq,
        .uk-icon,
        [uk-icon] {
            color: inherit !important;

            svg {
                width: var(--icon-size-sm);
                height: var(--icon-size-sm);
                fill: none !important;
            }

            svg path {
                stroke: currentColor;
            }
        }
    }
}

/* --- Layout helpers del componente --- */
.c-buttons {
    &--flex {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    &--flex-inline {
        display: inline-flex;
        align-items: center;
    }

    &__icon {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        align-self: center;
        line-height: 0;
    }
}

/* Botones con icono + label (manual o vía componente) */
.uk-button:has(> .c-buttons__icon),
a.uk-button:has(> .c-buttons__icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}