/* ==========================================================================
   Cards y hover-raise
   ==========================================================================
   Microinteracción:
   - .card por sí sola NO levanta. La mayoría de cards en la app son
     informativas (panel de stats, próxima carrera, plan-pricing) y no
     deberían vibrar al pasar el cursor.
   - El lift es opt-in:
       · .hover-raise          → cualquier card a la que querramos darle hover.
       · a.card / button.card  → cards clickeables (links/CTAs envueltos).
       · [role="button"].card  → cards interactivas via JS.
   ========================================================================== */

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition:
        transform 220ms var(--ease-out-strong),
        box-shadow 220ms var(--ease-out-strong);
}

/* Hover-raise — opt-in. Aplica también para cards interactivas reales. */
.hover-raise:hover,
a.card:hover,
button.card:hover,
.card[role="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* :active da un pequeño sink para feedback de press en cards interactivas */
a.card:active,
button.card:active,
.card[role="button"]:active {
    transform: translateY(0) scale(0.99);
    transition-duration: 120ms;
}

/* Reduced motion — sin transform, transición instantánea */
@media (prefers-reduced-motion: reduce) {
    .card,
    .hover-raise:hover,
    a.card:hover,
    button.card:hover,
    .card[role="button"]:hover {
        transform: none;
        transition-duration: 0ms;
    }
}

.card-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.card-title {
    color: var(--text-primary);
    font-weight: 600;
}

.card-text {
    color: var(--text-secondary);
}

/* Cards específicas para dark mode */
[data-bs-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* En dark, el lift solo en cards interactivas (mismo patrón que claro) */
[data-bs-theme="dark"] .hover-raise:hover,
[data-bs-theme="dark"] a.card:hover,
[data-bs-theme="dark"] button.card:hover,
[data-bs-theme="dark"] .card[role="button"]:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
}

[data-bs-theme="dark"] .card-title {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .card-text {
    color: var(--text-secondary);
}

/* Cards internas (bg-light) en dark mode */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .bg-light .text-muted {
    color: var(--text-muted) !important;
}

[data-bs-theme="dark"] .bg-light .text-primary {
    color: var(--primary-color) !important;
}

[data-bs-theme="dark"] .bg-light .text-success {
    color: var(--success-color) !important;
}

[data-bs-theme="dark"] .bg-light .text-warning {
    color: var(--warning-color) !important;
}

[data-bs-theme="dark"] .bg-light .text-danger {
    color: var(--danger-color) !important;
}

/* Mejoras para cards de formularios en mobile */
@media (max-width: 768px) {
    .card-body.p-4 {
        padding: 1.5rem !important;
    }
}