/* =========================================================
   7. BOTONES
   Cada variante fija las variables --bs-btn-* de Bootstrap 5:
   hover, active, checked y disabled salen del mismo origen.
   ========================================================= */
.btn {
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 0px;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.25;
    --bs-btn-border-radius: var(--ds-radius-sm);
    --bs-btn-disabled-opacity: 0.5;
    --bs-btn-focus-box-shadow: none;
    --ds-btn-h: var(--ds-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--ds-btn-h);
    margin: 0;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: inherit;
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    letter-spacing: 0;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border: 1px solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    box-shadow: none;
    text-decoration: none;
    vertical-align: middle;
    transition: color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), transform 100ms var(--ds-ease);
}

.btn:hover,
.btn:focus {
    text-decoration: none;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn {
    outline: 2px solid var(--ds-ink-900);
    outline-offset: 2px;
    box-shadow: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn > i,
.btn > .fa,
.btn > .fa-solid {
    font-size: 14px;
    line-height: 1;
}

/* Botones con icono en bloque (icono arriba, texto abajo). */
.btn:has(> .d-block) {
    flex-direction: column;
    gap: 6px;
}

.btn-block,
.btn.w-100 {
    display: flex;
    width: 100%;
}

.btn-lg {
    --ds-btn-h: var(--ds-control-h-lg);
    --bs-btn-padding-x: 20px;
    --bs-btn-font-size: 15px;
    --bs-btn-border-radius: var(--ds-radius-sm);
}

.btn-sm {
    --ds-btn-h: var(--ds-control-h-sm);
    --bs-btn-padding-x: 12px;
    --bs-btn-font-size: 13px;
    --bs-btn-border-radius: var(--ds-radius-sm);
    gap: 6px;
}

.btn-xs {
    --ds-btn-h: 28px;
    --bs-btn-padding-x: 8px;
    --bs-btn-font-size: 12px;
    --bs-btn-border-radius: var(--ds-radius-sm);
    gap: 4px;
}

.btn-primary,
.btn-crh {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--ds-accent);
    --bs-btn-border-color: var(--ds-accent);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ds-accent-hover);
    --bs-btn-hover-border-color: var(--ds-accent-hover);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--ds-accent-active);
    --bs-btn-active-border-color: var(--ds-accent-active);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--ds-accent);
    --bs-btn-disabled-border-color: var(--ds-accent);
}

.btn-secondary,
.btn-default,
.btn-light,
.btn-outline-secondary,
button[id^="more_option"],
button[onclick*="quitar_f"] {
    --bs-btn-color: var(--ds-ink-900);
    --bs-btn-bg: var(--ds-surface);
    --bs-btn-border-color: var(--ds-ink-300);
    --bs-btn-hover-color: var(--ds-ink-900);
    --bs-btn-hover-bg: var(--ds-ink-100);
    --bs-btn-hover-border-color: var(--ds-ink-400);
    --bs-btn-active-color: var(--ds-ink-900);
    --bs-btn-active-bg: var(--ds-ink-150);
    --bs-btn-active-border-color: var(--ds-ink-400);
    --bs-btn-disabled-color: var(--ds-ink-500);
    --bs-btn-disabled-bg: var(--ds-surface);
    --bs-btn-disabled-border-color: var(--ds-ink-200);
    --ds-spin: var(--ds-ink-300);
    --ds-spin-top: var(--ds-ink-900);
}

/* Botones legacy con estilo en linea (borde rojo y margen negativo). */
button[id^="more_option"],
button[onclick*="quitar_f"] {
    margin-left: 0 !important;
    border-right-color: var(--bs-btn-border-color) !important;
}

.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--ds-success-fill);
    --bs-btn-border-color: var(--ds-success-fill);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #136640;
    --bs-btn-hover-border-color: #136640;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #0F5435;
    --bs-btn-active-border-color: #0F5435;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--ds-success-fill);
    --bs-btn-disabled-border-color: var(--ds-success-fill);
}

.btn-info {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--ds-info-fill);
    --bs-btn-border-color: var(--ds-info-fill);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #194F91;
    --bs-btn-hover-border-color: #194F91;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #154180;
    --bs-btn-active-border-color: #154180;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--ds-info-fill);
    --bs-btn-disabled-border-color: var(--ds-info-fill);
}

