/* ==========================================================================
   CARDS — superficie base reutilizable
   --------------------------------------------------------------------------
   El COLOR de todas las cards del perfil se controla desde un solo sitio:
   ========================================================================== */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--sp-9);
}

.card-icon {
    font-size: var(--fs-3xl);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.card--noborder { border: none; }
.card--flat     { box-shadow: none; }
.card--raised   { box-shadow: 0 2px 10px rgba(0,0,0,.22); }

/* Recuadro interno (p. ej. los stats dentro de una card) */
.tile {
    background: var(--surface-tile);
    border: none;
    border-radius: var(--radius-sm);
}