/* ==========================================================================
   Botones — pill shape Material Design 3 + variantes
   ==========================================================================
   Microinteracción:
   - hover: lift sutil (-2px) + box-shadow.
   - focus-visible (teclado): NO levanta — Bootstrap maneja el anillo de foco.
     El hover y el focus están separados a propósito; pisar :focus con
     translateY rompe la accesibilidad y oculta el outline real.
   - active: scale(0.97) → feedback físico de press, en vez de empujar el
     botón hacia arriba (anti-natural).
   - Sin "transition: all": solo las propiedades que realmente animamos.
   ========================================================================== */

.btn {
    border-radius: 100px !important;
    transition:
        transform 200ms var(--ease-out-strong),
        box-shadow 200ms var(--ease-out-strong),
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition-duration: 120ms;
}

/* No lift en contextos especiales — botones agrupados y triggers que no
   deberían moverse al hover (toggles dentro de cards, dropdowns, etc.) */
.input-group .btn:hover,
.input-group .btn:active,
.btn-group .btn:hover,
.btn-group .btn:active,
.btn-close:hover,
.btn[disabled]:hover,
.btn.disabled:hover,
.dropdown-toggle:hover,
.nav-link:hover,
.btn.nav-link:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* En :active de los mismos contextos, mantenemos el feedback de press
   (scale) pero sin sombra. Dropdown-toggle es la excepción: no debe
   reaccionar al click porque abre un menú. */
.input-group .btn:active,
.btn-group .btn:active,
.btn-close:active {
    transform: scale(0.97) !important;
    box-shadow: none !important;
}

.dropdown-toggle:active,
.btn[disabled]:active,
.btn.disabled:active {
    transform: none !important;
    box-shadow: none !important;
}

/* Reduced motion — desactivamos lift y press, dejamos los cambios de color */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn:hover,
    .btn:active {
        transform: none !important;
        transition-duration: 0ms;
    }
}

/* Outline buttons → siempre rellenos (aspecto hover como default) */
.btn-outline-primary {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #bb2d3b !important;
    color: #fff !important;
    border-color: #b02a37 !important;
}

.btn-outline-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
    border-color: #6c757d !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #5c636a !important;
    color: #fff !important;
    border-color: #565e64 !important;
}

.btn-outline-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
    border-color: #ffc107 !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: #ffca2c !important;
    color: #000 !important;
    border-color: #ffc720 !important;
}

.btn-outline-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #bb2d3b !important;
    color: #fff !important;
    border-color: #b02a37 !important;
}

.btn-outline-light {
    background-color: #f8f9fa !important;
    color: #000 !important;
    border-color: #f8f9fa !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: #d3d4d5 !important;
    color: #000 !important;
    border-color: #c6c7c8 !important;
}

/* Excepción: dentro de input-group y btn-group, respetar el border-radius de Bootstrap */
.input-group .btn,
.btn-group .btn,
.btn-group-vertical .btn,
.pagination .page-link {
    border-radius: 0 !important;
}

.input-group > .btn:first-child,
.input-group > :first-child .btn {
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
}

.input-group > .btn:last-child,
.input-group > :last-child .btn {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

.btn-group > .btn:first-child {
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
}

.btn-group > .btn:last-child {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

/* Botones personalizados base
   ──────────────────────────────────────────────────────────────────────────
   Nota: NO definimos border-radius acá. El .btn global ya aplica 100px
   con !important — las variantes solo controlan colores y peso. Tampoco
   "transition: all": la transition base de .btn ya cubre lo necesario.

   Mapeo de CSS vars de Bootstrap 5.3:
   Bootstrap setea --bs-btn-active-bg / --bs-btn-focus-shadow-rgb con
   tonos azules por defecto, lo que pintaba los botones rojos de azul
   al presionarlos. Forzamos las variantes "rojas" (primary, danger,
   outline-primary, outline-danger) a usar nuestra paleta.
*/
.btn-primary,
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c82333;
    --bs-btn-hover-border-color: #c82333;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b21f2d;
    --bs-btn-active-border-color: #a71d2a;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-danger {
    --bs-btn-bg: #e85565;
    --bs-btn-border-color: #e85565;
    --bs-btn-hover-bg: #d44a59;
    --bs-btn-hover-border-color: #d44a59;
    --bs-btn-active-bg: #c44150;
    --bs-btn-active-border-color: #b8394a;
    --bs-btn-focus-shadow-rgb: 232, 85, 101;
    --bs-btn-disabled-bg: #e85565;
    --bs-btn-disabled-border-color: #e85565;
}

.btn-outline-primary,
.btn-outline-danger {
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b21f2d;
    --bs-btn-active-border-color: #a71d2a;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
}

[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-active-bg: #c44150;
    --bs-btn-active-border-color: #b8394a;
    --bs-btn-focus-shadow-rgb: 232, 85, 101;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #c82333;
    border-color: #c82333;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    font-weight: 600;
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    font-weight: 600;
}

.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
    font-weight: 600;
}

/* Botón Google — colores específicos (lift heredado de .btn global) */
.btn-google {
    background-color: #f1f3f4;
    color: #3c4043;
    border: 1px solid #dadce0;
    font-weight: 500;
}

.btn-google:hover,
.btn-google:focus {
    background-color: #e8eaeb;
    color: #3c4043;
    border-color: #c6c8ca;
}

[data-bs-theme="dark"] .btn-google {
    background-color: #1e2d4a;
    color: var(--text-primary);
    border-color: #2a3d5e;
}

[data-bs-theme="dark"] .btn-google:hover,
[data-bs-theme="dark"] .btn-google:focus {
    background-color: #263756;
    color: var(--text-primary);
    border-color: #3a5070;
}

/* Tertiary Button — transition base de .btn ya cubre el resto */
.btn-tertiary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-weight: 500;
}
.btn-tertiary:hover, .btn-tertiary:focus {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Botones compactos de distancias comunes */
.btn-distance {
    font-size: .75rem !important;
    padding: 0 0.25rem !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    height: auto !important;
    border-width: 1px !important;
}

/* Mejoras para botones de distancias comunes en mobile */
@media (max-width: 768px) {
    .d-flex.flex-wrap.gap-1 .btn-sm {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        min-height: 40px;
        font-weight: 500;
    }
}


/* ==========================================================================
   FAB redondo mobile — botón de acción primaria 48×48 totalmente circular,
   alineado con el patrón pill global del resto de la app.
   Reemplaza el inline:
     style="width: 48px; height: 48px; border-radius: 12px;"
   en CTA "Agregar carrera/zapatilla/actividad" cuando se ven en mobile.
   ========================================================================== */

.btn-fab-round {
    width: 48px;
    height: 48px;
    /* No se setea border-radius: el .btn global ya aplica 100px (pill).
       Como ancho == alto, el resultado es un círculo perfecto. */
}