.btn-warning {
    --bs-btn-color: var(--ds-ink-900);
    --bs-btn-bg: var(--ds-warning-fill);
    --bs-btn-border-color: var(--ds-warning-fill);
    --bs-btn-hover-color: var(--ds-ink-900);
    --bs-btn-hover-bg: #DB9000;
    --bs-btn-hover-border-color: #DB9000;
    --bs-btn-active-color: var(--ds-ink-900);
    --bs-btn-active-bg: #C68200;
    --bs-btn-active-border-color: #C68200;
    --bs-btn-disabled-color: var(--ds-ink-900);
    --bs-btn-disabled-bg: var(--ds-warning-fill);
    --bs-btn-disabled-border-color: var(--ds-warning-fill);
    --ds-spin: rgba(25, 28, 34, 0.3);
    --ds-spin-top: var(--ds-ink-900);
}

/* Peligro: contorno rojo que se rellena al pasar, para no competir con el primario. */
.btn-danger,
.btn-outline-danger {
    --bs-btn-color: var(--ds-danger);
    --bs-btn-bg: var(--ds-surface);
    --bs-btn-border-color: #E3A1A4;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ds-danger-fill);
    --bs-btn-hover-border-color: var(--ds-danger-fill);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--ds-danger);
    --bs-btn-active-border-color: var(--ds-danger);
    --bs-btn-disabled-color: var(--ds-danger);
    --bs-btn-disabled-bg: var(--ds-surface);
    --bs-btn-disabled-border-color: var(--ds-danger-line);
    --ds-spin: var(--ds-danger-line);
    --ds-spin-top: var(--ds-danger);
}

.btn-outline-primary {
    --bs-btn-color: var(--ds-link);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ds-accent);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ds-accent);
    --bs-btn-hover-border-color: var(--ds-accent);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--ds-accent-active);
    --bs-btn-active-border-color: var(--ds-accent-active);
    --bs-btn-disabled-color: var(--ds-link);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--ds-accent);
    --ds-spin: var(--ds-accent-soft-2);
    --ds-spin-top: var(--ds-link);
}

.btn-outline-success {
    --bs-btn-color: var(--ds-success);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ds-success-fill);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ds-success-fill);
    --bs-btn-hover-border-color: var(--ds-success-fill);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #0F5435;
    --bs-btn-active-border-color: #0F5435;
}

.btn-outline-info {
    --bs-btn-color: var(--ds-info);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ds-info-fill);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ds-info-fill);
    --bs-btn-hover-border-color: var(--ds-info-fill);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #154180;
    --bs-btn-active-border-color: #154180;
}

.btn-outline-warning {
    --bs-btn-color: var(--ds-warning);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ds-warning-fill);
    --bs-btn-hover-color: var(--ds-ink-900);
    --bs-btn-hover-bg: var(--ds-warning-fill);
    --bs-btn-hover-border-color: var(--ds-warning-fill);
    --bs-btn-active-color: var(--ds-ink-900);
    --bs-btn-active-bg: #DB9000;
    --bs-btn-active-border-color: #DB9000;
}

.btn-dark {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--ds-ink-900);
    --bs-btn-border-color: var(--ds-ink-900);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ds-ink-800);
    --bs-btn-hover-border-color: var(--ds-ink-800);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--ds-ink-700);
    --bs-btn-active-border-color: var(--ds-ink-700);
}

.btn-outline-dark {
    --bs-btn-color: var(--ds-ink-900);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ds-ink-700);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ds-ink-900);
    --bs-btn-hover-border-color: var(--ds-ink-900);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--ds-ink-800);
    --bs-btn-active-border-color: var(--ds-ink-800);
}

.btn-link {
    --bs-btn-color: var(--ds-link);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ds-accent-active);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--ds-accent-active);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-padding-x: 4px;
    font-weight: 500;
}

.btn-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Estado de carga: aria-busy="true" o .is-loading en el boton. */
.btn.is-loading,
.btn[aria-busy="true"] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.is-loading::after,
.btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid var(--ds-spin, rgba(255, 255, 255, 0.45));
    border-top-color: var(--ds-spin-top, #FFFFFF);
    animation: ds-spin 700ms linear infinite;
}

@keyframes ds-spin {
    to { transform: rotate(360deg); }
}